jQuery插件開(kāi)發(fā)的兩種方法及$.fn.extend的詳解

更新時(shí)間：2014年01月16日 16:20:17 作者：

jQuery插件開(kāi)發(fā)分為兩種：1 類(lèi)級(jí)別、2 對(duì)象級(jí)別，下面為大家詳細(xì)介紹下

jQuery插件開(kāi)發(fā)分為兩種：

1 類(lèi)級(jí)別

類(lèi)級(jí)別你可以理解為拓展jquery類(lèi)，最明顯的例子是$.ajax(...),相當(dāng)于靜態(tài)方法。

開(kāi)發(fā)擴(kuò)展其方法時(shí)使用$.extend方法，即jQuery.extend(object);

復(fù)制代碼代碼如下:

 
$.extend({ 

add:function(a,b){return a+b;} , 

minus:function(a,b){return a-b;} 
});

頁(yè)面中調(diào)用：

復(fù)制代碼代碼如下:

 
var i = $.add(3,2); 
var j = $.minus(3,2); 

2 對(duì)象級(jí)別

對(duì)象級(jí)別則可以理解為基于對(duì)象的拓展，如$("#table").changeColor(...); 這里這個(gè)changeColor呢，就是基于對(duì)象的拓展了。

開(kāi)發(fā)擴(kuò)展其方法時(shí)使用$.fn.extend方法，即jQuery.fn.extend(object);

復(fù)制代碼代碼如下:

 
$.fn.extend({ 

check:function(){ 
return this.each({ 
this.checked=true; 
}); 
}, 
uncheck:function(){ 
return this.each({ 
this.checked=false; 
}); 
} 
}); 

頁(yè)面中調(diào)用：

復(fù)制代碼代碼如下:

 
$('input[type=checkbox]').check(); 
$('input[type=checkbox]').uncheck(); 

3、擴(kuò)展

復(fù)制代碼代碼如下:

 
$.xy = { 
add:function(a,b){return a+b;} , 
minus:function(a,b){return a-b;}, 
voidMethod:function(){ alert("void"); } 
}; 
var i = $.xy.add(3,2); 
var m = $.xy.minus(3,2); 
$.xy.voidMethod(); 

您可能感興趣的文章:

相關(guān)文章

ff下JQuery無(wú)法監(jiān)聽(tīng)input的keyup事件的解決方法
這篇文章主要介紹了ff下JQuery無(wú)法監(jiān)聽(tīng)input的keyup事件的解決方法。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2013-12-12
jQueryUI寫(xiě)一個(gè)調(diào)整分類(lèi)的拖放效果實(shí)現(xiàn)代碼
最近，想用jQuery做一個(gè)網(wǎng)頁(yè)的樹(shù)目錄結(jié)構(gòu)，并且可以使用鼠標(biāo)拖動(dòng)調(diào)整選項(xiàng)的位置。我在網(wǎng)上找了一下插件，基本上看了好幾款比較著名的，都覺(jué)得代碼太復(fù)雜了或者界面太丑了等各種不符合我的要求
2012-05-05
Jquery對(duì)新插入的節(jié)點(diǎn) 綁定Click事件失效的解決方法
下面小編就為大家?guī)?lái)一篇Jquery對(duì)新插入的節(jié)點(diǎn) 綁定Click事件失效的解決方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-06-06
用jquery中插件dialog實(shí)現(xiàn)彈框效果實(shí)例代碼
這篇文章介紹了jquery中插件dialog實(shí)現(xiàn)彈框效果實(shí)例代碼，有需要的朋友可以參考一下
2013-11-11
jquery實(shí)現(xiàn)圖片自動(dòng)輪播效果
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)圖片自動(dòng)輪播效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-02-02
更高效的使用JQuery 這里總結(jié)了8個(gè)小技巧
本文和其他的介紹JQuery的方法不同，本文側(cè)重點(diǎn)是介紹一些JQuery的使用原則，以便讓JQuery代碼更高效的執(zhí)行。
2016-04-04
jQuery實(shí)現(xiàn)的省市縣三級(jí)聯(lián)動(dòng)菜單效果完整實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的省市縣三級(jí)聯(lián)動(dòng)菜單效果,結(jié)合完整實(shí)例形式分析了jQuery數(shù)組操作及事件響應(yīng)的相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2016-08-08
前端html中jQuery實(shí)現(xiàn)對(duì)文本的搜索功能并把搜索相關(guān)內(nèi)容顯示出來(lái)
這篇文章主要介紹了前端html中jQuery實(shí)現(xiàn)對(duì)文本的搜索功能并把搜索相關(guān)內(nèi)容顯示出來(lái),在項(xiàng)目中經(jīng)常會(huì)遇到，今天小編把實(shí)例代碼分享給大家，需要的朋友可以參考下
2017-11-11
jQuery實(shí)現(xiàn)兩列等高并自適應(yīng)高度
想要使用jQuery實(shí)現(xiàn)兩列等高并自適應(yīng)高度，其實(shí)也很簡(jiǎn)單，原理就是取得左右兩邊的高度，然后判斷這個(gè)值，把大的值賦給小的就行了。下面就跟小編一起來(lái)看下吧
2016-12-12
快速解決jquery.touchSwipe左右滑動(dòng)和垂直滾動(dòng)條沖突
這篇文章主要介紹了快速解決jquery.touchSwipe左右滑動(dòng)和垂直滾動(dòng)條沖突問(wèn)題，感興趣的小伙伴們可以參考一下
2016-04-04