jQuery选择器详解：从基础到高级

的直接子元素child 单个或多个元素 $(“ul>li”) 子元素,选取<ul>下的直接<li>元素 $(“prev + next”) 选取紧跟在prev元素后的next元素 单个元素 $(“h1 + p”) 相邻元素,选取紧跟在<h1>后面的<p>元素 $(“prev ~ siblings”) 选取跟prev有相同父元素的所有siblings元素 集合元素 $(“img ~ div”) 同辈元素,选取与<img>在同一层级的所有<div>元素 过滤选择器 3.1、基本过滤选着器 - :first 选取匹配的第一个元素 单个元素 $(“p:first”) 选取第一个<p>元素 - :last 选取匹配的最后一个元素 单个元素 $(“div:last”) 选取最后一个<div>元素 - :even 选取索引为偶数的元素 集合元素 $(“tr:even”) 选取表格行中的偶数行 - :odd 选取索引为奇数的元素 集合元素 $(“tr:odd”) 选取表格行中的奇数行 3.2、内容过滤器 - :contains(text) 选取包含指定文本的元素 集合元素 $(“p:contains(‘jQuery’)”) 选取包含文本'jQuery'的<p>元素 - :empty 选取没有子元素（包括文本节点）的元素 集合元素 $(“div:empty”) 选取没有内容的<div>元素 3.3、可见性过滤选择器 - :visible 选取可见的元素 集合元素 $(“input:visible”) 选取所有可见的<input>元素 - :hidden 选取隐藏的元素 集合元素 $(“p:hidden”) 选取所有隐藏的<p>元素 3.4、属性过滤选择器 - [attribute] 选取具有指定属性的元素 集合元素 $(“a[rel=‘external’]”) 选取所有rel属性为'external'的<a>元素 - [attribute=value] 选取具有指定属性且值相等的元素 单个或多个元素 $(“input[type=text]”) 选取所有type属性为'text'的<input>元素 3.5、子元素过滤选择器 - :nth-child(n) 选取父元素的第n个子元素 单个元素 $(“li:nth-child(3)”) 选取<ul>中第三个<li>元素 - :nth-of-type(n) 选取父元素中指定类型的第n个子元素 单个元素 $(“div:nth-of-type(2)”) 选取父元素中第二个<div>元素 3.6、表单对象过滤器 - :input 选取所有表单元素 集合元素 $(“:input”) 选取所有<input>,<textarea>,<select>和<button>元素 - :checked 选取被选中的表单元素 集合元素 $(“input:checked”) 选取所有被选中的<input>元素 表单选择器 - :selected 选取被选中的选项 单个或多个元素 $(“option:selected”) 选取所有选中的<option>元素 - :disabled 选取被禁用的元素 集合元素 $(“input:disabled”) 选取所有被禁用的<input>元素 总结，jQuery选择器是其强大功能的核心，它提供了丰富的选择方式，使开发者能更高效地定位DOM元素。基本选择器用于按ID、类和标签名选取元素，层次选择器则通过元素间的层次关系来选取，过滤选择器进一步细化了选取条件，如内容、可见性、属性、子元素以及表单对象属性等，而表单选择器则专门针对表单元素的选取。熟练掌握这些选择器，将极大提升前端开发的效率和代码的可读性。