javascript - 细说 jQuery 元素篇（二） - 选择符 - StephenLi

为了更方便对 DOM 元素操作，jQuery 提供了完整的选择符体系，可以分为 CSS 选择符、属性选择符以及自定选择符。

CSS 选择符

jQuery 几乎支持 CSS1 到 CSS3 规范中的所有选择符。举例如下：

<ul id="myUl">
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <div>D</div>
</ul>

为了给 id 为 myUl 的 ul 元素下直接 li 元素添加样式，我们可以这样写：

  $(document).ready(function() {
    $('#myUl > li').addClass('xxx');
  });

当在 jQuery 中使用 $(document).ready(function() {}) 时，位于其中的所有代码都会在 DOM 加载后立即执行。我们也可以简写为：$(function() {})。

对于 CSS 选择符的内容，可以参考这个手册 - 《CSS 选择器参考手册》

属性选择符是 jQuery 中很有用的一类选择符，即通过 DOM 元素的属性来选择特定的元素。例如 a 标签的 href 属性。

<a href="http://segmentfault.com/">Segmentfault</a>
<a href="http://www.baidu.com/">Baidu</a>

对于上例两个 a 标签，我们希望选择 segmentfault 进行操作，而不是 baidu，那么我们可以通过属性选择符来操作：

$('a[href="http://segmentfault.com/"]')

为了简化操作，属性选择符还从正则里面借鉴了一些语法过来：

那么上述的属性选择符的操作我们就可以简化为：

$('a[href*="segmentfault"]')

同样可以取得链接为 segmentfault 的 a 标签。

除了上述的选择符外，jQuery 还添加了独有的自定义选择符，在介绍自定义选择符前，需要说明一点：

与原生的 DOM 选择符相比，自定义选择符在性能方面是表现较差的，因此如果能使用原生的方法，尽量不要频繁使用自定义选择符，从而保证性能。

自定义选择符的使用有点像 CSS 中的伪类，即先使用一个冒号（:），然后再写详细的内容。同样举例说明：

<ul id="myUl">
  <li>ALI</li>
  <li>BLI</li>
  <li>CLI</li>
</ul>

此时，我们希望取得内容为 A 的 li 元素，我们可以这样操作：

$('li:eq(0)')

由于 Javascript 的数组是从0开始计数，所以第一个元素用0取。

介绍个比较有用的自定义选择符 - contain 选择符。
依然是上例，现在我们希望取得内容中含有 C 的元素，可以这样写：

$('li:contains(C)')