jQuery自定义选择器示例-优快云博客

本文链接：https://blog.youkuaiyun.com/tianyazjq/article/details/83533412

本文展示了一个使用jQuery实现的插件应用实例，通过自定义的between选择器筛选DOM元素并进行样式修改。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

示例代码：


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>插件4，between</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <!--   引入jQuery -->
        <script src="../../scripts/jquery-1.3.1.js" type="text/javascript">
        </script>
        <script type="text/javascript">
            ;
            (function($){
                $.extend($.expr[":"], {
                    between: function(a, i, m){
                        var tmp = m[3].split(",");
                        return tmp[0]-0<i && i<tmp[1]-0;
						//tmp[0],eg为2,i>2的时候，并且i<5，另外一个边界,条件成立，根据索引值i,保留其所对应的Dom元素.
                    }
                })
            })(jQuery);

            //插件应用
            $(function(){
                alert("执行前");
                $("div:between(2,5)").css("background","white");
                alert("执行后");
            })
        </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>