jquery 选择器(2) 过滤选择器

最新推荐文章于 2021-11-27 17:00:33 发布

中意他lovi

最新推荐文章于 2021-11-27 17:00:33 发布

阅读量450

点赞数 1

分类专栏： js库文章标签： jquery

本文链接：https://blog.csdn.net/harrisonz8/article/details/52184798

版权

js库专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一丶基本过滤选择器

:first和:last（取第一个元素或最后一个元素）

   $('span:first').css('color', 'red');
   $('span:last').css('color', 'black');

:not（取非元素）

 $('div:not(.classNot)').css('color', 'red');

:even (取偶数索引元素)

:odd (取奇数索引元素)

 $('tr:even').css('background', 'red'); // 偶数行颜色
 $('tr:odd').css('background', 'black'); // 奇数行颜色

第一行索引为0,很方便的实现条纹效果

:eq(x) （取指定索引的元素）

 $('tr:eq(2)').css('background', 'red');

:gt(x) ( 取大于x索引的元素)

:lt(x) ( 取小于x索引的元素)

 $('ul li:gt(2)').css('color', 'red');
 $('ul li:lt(2)').css('color', 'black');

二丶内容过滤选择器

:contains(text)（取包含text文本的元素）

$(document).ready(function () {
      // dd元素中包含"jQuery"文本的会变色
      $('dd:contains("jQuery")').css('color', 'red');
});

例如下面的代码，第一个dd会变色

<dl>
    <dt>技术</dt>
    <dd>jQuery, .NET, CLR</dd>
    <dt>SEO</dt>
    <dd>关键字排名</dd>
    <dt>其他</dt>
    <dd></dd>
</dl>

:empty（取不包含子元素或文本为空的元素）

$(document).ready(function () {
    $('dd:empty').html('没有内容');
});

上面第三个dd会显示”没有内容”文本

:has(selector)（取选择器匹配的元素）

$(document).ready(function () {
            // 为包含span元素的div添加边框
            $('div:has(span)').css('border', '1px solid #000');
        });

即使span不是div的直系子元素，也会生效

<div>
    <h2>
        A
        <span>B</span>
    </h2>
</div>

:parent（取包含子元素或文本的元素）

$(document).ready(function () {
            $('ol li:parent').css('border', '1px solid #000');
        });

下面的代码，A和D所在的li会有边框

<ol>
    <li></li>
    <li>A</li>
    <li></li>
    <li>D</li>
</ol>

三丶可见性过滤选择器

:hidden（取不可见的元素）

下面的代码，先弹出”hello”对话框，然后hid-1会显示，hid-2仍然是不可见的。

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <style type="text/css">
        div
        {
            margin: 10px;
            width: 200px;
            height: 40px;
            border: 1px solid #FF0000;
            display:block;
        }
        .hid-1
        {
            display: none;
        }
        .hid-2
        {
            visibility: hidden;
        }
    </style>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('div:hidden').show(500);
            alert($('input:hidden').val());
        });
    </script>
</head>
<body>
    <div class="hid-1">display: none</div>
    <div class="hid-2">visibility: hidden</div>
    <input type="hidden" value="hello"/>
</body>
</html>

:visible（取可见的元素）

下面的代码，最后一个div会有背景色

<script type="text/javascript">
    $(document).ready(function() {
        $('div:visible').css('background', '#EEADBB');
    });
</script>
<div class="hid-1">display: none</div>
<div class="hid-2">visibility: hidden</div>
<input type="hidden" value="hello"/>
<div>
    jQuery选择器大全
</div>

中意他lovi

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery 选择器(2) 过滤选择器

一丶基本过滤选择器:first和:last（取第一个元素或最后一个元素） $('span:first').css('color', 'red'); $('span:last').css('color', 'black');:not（取非元素） $('div:not(.classNot)').css('color', 'red');:even和:odd（取偶数索引或奇数索引元素，索引从0开
复制链接

扫一扫