jQuery DOM操作包裹wrap()

如果要将元素用其他元素包裹起来,也就是给它增加一个父元素,针对这样的处理,JQuery提供了一个wrap方法

.wrap( wrappingElement ):在集合中匹配的每个元素周围包裹一个HTML结构

比如下面我们来写一个例子

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <p>php 中文网</p>


    <script>
        $("p").wrap("<div></div>");
    </script>
</body>
</html>

小伙伴们看如上代码,这样我们就给p 标签增加了一个父节点  小伙伴们把代码复制到本地运行,按F12 可以查看


wrap( function ) :一个回调函数,返回用于包裹匹配元素的 HTML 内容或 jQuery 对象

使用后的效果与直接传递参数是一样,只不过可以把代码写在函数体内部,写法不同而已

下面我们来看实例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <p>php 中文网</p>

    <script>
        $('p').wrap(function(){
            return '<div>';
        })
    </script>
</body>
</html>

小伙伴们可以运行下第二种,其实和第一种的效果是一样的,只是写法不一样而已

注意:wrap()函数可以接受任何字符串或对象,可以传递给$()工厂函数来指定一个DOM结构。这种结构可以嵌套了好几层深,但应该只包含一个核心的元素。每个匹配的元素都会被这种结构包裹。该方法返回原始的元素集,以便之后使用链式方法。

继续学习
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> </head> <body> <p>php 中文网</p> <script> $("p").wrap("<div></div>"); </script> </body> </html>
提交重置代码
章节
笔记
提问
课件
反馈
捐赠

JQuery 基础入门教程

  • 推荐课程
  • 评论
  • 问答
  • 笔记
  • 课件下载
一辆想出轨的无轨电车

一辆想出轨的无轨电车

这一节有点枯燥,没耐心看

4年前    添加回复 0

回复
学习ing

学习ing

就是增加父元素

4年前    添加回复 0

回复
Alway.以为

Alway.以为

为什么要再给一个节点呢

4年前    添加回复 0

回复
末日的春天

末日的春天

wrap()中可以传入"<div></div>"或者"<div />"甚至"<div>"都是有效

4年前    添加回复 0

回复
橱窗的光

橱窗的光

打开调试工具可以看出,把p标签包在了div标签的内部

4年前    添加回复 0

回复

关于wrap疑问?

[最新 数据分析师 的回答]关于wrap疑问?-PHP中文网问答-关于wrap疑问?-PHP中文网问答围观一下哦,学习一下。

时间:4年前

橱窗的光

橱窗的光

wrap( function ) :一个回调函数,返回用于包裹匹配元素的 HTML 内容或 jQuery 对象

4年前 0

课件暂不提供下载,工作人员正在整理中,后期请多关注该课程~