当前位置:首页 > 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> 元素

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

jquery  选择器

$("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") // 选择所有可用的元素

内容过滤选择器

包含文本

jquery  选择器

$("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");

选择并禁用所有文本框

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

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

相关文章

jquery图片

jquery图片

jQuery 图片操作 jQuery 提供了多种方法来处理图片,包括加载、显示、隐藏、动画效果等。以下是一些常见的 jQuery 图片操作方法: 动态加载图片 使用 jQuery 的 attr()…

jquery实现

jquery实现

以下是关于jQuery实现的常见应用场景及方法,分为核心功能模块说明: DOM操作 使用$()选择器获取元素后,可通过链式调用方法操作DOM: $('#element').html('新内容').…

jquery数组

jquery数组

jQuery 数组操作 jQuery 提供了多种方法来操作数组或类数组对象(如 jQuery 对象集合)。以下是常见的数组操作方法: 遍历数组 使用 $.each() 方法可以遍历数组或对象: v…

jquery 显示

jquery 显示

jQuery 显示元素的方法 使用 jQuery 显示隐藏的元素可以通过多种方式实现,以下是几种常见的方法: 显示元素的基本方法 $("#element").show(); 这会直接将匹配的元素设置…

jquery 使用

jquery 使用

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

jquery删除

jquery删除

jQuery 删除元素的方法 使用 jQuery 删除 DOM 元素有多种方式,可以根据需求选择合适的方法。 remove() 方法remove() 方法会删除选中的元素及其子元素,同时移除元素上的…