1.表單驗證插件Validation ? 2.表單插件Form ? 3.動態事件綁定插件livequery 可以為后來的元素綁定事件 ? 類似于jQuery中的live()方法 ? ? 4.jQuery UI ? 5.jQuery Cookie ? 6.遮罩層插件:thickbox ? 7.編寫jQuery插件 <1>編寫插件的目的：給已經有的一些列方法或函數做一個封裝，一遍在其他地方使用，方便后期維護和提高開發效率。 ? <2>三種類型的插件 a:封裝對象方法的插件　　jQuery.fn.extend() b:封裝全局函數的插件　　jQuery.extend() c:選擇器插件　　jQuery.extend() ? <3>插件內部的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); ? 結果： newSet={va: true, li: 5, name:"bar"}; ? 所以：jQuery.extend()方法經常被用于設置插件方法的一系列默認參數。 例子： 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的可鏈式調用性 ;(function($){$.fn.extend({"color":function(value){return this.css("color",value); //為了可鏈式調用，返回this }}) })(jQuery);

?

5.兩個功能：設置與獲取color ;(function($){$.fn.extend({"color":function(value){if(value==undefined){return this.css("color"); //為了可鏈式調用，返回this)else{return this.css("color",value); }}}) })(jQuery); ? 6.插件提升 a:由于css方法本身具有返回第一個匹配元素的功能，所以不需要使用eq()來獲取第一個元素 b:由于css方法內部已經有判斷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);//應用 $(function(){alert($("div").color()); //獲取第一個color$("div").color("red"); //設置所有的div的color為red })</script>

?

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

轉載于:https://www.cnblogs.com/zqzjs/p/4943617.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。