jquery 插件學(xué)習(xí)(三)
更新時間:2012年08月06日 22:08:02 作者:
用慣jquery的用戶可能習(xí)慣于連寫行為,也就是說在調(diào)用一個方法之后,緊跟著調(diào)用另一個方法,如此連寫不斷,形成一個珍珠鏈,而且編寫靈活,方便
例如:
$(this).test().hide().height();
要實(shí)現(xiàn)類似的連寫行為,就應(yīng)該在每個插件方法中,返回一個jquery對象,除非方法需要明確返回值。返回的jquery對象通常就是this所引用的對象。如果使用each()方法迭代this,則可以直接返回迭代的結(jié)果。針對上一節(jié)的示例,進(jìn)一步修改
jQuery.fn.test = function(){
return this.each(function(){ //遍歷匹配的元素,此處的this表示對象集合
alert(this.nodeName); //提示當(dāng)前jquery對象的dom節(jié)點(diǎn)名稱
})
}
然后,我們就可以在應(yīng)用示例中連寫行為了,例如,在下面的示例中,先彈出提示節(jié)點(diǎn)的名稱的信息,然后使用當(dāng)前節(jié)點(diǎn)名稱改寫當(dāng)前元素內(nèi)包含的信息,最后在慢慢隱藏該元素。
$('body *').click(function(){
$(this).test().html(this.nodeName).hide(1000);
});
復(fù)制代碼 代碼如下:
$(this).test().hide().height();
要實(shí)現(xiàn)類似的連寫行為,就應(yīng)該在每個插件方法中,返回一個jquery對象,除非方法需要明確返回值。返回的jquery對象通常就是this所引用的對象。如果使用each()方法迭代this,則可以直接返回迭代的結(jié)果。針對上一節(jié)的示例,進(jìn)一步修改
復(fù)制代碼 代碼如下:
jQuery.fn.test = function(){
return this.each(function(){ //遍歷匹配的元素,此處的this表示對象集合
alert(this.nodeName); //提示當(dāng)前jquery對象的dom節(jié)點(diǎn)名稱
})
}
然后,我們就可以在應(yīng)用示例中連寫行為了,例如,在下面的示例中,先彈出提示節(jié)點(diǎn)的名稱的信息,然后使用當(dāng)前節(jié)點(diǎn)名稱改寫當(dāng)前元素內(nèi)包含的信息,最后在慢慢隱藏該元素。
復(fù)制代碼 代碼如下:
$('body *').click(function(){
$(this).test().html(this.nodeName).hide(1000);
});
相關(guān)文章
Jquery結(jié)合HTML5實(shí)現(xiàn)文件上傳
本文給大家介紹的是利用Jquery使用HTML5的FormData屬性實(shí)現(xiàn)對文件的上傳的方法和實(shí)例,非常的實(shí)用,有需要的小伙伴可以參考下。2015-06-06
jQuery實(shí)現(xiàn)表格凍結(jié)頂欄效果
昨天晚上公司遇到個小需求,就是實(shí)現(xiàn)類似表格凍結(jié)頂欄的效果。這篇文章主要介紹了jQuery實(shí)現(xiàn)表格凍結(jié)頂欄效果 ,需要的朋友可以參考下2017-08-08
jQuery獲取checkboxlist的value值的方法
最近著手一個項(xiàng)目用到了服務(wù)器空間checkboxlist ,使用起來是方便,可以想要從js獲取值就稍微麻煩點(diǎn)了,google后找到了如下方法,感興趣的小伙伴們可以參考一下2015-09-09
jquery 實(shí)現(xiàn)兩Select 標(biāo)簽項(xiàng)互調(diào)示例代碼
這篇文章主要與大家分享了jquery實(shí)現(xiàn)兩Select標(biāo)簽項(xiàng)互調(diào)的具體實(shí)現(xiàn),比較簡單,比較實(shí)用2014-09-09
Jquery Ajax學(xué)習(xí)實(shí)例6 向WebService發(fā)出請求,返回DataSet(XML) 異步調(diào)用
Jquery Ajax學(xué)習(xí)實(shí)例6 向WebService發(fā)出請求,返回DataSet(XML) 異步調(diào)用實(shí)現(xiàn)代碼,需要的朋友可以參考下。2010-03-03
jQuery回調(diào)函數(shù)的定義及用法實(shí)例
這篇文章主要介紹了jQuery回調(diào)函數(shù)的定義及用法,以實(shí)例形式詳細(xì)分析了回調(diào)函數(shù)的原理與實(shí)現(xiàn)技巧,具有一定的參考借鑒價值,需要的朋友可以參考下2014-12-12
Jquery+bootstrap實(shí)現(xiàn)表格行置頂置底上移下移操作詳解
這篇文章主要為大家詳細(xì)介紹了Jquery+bootstrap實(shí)現(xiàn)表格行置頂置底上移下移操作,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-02-02

