3. 选择器

这是什么：选择器（Selectors） = 一段用来「选中元素」的字符串，写法基本和 CSS 一样，比如 $('#id')、$('.class')。

为什么用：会操作元素之前得先拿到元素。用原生 JavaScript 要写 querySelector 之类的方法名，jQuery 把 CSS 选择器直接接了过来，一个符号就能定位页面上的任何元素。

如何用：本章从基本选择器讲到过滤选择器，先用 $('#intro') 给一段文字改颜色，再动手做一次表格隔行变色。

3.1 基本选择器

基本选择器和 CSS 完全一致，使用频率最高。

选择器	语法	说明	示例
ID 选择器	`$('#id')`	选中指定 ID 的元素（唯一）	`$('#btn')`
类选择器	`$('.class')`	选中所有拥有该 class 的元素	`$('.item')`
标签选择器	`$('tag')`	选中所有指定标签元素	`$('p')`
通配符选择器	`$('*')`	选中页面所有元素	`$('*')`
并集选择器	`$('a, b')`	同时选中多个选择器匹配的元素	`$('h2, p')`

示例：

<p id="intro">这是介绍</p>
<p class="tip">小提示 1</p>
<p class="tip">小提示 2</p>
<button>点我</button>

<script>
  $(function () {
    $('#intro').css('color', 'red');      // ID
    $('.tip').css('font-size', '14px');   // class
    $('button').css('background', '#4CAF50'); // 标签
  });
</script>

3.2 层级选择器

用于选中某个元素的子元素、后代元素、兄弟元素。

选择器	语法	说明
子选择器	`$('parent > child')`	只选中直接子元素
后代选择器	`$('parent child')`	选中所有后代元素（子、孙等）
相邻兄弟选择器	`$('prev + next')`	选中紧跟在 `prev` 后面的第一个 `next` 元素
通用兄弟选择器	`$('prev ~ siblings')`	选中 `prev` 后面所有符合的兄弟元素

示例：

<div id="box">
  <p>子元素 1</p>
  <span>
    <p>孙元素</p>
  </span>
  <p>子元素 2</p>
</div>

<script>
  $(function () {
    $('#box > p').css('color', 'blue');      // 直接子元素
    $('#box p').css('font-weight', 'bold');  // 所有后代
  });
</script>

3.3 基本过滤选择器

jQuery 扩展了一些很实用的过滤选择器，用 : 表示。

选择器	说明	示例
`:first`	选中匹配到的第一个元素	`$('li:first')`
`:last`	选中匹配到的最后一个元素	`$('li:last')`
`:even`	选中索引为偶数的元素（从 0 开始）	`$('tr:even')`
`:odd`	选中索引为奇数的元素	`$('tr:odd')`
`:eq(index)`	选中指定索引的元素	`$('li:eq(2)')`
`:gt(index)`	选中索引大于 index 的元素	`$('li:gt(1)')`
`:lt(index)`	选中索引小于 index 的元素	`$('li:lt(2)')`
`:not(selector)`	排除符合 selector 的元素	`$('p:not(.tip)')`
`:header`	选中所有标题（h1~h6）	`$(':header')`

示例：隔行变色（表格）

<table border="1" width="200">
  <tr><td>1</td></tr>
  <tr><td>2</td></tr>
  <tr><td>3</td></tr>
  <tr><td>4</td></tr>
</table>

<script>
  $(function () {
    $('tr:even').css('background', '#f2f2f2'); // 偶数行（0,2）
    $('tr:odd').css('background', '#fff');
  });
</script>

注意：:even 和 :odd 是按 索引（从 0 开始） 计算的。

3.4 内容过滤选择器

选择器	说明
`:contains(text)`	包含指定文本的元素
`:empty`	没有子元素或文本的空元素
`:has(selector)`	包含至少一个匹配 selector 的元素
`:parent`	拥有子元素或文本的元素（和 :empty 相反）

$('div:contains("jQuery")').css('color', 'purple');
$('div:empty').text('我是空的，现在有内容了');

3.5 可见性过滤选择器

选择器	说明
`:visible`	选中所有可见元素
`:hidden`	选中所有隐藏元素（display:none、type=hidden 等）

$('p:hidden').show(); // 显示被隐藏的段落

3.6 小结

jQuery 选择器的核心思想是：用 CSS 的方式选取元素，再用 jQuery 方法操作它。

掌握好基本选择器和过滤选择器，就已经能覆盖大部分日常开发场景。下一章我们来学习如何用 jQuery 操作 DOM（增、删、改、查元素内容和属性）。