jquery选择器有几种

jQuery选择器类型

jQuery选择器允许开发者通过CSS风格语法快速定位DOM元素，以下是主要分类及示例：

基本选择器

• ID选择器：$("#id")
  选取指定ID的元素，如$("#header")。
• 类选择器：$(".class")
  选取指定类的元素，如$(".btn")。
• 元素选择器：$("element")
  选取指定标签的元素，如$("div")。
• 通配符选择器：$("*")
  选取所有元素。

层次选择器

• 后代选择器：$("parent child")
  选取父元素内的所有子元素，如$("ul li")。
• 子元素选择器：$("parent > child")
  仅选取直接子元素，如$("div > p")。
• 相邻兄弟选择器：$("prev + next")
  选取紧邻的下一个兄弟元素，如$("h1 + p")。
• 通用兄弟选择器：$("prev ~ siblings")
  选取所有后续兄弟元素，如$("h1 ~ p")。

过滤选择器

• 基本过滤：
  :first（首个元素）、:last（末尾元素）、:even（偶数索引）、:odd（奇数索引）。
• 内容过滤：
  :contains(text)（包含文本）、:empty（无子元素）、:has(selector)（包含特定子元素）。
• 可见性过滤：
  :visible（可见元素）、:hidden（隐藏元素）。
• 属性过滤：
  [attribute]（拥有属性）、[attribute=value]（属性值匹配）。

表单选择器

• 输入类型选择器：
  :input（所有表单元素）、:text（文本框）、:checkbox（复选框）。
• 状态选择器：
  :checked（选中项）、:disabled（禁用项）、:selected（下拉框选中项）。

其他选择器

• 自定义选择器：
  如:eq(index)（指定索引元素）、:gt(index)（大于索引的元素）。
• 组合选择器：
  通过逗号分隔多条件，如$("div, .class")。

示例代码

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

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

// 过滤选择器示例
$("tr:even").css("background", "#eee"); // 偶数行高亮

// 表单选择器示例
$("input:text").val(""); // 清空所有文本框

通过灵活组合这些选择器，可以高效地操作DOM元素，实现复杂的交互逻辑。