当前位置:首页 > jquery

jquery 选择器

2026-03-17 13:11:37jquery

jQuery 选择器基础

jQuery 选择器用于查找和选择 HTML 元素,基于元素的名称、ID、类、属性、值等。语法类似于 CSS 选择器,但功能更强大。

基本语法:

$("selector")

常见选择器类型

元素选择器 通过 HTML 元素名称选择元素。

$("p") // 选择所有 <p> 元素

ID 选择器 通过元素的 ID 属性选择元素。

$("#myId") // 选择 ID 为 "myId" 的元素

类选择器 通过元素的类属性选择元素。

$(".myClass") // 选择所有类为 "myClass" 的元素

属性选择器 通过元素的属性选择元素。

$("[href]") // 选择所有带有 href 属性的元素
$("[href='example.com']") // 选择 href 属性值为 "example.com" 的元素

复合选择器 组合多个选择器以更精确地选择元素。

$("p.myClass") // 选择类为 "myClass" 的 <p> 元素

层次选择器

后代选择器 选择指定元素的所有后代元素。

$("div p") // 选择 <div> 内的所有 <p> 元素

子元素选择器 选择指定元素的直接子元素。

$("div > p") // 选择 <div> 的直接子元素 <p>

相邻兄弟选择器 选择紧接在指定元素后的兄弟元素。

$("div + p") // 选择紧接在 <div> 后的 <p> 元素

通用兄弟选择器 选择指定元素之后的所有兄弟元素。

$("div ~ p") // 选择 <div> 之后的所有 <p> 兄弟元素

过滤选择器

首尾过滤

$("p:first") // 选择第一个 <p> 元素
$("p:last") // 选择最后一个 <p> 元素

偶数/奇数过滤

$("tr:even") // 选择偶数位置的 <tr> 元素
$("tr:odd") // 选择奇数位置的 <tr> 元素

索引过滤

$("p:eq(2)") // 选择索引为 2 的 <p> 元素(从 0 开始)
$("p:gt(2)") // 选择索引大于 2 的 <p> 元素
$("p:lt(2)") // 选择索引小于 2 的 <p> 元素

表单选择器

输入类型选择器

$(":input") // 选择所有输入元素
$(":text") // 选择所有文本输入框
$(":password") // 选择所有密码输入框
$(":checkbox") // 选择所有复选框
$(":radio") // 选择所有单选按钮

表单状态选择器

$(":checked") // 选择所有被选中的复选框或单选按钮
$(":selected") // 选择所有被选中的下拉选项
$(":disabled") // 选择所有被禁用的元素
$(":enabled") // 选择所有可用的元素

内容过滤选择器

包含文本

$("p:contains('text')") // 选择包含 "text" 的 <p> 元素

空元素

$("p:empty") // 选择空的 <p> 元素

父元素

$("p:parent") // 选择有子元素的 <p> 元素

可见性选择器

$("p:hidden") // 选择隐藏的 <p> 元素
$("p:visible") // 选择可见的 <p> 元素

示例代码

选择并隐藏所有类为 "hideMe" 的元素

$(".hideMe").hide();

选择并修改所有

元素的文本

$("p").text("新的文本内容");

选择并高亮表格中的偶数行

$("tr:even").css("background-color", "#f2f2f2");

选择并禁用所有文本框

jquery  选择器

$(":text").prop("disabled", true);

标签: 选择器jquery
分享给朋友:

相关文章

jquery实现vue

jquery实现vue

jQuery 和 Vue.js 是两种不同理念的前端工具,jQuery 以 DOM 操作和事件驱动为核心,而 Vue.js 是数据驱动的现代化框架。如果想用 jQuery 实现类似 Vue 的功能(如…

jquery实现vue

jquery实现vue

jQuery 和 Vue.js 是两种不同理念的前端工具,前者基于 DOM 操作,后者基于数据驱动。虽然 Vue 可以替代 jQuery 的大部分功能,但若需在 Vue 中临时集成 jQuery 或模…

jquery 滑块

jquery 滑块

jQuery 滑块实现方法 使用 jQuery 实现滑块功能可以通过多种方式完成,包括使用原生 jQuery 或结合插件(如 jQuery UI)。以下是几种常见实现方法: 使用 jQuery UI…

jquery 获取

jquery 获取

jQuery 获取元素的方法 jQuery 提供了多种方法来获取 DOM 元素,以下是常用的几种方式: 通过 ID 获取元素 使用 $("#id") 可以获取指定 ID 的元素。例如: $("#m…

jquery添加

jquery添加

jQuery 添加元素的方法 在jQuery中,添加元素到DOM有多种方式,可以根据需求选择合适的方法。 append() 将内容插入到选定元素的内部末尾处。 $("#container").ap…

jquery 方法

jquery 方法

jQuery 是一个快速、简洁的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。以下是一些常用的 jQuery 方法及其用途: 选择器方法 $("selec…