Query編寫插件的兩種方法

1.添加jQuery對象級的插件，是給jQuery類添加方法

寫法：

;(function($){

$.fn.extend({

"函數(shù)名":function(自定義參數(shù)){

//這里寫插件代碼

}

});

})(jQuery);

或者

;(function($){

$.fn.函數(shù)名=function(自定義參數(shù)){

//這里寫插件代碼

}

})(jQuery);

調(diào)用方法：$("#id").函數(shù)名(參數(shù));

2.jQuery類級別的插件，相當(dāng)于添加靜態(tài)方法

;(function($){

$.extend({

"函數(shù)名":function(自定義參數(shù)){

//這里寫插件代碼

}

});

})(jQuery);

或者

;(function($){

$.函數(shù)名=function(自定義參數(shù)){

//這里寫插件代碼

}

})(jQuery);

調(diào)用方法：$.函數(shù)名(參數(shù));

jquery插件的種類：

1.對象級別的插件開發(fā)，即給jQuery對象添加方法，封裝對象方法的插件，如:parent()、appendTo()

2.一種是類級別的插件開發(fā)，即給jQuery添加新的全局函數(shù)，相當(dāng)于給jQuery類本身添加方法，jQuery的全局函數(shù)就是屬于jQuery命名空間的函數(shù)，封裝全局函數(shù)的插件

3.選擇器插件

jQuery插件機(jī)制

jQuery為開發(fā)插件提拱了兩個(gè)方法，分別是：

jQuery.fn.extend(object);給jQuery對象添加方法。

jQuery.extend(object);為擴(kuò)展jQuery類本身.為類添加新的方法，可以理解為添加靜態(tài)方法。

這兩個(gè)方法都接受一個(gè)參數(shù)，類型為Object，Object對應(yīng)的"名/值對"分別代表"函數(shù)或方法體/函數(shù)主體"。

fn是什么東西呢？

查看jQuery代碼，就不難發(fā)現(xiàn)：

jQuery.fn=jQuery.prototype={init:function(selector,context){//....//......};

原來jQuery.fn=jQuery.prototype.對prototype肯定不會陌生啦。雖然javascript沒有明確的類的概念，但是用類來理解它，會更方便。jQuery便是一個(gè)封裝得非常好的類，比如我們用語句$("#btn1")會生成一個(gè)jQuery類的實(shí)例。

jQuery.fn.extend(object)，對jQuery.prototype進(jìn)行擴(kuò)展，就是為jQuery類添加“成員函數(shù)”。jQuery類的實(shí)例可以使用這個(gè)“成員函數(shù)”。即：$("#id").object();

jQuery.extend()方法除了可以擴(kuò)展jQuery對象外，還可以擴(kuò)展已有的Object對象，經(jīng)常被用于設(shè)置插件方法的一系列默認(rèn)參數(shù)，可以很方便的用傳入的參數(shù)來覆蓋默認(rèn)值

jQuery.extend(object1,object2)object1默認(rèn)參數(shù)值，object2傳入的參數(shù)值；詳細(xì)說明，請點(diǎn)擊這里

varsettions={validate:false,limit:5,name="foo"};

varoptions={validate:true,name="bar"};

varnewOptions=jQuery.extend(settings,options);

結(jié)果為：

newOptions={validate:true,limit:5,name="bar"};

functionfoo(options){

options=jQuery.extend({

name="bar",

length:5,

dataType="xml"/*默認(rèn)參數(shù)*/

},options/*options為傳遞的參數(shù)*/

);

}

如果用戶調(diào)用foo()方法的時(shí)候，在傳遞的參數(shù)options對象中設(shè)置了相應(yīng)的值，

那么就使用設(shè)置的值，否則使用默認(rèn)值，調(diào)用方法：

foo({name:"a",length:4,dataType:"json"});

foo({name:"a"});

foo();

編寫jQuery插件

封裝jQuery對你方法的插件，首先需要在javaScript文件里搭好框架，代碼如下：

;(function($){

//這里寫插件代碼

})(jQuery);

1.對象級別的插件開發(fā)，即給jQuery對象添加方法，封裝對象方法的插件，如:parent()、appendTo()

由于是對jQuery對象的方法擴(kuò)展，因此采用擴(kuò)展第1類（封裝對象方法）插件的方法jQuery.fn.extend()來編寫

;(function($){

$.fn.extend({

"color":function(value){

//這里寫插件代碼

}

});

})(jQuery);

或者

;(function($){

$.fn.color=function(value){

//這里寫插件代碼

}

})(jQuery);

這里的方法提供一個(gè)參數(shù)value,如果調(diào)用方法時(shí)傳入value，那么就用這個(gè)值來設(shè)置字體顏色,否則就是獲取匹配無此的字體顏色的值

;(function($){

$.fn.extend({

"color":function(value){

returnthis.css("color",value);

}

});

})(jQuery);

插件內(nèi)部的this指向的是jQuery對象，而非普通的DOM對象。接下來注意的是，插件如果不需要返回字符串之類的特定值，應(yīng)當(dāng)使其具有可鏈接性。

為此，直接返回這個(gè)this這個(gè)對象，由于css()方法也會返回調(diào)用它的對象，即此外的this，因此可以將代碼寫成上面的形式;

調(diào)用時(shí)可直接寫成：$("div").color("red");

另外如果要定義一組插件，可以使用如下所示寫法：

;(function($){

$.fn.extend({

"color":function(value){

//這里寫插件代碼

},

"border":function(value){

//這里寫插件代碼

},

"background":function(value){

//這里寫插件代碼

}

});

})(jQuery);

2.封裝全局函數(shù)的插件

這類插件是在jQuery命名空間內(nèi)部添加一個(gè)函數(shù)。這類插件很簡單，只是普通的函數(shù)，沒有特別需要注意的地方。

例如新增兩個(gè)函數(shù)，用于去除左側(cè)和右側(cè)的空格。

首先構(gòu)建一個(gè)Object對象，把函數(shù)名和函數(shù)都放進(jìn)去，其中的名/值對分別為函數(shù)名和函數(shù)主體

然后利用jQuery.extend()方法直接對jQuery對象進(jìn)行擴(kuò)展

jQuery代碼如下：

;(function($){

$.extend({

ltrim:function(text){

return(text||"").replace(/^\s+g,"");

},

rtrim:function(text){

return(text||"").replace(/\s+$/g,"");

}

});

})(jQuery);

或者

;(function($){

$.ltrim=function(text){

return(text||"").replace(/^\s+g,"");

},

$.rtrim=function(text){

return(text||"").replace(/\s+$/g,"");

}

})(jQuery);

*(text||"")部分是用于防止傳遞進(jìn)來的text這個(gè)字符串變量處于未定義的特殊狀態(tài)，如果text是undeined，則返回字符串""，否則返回字符串text。

這個(gè)處理是為了保證接下來的字符串替換方法replace()方法不會出錯(cuò)

*運(yùn)用了正則表達(dá)式替換首末的空格

調(diào)用函數(shù)：

$("trimTest").val(

jQuery.trim("test")+"\n"+

jQuery.ltrim("test")+"\n"+

jQuery.rtrim("test")

);

運(yùn)行代碼后，文本框中第一行字符串左右兩側(cè)的空格都被刪除。

第二行的字符串只有左側(cè)的空格被刪除。

第三行的字符串只有右側(cè)的空格被刪除。

3.自定義選擇器