jquery四种选择器

jQuery 四种核心选择器

基本选择器

通过元素类型、ID、类名直接选取元素：

• $("div") 选取所有 <div> 元素
• $("#header") 选取 ID 为 header 的元素
• $(".active") 选取所有包含 active 类的元素
• $("p.intro") 选取所有包含 intro 类的 <p> 元素

层次选择器

基于元素层级关系进行选择：

• $("ul li") 选取 <ul> 内所有嵌套的 <li>
• $("div > p") 只选取 <div> 直接子元素的 <p>
• $("h2 + p") 选取紧邻 <h2> 后的第一个 <p>
• $("h2 ~ p") 选取 <h2> 之后同层级的所有 <p>

过滤选择器

通过特定条件筛选元素：

• $("li:first") 选取第一个 <li>
• $("tr:even") 选取偶数行表格行
• $("input:checked") 选取所有被勾选的表单元素
• $(":contains('text')") 选取包含指定文本的元素

表单选择器

专门针对表单元素的简化选择方式：

• $(":input") 选取所有 <input>、<textarea>、<select> 元素
• $(":text") 选取所有文本输入框
• $(":radio") 选取所有单选按钮
• $(":submit") 选取所有提交按钮
• $("input[name='email']") 选取 name 属性为 email 的输入框

组合使用示例

// 基本+层次组合
$("#sidebar .menu-item:visible")

// 过滤+表单组合
$("form :input:enabled")

// 多条件选择
$("div.warning, div.error")