jquery插件的写法
一.JQuery的插件主要分為3種：
1.封裝對象方法的插件。
如JQuery的parent()方法，appendTo()方法，addClass()方法等。
2.封裝全局函數的插件。
如JQuery.ajax()，JQuery.trim()方法
3.選擇器插件。
二.JQuery的插件機制：
i.JQuery提供了兩個用于擴展JQuery功能的方法，jQuery.fn.extend()方法和jQuery.extend()方法。前者用于擴展前面的提到的第一種插件，后者用于擴展后兩種插件。這兩個方法都接收一個類型為Object的參數。
ii.所有的對象方法都應附加到jQuery.fn對象上，所有全局函數都應附加到jQuery對象本身上。
iii.在插件內部，this指向JQuery對象。
iv.插件應結尾加分號，避免壓縮帶來錯誤。在開頭也最好加分號，避免他人的不規范代碼給插件帶來影響。
v.插件應該返回一個JQuery對象，以保證插件的可鏈式操作。除非插件需要返回的是一些需要獲取的量。
三.插件示例：
1.封裝JQuery對象方法的插件。
下面是一個簡單的color插件，主要實現獲取和配置元素顏色的功能。
首先創建jquery.color.js文件。
搭好框架：
;(function($){})(jQuery);由于是對JQuery對象方法的擴展，采用jQuery.fn.extend()來寫：
;(function($){jQuery.fn.extend({});})(jQuery);完成color的功能：
;(function($){jQuery.fn.extend({"color":function(value){if(value == undefined){return this.css("color");}else{return this.css("color",value);}}});})(jQuery);測試插件：test_color.html
?
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.color.js"></script> <style type="text/css"> </style> </head> <body> <div id="b" style="color:blue">blue</div> <div style="color:green">green</div> <script type="text/javascript"> $(function(){console.log($("#b").color() + "返回字符串，證明此插件可用。");console.log($("div").color("red")); }); </script> </body> </html>測試效果：
說明：
做一個稍微復雜一點的封裝對象的插件，表格隔行變色的插件。
jquery.alterbgcolor.js
;(function($){$.fn.extend({"alterBgColor":function(options){options=$.extend({odd:"odd",even:"even",selected:"selected"},options);$("tbody>tr:odd",this).addClass(options.odd);$("tbody>tr:even",this).addClass(options.even);$('tbody>tr',this).click(function(){var hasSelected=$(this).hasClass(options.selected);$(this)[hasSelected?"removeClass":"addClass"](options.selected).find(':checkbox').prop('checked',!hasSelected);});$('tbody>tr:has(:checked)',this).addClass(options.selected);return this;}}); })(jQuery);使用示例：
test-altercolor.html
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.alterbgcolor.js"></script> <style type="text/css"> .odd{background-color: gray; } .even{background-color: white; } .selected{background-color:yellow; } </style> </head> <body><table id = "table2"><tr><th></th><th>name</th><th>score</th></tr><tr><td><input type="checkbox" /></td><td>Smith</td> <td>50</td></tr><tr><td><input type="checkbox" /></td><td>Jackson</td> <td>94</td></tr><tr><td><input type="checkbox" /></td><td>Smith</td> <td>50</td></tr><tr><td><input type="checkbox" /></td><td>Jackson</td> <td>94</td></tr></table> <script type="text/javascript"> $("#table2").alterBgColor().find("th").css("color","red"); </script> </body> </html>2.封裝全局函數的插件。
這類插件是在jQuery的命名空間內部添加一個函數。例如新增兩個函數用于去除左側和右側的空格。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <script type="text/javascript" src="jquery.min.js"></script> </head> <body> <script type="text/javascript"> ;(function($){$.extend({ltrim:function(text){return(text || "").replace(/^\s+/g, "");},rtrim:function(text){return(text || "").replace(/\s+$/g, "");}}); })(jQuery);var str = " test "; console.log(str + "|"); console.log(jQuery.trim(str) + "|"); console.log(jQuery.ltrim(str) + "|"); console.log(jQuery.rtrim(str) + "|"); </script> </body> </html>3.自定義選擇器。
jQuery提供了一套方法讓用戶可以通過制作選擇器插件來使用自定義選擇器。
jQuery的選擇符解析器首先會使用一組正則表達式來解析選擇器，然后針對解析出的每個選擇符執行一個函數，稱為選擇函數。最后根據這個選擇函數的返回值為true還是false來決定是否保留這個元素，這樣就可以找到匹配的元素節點。
例如：$("div:gt(1)")
該選擇器首先會獲取所有的<div>元素，然后隱式遍歷這些<div>元素，并逐個將這些<div>元素作為參數，連同括號里的參數一起傳遞給gt對應的選擇器函數進行判斷。如果這個函數返回true，則這個<div>元素保留，如果返回false，則不保留這個<div>元素。這樣得到的結果就是一個符合要求的<div>元素的集合。
:gt()選擇器在jQuery源文件中的代碼如下：
gt:function(a,i,m){return i>m[3]-0;}
其中，選擇器函數一共接受3個參數，代碼如下:
function(a,i,m){}
第1個參數為a,指向的是當前遍歷到的DOM元素。
第2個參數為i，指的是當前遍歷到的DOM元素的索引值，從0開始。
第3個參數m最為特別，它是由jQuery正則解析引擎進一步解析后的產物（用match匹配出來的），是一個數組。
m[0]，用上面的例子$("div:gt(1)")來講，是:gt(1)這部分。它是jQuery選擇器進一步要匹配的內容。
m[1]，是選擇器的引導符，匹配例子中的":"，即冒號。并非只能使用":"后面跟上選擇器，用戶還可以自定義其他的選擇器引導符。
m[2]，即例子中的gt，確定究竟是調用哪個選擇器 函數。
m[3]，即例子中的1。
m[4]，上面的例子沒有體現出來，這個比較罕見。例如"div:l(ss(dd))"這樣一個選擇器中，m[4]就指向(dd)這一部分，注意是帶括號的(dd)，而不只是dd。同時，此時的m[3]的值是ss(dd)而非ss。
jQuery已經提供了lt、gt和eq等選擇器，但是沒有提供le（小于等于）、ge（大于等于）和between（兩者之間）之類的選擇器。
下面我們來實現一個between選擇器。
<script> //插件編寫 ;(function($){$.extend(jQuery.expr[":"],{between:function(a, i, m){var temp = m[3].split(",");return i > tmp[0]-0 && i < tmp[1]-0;}}) })(jQuery); //插件應用 $(function(){$("div:between(2,5)").css("background","white"); }); </script> <div style="background:red">0</div> <div style="background:blue">1</div> <div style="background:green">2</div> <div style="background:yellow">3</div> <div style="background:gray">4</div> <div style="background:orange">5</div> <div style="background:red">6</div>
?
索引為3和4的行背景顏色變成白色了，就達到了預期的效果。
?
參考：摘自《鋒利的jQuery》第二版
轉載于:https://www.cnblogs.com/zhutianpeng/p/4079651.html
《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀總結
以上是生活随笔為你收集整理的jquery插件的写法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： VisualSVN Server以及To
- 下一篇： 网站添加到IIS和附件进程调试（新手使用