标签：
jQuery中自定义插件，主要可以分为三大类：封装对象方法的插件、封装全局函数的插件、选择器插件。
以下分享低版本jQuery和jQuery2.0+版本中选择器插件的使用：
原理：
jQuery的选择符解析器首先会使用一组正则表达式来解析选择器，然后针对解析出的每个选择符执行一个函数，称为选择器函数。最后根据这个选择器函数的返回值为true还是false来决定是否保留这个元素。这样就可以找到匹配的元素节点
先上代码，在解析：
低版本jQuery
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- 引入jQuery --> <script src="../../scripts/jquery-1.4.js" type="text/javascript"></script> <script type="text/javascript"> //插件编写 ;(function($) { $.extend(jQuery.expr[":"], { between : function( a , i ,m ) { var tmp=m[3].split(","); //将传递进来的m[3]以逗号为分隔符，切成一个数组 return tmp[0]-0<i&&i<tmp[1]-0; } }); })(jQuery); //插件应用 $(function(){ $("div:between(2,5)").css("background","white"); }) </script> </head> <body> <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> </body> </html>
注意：这里参数i是有效的
jQuery2.0+版本
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="../Content/js/jquery-2.1.3.js"></script> <script type="text/javascript"> ; (function ($) { $.extend(jQuery.expr[":"], { between: function (a, i, m) { var tmp = m[3].split(","); //将传递进来的m[3]以逗号为分隔符，切成一个数组 return tmp[0]< $(a).index() && $(a).index() < tmp[1]; } }); })(jQuery); </script> <script type="text/javascript"> $(function () { $("div:between(2,5)").css("background", "white"); }); </script> </head> <body> <div style="background-color: red">0</div> <div style="background-color: yellow">1</div> <div style="background-color: green">2</div> <div style="background-color: blue">3</div> <div style="background-color: olive">4</div> <div style="background-color: orange">5</div> </body> </html>
注意在高版本中，无法使用参数i，通过index()替换即可！
---------------------------------------------------------分割线-------------------------
其他说明：
例子中用到了function(a,i,m){//……},如下说明：
| 参数 | 说明 | ||||||||||
| a | 指向的事当前遍历到的DOM元素 | ||||||||||
| i | 指的事当前遍历到的DOM元素的索引值，从0开始。 (注意：高版本中不起作用，可以用$(a).index()来代替) |
||||||||||
| m | 其有jQuery正则解析引擎进一步解析后的产物，是一个长度为4的数组：
|
例子引用资料&&更多学习可以参考：《锋利的jQuery》
标签：
原文地址：http://www.cnblogs.com/charlesxiao/p/4238598.html
