• [织梦吧]唯一域名:www.dedecms8.com,织梦DedeCMS学习平台.

当前位置: > 网页制作 > JavaScript >

jQuery中10个强大的遍历函数

来源: www.dedecms8.com 编辑:织梦吧 时间:2012-02-06点击:
   

  为什么我们要进一步提炼一系列元素,难道是jQuery选择语法不够强大?让我们从示例开始。在下面提到的网页中,当一个star被点击时,我们需要给它以及左边的每个star添加class“on”。首先,让我们看看下图所示的简单的页面,通过这个教程我们将选择这些元素。

示例

  ◆div.container是包裹元素;

  ◆div.photo、div.title、div.rating是div.container的直接子级;

  ◆每个div.star是div.rating的子级;

  ◆当div.satr的class为“on”时,它是一个完整的star。

  与此同时,我们要改变所有star父元素的背景颜色,因此,我们的代码如下:

  $('.star').click(function(){

  $(this).addClass('on');

  // 如何选取当前对象的 父元素?

  // 如何获得当前star左侧所有的star?

  });

  在第二行,我们得到了我们点击的当前对象。但是,如 何得到stars的父级?即div.rating。但是,在一个页面中,有很多div.rating。哪一个是我们想要的?如何获得“this”左边所有 的star?可喜的是,jQuery允许我们基于这些基层关系,在现存集合的基础上获得新的元素集合。而这些正是遍历函数发挥作用的地方。

  1、children

  这个函数得到一组元素的直接子级。

  在很多情况下会很方便,看看下面这张图:

children

  ◆开始的时候容器中的star全部被选择;

  ◆给children()传递一个选择表 达式将选择结果缩小至选中的star;

  ◆如果chilidren()每接受任何 参数,将返回所有直接子级;

  ◆不返回孙级元素。

  2、filter

  这个函数通过传递的选择表达式从一个集合中过滤元素。任何不匹配这个表达式的元素将从选择的集合中移除。

filter

  下面的这个例子直截了当。从 5个star中过滤出class为“on”的star。

  3、not

  与filter恰恰相 反,not()从集合中移除匹配的元素。看下面这个例子。偶数列的star从选择集合中移除,留下的是奇数行的star。

not

  “ 注意:'Even'和'odd'选择器是从0开始的,从0开始计数,不是从1。”

  4、add

  如果我们想在集合中增加一些元素怎么办?add()函 数正是做这件事的。同样简单明了,photo盒 子被添加到集合中。

add

 

  5、slice

  有时候,我们需要根据元素在集合的位置获取集合的子集。sliece()正是做这个的。

slice

  ◆第一个参数是从零开始的第一个元素的位置,它包含在返回的片段中;

  ◆第二个参数是从零开始的第一个元素的索引。不包含在返回的片段中。如果省略,将延伸至集合的末尾;

  所以,slice(0,2)将选取前两个star。

  6、parent

  parent()函数选取一系列元素的直接父级。

parent

  正如下图所示,第一个star的 直接父级被选中。非常方便,应当指出,它仅仅返回直接父级,为什么很奇特?因为没有祖父元素或祖先元素被选中。

  7、parents

  这是复数形式,parents()选 择集合的所有祖先元素。我的意思是所有祖先元素包括直接父级到“body”和“html”元素。所以最好通过传递表达式缩小选择结果。

parents

  通过给parents()传 递.container参数,div.container将被选中,它实际上第一个star的祖父。

  8、siblings

  这个函数选择一组元素的所有兄弟姐妹,传递一个表达式可以筛选结果。看看这个例子:

siblings

  如图所示,“odd”的节点被选中。索引是从零开始的,看看下面star的红色数字。

  9、prev & prevAll

  prev()函数选择前一个兄弟节点。prevAll()选择一个元素集合前面所有的兄弟节点。如果你正在构建一个星级部件,这将相当方便。第三个star前面的兄弟节 点被选中。

prev & prevAll

  10、next & nextAll

next & nextAll
标签: jquery 强大 遍历

About D8

  • ©2014 织梦吧(d8) DedeCMS学习交流平台
  • 唯一网址 www.DedeCMS8.com 网站地图
  • 联系我们 1978130638@qq.com ,  QQ