本文共 1967 字，大约阅读时间需要 6 分钟。
jQuery 的选择器是灵活且强大的工具，能够帮助开发者精准定位 DOM 元素。以下是常见的基本选择器类型：
ID选择器
使用# 符号开头，可以唯一标识一个元素。例如： $("#test") // 选取 id 为 "test" 的元素 类选择器
使用. 符号开头，匹配所有拥有指定类的元素。例如： $(".test") // 选取 class 为 "test" 的元素 元素选择器
使用元素名称，匹配页面中所有具有该名称的元素。例如：$("p") // 选取所有 元素
通用选择器
使用* 表示匹配所有元素： $("*") // 选取所有元素 组合选择器
将多个选择器用逗号分隔，返回所有匹配的元素。例如：$("selector1,selector2,selector3,...") // 合并多个选择器结果 层次选择器用于定位元素的子节点或同辈节点，常见的有以下类型：
直接子节点选择
使用> 符号，表示直接子节点。例如： $("a > b") // 选取 a 元素下的所有 b 子元素 后代选择
使用空格表示后代节点。例如：$("a b") // 选取 a 元素的所有 b 后代 相邻元素选择
使用+ 符号，表示紧接在某元素后面的相邻元素。例如： $("a + b") // 选取紧接在 a 元素后的下一个 b 元素 注意：若 b 元素与 a 元素不相邻，则无效。
同辈选择
使用~ 符号，表示同辈节点。例如： $("a~b") // 选取 a 元素后的所有 b 同辈 注意：jQuery 的 siblings() 方法可以选择任意同辈节点。
滚动选择
使用:next 和 :prev 方法，分别查找当前元素的下一个或上一个同辈节点。例如： $("a").nextAll("b:first") // 查找 a 元素之后的所有第一个 b 元素$("a").prevAll("b:first") // 查找 a 元素之前的所有第一个 b 元素 过滤选择器通过特定规则筛选 DOM 元素，使用 : 开头的选择器。
基本过滤
使用:visible 表示可见元素。例如： $(":visible") // 选取所有可见元素 内容过滤
使用:parent 和 :not(:empty) 来过滤元素内容。例如： $(":parent") // 选取所有元素的父节点$(":not(:empty)") // 过滤空白内容的元素 可见性过滤
结合可见性和层次选择器，例如：$("p:visible > span") // 选取所有可见的 p 元素的直接子节点 span 属性过滤
使用属性选择器结合过滤器，例如：$("[href='#']:visible" // 选取所有 href 属性为 # 的可见元素 子元素过滤
在子元素选择器前添加空格，例如：$(".one :nth-child(2)") // 选取类名为 one 的第二个子元素 表单对象过滤
使用表单属性如name 和 checked 进行过滤。例如： $("input[name='username']:visible" // 选取可见的用户名输入框 表单选择器是处理表单元素的常见用法，以下是一些常见示例：
表单元素选择
使用元素选择器结合属性选择器。例如：$("input, select") // 选取所有输入框和下拉框 表单值过滤
结合过滤器选择特定值的表单元素。例如：$("select option:selected" // 选取被选中的下拉框选项 表单事件过滤
使用 jQuery 的事件绑定方法结合选择器。例如：$("form input:visible").on("change", function() { // 表单输入发生变化时触发}); 选择器组合
可以将多个选择器组合在一起，返回多个匹配结果。例如：$("div, p, span") // 选取所有 div、p 和 span 元素 上下文选择
使用上下文限定选择范围。例如：$("body div") // 选取 body 元素内的所有 div 元素 动态选择
使用 jQuery 方法动态添加或移除选择器。例如：$("[data-type='btn']:eq(0).click(function() { // 处理点击事件}); jQuery 的选择器系统强大且灵活，能够帮助开发者高效定位和操作 DOM 元素。通过合理运用基本选择器、层次选择器、过滤选择器等，可以实现复杂的内容管理和动态交互功能。
转载地址：http://lnxwz.baihongyu.com/