首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >jQuery串联操作

jQuery串联操作

作者头像
用户2936342
发布2018-08-27 15:19:29
5430
发布2018-08-27 15:19:29
举报
文章被收录于专栏:nummynummy

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> ]
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2016.06.06 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • add()
  • addSelf()
  • contents()
  • end()
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档