jQuery 选择器
选择器是 jQuery 的灵魂：它负责精准地找到你想操作的元素。好消息是，jQuery 选择器与 CSS 选择器语法几乎一致，会写 CSS 就会用 jQuery 选择器。
元素选择器
通过标签名选取元素，返回页面上所有同名标签：
$('p'); // 选中所有 <p> 段落
$('div'); // 选中所有 <div>
$('h1, h2'); // 选中所有 <h1> 和 <h2>
#id 选择器
通过元素的 id 选取唯一元素，id 前加 #：
$('#myid'); // 选中 id="myid" 的那个元素
.class 选择器
通过元素的 class 选取一组元素，类名前加 .：
$('.test'); // 选中所有 class="test" 的元素
更多常用选择器
| 写法 | 含义 |
|---|---|
$('*') | 选中页面所有元素 |
$('p.intro') | 选中 class 为 intro 的段落 |
$('a[href]') | 选中所有带 href 属性的链接 |
$('a[href$=".pdf"]') | 选中 href 以 .pdf 结尾的链接 |
$('ul li:first') | 选中第一个列表项 |
$('tr:even') | 选中偶数行（索引从 0 开始） |
$('input:checked') | 选中被勾选的输入框 |
完整示例
下面的例子用不同选择器为不同元素设置样式，点击按钮查看效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<!-- 引入 jQuery（https://example.com 为占位地址，实际使用时请替换为真实 CDN 或本地文件） -->
<script src="https://example.com/jquery.min.js"></script>
</head>
<body>
<p>我是一个段落</p>
<p class="intro">我是 class="intro" 的段落</p>
<p id="me">我是 id="me" 的段落</p>
<button id="btn">点我上色</button>
<script>
$(function () {
$('#btn').click(function () {
$('p').css('background', '#eee'); // 元素选择器：所有段落灰底
$('.intro').css('color', 'green'); // 类选择器：intro 段落变绿
$('#me').css('font-weight', 'bold'); // id 选择器：me 段落加粗
});
});
</script>
</body>
</html>
要点提醒
- 选择器不匹配任何元素时不会报错，只是返回一个空的 jQuery 对象，后续操作静默无效，调试时可先用
console.log($('...').length)查看选中个数。 - jQuery 也支持 CSS3 等高级选择器（属性选择器、伪类等），功能比
querySelectorAll更丰富。
小结
选择器负责"找得到"，用 $('标签')、$('#id')、$('.class') 三种基本写法即可覆盖绝大多数需求。下一节我们学习如何给选中的元素绑定事件。