选择器(Selector)
jQuery 最强大的功能之一就是选择器,它几乎继承并扩展了 CSS 选择器语法。
基础选择器
$('#id') // ID 选择器 - 选择 id="xxx" 的元素
$('.class') // 类选择器 - 选择 class="xxx" 的元素
$('div') // 标签选择器 - 选择所有 div 元素
$('*') // 通配符 - 选择所有元素
$('div, span') // 群组选择器 - 选择 div 和 span
伪类选择器
$('li:first') // 第一个 li 元素
$('li:last') // 最后一个 li 元素
$('tr:odd') // 奇数行(从0开始,0,2,4...)
$('tr:even') // 偶数行(1,3,5...)
$('li:eq(2)') // 第3个 li(索引从0开始)
$('li:gt(2)') // 索引大于2的 li(即第4个及以后)
$('li:lt(2)') // 索引小于2的 li(即第1、2个)
$('a:hover') // 鼠标悬停的链接
过滤选择器
// 筛选
$('div').filter('.active') // 保留有 active 类的 div
$('div').not('.disabled') // 排除有 disabled 类的 div
// 查找
$('div').find('span') // 在 div 内查找 span
$('div').children('span') // div 的直接子元素 span
$('div').parent() // div 的父元素
$('div').parents('section') // div 的所有祖先中的 section
// 判断
$('div').hasClass('active') // 是否有 active 类
$('div').is('.active') // 是否匹配选择器
属性选择器
$('[href]') // 选择有 href 属性的元素
$('[href="test"]') // 属性完全匹配
$('[href^="http"]') // 属性以 http 开头(^=)
$('[href$=".pdf"]') // 属性以 .pdf 结尾($=)
$('[href*="example"]') // 属性包含 example(*=)
表单选择器
$(':input') // 所有表单元素(input, textarea, select, button)
$(':text') // 单行文本框
$(':password') // 密码框
$(':checkbox') // 复选框
$(':radio') // 单选框
$(':checked') // 选中的复选框/单选框
$(':selected') // 选中的 option
$(':disabled') // 禁用的表单元素
$(':enabled') // 启用的表单元素
使用示例
// 1. 选择所有已完成的待办事项
$('.todo-item.completed')
// 2. 选择表格的奇数行并高亮
$('table tr:odd').addClass('highlight')
// 3. 选择当前激活的标签页
$('.tabs li.active')
// 4. 选择可编辑的输入框(没有 disabled)
$('input:enabled')
// 5. 链式组合选择器
$('.menu li.active a')
性能提示
- 尽量使用 ID 选择器
$('#id'),它最快 - 避免过度使用通配符
* - 缓存选择器结果,不要在循环中重复执行 $()
// ❌ 不好
for (var i = 0; i < 100; i++) {
$('.list-item').eq(i).addClass('item-' + i)
}
// ✅ 好
var $items = $('.list-item')
for (var i = 0; i < $items.length; i++) {
$($items[i]).addClass('item-' + i)
}