jQuery串联操作

jQuery串联操作包括以下几种方法:

  • add()
  • addSelf()
  • contents()
  • end()

add()

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

参数

  • expr一个用于匹配元素的选择器字符串
  • elementsDOM元素
  • htmlHTML片段
  • jQuery Object
  • context上下文

示例
HTML代码:

<p>Hello</p><span>Hello Again</span>

jQuery代码:

$("p").add("span")

结果:

[ <p>Hello</p>, <span>Hello Again</span> ]

addSelf()

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

示例
选取所有div以及内部的p,并加上border类。

HTML代码:

<div><p>First Paragraph</p><p>Second Paragraph</p></div>

jQuery代码:

$("div").find("p").andSelf().addClass("border");

结果:

<div class="border">
    <p class="border">First Paragraph</p>
    <p class="border">Second Paragraph</p>
</div>

contents()

查找匹配元素内部所有的子节点(包括文本节点)。如果元素是一个iframe,则查找文档内容。

示例
查找所有文本节点并加粗。
HTML代码:

<p>Hello <a href="http://ejohn.org/">John</a>, how are you doing?</p>

jQuery代码:

$("p").contents().not("[nodeType=1]").wrap("<b/>");

结果:

<p><b>Hello</b> <a href="http://ejohn.org/">John</a>, <b>how are you doing?</b></p>

end()

回到最近的一个”破坏性”操作之前。即,将匹配的元素列表变为前一次的状态。

如果之前没有破坏性操作,则返回一个空集。所谓的”破坏性”就是指任何改变所匹配的jQuery元素的操作。

示例
选取所有的p元素,查找并选取span子元素,然后再回过来选取p元素。
HTML代码:

<p><span>Hello</span>,how are you?</p>

jQuery代码:

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

结果:

[ <p><span>Hello</span> how are you?</p> ]
    原文作者:nummy
    原文地址: https://www.jianshu.com/p/3b32c052cc48
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞