jQuery新手教程：十个非常有用的遍历函数
6、parent
parent()函数选取一系列元素的直接父级。
正如下图所示，第一个star的 直接父级被选中。非常方便，应当指出，它仅仅返回直接父级，为什么很奇特？因为没有祖父元素或祖先元素被选中。
7、parents
这是复数形式，parents()选 择集合的所有祖先元素。我的意思是所有祖先元素包括直接父级到“body”和“html”元素。所以最好通过传递表达式缩小选择结果。
通过给parents()传 递.container参数，div.container将被选中，它实际上第一个star的祖父。
8、siblings
这个函数选择一组元素的所有兄弟姐妹，传递一个表达式可以筛选结果。
看看这个例子：
谁是第一个star的兄弟节点？其它的四个，对不？
如图所示，“odd”的节点被选中。索 引是从零开始的，看看下面star的红色数字。
9、prev & prevAll
prev()函数选择前一个兄弟节点。prevAll()选择一个元素集合前面所有的兄弟节点。
如 果你正在构建一个星级部件，这将相当方便。第三个star前面的兄弟节 点被选中。
10、next & nextAll
这些函数与prev和prevAll工作方式相同，不过它选择的是下一个兄弟姐妹。
三、结论
最后，让我们来看看如何利用这些函数来解决现实世界中令我们头痛的问题。
$('.star').click(function(){
$(this).addClass('on');
// 如何取得当前对象的 父级?
$(this).parent().addClass('rated');
// 如何获得当前对象左 侧的star?
$(this).prevAll().addClass('on');
$(this).nextAll().removeClass('on');
});
这就是这篇教程中早期提到的问题，对吗？在这几行代码中我们使用了这几个遍历函数。
在第4行，看看parent()函数，啊哈，真简单。
在第6行和7行，prevAll()和nextAll().选择填充的star和空的star。
现在，遍历函数是做么的方便。当在一起使用时，它们将更加强大。也就是说，一个函数的输出是另一个函数的输入，它们是链式的。
- 栏目搜索>>分类导航
-
Flash幻灯
jQuery幻灯
JS幻灯
Flash相册
jQuery相册
图片特效
导航菜单
广告代码
在线客服
表单按钮
其它特效
-
HTML
CSS
JavaScript
Dreamweaver
Fireworks
设计分享
- 建站教程 网站运营 实用工具 网页模板 网页素材
-
CSS酷站
网上购物
设计团队
设计博客
-
- 教程排行榜
- 20款华丽酷炫的jQuery图片相册插件
- 新手教程：10个jQuery特效讲解
- 如何处理JS的'null'为空或不是对象
- 分享10款精美的焦点幻灯和图片特效jQuery插件
- 多款提高网页表格(table)操作易用性的jQuery插件
- 打造完美的jQuery网页进度条（LOADING）
- 20款超酷的基于jQuery的幻灯和表单插件(附...
- 如何把在线地图Google Maps API整合到网站中去？
- jQuery 1.4.1 中文帮助文档速查表（附CHM文件下载）
- 最新的jQuery 1.4官方文档中文翻译版
- 零起步学习如何写jQuery框架
- 基于JQuery的上传插件Uploadify使用方法详解
- jQuery的鼠标事件实例教程
- lazyload：基于jQuery框架实现图片异步加载
- 多个增强Web设计界面的Javascript脚本代码
- JS代码的window.location属性详解
- 下载排行榜
- jQuery图片特效代码 带缩略图和文字标题简...
- 仿淘宝商城天猫首页jQuery多格焦点幻灯图特...
- 仿QQ商城焦点图jquery幻灯特效代码
- 宽屏flash+xml焦点幻灯图特效代码
- 效果媲美flash的jQuery幻灯代码支持多种切换效果
- 3D立体效果的flash+xml照片墙相册展示代码
- 带标题和数字导航的JS焦点幻灯特效代码
- 31款简单实用的CSS+JS下拉菜单脚本
- 漂亮的jquery+Lightbox灯箱效果图片展示特效代码
- 基于mootools有7种效果的Gallery(画廊)幻灯相册代码
- 超酷HTML5图片特效代码支持全屏显示
- 漂亮的jquery画廊相册特效支持缩略图和键盘...
- 可自动展开和折叠收起的QQ在线客服代码
- 半透明立体质感的宽屏flash+xml焦点幻灯代码
- 基于jQuery的首页自动收缩全屏广告代码
- 超酷3D摩天轮flash+xml幻灯相册特效源码