jquery学习之过滤选择器

最新推荐文章于 2024-01-13 22:21:09 发布

克念

最新推荐文章于 2024-01-13 22:21:09 发布

阅读量426

点赞数

分类专栏：前端 javascript jquery 文章标签： jquery javascript

本文链接：https://blog.csdn.net/shikenian520/article/details/46660837

版权

前端同时被 3 个专栏收录

8 篇文章 0 订阅

订阅专栏

jquery

8 篇文章 0 订阅

订阅专栏

javascript

7 篇文章 0 订阅

订阅专栏

jquery选择器之过滤选择器

先来一个热身的代码：把li选择列表中的最后一个元素背景色变为红色。

<!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:last").css("background-color", "red");
        </script>
    </body>
</html>

选择li元素中的倒数第三个元素，并且改变背景色

可以通过eq来具体定位到元素中的第几个，注意，序号是从零开始的。

<!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">
            <span style="color:#ff0000;">$("li:eq(-3)").css("background-color", "#60F");</span>
        </script>
    </body>
</html>

:contains(text)过滤选择器

上面的选择器通过序号来找到元素，这个在编程的时候很方便，不过有时候，我们希望拥有特定结果的值，进行特别的展示的时候，可以选择:contains(text)过滤选择器。

例如，选择所有包含“jQuery”文字内容的所有元素，并且高亮显示。

<!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">
            <span style="color:#ff0000;">$("li:contains('jQuery')").css("background", "green");</span>
        </script>
    </body>
</html>

:has(selector)选择器

该选择器，用来筛选符合某种条件的额父节点的。比如，我们选择所有包含了label节点的li节点的（其实当然也可以选择包含某个ID的li节点，其实选择器就是这样，好多都是可以通用的）

<!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 id='test'>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('label')").css("background-color", "blue");
        </script>
    </body>
</html>

:hidden过滤器

该过滤器可以把一些节点中，那些不展示的节点找出来，比如为disabled、display="none"或者是 type="hidden"的元素。

例如，把input元素中，状态为hidden的元素中的数据找出来，放入到div中。

<!DOCTYPE html>
<html>
    <head>
        <title>:hidden过滤选择器</title>
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
    </head>
    
    <body>
        <h3>显示隐藏元素的内容</h3>
        <input id="hidstr" type="hidden" value="我已隐藏起来"/>
        <div></div>
        
        <script type="text/javascript">
       <span style="color:#ff0000;"> var $strHTML = $("input:hidden").val();</span>
        $("div").html($strHTML);
    </script>
    </body>
</html>

:visible过滤选择器

这个过滤器没啥好说的，哈hidden过滤器正好相反

[attribute=value]属性选择器

该选择器可以选择某个节点中，属性attribute的值为value元素。

例如，选择所有的li元素中，属性title 为蔬菜的的节点。

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

注意，该属性选择器的相反选择器是：[attribute!=value]属性选择器。

[attribute*=value]属性选择器

这个选择器更加强大，原因在于可以模糊匹配。

例如：

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

选择所有li元素中title的值中包含果的元素。

注意：first-child、last-child这两个最好有图才能够说得清，比较特殊。很简单，和之前的first和last的区别主要是可以选取所有父节点下的第一个或者最后一个子节点了。

 $("li:first-child").css("background-color", "green");

克念

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery学习之过滤选择器

jquery选择器之过滤选择器先来一个热身的代码：把li选择列表中的最后一个元素背景色变为红色。 :first过滤选择器改变最后一行"苹果"背景颜色：葡萄香蕉橘子
复制链接

扫一扫

专栏目录

jquery学习之 过滤选择器

jquery选择器之 过滤选择器

先来一个热身的代码：把li选择列表中的最后一个元素背景色变为红色。

选择li元素中的倒数第三个元素，并且改变背景色

:contains(text)过滤选择器

:hidden过滤器

:visible过滤选择器

[attribute=value]属性选择器

[attribute*=value]属性选择器

jquery学习之过滤选择器

jquery选择器之过滤选择器