本貼純屬借鑒大神之作,請(qǐng)各位勿噴槽驶,嘿嘿
jQuery開發(fā)分為兩種:1责嚷、類級(jí)別,2掂铐、對(duì)象級(jí)別
一罕拂、類級(jí)別
???????類級(jí)別你可以理解為擴(kuò)展的jQuery類,最明顯是$.ajax(...)
全陨,相當(dāng)于靜態(tài)方法爆班。開發(fā)其擴(kuò)展方法時(shí)使用$.extend()
方法,即jQuery.extend(object);
$.extend({
add:function(a,b){
return a+b;
},
minus:function(a,b){
return a-b;
}
})
頁(yè)面中調(diào)用代碼如下:
var a = $.add(2,1);
var m = $.minus(2,1);
二辱姨、對(duì)象級(jí)別
???????對(duì)象級(jí)別則可以理解為基于對(duì)象的擴(kuò)展柿菩,如$("#table").changeColor(...)
,這里的changeColor
就是基于對(duì)象的擴(kuò)展雨涛,也就是自己給$("#table")
寫的一個(gè)方法枢舶。開發(fā)其擴(kuò)展方法時(shí)使用$.fn.extend(...)
,即jQuery.fn.extend(object);
$.fn.extend({
add:function(a,b){
return a+b;
},
minus:function(a,b){
return a-b;
}
})
頁(yè)面調(diào)用代碼如下:
$("#div1").add(2,1);
$("#div2").minus(2,1);
稍微擴(kuò)展一下再寫另一個(gè)例子便于咱們學(xué)習(xí)理解:
$.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();
如果到這里大家還不是很理解$.extend()和$.fn.extend()的話,下面會(huì)再直白的解釋一下镜悉。
???????$.fn
是指jquery的命名空間祟辟,加上fn上的方法及屬性,會(huì)對(duì)jquery實(shí)例每一個(gè)有效侣肄。如擴(kuò)展$.fn.abc()
那么你可以這樣子調(diào)用:$("#div").abc();
另外$.fx
是指jquery的特效旧困。如果使用顯示、滑動(dòng)、淡入淡出吼具、動(dòng)畫等僚纷。$.fx.off
可以關(guān)閉動(dòng)畫,其實(shí)是直接顯示結(jié)果拗盒。
???????原來 jQuery.fn = jQuery.prototype.
怖竭,對(duì)prototype
相信咱們已經(jīng)可以很好的理解啦。
???????雖然 javascript沒有明確的類的概念陡蝇,但是用類來理解它痊臭,會(huì)更方便。 jQuery便是一個(gè)封裝得非常好的類登夫,比如我們用語(yǔ)句$("#btn1")
會(huì)生成一個(gè) jQuery類的實(shí)例广匙。
???????jQuery.extend(object)
為jQuery類添加添加類方法,可以理解為添加靜態(tài)方法
恼策。如: $.extend({ add:function(a,b){return a+b;} });
便為 jQuery 添加一個(gè)為 add的“靜態(tài)方法”鸦致,之后便可以在引入 jQuery的地方,使用這個(gè)方法了涣楷,$.add(3,4); //return 7
jQuery.fn.extend(object)對(duì)jQuery.prototype
進(jìn)得擴(kuò)展分唾,就是為jQuery類添加“成員函數(shù)”。jQuery類的實(shí)例可以使用這個(gè)“成員函數(shù)”狮斗。 比如我們要開發(fā)一個(gè)插件绽乔,做一個(gè)特殊的編輯框,當(dāng)它被點(diǎn)擊時(shí)情龄,便alert 當(dāng)前編輯框里的內(nèi)容迄汛。
alertWhileClick:function() {
$(this).click(function(){
alert($(this).val());
});
} });
$("#input1").alertWhileClick();
頁(yè)面上為:<input id="input1" type="text"/> $("#input1")
為一個(gè)jQuery實(shí)例捍壤,當(dāng)它調(diào)用成員方法alertWhileClick
后骤视,便實(shí)現(xiàn)了擴(kuò)展,每次被點(diǎn)擊時(shí)它會(huì)先彈出目前編輯里的內(nèi)容鹃觉。