注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

ㄨiao愛

转载技术文档

 
 
 

日志

 
 

jQuery中10个强大的遍历函数  

2012-03-14 00:09:58|  分类: php |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

为什么我们要进一步提炼一系列元素,难道是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

  这些函数与prev和prevAll工作方式相同,不过它选择的是下一个兄弟姐妹。

  结论

  最后,让我们来看看如何利用这些函数来解决现实世界中令我们头痛的问题。

http://www.php100.com/html/webkaifa/javascript/2012/0116/9676.html

  评论这张
 
阅读(255)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018