jQuery如何定義插件？

Query編寫插件的兩種方法

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

寫法：

;(function($){

$.fn.extend({

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

//這里寫插件代碼

}

});

})(jQuery);

或者

;(function($){

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

//這里寫插件代碼

}

})(jQuery);

調用方法：$("#id").函數名(參數);

2.jQuery類級別的插件，相當于添加靜態方法

;(function($){

$.extend({

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

//這里寫插件代碼

}

});

})(jQuery);

或者

;(function($){

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

//這里寫插件代碼

}

})(jQuery);

調用方法：$.函數名(參數);

jquery插件的種類：

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

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

3.選擇器插件

jQuery插件機制

jQuery為開發插件提拱了兩個方法，分別是：

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

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

這兩個方法都接受一個參數，類型為Object，Object對應的"名/值對"分別代表"函數或方法體/函數主體"。

fn 是什么東西呢？

查看jQuery代碼，就不難發現：

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

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

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

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

jQuery.extend(object1,object2)object1默認參數值，object2傳入的參數值；詳細說明，請點擊這里

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

var options ={validate:true,name="bar"};

var newOptions=jQuery.extend(settings,options);

結果為：

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

function foo(options){

options = jQuery.extend({

name="bar",

length:5,

dataType="xml" /*默認參數*/

},options /*options 為傳遞的參數*/

);

}

如果用戶調用foo()方法的時候，在傳遞的參數options對象中設置了相應的值，

那么就使用設置的值，否則使用默認值，調用方法：

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

foo({name:"a"});

foo();

編寫jQuery插件

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

;(function($){

//這里寫插件代碼

})(jQuery);

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

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

;(function($){

$.fn.extend({

"color":function(value){

//這里寫插件代碼

}

});

})(jQuery);

或者

;(function($){

$.fn.color=function(value){

//這里寫插件代碼

}

})(jQuery);

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

;(function($){

$.fn.extend({

"color":function(value){

return this.css("color",value);

}

});

})(jQuery);

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

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

調用時可直接寫成：$("div").color("red");

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

;(function($){

$.fn.extend({

"color":function(value){

//這里寫插件代碼

},

"border":function(value){

//這里寫插件代碼

},

"background":function(value){

//這里寫插件代碼

}

});

})(jQuery);

2.封裝全局函數的插件

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

例如新增兩個函數，用于去除左側和右側的空格。

首先構建一個Object對象，把函數名和函數都放進去，其中的名/值對分別為函數名和函數主體

然后利用jQuery.extend()方法直接對jQuery對象進行擴展

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||"")部分是用于防止傳遞進來的text這個字符串變量處于未定義的特殊狀態，如果text是undeined，則返回字符串""，否則返回字符串text。

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

*運用了正則表達式替換首末的空格

調用函數：

$("trimTest").val(

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

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

jQuery.rtrim(" test ")

);

運行代碼后，文本框中第一行字符串左右兩側的空格都被刪除。

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

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

3.自定義選擇器