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元素

原文地址:https://www.cnblogs.com/SamFlynn/p/4313842.html