jQuery选择器

最新推荐文章于 2021-08-16 17:38:14 发布

wzh110110110

最新推荐文章于 2021-08-16 17:38:14 发布

阅读量67

点赞数

分类专栏： jQuery笔记文章标签： jquery

本文链接：https://blog.csdn.net/weixin_50652993/article/details/119523249

版权

jQuery笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了jQuery的选择器使用，包括类选择器、ID选择器、标签选择器、并集选择器、交集选择器、层级选择器和筛选选择器。通过实例展示了如何改变元素样式、隐藏元素及操作层级结构。同时，还演示了如何利用奇偶数选择器为表格行设置不同背景色。

摘要由CSDN通过智能技术生成

一、jQuery选择器的分类

在原生的JavaScript中，由于获取元素的方法有很多，所以在jQuery中统一了选择器的标准。

格式

$(“选择器”)；

常用选择器

选择器类型	格式	说明
全选选择器	$("*")	获得所有元素
类选择器	$(".class")	获取类名相同的所有元素
ID选择器	$("#id")	获取指定id的元素
标签选择器	$(“div”)	获得相同类型标签的所有元素
并集选择器	$(“li,div,a”)	获得多个元素
交集选择器	$(“li.div”)	获得交集元素

层级选择器

格式	说明
$(“ul>li”)	获得第一子代的元素，不会获得第二子代的元素
$(“ul li”)	获得ul下的所有li元素，包括第二代子元素

筛选选择器

格式	说明
$(“tr:even”)	获取偶数行的tr元素
$(“tr:odd”)	获取奇数行的tr元素
$(“p:first”)	获得第一个 p 元素
$(“p:last”)	获得最后一个 p 元素
$(“ul li:first”)	获得第一个 ul 元素的第一个 li元素

二、选择器的用法

类选择器，标签选择器，id选择器

<body>
    <div class="box" style="backgroundcolor:red"></div>
    <button id="1">点击变蓝色</button>
    <button id="2">点击隐藏</button>
    <p>你看到不到我哈哈哈</p>
    <script src="min_jQuery.js"></script>
    <script>
        $(function(){
        //使用类选择器和id选择器
            $("#1").click(function(){  //点击使盒子变色
                $(".box").css('background-color','blue');
            });
         //使用类选择器和标签选择器
        	$("#2").click(function(){   //点击隐藏标题
				$("p").hide();
			});
        });
    </script>
</body>

交集选择器，并集选择器

<body>
    <div class="box" style="background-color:red"></div>
    <h3 class="title">这个标题会通过交集选择器隐藏</h3>
    <p>你看到不到我哈哈哈</p>
    <button id="1">点击隐藏</button>
    <script src="min_jQuery.js"></script>
    <script>
        $(function(){
        	$("#1").click(function(){   //点击隐藏盒子和标题
        	//并集选择器
				$("p,div").hide();
			//交集选择器
			    $("h3.title").hide();
			});
        });
    </script>
</body>

层级选择器

<body>
    <div class="box_a">
        <p class="start">序言</p>
        <div class="box_b">
            <p class="passage_1">第1段</p>
            <p class="passage_2">第2段</p>
            <p class="passage_3">第3段</p>
            <p class="passage_4">第4段</p>
            <p class="passage_5">第5段</p>
        </div>
    </div>
    <button id="btn">点击隐藏</button>
    <script src="min_jQuery.js"></script>
    <script>
        $(function(){
            $("#btn").click(function(){
            //隐藏第一子代的元素，不会隐藏第二子代的元素
                $(".box_a>.start").hide();  //隐藏类名为start的p标签
            //隐藏所有指定的元素，包括第二代子元素
                $(".box_a p").hide();      //隐藏所有p标签
            });
        });
    </script>
</body>

筛选选择器—奇偶数选择器

<body>
    <!--创建一个表格-->
    <table border="12">
        <tr>
            <th>英文</th>
            <th>中文</th>
        </tr>
        <tr>
            <td>condition</td>
            <td>结论，结束</td>
        </tr>
        <tr>
            <td>conduct</td>
            <td>引导，带领，指挥，传导</td>
        </tr>
        <tr>
            <td>confident</td>
            <td>有信心的，自信的</td>
        </tr>
        <tr>
            <td>confirm</td>
            <td>证实，确定</td>
        </tr>
    </table>
    <script src="min_jQuery.js"></script>
    <script>
        $(function(){
            //给偶数行加上背景色
            $("tr:even").css('background-color','skyblue');
            //给奇数行加上背景色
            $("tr:odd").css('background-color','darkorange');
        });
    </script>
</body>