当前位置：首页 > jquery

jquery选择器大全

2026-03-17 09:31:22jquery

jQuery 选择器分类与示例

基本选择器

$("#id")：通过ID选择元素，如 $("#header")。
$(".class")：通过类名选择元素，如 $(".btn")。
$("element")：通过标签名选择元素，如 $("div")。
$("*")：选择所有元素。

层次选择器

$("parent > child")：选择直接子元素，如 $("ul > li")。
$("ancestor descendant")：选择后代元素，如 $("div p")。
$("prev + next")：选择相邻的下一个兄弟元素，如 $("h1 + p")。
$("prev ~ siblings")：选择所有后续兄弟元素，如 $("h1 ~ p")。

属性选择器

$("[attr]")：选择包含指定属性的元素，如 $("[href]")。
$("[attr='value']")：选择属性值等于指定值的元素，如 $("[type='text']")。
$("[attr^='value']")：选择属性值以指定字符串开头的元素，如 $("[href^='https']")。
$("[attr$='value']")：选择属性值以指定字符串结尾的元素，如 $("[src$='.jpg']")。

表单选择器

$(":input")：选择所有表单元素（input、textarea、select等）。
$(":text")：选择类型为 text 的 input 元素。
$(":checked")：选择被选中的复选框或单选按钮。
$(":selected")：选择被选中的下拉选项。

内容过滤选择器

$(":contains('text')")：选择包含指定文本的元素，如 $("p:contains('Hello')")。
$(":empty")：选择空元素（无子节点或文本）。
$(":has(selector)")：选择包含匹配子元素的父元素，如 $("div:has(p)")。

可见性选择器

$(":visible")：选择所有可见元素。
$(":hidden")：选择所有隐藏元素（包括 display:none 或 type="hidden"）。

子元素过滤选择器

$(":first-child")：选择第一个子元素。
$(":nth-child(n)")：选择第 n 个子元素，如 $("li:nth-child(2)")。

其他常用选择器

jquery选择器大全

$(":eq(index)")：选择指定索引位置的元素（从0开始），如 $("li:eq(1)")。
$(":not(selector)")：排除匹配选择器的元素，如 $("div:not(.box)")。

示例代码

// 选择类名为 "item" 的第一个元素并隐藏
$(".item:first").hide();

// 选择所有包含 "warning" 文本的 div 元素
$("div:contains('warning')").css("color", "red");

// 选择表单中所有禁用的输入框
$(":input:disabled").addClass("disabled");