jquery选择器有几种

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

注意事项

• 部分选择器（如:visible）依赖浏览器渲染结果，可能影响性能。
• 复杂选择器建议拆分为多个简单操作以提高效率。
• jQuery 3.0+已弃用部分不常用的选择器（如:lt()），推荐使用现代替代方案。