从零开始学习jQuery (三) 管理jQuery包装集(3)

把与表达式匹配的元素添加到jQuery对象中。这个函数可以用于连接分别与两个表达式匹配的元素结果集。

  动态生成一个元素并添加至匹配的元素中:
$("p").add("<span>Again</span>")
 
 

取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。

可以通过可选的表达式来过滤所匹配的子元素。注意:parents()将查找所有祖辈元素,而children()只考虑子元素而不考虑所有后代元素。

  查找DIV中的每个子元素:
$("div").children()
 
  取得与表达式匹配的最新的父元素  

为事件源最近的父类li对象更换样式:

$(document).bind("click", function (e) {
  $(e.target).closest("li").toggleClass("hilight");
});

 
contents( )   查找匹配元素内部所有的子节点(包括文本节点)。如果元素是一个iframe,则查找文档内容   查找所有文本节点并加粗:
$("p").contents().not("[nodeType=1]").wrap("<b/>");
 
 

搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

所有搜索都依靠jQuery表达式来完成。这个表达式可以使用CSS1-3的选择器语法来写。

  从所有的段落开始,进一步搜索下面的span元素。与$("p span")相同:
$("p").find("span")
 
 

取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。

这个函数只返回后面那个紧邻的同辈元素,而不是后面所有的同辈元素(可以使用nextAll)。可以用一个可选的表达式进行筛选。

  找到每个段落的后面紧邻的同辈元素:
$("p").next()
 
 

查找当前元素之后所有的同辈元素。

可以用表达式过滤

  给第一个div之后的所有元素加个类:
$("div:first").nextAll().addClass("after");
 
offsetParent( )   返回第一个有定位的父类(比如(relative或absolute)).
     
 

取得一个包含着所有匹配元素的唯一父元素的元素集合。

你可以使用可选的表达式来筛选。

  查找每个段落的父元素:
$("p").parent()
 
  取得一个包含着所有匹配元素的祖先元素的元素集合(不包含根元素)。可以通过一个可选的表达式进行筛选。   找到每个span元素的所有祖先元素:
$("span").parents()
 
 

取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。

可以用一个可选的表达式进行筛选。只有紧邻的同辈元素会被匹配到,而不是前面所有的同辈元素。

  找到每个段落紧邻的前一个同辈元素:
$("p").prev()
 
 

查找当前元素之前所有的同辈元素

可以用表达式过滤。

  给最后一个之前的所有div加上一个类:
$("div:last").prevAll().addClass("before");
 
  取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。   找到每个div的所有同辈元素:
$("div").siblings()
 

3.串联 Chaining

名称   说明   举例  
andSelf( )  

加入先前所选的加入当前元素中

对于筛选或查找后的元素,要加入先前所选元素时将会很有用。

  选取所有div以及内部的p,并加上border类:
$("div").find("p").andSelf().addClass("border");
 
end( )   回到最近的一个"破坏性"操作之前。即,将匹配的元素列表变为前一次的状态。

如果之前没有破坏性操作,则返回一个空集。所谓的"破坏性"就是指任何改变所匹配的jQuery元素的操作。这包括在 Traversing 中任何返回一个jQuery对象的函数--'add', 'andSelf', 'children', 'filter', 'find', 'map', 'next', 'nextAll', 'not', 'parent', 'parents', 'prev', 'prevAll', 'siblings' and 'slice'--再加上 Manipulation 中的 'clone'。
  选取所有的p元素,查找并选取span子元素,然后再回过来选取p元素:

$("p").find("span").end()
 

五.常用函数举例
[待续]


六.总结
本篇文章内容较少, 主要讲解如何动态创建元素以及管理jQuery包装集, 接口文档列举了太多, 实例部分还没来得及写. 因为要睡觉明天还要上班, 所以请各位见谅, 等以后有空的时候补上!
作者:张子秋
出处:

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdfjgw.html