1.表單驗證插件Validation ? 2.表單插件Form ? 3.動態(tài)事件綁定插件livequery 可以為后來的元素綁定事件 ? 類似于jQuery中的live()方法 ? ? 4.jQuery UI ? 5.jQuery Cookie ? 6.遮罩層插件:thickbox ? 7.編寫jQuery插件 <1>編寫插件的目的：給已經(jīng)有的一些列方法或函數(shù)做一個封裝，一遍在其他地方使用，方便后期維護(hù)和提高開發(fā)效率。 ? <2>三種類型的插件 a:封裝對象方法的插件　　jQuery.fn.extend() b:封裝全局函數(shù)的插件　　jQuery.extend() c:選擇器插件　　jQuery.extend() ? <3>插件內(nèi)部的this指向的是jQuery對象，而不是DOM對象。 ? 8.對于 jQuery 插件-（初體驗一） jquery.fn.extend與jquery.extend--（初體驗二） $.extend({},defaults, options) --（初體驗三） 的補充。 <1>插件的基本要點 ? <2>jQuery.extend()方法處理可以用于擴展jQuery對象之外，還有一個強大的功能，就是用于擴展已有的Object對象。 例如： var settings={va: false, li: 5, name:"foo"}; var options={va: true, name:"bar"}; var newSet=jQuery.extend(settings,options); ? 結(jié)果： newSet={va: true, li: 5, name:"bar"}; ? 所以：jQuery.extend()方法經(jīng)常被用于設(shè)置插件方法的一系列默認(rèn)參數(shù)。 例子： function foo(options){options=jQuery.extend({name:"bar",length:5,dataType:"xml"},options); }

?

<2>封裝方法的插件使用 例子：寫color插件。 1.js文件命名：jQuery.color.js ? 2.格式 ;(function($){})(jQuery); ? 3.由于是封裝方法的插件使用：jQuery.fn.extend() ;(function($){$.fn.extend({"color":function(value){}}) })(jQuery); ? 4.this的可鏈?zhǔn)秸{(diào)用性 ;(function($){$.fn.extend({"color":function(value){return this.css("color",value); //為了可鏈?zhǔn)秸{(diào)用，返回this }}) })(jQuery);

?

5.兩個功能：設(shè)置與獲取color ;(function($){$.fn.extend({"color":function(value){if(value==undefined){return this.css("color"); //為了可鏈?zhǔn)秸{(diào)用，返回this)else{return this.css("color",value); }}}) })(jQuery); ? 6.插件提升 a:由于css方法本身具有返回第一個匹配元素的功能，所以不需要使用eq()來獲取第一個元素 b:由于css方法內(nèi)部已經(jīng)有判斷value是否為undefined的機制，所以可以省略if 最終： ;(function($){$.fn.extend({"color":function(value){return this.css("color",value); }}) })(jQuery); ? 7.實際使用： <script>;(function($){$.fn.extend({"color":function(value){return this.css("color",value); }}) })(jQuery);//應(yīng)用 $(function(){alert($("div").color()); //獲取第一個color$("div").color("red"); //設(shè)置所有的div的color為red })</script>

?

8.插件擴展：如果要定義一組插件可以這么寫 ;(function($){$.fn.extend({"color":function(value){}，“border”:function(value){},...}) })(jQuery); ? 9.注意：jQuery選擇符可能會匹配多個元素，可以在插件內(nèi)部調(diào)用each()方法來遍歷匹配元素。 如： ;(function($){$.fn.extend({"color":function(value){return this.each(function(){})}}) })(jQuery); ? <3>封裝全局函數(shù)的插件使用 例子：去除左側(cè)和右側(cè)的空格 ;(function($){$.extend({ltrim:function(text){return (text || "").replace(/^\s+/g,"");},rtrim:function(text){return (text || "").replace(/^\s+$/g,"");}}) })(jQuery);//調(diào)用 $("div").val(jQuery.ltrim(" text ") ) ? <4>選擇器插件 $("div:gt(1)") ? jQuery中的源碼是： gt:function(a,i,m){ ? ? return i>m[3]-0; } 有三個參數(shù)：a,i,m ? ? ? ?? ? ?

轉(zhuǎn)載于:https://www.cnblogs.com/zqzjs/p/4943617.html

總結(jié)

以上是生活随笔為你收集整理的锋利的jQuery--编写jQuery插件(读书笔记五)[完结篇]的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。