jQuery 选择器用于快速定位和操作 HTML 元素。它们基于 CSS 选择器，并扩展了许多自定义功能，使得元素的选择和操作更加简便。

基本选择器：

  • 元素选择器： 选取指定类型的所有元素。
  $("p"); // 选取所有 <p> 元素
  • ID 选择器： 选取具有特定 ID 的元素。
  $("#elementId"); // 选取 id="elementId" 的元素
  • 类选择器： 选取具有特定类的所有元素。
  $(".className"); // 选取 class="className" 的所有元素
  • 通配符选择器： 选取所有元素。
  $("*"); // 选取所有元素
  • 组合选择器： 同时选取多种元素。
  $("p, div, span"); // 选取所有 <p>、<div> 和 <span> 元素

属性选择器：

  • 存在属性选择器： 选取具有特定属性的元素。
  $("[href]"); // 选取所有具有 href 属性的元素
  • 属性值选择器： 选取具有特定属性值的元素。
  $("[type='text']"); // 选取所有 type="text" 的元素
  • 属性值包含选择器： 选取属性值包含特定子字符串的元素。
  $("[href*='example']"); // 选取所有 href 属性值包含 'example' 的元素

层次选择器：

  • 子元素选择器： 选取指定父元素下的直接子元素。
  $("ul > li"); // 选取所有 <ul> 下的直接 <li> 子元素
  • 后代元素选择器： 选取指定父元素下的所有后代元素。
  $("div p"); // 选取所有 <div> 下的 <p> 元素
  • 相邻兄弟元素选择器： 选取紧接在指定元素后的兄弟元素。
  $("h1 + p"); // 选取紧接在 <h1> 后的第一个 <p> 元素
  • 兄弟元素选择器： 选取指定元素后的所有兄弟元素。
  $("h1 ~ p"); // 选取所有在 <h1> 后的 <p> 元素

过滤选择器：

  • 第一个元素选择器： 选取匹配元素中的第一个。
  $("p:first"); // 选取第一个 <p> 元素
  • 最后一个元素选择器： 选取匹配元素中的最后一个。
  $("p:last"); // 选取最后一个 <p> 元素
  • 偶数元素选择器： 选取匹配元素中的偶数索引元素。
  $("li:even"); // 选取所有偶数索引的 <li> 元素
  • 奇数元素选择器： 选取匹配元素中的奇数索引元素。
  $("li:odd"); // 选取所有奇数索引的 <li> 元素
  • 索引元素选择器： 选取匹配元素中的特定索引元素。
  $("li:eq(2)"); // 选取索引为 2 的 <li> 元素（从 0 开始计数）
  • 包含文本的元素选择器： 选取包含特定文本的元素。
  $("p:contains('示例')"); // 选取包含文本 '示例' 的所有 <p> 元素
  • 被选中元素选择器： 选取被选中的元素。
  $("input:checked"); // 选取所有被选中的 <input> 元素（如复选框或单选框）
  • 被禁用元素选择器： 选取被禁用的元素。
  $("input:disabled"); // 选取所有被禁用的 <input> 元素
  • 被启用元素选择器： 选取被启用的元素。
  $("input:enabled"); // 选取所有被启用的 <input> 元素
  • 被选中或被禁用元素选择器： 选取被选中或被禁用的元素。