当前位置:首页 > 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 提供了丰富的过滤选择器来筛选元素。

// 第一个元素
$('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 对象。

jquery获取元素

// 获取第一个匹配元素的 DOM 对象
$('#elementId')[0]

// 使用 get() 方法
$('#elementId').get(0)

// 遍历 jQuery 对象获取所有 DOM 元素
$('div').each(function() {
    console.log(this) // this 指向当前 DOM 元素
})

这些方法涵盖了 jQuery 获取元素的主要方式,可以根据具体需求选择合适的选择器或方法组合。

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

相关文章

vue实现选区插入元素

vue实现选区插入元素

实现选区插入元素的基本思路 在Vue中实现选区插入元素,核心是利用浏览器的Selection和Range API获取当前光标位置或选区,再动态插入DOM节点。以下是具体实现方法: 获取当前选区对象…

jquery作用

jquery作用

jQuery的作用概述 jQuery是一个快速、简洁的JavaScript库,主要用于简化HTML文档遍历、事件处理、动画设计和Ajax交互等操作。其核心目标是让开发者以更少的代码完成更多功能,同时解…

jquery 使用

jquery 使用

jQuery 基础使用 jQuery 是一个快速、简洁的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互的操作。以下是 jQuery 的基本使用方法。 引入…

jquery 上传

jquery 上传

jQuery 文件上传方法 使用 jQuery 实现文件上传可以通过多种方式完成,以下是常见的几种方法: 使用原生表单和 AJAX 创建一个包含文件输入的表单,并通过 jQuery 的 AJAX…

jquery 库

jquery 库

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

jquery vue

jquery vue

jQuery 与 Vue.js 的对比 jQuery 和 Vue.js 是两种不同的前端技术,适用于不同的开发场景。 jQuery 用途:主要用于 DOM 操作、事件处理和 AJAX 请求。…