jquery 查找

jQuery 查找方法

jQuery 提供了多种方法来查找和选择 DOM 元素。这些方法基于 CSS 选择器、属性、内容或其他条件。

基本选择器

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

$('div') // 选择所有 div 元素
$('#myId') // 选择 ID 为 myId 的元素
$('.myClass') // 选择所有类名为 myClass 的元素

层次选择器

基于元素层级关系查找：

$('parent > child') // 选择 parent 的直接子元素 child
$('ancestor descendant') // 选择 ancestor 下的所有 descendant 元素
$('prev + next') // 选择紧跟在 prev 后的 next 元素
$('prev ~ siblings') // 选择 prev 之后的所有 siblings 元素

过滤选择器

对已选择的元素进一步筛选：

$('div:first') // 选择第一个 div 元素
$('div:last') // 选择最后一个 div 元素
$('div:even') // 选择偶数位置的 div 元素
$('div:odd') // 选择奇数位置的 div 元素
$('div:eq(2)') // 选择索引为 2 的 div 元素
$('div:gt(2)') // 选择索引大于 2 的 div 元素
$('div:lt(2)') // 选择索引小于 2 的 div 元素

内容过滤选择器

基于元素内容进行选择：

$('div:contains("text")') // 选择包含文本 "text" 的 div 元素
$('div:empty') // 选择没有子元素的 div 元素
$('div:has(p)') // 选择包含 p 元素的 div 元素

属性选择器

基于元素属性进行选择：

$('div[attribute]') // 选择具有 attribute 属性的 div 元素
$('div[attribute="value"]') // 选择 attribute 属性值为 "value" 的 div 元素
$('div[attribute!="value"]') // 选择 attribute 属性值不为 "value" 的 div 元素
$('div[attribute^="value"]') // 选择 attribute 属性值以 "value" 开头的 div 元素
$('div[attribute$="value"]') // 选择 attribute 属性值以 "value" 结尾的 div 元素
$('div[attribute*="value"]') // 选择 attribute 属性值包含 "value" 的 div 元素

表单选择器

针对表单元素的专用选择器：

$(':input') // 选择所有 input、textarea、select 和 button 元素
$(':text') // 选择所有 type="text" 的 input 元素
$(':password') // 选择所有 type="password" 的 input 元素
$(':radio') // 选择所有 type="radio" 的 input 元素
$(':checkbox') // 选择所有 type="checkbox" 的 input 元素
$(':submit') // 选择所有 type="submit" 的 input 元素
$(':image') // 选择所有 type="image" 的 input 元素
$(':reset') // 选择所有 type="reset" 的 input 元素
$(':button') // 选择所有 type="button" 的 input 和 button 元素
$(':file') // 选择所有 type="file" 的 input 元素
$(':hidden') // 选择所有 hidden 的 input 元素

遍历方法

对已选择的元素集合进行遍历和筛选：

$('div').find('span') // 在 div 元素内查找所有 span 元素
$('div').children() // 获取 div 的所有直接子元素
$('div').parent() // 获取 div 的直接父元素
$('div').parents() // 获取 div 的所有祖先元素
$('div').siblings() // 获取 div 的所有兄弟元素
$('div').next() // 获取 div 的下一个兄弟元素
$('div').prev() // 获取 div 的上一个兄弟元素
$('div').filter('.myClass') // 从 div 集合中筛选出类名为 myClass 的元素
$('div').not('.myClass') // 从 div 集合中排除类名为 myClass 的元素
$('div').has('p') // 从 div 集合中筛选出包含 p 元素的 div
$('div').eq(2) // 获取 div 集合中索引为 2 的元素
$('div').first() // 获取 div 集合中的第一个元素
$('div').last() // 获取 div 集合中的最后一个元素

链式操作

jQuery 支持链式调用，可以连续应用多个方法：

$('div').find('p').addClass('highlight').css('color', 'red')