jquery选择器

jQuery 选择器基础

jQuery 选择器基于 CSS 选择器语法，用于快速定位 DOM 元素。通过 $() 或 jQuery() 函数调用，支持 ID、类、标签、属性等多种匹配方式。

基本选择器示例：

$("#header")          // ID 选择器
$(".menu-item")       // 类选择器
$("div")              // 标签选择器
$("input[type='text']") // 属性选择器

层次选择器

通过元素层级关系定位目标元素：

$("parent > child")    // 直接子元素
$("ancestor descendant") // 所有后代元素
$("prev + next")       // 相邻兄弟元素
$("prev ~ siblings")   // 后续所有兄弟元素

过滤选择器

基础过滤：

$("li:first")         // 第一个元素
$("li:last")          // 最后一个元素
$("li:even")          // 偶数索引元素
$("li:odd")           // 奇数索引元素
$("li:eq(2)")         // 索引等于2的元素

内容过滤：

$("div:contains('text')") // 包含指定文本
$("td:empty")          // 空元素
$("div:has(p)")        // 包含特定子元素的元素

表单选择器

专为表单元素设计的高效选择器：

$(":input")           // 所有输入控件
$(":text")            // 单行文本框
$(":checkbox")        // 复选框
$(":checked")         // 被选中的复选框/单选按钮
$(":selected")        // 被选中的下拉选项

方法链式操作

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

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

性能优化建议

避免过度使用通用选择器，优先使用 ID 或具体类名。缓存重复使用的选择器结果：

const $nav = $(".main-navigation"); // 缓存选择器
$nav.find("li").hide();

对于复杂查询，建议结合原生 querySelectorAll 或缩小搜索范围：

$("#container").find(".target"); // 优于直接使用 $(".target")