JQuery基础教程：选择元素（下）

DOM遍历方法

  利用前面介绍的jQuery选择符取得一组元素，就像是我们在DOM树中纵横遍历再经过筛选得到的结果一样。如果只有这一种取得元素的方式，那我们选择的余地从某个角度讲也是很有限的。很多情况下，取得某个元素的父元素或者祖先元素都是基本的操作，而这正是jQuery的DOM遍历方法的用武之地。有了这些方法，我们可以轻而易举地在DOM树中上下左右地自由漫步。这行用于添加alt类的代码$('tr: even').addClass('alt');可以通过.filter()方法重写成这样

 $('tr').filter(':even').addClass('alt');

  .filter()的功能十分强大，因为它可以接受函数参数。通过传入的函数，可以执行复杂的测试，以决定相应元素是否应该保留在匹配的集合中。例如，假设我们要为所有外部链接添加一个类

       a.external {
       background: #fff url(images/external.png) no-repeat 100% 2px;
       padding-right: 16px;
       }
   jQuery中没有针对这种需求的选择符。如果没有筛选函数，就必须显式地遍历每个元素，对它们单独进行测试。但是，有了下面的筛选函数，就仍然可以利用jQuery的隐式迭代能力，保持代码简洁

$('a').filter(function() {
            return this.hostname && this.hostname != location.hostname;
        }).addClass('external');

   .filter()方法会迭代所有匹配的元素，对每个元素都调用传入的函数并测试函数的返回值。如果函数返回false，则从匹配集合中删除相应元素；如果返回true，则保留相应元素

为特定单元格添加样式

  之前我们已经为所有包含文本Henry的单元格添加了highlight类。如果想改为给每个包含Henry的单元格的下一个单元格添加样式，可以将已经编写好的选择符作为起点，然后连缀一个.next()方法即可：$('td:contains(Henry)').next().addClass('highlight');.next()方法只选择下一个最接近的同辈元素。要想突出显示Henry所在单元格后面的全部单元格，可以使用.nextAll()方法：$('td:contains(Henry)').nextAll().addClass('highlight');

.next()和.nextAll()方法分别有一个对应方法，即.prev()和.prevAll()。此外，.siblings()能够选择处于相同DOM层次的所有其他元素，无论这些元素处于当前元素之前还是之后。要在这些单元格中再包含原来的单元格（即包含Henry的那个单元格），可以添加.addBack()方法，代码如下：

$('td:contains(Henry)').nextAll().addBack()
.addClass('highlight');

要选择同一组元素，可以采用的选择符和遍历方法的组合很多，例如$('td:contains(Henry)').parent().children() .addClass('highlight');

这种组合方式没有遍历同辈元素，而是通过.parent()方法在DOM中上溯一层到达<tr>，然后再通过.children()选择该行的所有单元格

连缀

   几乎所有jQuery方法都会返回一个jQuery对象，因而可连缀调用多个jQuery方法。在使用连缀时，为照顾到代码的可读性，还可以把一行代码分散到几行来写。例如，一组连缀的方法可以写成3行

$('td:contains(Henry)').parent().find('td:eq(1)')
.addClass('highlight').end().find('td:eq(2)')
.addClass('highlight');

甚至也可以写成七行

$('td:contains(Henry)') //取得包含Henry的所有单元格
.parent() //取得它的父元素
.find('td:eq(1)') //在父元素中查找第2个单元格
.addClass('highlight') //为该单元格添加hightlight类
.end() //恢复到包含Henry的单元格的父元素
.find('td:eq(2)') //在父元素中查找第3个单元格
.addClass('highlight'); //为该单元格添加hightlight类

访问DOM元素

   如果需要在代码中直接访问DOM元素。例如，可能需要为另一个JavaScript库提供一组元素的结果集合。或者可能不得不访问某个元素的标签名——通过DOM元素的属性。对于这些少见但合理的情形，jQuery提供了.get()方法。要访问jQuery对象引用的第一个DOM元素，可以使用.get(0)。因而，如果想知道带有id="my-element"属性的元素的标签名，应该使用如下代码：var myTag = $('#my-element').get(0).tagName; 为了进一步简化这些代码，jQuery还为.get()方法提供了一种简写方式。比如，可以将$('#my-element').get(0)简写为：var myTag = $('#my-element')[0].tagName; 也就是说，可以在选择符后面直接使用方括号。显然，这种语法与访问DOM元素数组很相似，而使用方括号就好像剥掉jQuery的包装并直接露出节点列表，而方括号中的索引（这里的0）则相当于从中取出了原本的DOM元素