jQuery过滤选择器(first,last/:eq()/:contains()/:has()/:hidden/:visible)

最新推荐文章于 2025-06-26 11:31:58 发布

原创

最新推荐文章于 2025-06-26 11:31:58 发布 · 3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #过滤选择器

本文介绍了jQuery中的过滤选择器，包括`first`和`last`用于选取集合中的第一个或最后一个元素，`:eq(index)`用于选取特定索引的元素，`:contains(text)`查找包含指定文本的元素，`:has(selector)`选择包含特定选择器匹配的元素的元素，`:hidden`和`:visible`用于选取隐藏或显示的元素。通过实例展示了这些选择器的用法。

1、first、last过滤选择器

得到一组相同标签元素中的第1个元素， $(“li:first”)

例：最后一个元素背景色取红色

<pre name="code" class="html"><!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>

使用:first-child子元素过滤选择器则可以获取每个父元素中返回的首个子元素

    <body>
        <h3>改变每个"蔬菜水果"中第一行的背景色</h3>
        <ol>
            <li>芹菜</li>
            <li>茄子</li>
            <li>萝卜</li>
            <li>大白菜</li>
            <li>西红柿</li>
        </ol>
        <ol>
            <li>橘子</li>
            <li>香蕉</li>
            <li>葡萄<

最低0.47元/天解锁文章

新学期VIP享超值加赠