学习JQuery - 5

    4. 使用DOM的遍历方法

                在第2节中我们使用属性选择器实现了图标添加的工作，

        那么我们能否使用遍历的方式来进行此类操作呢？答案是能。

                在选择器之后增加一个遍历方法如：“filter”

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

                在遍历中我们可以进行一些处理，例如，可以在chapter02-1.html的链接处增加一个图标

                css代码

a.external {background: #fff url(images/external.png) no-repeat 100% 2px;padding-right: 16px;}

               js代码

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

              实现效果如下：

         那么除了“filter”之外有没有其他的遍历方法了呢？

        下面的“next”和“nextAll”就是其中之一。

        在第3节中我们已经使用jQuery的自定义的选择器实现了偶数列的底色设置，

        那么能不能把其中的某个数据格高亮呢？

        比如上节中我们让“Henry”高亮了，能否让他之后的一个单元高亮。

        我们结合属性选择器来完成此操作。

        js代码

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

       实现效果

Shakespeare's Plays

As You Like ItComedy All's Well that Ends WellComedy1601HamletTragedy1604MacbethTragedy1606Romeo and JulietTragedy1595Henry IV, Part IHistory1596Henry VHistory1599

Shakespeare's Sonnets

The Fair Youth1-126The Dark Lady127-152The Rival Poet78-86
        用nextAll可以让本列之后的所有单元格高亮。

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

       实现效果

Shakespeare's Plays

As You Like ItComedy All's Well that Ends WellComedy1601HamletTragedy1604MacbethTragedy1606Romeo and JulietTragedy1595Henry IV, Part IHistory1596Henry VHistory1599

Shakespeare's Sonnets

The Fair Youth1-126The Dark Lady127-152The Rival Poet78-86

        整列高亮的时候，我们需要点DOM树形知识了！

        TH和TD的父节点是TR

        那么我们就要用到两个方法：parent(), children()

       首先，我们定位TD；然后，查找她的父节点（TR）；最后，再查找此列（TD+）；

       js代码

$('td:contains(Henry)').parent().children().addClass('highlight');

      实现效果

Shakespeare's Plays

As You Like ItComedy All's Well that Ends WellComedy1601HamletTragedy1604MacbethTragedy1606Romeo and JulietTragedy1595Henry IV, Part IHistory1596Henry VHistory1599

Shakespeare's Sonnets

The Fair Youth1-126The Dark Lady127-152The Rival Poet78-86