📚系列文章—目录🔥
未完待续
目录
📌回顾上期
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> //引入jQuery <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script> </head> <style> /* div { width: 10rem; margin-bottom: 1rem; } */ </style> <body> <div>第一个div标签</div> </body> <script> //jquery $('div').hide(); </script> </html>上期讲到，编写了第一个jQuery程序，在上述代码中，使用$("div")来获取div元素，这种方式就是通过jQuery选择器来获取元素，语法为$("选择器")。在$()函数中传入的字符串“div”就是一个选择器。由于原生的JavaScript获取元素的方式很多，而且兼容性也不一致，jQuery为我们提供了更强大的选择器。
🎯jQuery选择器
- jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
- jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的CSS选择器，除此之外，它还有一些自定义的选择器。
🧩基本选择器
- jQuery的基本选择器和CSS选择器非常类似。
名称 用法 描述 id选择器 $("#id") 获取指定id的元素 全选选择器 $("*") 匹配所有元素 类选择器 $(".class") 获取同一类class的元素 标签选择器 $("div") 获取相同标签名的所有元素 并集选择器 $("div,p,li") 选取多个元素 交集选择器 $("li.current") 交集元素 - 通过代码进行理解
<div class="nav">类为nav的div</div> <script> console.log($(".nav")); </script>
索引为0的元素就是页面中的DOM对象，length属性表示匹配到符合条件的DOM对象个数，若没有匹配到合适的结果为0。其中，类选择器、标签选择器等可以获取多个元素，id选择器只能获取1个元素。
🧩层级选择器
- 层级选择器可以完成多层级元素之间的获取。
名称 用法 描述 子代选择器 $("ul > li") $("ul > li")子代选择器获取子级元素（亲生关系） 后代选择器 $("ul li") $("ul li")后代选择器获取后代元素（有血缘关系） - 通过代码进行理解
<ul> <li>我是ul的li</li> <li>我是ul的li</li> </ul> <script> console.log($("ul li")); // 获取ul中的li </script>
🔗补充：jQuery隐式迭代
- 我们在使用jQuery选择器获取元素后，如果不考虑获取到的元素数量，直接对元素进行操作，则在元素操作时会发生隐式迭代（遍历内部DOM元素（伪数组形式存储）的过程）。所以，隐式迭代就是指，当我们要操作的元素实际不止一个的时候，jQuery会自动对所有的元素进行操作。
- 具体内容请移步关于jQuery隐式迭代进行学习了解
🧩筛选选择器
- 筛选选择器用来筛选元素，通常和别的选择器搭配使用。
名称 用法 描述 :first $("li:first") $("li:first")获取第一个li元素 :last $("li:last") $("li:last")获取最后一个li元素 :eq(index) $("li:eq(2)") $("li:eq(2)")获取li元素，选择索引为2的元素 :odd $("li:odd") $("li:odd")获取li元素，选择索引为奇数的元素 :even $("li:even") $("li:even")获取li元素，选择索引为偶数的元素 - 通过代码进行理解
<ul> <li>我是第1个li，索引为0</li> <li>我是第2个li，索引为1</li> <li>我是第3个li，索引为2</li> <li>我是第3个li，索引为2</li> <li>我是第4个li，索引为3</li> <li>我是第5个li，索引为4</li> </ul> <script> $("ul li:first").hide(); $("ul li:eq(2)").hide(); </script>
通过筛选选择器，$("ul li:first").hide()将ul中第一个li隐藏了，$("ul li:eq(2)").hide()将ul中索引为2的li（对应是第三个li）隐藏了
🔗补充：筛选方法
- 在实际开发中，有时候需要对一个已经用选择器获取到的集合进行筛选，这个时候可以选择使用筛选方法。
🧩其他选择器
- jQuery中的选择器非常多，对于初学者来说，并没有必要全部掌握，只记住常用的选择器即可。当需要使用其他不熟悉的选择器时，可以通过查阅文档查看具体的解释。
1️⃣获取同级元素
- 使用“+”或“~”可以获取同级元素。
选择器 功能描述 示例 prev + next 获取当前元素紧邻的下一个同级元素 $("div + .title")获取紧邻<div>的下一个class名为title的兄弟节点 prev ~ siblings 获取当前元素后的所有同级元素 $(".bar ~ li")获取class名为bar的元素后的所有同级元素节点<li> 2️⃣筛选元素
- 在jQuery中还有一些选择器可以筛选元素。
选择器 功能描述 示例 :gt(index) 获取索引大于index的元素 $("li:gt(3)")获取索引大于3的所有<li>元素 :lt(index) 获取索引小于index的元素 $("li:lt(3)")获取索引小于3的所有<li>元素 :not(seletor) 获取除指定的选择器外的其他元素 $("li:not(li:eq(3))")获取除索引为3外的所有<li>元素 :focus 匹配当前获取焦点的元素 $("input:focus")匹配当前获取焦点的<input>元素 :animated 匹配所有正在执行动画效果的元素 $("div:not(:animated)")匹配当前没有执行动画的<div>元素 :target 选择由文档URI的格式化识别码表示的目标元素 若URI为 http://example.com/#foo，则$("div:target")将获取<div id="foo">元素:contains(text) 获取内容包含text文本的元素 $("li:contains('js')")获取内容中含“js”的<li>元素 :empty 获取内容为空的元素 $("li:empty")获取内容为空的<li>元素 :has(selector) 获取内容包含指定选择器的元素 $("li:has('a')")获取内容中含<a>元素的所有<li>元素 :parent 选取带有子元素或包含文本的元素 $("li:parent")选取带有子元素或包含文本的li元素 :hidden 获取所有隐藏元素 $("li:hidden")获取所有隐藏的<li>元素 :visible 获取所有可见元素 $("li:visible")获取所有可见的<li>元素 3️⃣属性选择器
- jQuery中还提供了根据元素的属性获取指定元素的方式。例如，含有class属性值为current的<div>元素。
选择器 功能描述 示例 [attr] 获取具有指定属性的元素 $("div[class]")获取含有class属性的所有<div>元素 [attr=value] 获取属性值等于value的元素 $("div[class='current']")获取class等于current的所有<div>元素 [attr!=value] 获取属性值不等于value的元素 $("div[class!='current']")获取class不等于current的所有<div>元素 [attr^=value] 获取属性值以value开始的元素 $("div[class^='box']")获取class属性值以box开始的所有<div>元素 [attr$=value] 获取属性值以value结尾的元素 $("div[class$='er']")获取class属性值以er结尾的所有<div>元素 [attr*=value] 获取属性值包含value的元素 $("div[class*='-']")获取class属性值中含有“-”符号的所有<div>元素 [attr~=value] 获取元素的属性值包含一个value，以空格分隔 $("div[class~='box']")获取class属性值等于“box”或通过空格分隔并含有box的<div>元素，如“t box” [attr1][attr2]...[attrN] 获取同时拥有多个属性的元素 $("input[id][name$='usr']")获取同时含有id属性和属性值以usr结尾的name属性的<input>元素 4️⃣子元素选择器
- 利用子元素选择器可以对子元素进行筛选。
选择器 功能描述 :nth-child(index/even/odd/公式) 索引index默认从1开始，匹配指定index索引、偶数、奇数、或符合指定公式（如2n，n默认从0开始）的子元素 :first-child 获取第一个子元素 :last-child 获取最后一个子元素 :only-child 如果当前元素是唯一的子元素，则匹配 :nth-last-child(index/even/odd/公式) 选择所有它们父元素的第n个子元素。计数从最后一个元素开始到第一个 :nth-of-type(index/even/odd/公式)) 选择同属于一个父元素之下，并且标签名相同的子元素中的第n个子元素 :first-of-type 选择所有相同的元素名称的第一个子元素 :last-of-type 选择所有相同的元素名称的最后一个子元素 :only-of-type 选择所有没有兄弟元素，且具有相同的元素名称的元素 :nth-last-of-type(index/even/odd/公式) 选择属于父元素的特定类型的第n个子元素，计数从最后一个元素到第一个 5️⃣表单选择器
- jQuery还提供了针对表单元素的选择器，用来方便表单开发。
选择器 功能描述 :input 获取页面中的所有表单元素，包含<select>以及<textarea>元素 :text 选取页面中的所有文本框 :password 选取所有的密码框 :radio 选取所有的单选按钮 :checkbox 选取所有的复选框 :submit 获取submit提交按钮 :reset 获取reset重置按钮 :image 获取type="image"的图像域 :button 获取button按钮，包括<button></button>和type="button" :file 获取type="file"的文件域 :hidden 获取隐藏表单项 :enabled 获取所有可用表单元素 :disabled 获取所有不可用表单元素 :checked 获取所有选中的表单元素，主要针对radio和checkbox :selected 获取所有选中的表单元素，主要针对select - 需要注意的是，$("input")与$(":input")虽然都可以获取表单项，但是它们表达的含义有一定的区别，前者仅能获取表单标签是<input>的控件，后者则可以同时获取页面中所有的表单控件，包括表单标签是<select>以及<textarea>的控件。
📚持续更新🔥
本文含有隐藏内容，请 开通VIP 后查看