jquery 选择器

jQuery 选择器基础

jQuery 选择器用于选取 HTML 元素，基于 CSS 选择器语法，并扩展了更多功能。通过选择器可以快速定位 DOM 元素并操作其属性、样式或内容。

基本语法：

$("selector")

常用选择器类型

元素选择器
通过标签名选择元素：

$("p") // 选择所有 <p> 元素

ID 选择器
通过元素的 id 属性选择：

$("#myId") // 选择 id="myId" 的元素

类选择器
通过元素的 class 属性选择：

$(".myClass") // 选择 class="myClass" 的所有元素

属性选择器
通过元素的属性选择：

$("[href]") // 选择所有带 href 属性的元素
$("[type='text']") // 选择 type="text" 的元素

复合选择器
组合多个条件：

$("div.myClass") // 选择 class="myClass" 的 <div> 元素
$("input[type='checkbox']") // 选择所有复选框

层级选择器

后代选择器
选择某元素内的所有匹配后代：

$("div p") // 选择 <div> 内所有 <p> 元素

子元素选择器
选择直接子元素：

$("ul > li") // 选择 <ul> 的直接子元素 <li>

相邻兄弟选择器
选择紧邻的下一个兄弟元素：

$("h1 + p") // 选择紧接在 <h1> 后的 <p> 元素

通用兄弟选择器
选择后续所有兄弟元素：

$("h1 ~ p") // 选择 <h1> 之后的所有同级 <p> 元素

过滤选择器

首尾元素过滤

$("p:first") // 选择第一个 <p> 元素
$("p:last") // 选择最后一个 <p> 元素

索引过滤

$("li:eq(2)") // 选择索引为 2 的 <li>（从 0 开始）
$("li:gt(2)") // 选择索引大于 2 的 <li>
$("li:lt(2)") // 选择索引小于 2 的 <li>

内容过滤

$("p:contains('text')") // 选择内容包含 "text" 的 <p>
$("td:empty") // 选择内容为空的 <td>

可见性过滤

$("div:hidden") // 选择隐藏的 <div>
$("div:visible") // 选择可见的 <div>

表单选择器

表单元素选择

$(":input") // 选择所有表单元素（input、textarea、select 等）
$(":text") // 选择 type="text" 的 <input>
$(":checkbox") // 选择所有复选框
$(":checked") // 选择所有被选中的复选框或单选按钮
$(":selected") // 选择所有被选中的 <option>

方法链式操作

jQuery 支持链式调用，通过选择器选取元素后可直接操作：

$("p").css("color", "red").hide().slideDown(1000);

性能优化建议

• 优先使用 ID 选择器（#id），效率最高。
• 避免过度嵌套选择器（如 $("div ul li a")），改用更具体的类或 ID。
• 缓存重复使用的选择器结果：

  const $elements = $(".myClass");
  $elements.hide();