jQuery 选择器大全

全面掌握jQuery选择器：基本选择器、层级选择器、过滤选择器、表单选择器 · 难度：入门 · +15XP

jQuery 选择器

jQuery的核心是选择DOM元素并操作它们。选择器语法基于CSS，但更强大。

基本选择器

$('p')         // 标签选择器
$('#header')   // ID选择器
$('.active')   // 类选择器
$('*')         // 全选
$('p, div, span') // 多选

层级选择器

$('div p')      // 后代（div内所有p）
$('div > p')    // 直接子元素
$('h1 + p')     // 紧邻兄弟
$('h1 ~ p')     // 所有后续兄弟

过滤选择器

$('li:first')        // 第一个
$('li:last')         // 最后一个
$('li:even')         // 偶数索引
$('li:odd')          // 奇数索引
$('li:eq(2)')        // 索引为2的
$('li:gt(2)')        // 索引大于2的
$('li:not(.active)')  // 不含active类

内容/属性/表单选择器

$('div:contains("hello")')  // 包含文本
$('input[name="email"]')   // 属性值匹配
$(':input')                // 所有表单元素
$(':checked')              // 选中的checkbox/radio
$(':selected')             // 选中的option

💡 练习

选择表格中所有偶数行添加高亮背景，选择所有被选中的复选框。