jQuery新手教程：十个非常有用的遍历函数

2010-03-31 11:16:32 作者：不详来源：站长之家

使用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。

分享到：

更多...

教程排行榜: 20款华丽酷炫的jQuery图片相册插件; 新手教程：10个jQuery特效讲解; 分享10款精美的焦点幻灯和图片特效jQuery插件; 如何处理JS的'null'为空或不是对象; 多款提高网页表格(table)操作易用性的jQuery插件; 20款超酷的基于jQuery的幻灯和表单插件(附...; 打造完美的jQuery网页进度条（LOADING）; 如何把在线地图Google Maps API整合到网站中去？; jQuery 1.4.1 中文帮助文档速查表（附CHM文件下载）; 最新的jQuery 1.4官方文档中文翻译版; 零起步学习如何写jQuery框架; jQuery的鼠标事件实例教程; 基于JQuery的上传插件Uploadify使用方法详解; 多个增强Web设计界面的Javascript脚本代码; 九款常用的JS代码高亮工具; lazyload：基于jQuery框架实现图片异步加载

下载排行榜: 基于jQuery的超炫酷的3D切换JS幻灯焦点图特效代码; 半透明立体质感的宽屏flash+xml焦点幻灯代码; 简洁效果多图切换flash幻灯焦点图代码; 带标题和数字导航的JS焦点幻灯特效代码; 适合摄影网站超漂亮的宽屏flash+xml幻灯轮换代码; 31款简单实用的CSS+JS下拉菜单脚本; 3D立体效果金字塔环形旋转的flash+xml相册代码; 基于jQuery实现的瀑布流布局列表特效代码; 透明质感上下滑动带小图预览5屏JS焦点图幻...; 超酷的3D摩天轮flash+xml相册幻灯图片代码; 能沿多个方向滑动切换的jquery幻灯代码; 自带多种幻灯效果支持缩略图导航的jquery画...; 可改图片尺寸和张数的flash幻灯轮换代码; 很好看的带缓冲效果CSS下拉菜单导航代码; 基于jquery很有趣的360度全景图片预览特效; 6屏幻灯上下滑动式带缩略图和文字介绍的fla...