当前位置：首页 > jquery

jquery的选择器

2026-04-08 02:06:21jquery

jQuery 选择器概述

jQuery 选择器基于 CSS 选择器语法，用于快速定位和操作 DOM 元素。通过选择器，可以高效地选取单个或多个元素，并对其添加事件、修改样式或内容。

基本选择器

ID 选择器
通过元素的 id 属性选取唯一元素，语法为 $("#id")。例如：

$("#header") // 选取 id="header" 的元素

类选择器
通过元素的 class 属性选取一组元素，语法为 $(".class")。例如：

$(".btn") // 选取所有 class="btn" 的元素

元素选择器
通过标签名选取元素，语法为 $("tag")。例如：

$("div") // 选取所有 <div> 元素

通配符选择器
选取所有元素，语法为 $("*")。例如：

$("*") // 选取页面所有元素

层级选择器

后代选择器
选取某元素内部的所有匹配后代，语法为 $("ancestor descendant")。例如：

jquery的选择器

$("ul li") // 选取所有 <ul> 内的 <li> 元素

子元素选择器
仅选取直接子元素，语法为 $("parent > child")。例如：

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

相邻兄弟选择器
选取紧邻的下一个兄弟元素，语法为 $("prev + next")。例如：

$("h1 + p") // 选取紧接在 <h1> 后的 <p>

通用兄弟选择器
选取所有后续兄弟元素，语法为 $("prev ~ siblings")。例如：

$("h1 ~ p") // 选取 <h1> 之后的所有同级 <p>

过滤选择器

基本过滤

jquery的选择器

:first：选取第一个匹配元素（如 $("p:first")）。
:last：选取最后一个匹配元素。
:even/:odd：选取偶数或奇数索引元素。
:eq(index)：选取指定索引的元素（如 $("li:eq(2)")）。

内容过滤

:contains(text)：选取包含指定文本的元素。
:empty：选取无子元素的元素。
:has(selector)：选取含有匹配子元素的元素。

可见性过滤

:visible：选取可见元素。
:hidden：选取隐藏元素（包括 display:none 或表单 type="hidden"）。

属性选择器

通过元素属性进行筛选：

[attr]：选取带有指定属性的元素（如 $("[href]")）。
[attr=value]：精确匹配属性值（如 $("[type='text']")）。
[attr!=value]：不匹配属性值。
[attr^=value]：属性值以指定字符串开头。
[attr$=value]：属性值以指定字符串结尾。
[attr*=value]：属性值包含指定字符串。

表单选择器

专为表单元素设计：

:input：选取所有 <input>、<textarea>、<select> 和 <button>。
:text/:password：选取文本或密码输入框。
:radio/:checkbox：选取单选或复选框。
:submit/:reset：选取提交或重置按钮。
:selected：选取被选中的 <option> 元素。
:disabled/:enabled：选取禁用或启用的表单元素。

示例代码

// 修改所有段落文本
$("p").text("Hello, jQuery!");

// 隐藏所有 class="note" 的元素
$(".note").hide();

// 为表单中所有文本输入框添加边框
$(":text").css("border", "1px solid red");

// 选取第一个 <div> 并添加点击事件
$("div:first").click(function() {
  alert("Div clicked!");
});