jquery获取元素
jQuery 获取元素的方法
jQuery 提供了多种方法来选择和获取 DOM 元素,这些方法类似于 CSS 选择器的语法,但功能更强大。
基本选择器
使用 $() 或 jQuery() 函数传入选择器字符串,可以获取匹配的元素集合。
// 通过 ID 选择元素
$('#elementId')
// 通过类名选择元素
$('.className')
// 通过标签名选择元素
$('div')
// 组合选择器
$('div.className')
层次选择器
jQuery 支持通过 DOM 层次关系选择元素。
// 后代选择器
$('parent child')
// 子元素选择器
$('parent > child')
// 相邻兄弟选择器
$('prev + next')
// 通用兄弟选择器
$('prev ~ siblings')
过滤选择器
jQuery 提供了丰富的过滤选择器来筛选元素。

// 第一个元素
$('li:first')
// 最后一个元素
$('li:last')
// 偶数索引元素
$('tr:even')
// 奇数索引元素
$('tr:odd')
// 索引等于 n 的元素
$('tr:eq(n)')
// 索引大于 n 的元素
$('tr:gt(n)')
// 索引小于 n 的元素
$('tr:lt(n)')
内容过滤选择器
根据元素内容进行过滤选择。
// 包含指定文本的元素
$('div:contains("text")')
// 空元素
$('td:empty')
// 包含子元素或文本的元素
$('td:parent')
属性选择器
通过元素的属性值来选择元素。
// 具有指定属性的元素
$('div[attribute]')
// 属性值等于指定值的元素
$('div[attribute="value"]')
// 属性值不等于指定值的元素
$('div[attribute!="value"]')
// 属性值以指定字符串开头的元素
$('div[attribute^="value"]')
// 属性值以指定字符串结尾的元素
$('div[attribute$="value"]')
// 属性值包含指定字符串的元素
$('div[attribute*="value"]')
表单选择器
专门针对表单元素的选择器。

// 所有 input 元素
$(':input')
// 文本框
$(':text')
// 密码框
$(':password')
// 单选按钮
$(':radio')
// 复选框
$(':checkbox')
// 提交按钮
$(':submit')
// 图像按钮
$(':image')
// 重置按钮
$(':reset')
// 文件上传
$(':file')
// 按钮
$(':button')
// 选中状态的元素
$(':checked')
// 选中状态的下拉列表
$(':selected')
遍历方法
获取元素后,可以使用 jQuery 的遍历方法进一步筛选。
// 查找后代元素
$('ul').find('li')
// 查找直接子元素
$('ul').children('li')
// 查找父元素
$('li').parent()
// 查找所有祖先元素
$('li').parents()
// 查找兄弟元素
$('li').siblings()
// 过滤元素集合
$('li').filter('.special')
// 排除元素
$('li').not('.exclude')
链式操作
jQuery 支持链式操作,可以连续调用多个方法。
$('div').addClass('highlight').css('color', 'red').fadeOut(1000)
获取原生 DOM 元素
有时需要获取原生 DOM 元素而不是 jQuery 对象。
// 获取第一个匹配元素的 DOM 对象
$('#elementId')[0]
// 使用 get() 方法
$('#elementId').get(0)
// 遍历 jQuery 对象获取所有 DOM 元素
$('div').each(function() {
console.log(this) // this 指向当前 DOM 元素
})
这些方法涵盖了 jQuery 获取元素的主要方式,可以根据具体需求选择合适的选择器或方法组合。






