jquery选择

jQuery选择器基础

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

基本选择器

ID选择器
通过元素的id属性匹配，返回单个元素：

$("#elementId")

类选择器
通过class属性匹配，返回所有符合条件的元素：

$(".className")

标签选择器
通过标签名匹配，如选择所有<div>：

$("div")

层级选择器

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

$("parent child")

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

$("parent > child")

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

$("prev + next")

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

$("prev ~ siblings")

属性选择器

匹配属性存在
选择带有指定属性的元素：

$("[attribute]")

精确匹配属性值
属性值完全等于指定内容：

$("[attribute='value']")

包含子字符串
属性值包含指定字符串：

$("[attribute*='value']")

过滤选择器

首尾元素
选择第一个或最后一个匹配元素：

$("li:first")
$("li:last")

偶数/奇数行
常用于表格隔行变色：

$("tr:even")
$("tr:odd")

排除元素
排除符合条件的选择：

$("div:not(.exclude)")

表单选择器

输入元素
匹配所有表单输入字段：

$(":input")

特定类型
匹配特定类型的表单元素：

$(":text")    // 文本框
$(":checkbox") // 复选框
$(":radio")    // 单选按钮

选中状态
匹配已选中的复选框或单选按钮：

$(":checked")

动态过滤方法

find()
在当前结果集中进一步查找：

$("ul").find("li.active")

filter()
根据条件筛选当前集合：

$("div").filter(".important")

not()
排除匹配项：

$("p").not(".footer")

性能优化建议

优先使用ID选择器，其速度最快。减少层级嵌套，缓存重复使用的选择结果：

var $elements = $(".container .item");

避免过度使用通用选择器*，可能引发性能问题。对于复杂选择，可拆分为多步操作。