设置密码

验证码错误,请重新填写

免费建站旅程马上开始

开始建站
建站中

已有帐号?直接登录

首页>森动学院>网站建设教程 > 建站程序教程:jQuery中几个超实用的遍历函数
建站程序教程:jQuery中几个超实用的遍历函数
发布时间: 2014-08-08
使用jQuery,可以 很容易的选择HTML元素。但有些时候,在HTML结构较为复杂时,提炼我们选择的元素就是一件麻烦的事情。在这篇教程中,我们将探讨十种方 法去精炼和扩展我们将要操作的集合。
HTML
首先,让我们看看下图所示的简单的页面,通过这个教程我们将选择这些元素。
div.container是包裹元素;
div.photo、div.title、div.rating是div.container的直接子级;
每个div.star是div.rating的子级;
当div.satr的class为“on”时, 它是一个完整的star。
为什么要遍历?
“为什么我们要进一步提炼一系 列元素,难道是jQuery选择语法不够 强大?”
好,让我们从示例开始。在上面提到的网页中,当一个star被 点击时,我们需要给它以及左边的每个star添加class“on”。与此同时,我们要改变所有star父元素的背景颜色,因此,我们的代码如下:
$('.star').click(function(){
         $(this).addClass('on');
//       如何选取当前对象的 父元素?
//       如何获得当前star左侧所有的star?
});
在第二行,我们得到了我们点击的当前对象。但是,如 何得到stars的父级?即div.rating。但是,在一个页面中,有很多div.rating。哪一个是我们想要的?如何获得“this”左边所有的star?
可喜的是,jQuery允 许我们基于这些基层关系,在现存集合的基础上获得新的元素集合。而这些正是遍历函数发挥作用的地方。
1、children
这个函数得到一组元素的直接子级。
在很多情况下会很方便,看看下面这张图:
开始的时候容器中的star全部被选择;
给children()传递一个选择表 达式将选择结果缩小至选中的star;
如果chilidren()每接受任何 参数,将返回所有直接子级;
不返回孙级元素。
2、filter
这个函数通过传递的选择表达式从一个集合中过滤元素。任何不匹配这个表达式的元素将从选择的集合中移除。
下面的这个例子直截了当。从 5个star中过滤出class为“on”的star。

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

“ 注意:'Even'和'odd'选择器是从0开始的,从0开 始计数,不是从1。”
4、add
如果我们想在集合中增加一些元素怎么办?add()函 数正是做这件事的。
同样简单明了,photo盒 子被添加到集合中。

5、slice
有时候,我们需要根据元素在集合的位置获取集合的子集。sliece()正是做这个的。
第一个参数是从零开始的第一个元素的位置,它包含在返回的片段中;
第二个参数是从零开始的第一个元素的索引。不包含在返回的片段中。如果省略,将延伸至集合的末尾;
所以,slice(0,2)将选取前两 个star。



文章来源:森动网小鱼儿,转载请注明出处!