当前位置:首页 > 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选择器获取元素,通过CSS选择器或jQuery特定选择器定位目标元素。常见选择器包括ID选择器(#id)、类选择器(.class)、标签选择器(tag)等。示例: $('#…

jquery事件

jquery事件

jQuery 事件基础 jQuery 提供了一套简化的事件处理机制,允许开发者通过简洁的语法绑定、触发和管理事件。核心方法包括 on()、off()、trigger() 等,支持常见事件(如点击、悬停…

jquery 库

jquery 库

jQuery 简介 jQuery 是一个快速、简洁的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。它兼容多种浏览器,提供易于使用的 API,适合快速开发前端…

jquery 控件

jquery 控件

jQuery 控件概述 jQuery 控件是基于 jQuery 库开发的交互式 UI 组件,用于增强网页功能。这些控件通常提供表单元素、数据展示、导航等功能,简化开发流程。 常用 jQuery 控件…

jquery 列表

jquery 列表

jQuery 列表操作 jQuery 提供了多种方法来操作 HTML 列表(如 <ul> 或 <ol>)。以下是一些常见的操作方式: 动态添加列表项 使用 append()…

jquery 分页

jquery 分页

实现 jQuery 分页的方法 客户端分页实现 使用 jQuery 实现客户端分页的核心思路是通过 JavaScript 控制数据的显示与隐藏。假设有一个包含数据的 HTML 列表或表格: // 分…