当前位置： 移动技术网 > IT编程>开发语言>JavaScript > jQuery中wrapAll()方法用法实例教程

jQuery中wrapAll()方法用法实例教程

2019年03月30日  | 移动技术网IT编程  | 我要评论

本文实例讲述了jquery中wrapall()方法用法。分享给大家供大家参考。具体分析如下：

此方法将所有匹配的元素用单个元素包裹起来。
此方法与wrap()方法虽然功能类似，但是有着很大区别。wrap()方法会把每一个匹配的元素都匹配一次。

语法一:

用指定的dom元素去包裹匹配元素。

代码如下:

$(selector).wrapall(elem)


参数列表:
参数 描述
elem 用于包裹目标的dom元素。

 

实例:

 

代码如下:


<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "https://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="https://www.cnblogs.com/" />
<head>
<title>博客园</title>
<style type="text/css">
    p
   {
       width:200px;
       height:200px;
       border:1px solid blue;
       margin-top:10px;
    }
</style>
<script type="text/javascript" src="mytest/jquery/jquery-1.8.3.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("button").click(function(){
            $("p").wrapall(document.getelementbyid("content"));
        });
    });
</script>
</head>
<body>
    <p>我是个段落</p>
    <p>我是个段落</p>
    <p id="content"></p>
    <button>用p包裹每个段落</button>
</body>
</html>

 

语法二:

用html标记代码包裹匹配的元素。

代码如下:

$(selector).wrapall(html)


参数列表:
参数 描述
elem 用于包裹目标的dom元素。

 

实例:

 

代码如下:


<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "https://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="https://www.cnblogs.com/" />
<head>
<title>博客园</title>
<style type="text/css">
    .content
   {
        width:200px;
        height:200px;
        border:1px solid blue;
    }
</style>
<script type="text/javascript" src="mytest/jquery/jquery-1.8.3.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("button").click(function(){
            $("p").wrapall("<p class='content'></p>");
        });
    });
</script>
</head>
<body>
   <p>这是个段落</p>
   <p>这是个段落</p>
   <button>用p包裹每个段落</button>
</body>
</html>

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网