当前位置：首页 > jquery

jquery选择器有几种

2026-02-04 04:16:31jquery

jQuery选择器类型

jQuery选择器允许开发者通过多种方式选取DOM元素，主要分为以下几类：

基本选择器

$("#id")：通过元素的id属性选取，如$("#header")。
$(".class")：通过元素的class属性选取，如$(".btn")。
$("element")：通过标签名选取，如$("div")。
$("*")：选取所有元素。
多选组合：$("div, p, .class")可同时选取多种元素。

层次选择器

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

过滤选择器

:first、:last：选取第一个或最后一个匹配元素，如$("p:first")。
:even、:odd：选取偶数或奇数索引元素（从0开始）。
:eq(n)、:gt(n)、:lt(n)：选取等于、大于或小于索引n的元素。
:not(selector)：排除匹配选择器的元素，如$("input:not(:checked)")。

内容过滤选择器

:contains(text)：选取包含指定文本的元素，如$("p:contains('Hello')")。
:empty、:parent：选取无子元素或有子元素的元素。
:has(selector)：选取含有匹配选择器的子元素的元素，如$("div:has(p)")。

属性选择器

[attribute]：选取带有指定属性的元素，如$("[href]")。
[attribute=value]：精确匹配属性值，如$("[type='text']")。
[attribute^=value]、[attribute$=value]、[attribute*=value]：匹配属性值开头、结尾或包含特定字符串。

表单选择器

:input：选取所有表单元素（input、select、textarea等）。
:text、:password、:radio等：按类型选取表单字段。
:checked、:selected：选取被选中或选定的元素。

可见性过滤选择器

:visible、:hidden：根据元素的可见状态选取。

示例代码

// 基本选择器示例
$("#submitBtn").click(function() {
    $(".error").hide();
});

// 层次选择器示例
$("ul.menu > li").addClass("active");

// 过滤选择器示例
$("tr:even").css("background-color", "#f2f2f2");