jQuery内容整合---（二）常见的五种选择器

最新推荐文章于 2024-07-11 18:05:14 发布

张超@-@

最新推荐文章于 2024-07-11 18:05:14 发布

阅读量641

点赞数 4

文章标签： jquery jquery选择器

本文链接：https://blog.csdn.net/CSDN9825/article/details/114270972

版权

jQuery的选择器类似于CSS选择器，用来选取网页中的元素，主要有两大类：
类CSS选择器（基本选择器、层次选择、属性选择器器）和
过滤选择器（基本过滤选择器、可见性过滤选择器）这五种选择器。

一、基本选择器
包括：标签选择器、类选择器、id选择器、并集选择器、交集选择器、全局选择器。代码表示如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jq/jquery-3.4.1.js"></script>
    <script>
        $(function(){
            //标签选择器
            // $('h1').css('color','red');
            //类选择器
            // $('.aa').css('color','red');
            //id选择器
            // $('#bb').css('color','red');
            //并集选择器
            // $('h1,h3,.aa').css('color','red');
            //交集选择器
            // $('h4.aa').css('color','red');
            //全局选择器
            // $('*').css('color','red');
        });
    </script>
</head>
<body>
    <h1>122</h1>
    <h2 class="aa">155</h2>
    <h3>1545</h3>
    <h4 class="aa">1535</h4>
    <h5 id="bb">485112</h5>
</body>
</html>

二、层次选择器
层次选择器与CSS高级选择器基本一致，这里不再赘叙。详见CSS高级选择器。

三、属性选择器
属性选择器可根据
1、是否包含某属性，比如：
$(‘li[href]’).css(‘color’,‘red’);更改包含href属性的li标签的元素的字体颜色。
2、根据属性的值选取元素，比如：
$(’[href="#"]’).css(‘color’,‘green’);更改包含href=“#”的元素的字体颜色。

四、基本过滤选择器
基本过滤选择器可以选取第一个元素、最后一个元素、索引为偶数或奇数的元素。并可以根据索引的值选取元素。
实例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jq/jquery-3.4.1.js"></script>
    <script>
        $(function(){
            //属性选择器
            // $('li[href]').css('color','red');//包含属性
            // $('[href]').css('color','red');
            // $('[href="#"]').css('color','green');
            // $('[href!="#"]').css('color','blue');

            //过滤选择器
            //选取第一个li标签
            // $('li:first').css('color','red');
            //选取最后一个li标签
            // $('li:last').css('color','green');
            //索引为偶数
            // $('li:even').css('color','blue');
            //索引为奇数
            // $('li:odd').css('color','red');
            //比较索引选择,从零开始
            //等于
            // $('li:eq(3)').css('color','red');
            //大于
            // $('li:gt(3)').css('color','red');
            //小于
            // $('li:lt(3)').css('color','red');

        });
    </script>
</head>
<body>
    <ul>三国人物
        <li href="#">刘备</li>
        <li href="%">曹操</li>
        <li href="!">孙策</li>
        <li>关羽</li>
        <li>马超</li>
        <li>张飞</li>
        <li>赵云</li>
        <li>周瑜</li>
        <li>司马懿</li>
        <li>典韦</li>
    </ul>
</body>
</html>

五、可见性过滤选择器
可见性过滤选择器可以通过元素显示状态来选取元素

$(":visible" )选取所有可见的元素
$(":hidden" ) 选取所有隐藏的元素

代码实例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jq/jquery-3.4.1.js"></script>
    <script>
        $(function(){
            $('[name=show]').click(function(){
                $('p:hidden').show();//隐藏该显示内容
            });

            $('[name=hidden]').click(function(){
                $('p:visible').hide();//显示隐藏的内容
            });
        });
    </script>
</head>
<body>
    <p>这是你能看的东西</p>
    <p style="display: none;">这可是隐藏的内容</p>
    <button name="show">点我显示</button>
    <button name="hidden">点我隐藏</button>
</body>
</html>```

张超@-@

关注

4
点赞
踩
2

收藏

觉得还不错? 一键收藏
3
评论
jQuery内容整合---（二）常见的五种选择器

jQuery的选择器类似于CSS选择器，用来选取网页中的元素，主要有两大类：类CSS选择器（基本选择器、属性选择器、层次选择器）和过滤选择器（基本过滤选择器、可见性过滤选择器）这五种选择器。一、基本选择器包括：...
复制链接

扫一扫