jquery过滤性选择器

最新推荐文章于 2023-03-22 08:04:52 发布

转载最新推荐文章于 2023-03-22 08:04:52 发布 · 387 阅读

文章标签：

#javascript #前端 #java #ViewUI

jquery 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了jQuery中各种选择器的应用，包括根据属性、内容及位置进行元素筛选的方法，并提供了丰富的示例代码。

（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>