标题
jQuery的几种选择器及实例详解
正文
jQuery是一款快速、简洁的JavaScript库，它能够简化HTML文档遍历、事件处理、动画设计和AJAX交互。其中，选择器是jQuery中一个重要的概念，用于匹配HTML元素，可以根据元素名、类名、ID、属性等进行选择。
基本选择器
- 元素选择器
可以通过元素名选取HTML元素，例如：
$(“p”); //选取所有<p>元素
- ID选择器
可以通过ID属性选取HTML元素，例如：
$(“#demo”); //选取id为demo的元素
- 类选择器
可以通过元素的class属性选取HTML元素，例如：
$(“.intro”); //选取所有class为intro的元素
- 属性选择器
可以通过元素的属性选取HTML元素，例如：
$(“[href]”); //选取所有带有href属性的元素
层级选择器
层级选择器可以选取父元素和子元素之间的关系。
- 后代选择器
选取第一层后代元素，例如：
$(“#parent p”); //选取id为parent的元素下所有<p>元素
- 子元素选择器
选取直接的子元素元素，例如：
$(“#parent > p”); //选取id为parent的元素下第一层子元素中所有<p>元素
过滤选择器
通过过滤来选择指定的元素。
- :first和:last选择器
选取第一个或者最后一个符合条件的元素，例如：
$(“p:first”); //选取第一个<p>元素
$(“p:last”); //选取最后一个<p>元素
- :even和:odd选择器
选取序号为偶数或奇数的元素，例如：
$(“ul li:even”); //选取ul元素下li元素序号为偶数的元素
$(“ul li:odd”); //选取ul元素下li元素序号为奇数的元素
- :eq选择器
选取序号为指定数字的元素，例如：
$(“ul li:eq(2)”); //选取ul元素下li元素序号为2的元素
示例说明
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<h2>示例1：使用ID选择器</h2>
<p id="demo">我是一个段落。</p>
<button type="button" onclick='$("#demo").hide()'>隐藏</button>
<button type="button" onclick='$("#demo").show()'>显示</button>
<h2>示例2：使用属性选择器</h2>
<p title="例如w3school，自由编程翻译的首选"><a href="https://www.w3school.com.cn/"> 我是一个链接</a></p>
<button type="button" onclick='$("[title]").hide()'>隐藏</button>
<button type="button" onclick='$("[title]").show()'>显示</button>
</body>
</html>
在上面的示例1中，我们通过ID选择器选取了一个段落元素，并提供两个按钮，一个可以将该元素隐藏起来，一个可以显示该元素。
在上面的示例2中，我们通过属性选择器选取所有带有title属性的元素，并提供两个按钮，一个可以将它们隐藏起来，一个可以显示它们。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery的几种选择器及实例详解 - Python技术站
微信扫一扫 
支付宝扫一扫 