jQuery10(过滤器)

最新推荐文章于 2022-11-04 21:57:15 发布

天赋进行时

最新推荐文章于 2022-11-04 21:57:15 发布

阅读量310

点赞数

分类专栏： JS-Dom-Jquery

本文链接：https://blog.csdn.net/xbc1213/article/details/50639650

版权

JS-Dom-Jquery 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

过滤器

关键词:first
语法实例:$('ul li:first').css('backgroundColor','yellow');
意义:ul标签中的第一个元素

关键词:last
语法实例:$('ul li:last').css('backgroundColor','yellow');
意义:ul标签中的最后一个元素

关键词:even
语法实例:$('ul li:even').css('backgroundColor','yellow');
意义:ul标签中的奇数行发生变化.
注意:even意义为偶数

关键词:odd
语法实例:$('ul li:odd').css('backgroundColor','yellow');
意义:ul标签中的偶数行发生变化.
注意:odd意义为奇数

实例:

<!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></title>
    <script src="jquery-1.8.3.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#btn').click(function () {
                //第一个元素
                //$('ul li:first').css('backgroundColor', 'red');
                //最后一个元素
                //$('ul li:last').css('backgroundColor', 'red');
                //偶数,显示效果为奇数行发生变化
                $('ul li:even').css('backgroundColor', 'red');
                //奇数,显示效果为偶数行改变
                //$('ul li:odd').css('backgroundColor', 'red');
            });
        });
    </script>
</head>
<body>
    <input type="button" name="name" value="显示效果 " id='btn' />
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

关键词:eq(num)
语法实例:$('div:eq(3)').css('backgroundColor','red');
意义:从div的索引3开始

关键词:lt(num)
语法实例:$('div:lt(3)').css('backgroundColor','red');
意义:从索引小于3的div开始

关键词:gt(num)
语法实例:$('div:gt(3)').css('backgroundColor','red');
意义:从索引大于3的div开始

关键词:组合
语法实例:$('div:gt(3):lt(2)').css('backgroundColor','red');
意义:从索引大于3小于2的div开始,请注意,这里查找完索引大于3后,在当前位置索引变为0.

实例:

<!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></title>
    <script src="jquery-1.8.3.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#btn').click(function () {
                //索引为3的div 从0开始
                //$('div:eq(3)').css('backgroundColor', 'red');
                //索引小于3 的div
                //$('div:lt(3)').css('backgroundColor', 'red');
                //索引大于3的div
                //$('div:gt(3)').css('backgroundColor', 'red');
                //索引大于3小于2的div 索引大于3 查完后,索引变为0重新开始查询索引小于2
                $('div:gt(3):lt(2)').css('backgroundColor', 'red');
            });
        });
    </script>
    <style type="text/css">
        div
        {
            width: 300px;
            height: 20px;
            background-color: Green;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <input id='btn' type="button" name="name" value="显示效果" />
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
</body>
</html>

天赋进行时

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery10(过滤器)

过滤器关键词:first 语法实例:$('ul li:first').css('backgroundColor','yellow'); 意义:ul标签中的第一个元素关键词:last 语法实例:$('ul li:last').css('backgroundColor','yellow'); 意义:ul标签中的最后一个元素关键词:even 语法实例:$('ul li:even').css('b
复制链接

扫一扫