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");

通过组合上述选择器，可高效定位目标元素并实现动态交互。