搜索

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


发布时间: 2022-11-24 18:39:05    浏览次数:31 次

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){//……},如下说明:

参数 说明
a 指向的事当前遍历到的DOM元素
i 指的事当前遍历到的DOM元素的索引值,从0开始。
(注意:高版本中不起作用,可以用$(a).index()来代替)
m 其有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)

例子引用资料&&更多学习可以参考:《锋利的jQuery》

免责声明 jQuery2.0+中自定义选择器插件,资源类别:文本, 浏览次数:31 次, 文件大小:-- , 由本站蜘蛛搜索收录2022-11-24 06:39:05。此页面由程序自动采集,只作交流和学习使用,本站不储存任何资源文件,如有侵权内容请联系我们举报删除, 感谢您对本站的支持。 原文链接:https://www.cnblogs.com/charlesxiao/p/4238598.html