jQuery2.0+中自定义选择器插件

浏览数：20 / 时间：2015年06月09日

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>

View Code

注意：这里参数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>

View Code

注意在高版本中，无法使用参数i，通过index()替换即可！
---------------------------------------------------------分割线-------------------------

其他说明：
例子中用到了function(a,i,m){//……},如下说明：

参数

说明

指向的事当前遍历到的DOM元素

指的事当前遍历到的DOM元素的索引值，从0开始。
(注意：高版本中不起作用，可以用$(a).index()来代替)

其有jQuery正则解析引擎进一步解析后的产物，是一个长度为4的数组：

m[0]	为jQuery选择器进行匹配内容。例如：$(“div:gt(1)”),m[0]为gt(1)
m[1]	选择器的引导符，匹配例子中的”:”. 当然并非只能使用”:”后面跟上选择器，用户可以自定义其他的选择器引导符。
m[2]	确定调用哪个选择器函数，例如上例中gt
m[3]	选择器函数传入的参数，例如上例中1 m[3]为编写选择器最重要一个参数
m[4]	较少使用，指代选择器函数中嵌套函数的参数. 例如：div:l(ss(dd))，此时就为(dd)