jquery > 选择器

jQuery 选择器基本语法

jQuery 选择器基于 CSS 选择器语法扩展，通过 $() 或 jQuery() 函数选取 DOM 元素。基本格式为：

$("selector")

基础选择器类型

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

$("#elementId")

类选择器
选取所有指定类名的元素：

$(".className")

元素选择器
选取指定标签名的所有元素：

$("div")

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

$("[name='username']")  // 属性等于
$("[href^='https']")    // 属性以 https 开头

组合与层级选择器

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

$("div, p, .class")

后代选择器
空格表示层级关系：

$("ul li")  // 所有 ul 下的 li

子元素选择器
> 表示直接子元素：

$("div > p")  // div 的直接子 p 元素

过滤选择器

位置过滤
通过索引或位置筛选：

$("li:first")    // 第一个 li
$("li:eq(2)")    // 索引为 2 的 li
$("li:even")     // 偶数索引元素

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

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

可见性过滤

$("div:hidden")   // 隐藏的 div
$("div:visible")  // 可见的 div

表单相关选择器

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

$(":input")      // 所有 input/textarea/select/button
$(":text")       // type="text" 的 input
$(":checkbox")   // 复选框
$(":checked")    // 被选中的复选框或单选按钮

动态过滤方法

jQuery 提供链式过滤方法：

$("div").filter(".active")   // 筛选类为 active 的 div
$("div").not(".exclude")     // 排除类为 exclude 的 div
$("div").find("span")        // 查找子元素中的 span

性能优化建议

1. 尽量使用 ID 选择器，效率最高。
2. 避免过度复杂的层级选择，如 $("body div ul li a")。
3. 缓存重复使用的选择器结果：

   var $elements = $(".items");