jquery查找元素

jQuery 查找元素的方法

jQuery 提供了多种灵活的方式来查找 DOM 元素，以下是常用的方法：

基本选择器

使用 CSS 选择器语法查找元素：

$('div')          // 查找所有 <div> 元素
$('.class-name')  // 查找 class 为 "class-name" 的元素
$('#id-name')     // 查找 id 为 "id-name" 的元素

层级选择器

通过层级关系查找元素：

$('parent > child')  // 直接子元素
$('ancestor descendant')  // 所有后代元素

属性选择器

根据元素属性查找：

$('[name="value"]')  // 属性等于 "value"
$('[name^="val"]')   // 属性以 "val" 开头
$('[name$="ue"]')    // 属性以 "ue" 结尾

过滤选择器

对结果集进行过滤：

$('li:first')       // 第一个 <li> 元素
$('li:last')        // 最后一个 <li> 元素
$('li:even')        // 偶数索引的 <li> 元素
$('li:odd')         // 奇数索引的 <li> 元素
$('input:checked')  // 选中的复选框/单选框

遍历方法

在已找到的元素基础上进一步查找：

$('ul').find('li')      // 查找 <ul> 下的所有 <li>
$('li').parent()        // 查找 <li> 的直接父元素
$('li').closest('div')  // 查找最近的 <div> 祖先
$('li').siblings()      // 查找所有兄弟元素

链式调用

jQuery 支持链式调用，可以连续查找和操作元素：

$('div').find('p').addClass('highlight').hide();

性能优化建议

1. 优先使用 ID 选择器，速度最快
2. 缓存重复使用的 jQuery 对象
3. 尽量缩小选择范围，避免全局选择

这些方法可以组合使用，满足各种 DOM 查询需求。