jquery过滤性选择器

来源：互联网发布：科技绘图及数据分析编辑：程序博客网时间：2024/05/18 02:52

（1）根据标签属性选择

1.属性值等于

语法格式

[attribute=value]

实例

<!DOCTYPE html><html>    <head>        <title>[attribute=value]属性选择器</title>        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>        </head>        <body>        <h3>改变"title"属性值为"蔬菜"的背景色</h3>        <ul>            <li title="蔬菜">茄子</li>            <li title="水果">香蕉</li>            <li title="蔬菜">芹菜</li>            <li title="水果">苹果</li>            <li title="水果">西瓜</li>        </ul>                <script type="text/javascript">            $(li[title='蔬菜']).css("background-color", "green");        </script>    </body></html>

2.属性值不等于

语法格式

[attribute!=value]

实例

         $("li[title!='蔬菜']").css("background-color", "green");

3.属性值包含(相当于模糊查询)

语法格式

[attribute*=value]

实例

          $("li[title*='果']").css("background-color", "green");

（2）根据标签中的内容选择

1.内容包含

语法格式

:contains(text)

实例

<!DOCTYPE html><html>    <head>        <title>:contains(text)过滤选择器</title>        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>        <link href="style.css" rel="stylesheet" type="text/css" />    </head>        <body>        <div>改变包含"jQuery"字符内容的背景色：</div>        <ol>            <li>强大的"jQuery"</li>            <li>"javascript"也很实用</li>            <li>"jQuery"前端必学</li>            <li>"java"是一种开发语言</li>            <li>前端利器——"jQuery"</li>        </ol>                <script type="text/javascript">            $("li:contains('jQuery')").css("background", "green");        </script>    </body></html>

2.内容包含某个标签

语法格式

:has(selector)

实例

<!DOCTYPE html><html>    <head>        <title>:has(selector)过滤选择器</title>        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>        <link href="style.css" rel="stylesheet" type="text/css" />    </head>        <body>        <div>改变包含"label"元素的背景色：</div>        <ol>            <li><p>我是P先生</p></li>            <li><label>L妹纸就是我</label></li>            <li><p>我也是P先生</p></li>            <li><label>我也是L妹纸哦</label></li>            <li><p>P先生就是我哦</p></li>        </ol>                 <script type="text/javascript">            $("li:has('p')").css("background-color", "blue");        </script>    </body></html>

（3）根据标签位置选择

1.元素下标

语法格式

:eq(index)

实例

<!DOCTYPE html><html>    <head>    <title>:eq(index)过滤选择器</title>    <link href="style.css" rel="stylesheet" type="text/css" />    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>    </head>        <body>        <div>改变中间行"葡萄"背景颜色：</div>        <ol>        <li>橘子</li>        <li>香蕉</li>        <li>葡萄</li>        <li>苹果</li>        <li>西瓜</li>        </ol>                <script type="text/javascript">            $("li:eq(2)").css("background-color", "#60F");        </script>    </body></html>

2.选取第一个

语法格式

:first

实例

<!DOCTYPE html><html>    <head>        <title>:first过滤选择器</title>        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>        <link href="style.css" rel="stylesheet" type="text/css" />    </head>        <body>        <div>改变最后一行"苹果"背景颜色：</div>        <ol>            <li>葡萄</li>            <li>香蕉</li>            <li>橘子</li>            <li>西瓜</li>            <li>苹果</li>        </ol>                <script type="text/javascript">            $("li:first").css("background-color", "red");        </script>    </body></html>

可能一个页面中有多组li，使用:first只能选取一个，如果需要选取每组的第一个，可以使用:first-child

<!DOCTYPE html><html>    <head>        <title>:first-child子元素过滤选择器</title>        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>        <link href="style.css" rel="stylesheet" type="text/css" />    </head>        <body>        <h3>改变每个"蔬菜水果"中第一行的背景色</h3>        <ol>            <li>芹菜</li>            <li>茄子</li>            <li>萝卜</li>            <li>大白菜</li>            <li>西红柿</li>        </ol>        <ol>            <li>橘子</li>            <li>香蕉</li>            <li>葡萄</li>            <li>苹果</li>            <li>西瓜</li>        </ol>                <script type="text/javascript">            $("li:first-child").css("background-color", "green");        </script>    </body></html>

2.选取最后一个

选取最后一个语法格式

:last

选取多组最后一个语法格式

:last-child

<!DOCTYPE html><html>    <head>        <title>:last-child子元素过滤选择器</title>        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>        <link href="style.css" rel="stylesheet" type="text/css" />    </head>        <body>        <h3>改变每个"蔬菜水果"中最后一行的背景色</h3>        <ol>            <li>芹菜</li>            <li>茄子</li>            <li>萝卜</li>            <li>大白菜</li>            <li>西红柿</li>        </ol>        <ol>            <li>橘子</li>            <li>香蕉</li>            <li>葡萄</li>            <li>苹果</li>            <li>西瓜</li>        </ol>                <script type="text/javascript">           $("li:last-child").css("background-color", "blue");        </script>    </body></html>

0 0