当前位置:首页 > jquery

jquery获取元素

2026-03-02 11:23:41jquery

jQuery 获取元素的方法

jQuery 提供了多种方法来选择和获取 DOM 元素,这些方法类似于 CSS 选择器的语法,但功能更强大。

基本选择器

使用 $()jQuery() 函数传入选择器字符串,可以获取匹配的元素集合。

// 通过 ID 选择元素
$('#elementId')

// 通过类名选择元素
$('.className')

// 通过标签名选择元素
$('div')

// 组合选择器
$('div.className')

层次选择器

jQuery 支持通过 DOM 层次关系选择元素。

// 后代选择器
$('parent child')

// 子元素选择器
$('parent > child')

// 相邻兄弟选择器
$('prev + next')

// 通用兄弟选择器
$('prev ~ siblings')

过滤选择器

jQuery 提供了丰富的过滤选择器来筛选元素。

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"]')

表单选择器

专门针对表单元素的选择器。

jquery获取元素

// 所有 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 获取元素的主要方式,可以根据具体需求选择合适的选择器或方法组合。

标签: 元素jquery
分享给朋友:

相关文章

jquery 之家

jquery 之家

jQuery 之家是一个专注于 jQuery 相关资源的中文网站,提供插件、教程、代码示例等内容。以下是相关信息整理: jQuery 之家网站内容 该网站通常包含以下资源: jQuery…

jquery页面

jquery页面

jQuery 页面操作指南 jQuery 是一个快速、简洁的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互的操作。以下是 jQuery 在页面中的常见使用方法…

jquery 添加

jquery 添加

jQuery 添加元素的方法 动态添加 HTML 内容 使用 append()、prepend()、after() 或 before() 方法可以在 DOM 中插入新元素。 // 在元素内部末尾…

jquery代码

jquery代码

以下是关于jQuery代码的常见用法和示例,涵盖基础操作、事件处理、DOM操作等核心功能: 基础语法 jQuery通过$()函数选择元素,支持CSS选择器语法: // 选择所有<p>…

jquery文件

jquery文件

jQuery文件获取与使用 jQuery是一个快速、简洁的JavaScript库,简化了HTML文档遍历、事件处理、动画和Ajax交互。以下是获取和使用jQuery文件的方法。 下载jQuery文件…

jquery 效果

jquery 效果

jQuery 是一个快速、简洁的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。jQuery 提供了丰富的效果(Effects)功能,可以轻松实现元素的动态显…