jquery 插件學(xué)習(xí)(三)
更新時間:2012年08月06日 22:08:02 作者:
用慣jquery的用戶可能習(xí)慣于連寫行為,也就是說在調(diào)用一個方法之后,緊跟著調(diào)用另一個方法,如此連寫不斷,形成一個珍珠鏈,而且編寫靈活,方便
例如:
$(this).test().hide().height();
要實現(xiàn)類似的連寫行為,就應(yīng)該在每個插件方法中,返回一個jquery對象,除非方法需要明確返回值。返回的jquery對象通常就是this所引用的對象。如果使用each()方法迭代this,則可以直接返回迭代的結(jié)果。針對上一節(jié)的示例,進一步修改
jQuery.fn.test = function(){
return this.each(function(){ //遍歷匹配的元素,此處的this表示對象集合
alert(this.nodeName); //提示當(dāng)前jquery對象的dom節(jié)點名稱
})
}
然后,我們就可以在應(yīng)用示例中連寫行為了,例如,在下面的示例中,先彈出提示節(jié)點的名稱的信息,然后使用當(dāng)前節(jié)點名稱改寫當(dāng)前元素內(nèi)包含的信息,最后在慢慢隱藏該元素。
$('body *').click(function(){
$(this).test().html(this.nodeName).hide(1000);
});
復(fù)制代碼 代碼如下:
$(this).test().hide().height();
要實現(xiàn)類似的連寫行為,就應(yīng)該在每個插件方法中,返回一個jquery對象,除非方法需要明確返回值。返回的jquery對象通常就是this所引用的對象。如果使用each()方法迭代this,則可以直接返回迭代的結(jié)果。針對上一節(jié)的示例,進一步修改
復(fù)制代碼 代碼如下:
jQuery.fn.test = function(){
return this.each(function(){ //遍歷匹配的元素,此處的this表示對象集合
alert(this.nodeName); //提示當(dāng)前jquery對象的dom節(jié)點名稱
})
}
然后,我們就可以在應(yīng)用示例中連寫行為了,例如,在下面的示例中,先彈出提示節(jié)點的名稱的信息,然后使用當(dāng)前節(jié)點名稱改寫當(dāng)前元素內(nèi)包含的信息,最后在慢慢隱藏該元素。
復(fù)制代碼 代碼如下:
$('body *').click(function(){
$(this).test().html(this.nodeName).hide(1000);
});
相關(guān)文章
jQuery實現(xiàn)form表單序列化轉(zhuǎn)換為json對象功能示例
這篇文章主要介紹了jQuery實現(xiàn)form表單序列化轉(zhuǎn)換為json對象功能,結(jié)合實例形式分析了表單數(shù)據(jù)傳輸中使用serializeJson進行序列化操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2018-05-05使用jQuery的ajax功能實現(xiàn)的RSS Reader 代碼
Rss閱讀器挺不錯的。我覺得如果在igoogle或是dropthings這種形式的portal下來放很多RSS模塊顯示自己每天需要關(guān)注的信息那將會減少大家很多的打開瀏覽器和輸入網(wǎng)址的時間。2009-09-09jQuery彈性滑動導(dǎo)航菜單實現(xiàn)思路及代碼
用一個絕對定位的div作為動畫滑塊,改變它的left屬性來呈現(xiàn)動畫效果javascript:hover()觸發(fā)移動鼠標(biāo)到導(dǎo)航nav的動作,和移出導(dǎo)航nav的動作2013-05-05