jquery中的选择器
jQuery 选择器概述
jQuery 选择器基于 CSS 选择器语法，用于快速定位和操作 DOM 元素。通过 $() 或 jQuery() 函数调用，支持多种匹配模式。
基本选择器
- 元素选择器：通过标签名匹配元素。
$("div") // 选择所有 <div> 元素 - ID 选择器：通过
id属性匹配唯一元素。$("#header") // 选择 id="header" 的元素 - 类选择器：通过
class属性匹配元素。$(".active") // 选择 class="active" 的所有元素 - 通用选择器：匹配所有元素。
$("*") // 选择页面所有元素
层级选择器
- 后代选择器：匹配嵌套在指定元素内的所有后代。
$("ul li") // 选择所有 <ul> 内的 <li> - 子元素选择器：仅匹配直接子元素。
$("ul > li") // 选择 <ul> 的直接子级 <li> - 相邻兄弟选择器：匹配紧邻的下一个同级元素。
$("h1 + p") // 选择紧接 <h1> 后的 <p> - 通用兄弟选择器：匹配后续所有同级元素。
$("h1 ~ p") // 选择 <h1> 之后的所有同级 <p>
属性选择器
- 存在性匹配：选择包含指定属性的元素。
$("[data-id]") // 选择带有 data-id 属性的元素 - 精确匹配：属性值完全匹配。
$("[type='text']") // 选择 type="text" 的元素 - 前缀/后缀匹配：
$("[class^='btn-']") // 选择 class 以 "btn-" 开头的元素 $("[class$='-primary']") // 选择 class 以 "-primary" 结尾的元素 - 包含子串匹配：
$("[class*='error']") // 选择 class 包含 "error" 的元素
表单选择器
- 表单元素类型：
$(":input") // 选择所有 <input>, <textarea>, <select>, <button> $(":text") // 选择 type="text" 的 <input> $(":checkbox") // 选择所有复选框 - 表单状态：
$(":checked") // 选择被选中的复选框或单选按钮 $(":disabled") // 选择禁用的表单元素
过滤选择器
- 位置过滤：
$("li:first") // 选择第一个 <li> $("li:eq(2)") // 选择索引为 2 的 <li>（从 0 开始） - 内容过滤：
$("div:contains('Hello')") // 选择文本包含 "Hello" 的 <div> $("td:empty") // 选择空的 <td> 元素 - 可见性过滤：
$("div:hidden") // 选择隐藏的 <div> $("div:visible") // 选择可见的 <div>
方法链与筛选
选择器结果可通过方法进一步筛选：
$("li").filter(".active") // 从结果中筛选 class="active" 的 <li>
$("div").find("span") // 在 <div> 内查找所有 <span>性能优化建议
- 优先使用 ID 选择器（最快）和原生方法（如
document.getElementById()）。 - 避免过度使用通用选择器（
*）。 - 缓存选择器结果以减少重复查询：
const $elements = $(".items");
通过组合上述选择器，可高效定位目标元素并实现动态交互。
