jquery选择器有哪些

jQuery选择器类型

基本选择器

• $("#id")：通过ID选择元素，如 $("#header")
• $(".class")：通过类名选择元素，如 $(".btn")
• $("tag")：通过标签名选择元素，如 $("div")
• $("*")：选择所有元素
• 组合选择器：$("div, .class, #id") 可同时匹配多个条件

层次选择器

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

过滤选择器

• :first 和 :last：如 $("p:first")
• :even 和 :odd：索引偶/奇数元素，如 $("tr:even")
• :eq(n) 和 :gt(n) / :lt(n)：匹配索引等于/大于/小于n的元素
• :not(selector)：排除匹配项，如 $("input:not(:checked)")

内容过滤选择器

• :contains(text)：包含指定文本的元素，如 $("p:contains('Hello')")
• :empty 和 :parent：选择无子元素/有子元素的元素
• :has(selector)：包含特定子元素的元素，如 $("div:has(p)")

可见性过滤选择器

• :visible 和 :hidden：根据元素显示状态选择

属性选择器

• [attr]：拥有指定属性的元素，如 $("[href]")
• [attr=value]：属性值完全匹配，如 $("[type='text']")
• [attr^=value] / [attr$=value]：属性值以某字符开头/结尾
• [attr*=value]：属性值包含某字符

表单选择器

• :input：所有表单元素（input、select、textarea等）
• :text / :password / :radio 等：按类型选择输入框
• :checked：选中的复选框或单选按钮
• :selected：选中的下拉选项

子元素过滤选择器

• :nth-child(n)：选择父元素下的第n个子元素
• :first-child 和 :last-child

示例代码

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

// 层次选择器示例
$("ul li:first").css("color", "red");

// 表单选择器示例
$("input:text").val("Default Text");

注意事项

• 部分选择器（如 :visible）依赖浏览器渲染结果
• 选择器性能差异较大，ID选择器最快，复杂选择器可能影响效率
• 可链式组合使用，如 $("div.content:has(img)")