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> ]

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏有趣的django

4.自定义序列类

1860
来自专栏前端说吧

JS-随机div颜色

3217
来自专栏我的小碗汤

Go语言中数组和切片笔记

今天有位大佬问我一个关于切片很简单的一个问题,却把我难住了,所以是时候了解下切片的底层了。

1053
来自专栏Golang语言社区

Go语言struct类型详解

struct Go语言中,也和C或者其他语言一样,我们可以声明新的类型,作为其它类型的属性或字段的容器。例如,我们可以创建一个自定义类型person代表一个人的...

3027
来自专栏咸鱼不闲

jsoup爬虫工具的简单使用

解决方案: 1.通过url 获得doucment对象, 2.调用select()等方法获得Elements对象, 3.调用.text()等方法,获得自己想要的内...

4854
来自专栏飞雪无情的博客

Go语言实战笔记(五)| Go 切片

切片也是一种数据结构,它和数组非常相似,因为他是围绕动态数组的概念设计的,可以按需自动改变大小,使用这种结构,可以更方便的管理和使用数据集合。

1154
来自专栏三流程序员的挣扎

mermaid 语法

文字里用引号避免一些特殊字符的错误。比如矩形节点里有 () 时就无法渲染,所以加上引号。

1.9K3
来自专栏Python

JavaScript基础

一 JavaScript的基础 1.1 JS的引入方式 1 直接编写 <script> alert('hello yuan') ...

2648
来自专栏一直在跳坑然后爬坑

如何通过自定义View方式模拟SVG并实现动画

3.然后我们要进行对五角星动画的裁剪,涉及到的方法是PathMeasure的getLength和getSegment方法,getLength()不用多说,就是用...

1191
来自专栏Golang语言社区

实效go编程--2

Go函数的返回值或结果“形参”可被命名,并作为常规变量使用,就像传入的形参一样。 命名后,一旦该函数开始执行,它们就会被初始化为与其类型相应的零值; 若该函数执...

3477

扫码关注云+社区

领取腾讯云代金券