jquery 选择

jQuery 选择器基础

jQuery 选择器基于 CSS 选择器语法，用于快速定位和操作 DOM 元素。核心语法为 $() 或 jQuery()，括号内传入选择器表达式。

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

// 选择 ID 为 "main" 的元素
$("#main")

// 选择 class 为 "active" 的元素
$(".active")

常用选择器类型

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

$("div") // 所有 <div> 元素

ID 选择器
通过 # 前缀选择唯一元素：

$("#header") // ID 为 "header" 的元素

类选择器
通过 . 前缀选择一类元素：

$(".btn") // class 包含 "btn" 的所有元素

属性选择器
通过属性条件筛选：

$("[type='text']") // 所有 type="text" 的元素
$("a[target='_blank']") // 所有 target="_blank" 的链接

组合与层级选择器

多条件组合
用逗号分隔多个选择器：

$("h1, h2, h3") // 所有 h1、h2、h3 标题

层级关系
空格表示后代，> 表示子元素：

$("ul li") // ul 下的所有 li（包括嵌套）
$("ul > li") // 仅 ul 的直接子 li

过滤选择器

基本过滤
通过位置或状态筛选：

$("li:first") // 第一个 li
$("tr:odd") // 奇数行（索引从 0 开始）
$("input:checked") // 所有被选中的复选框/单选按钮

内容过滤
根据文本或子元素匹配：

$("div:contains('Hello')") // 包含 "Hello" 文本的 div
$("ul:has(li.active)") // 包含 class="active" 的 li 的 ul

表单相关选择器

针对表单元素的快捷选择：

$(":input") // 所有 input、textarea、select 等表单元素
$(":text") // 所有 type="text" 的 input
$(":submit") // 所有提交按钮

方法链式操作

选择器通常与 jQuery 方法链式调用：

$(".btn")
  .css("color", "red")
  .on("click", function() {
    alert("Clicked!");
  });

性能优化建议

避免过度使用复杂选择器，优先使用 ID 或 class。缓存重复使用的选择结果：

const $buttons = $(".btn"); // 缓存选择结果
$buttons.hide();

通过灵活组合选择器，可以高效实现 DOM 查询与操作。