jQuery系列07 

一、DOM插入并包裹现有内容
    1.wrap(Element)：在每个匹配的元素外层包上一个html元素。
    2.unwrap()：将匹配元素的父元素删除，保留自身（和兄弟元素）在原来的位置。
    3.wrapAll(Element)：在所有的匹配的元素外面包裹一层html元素。
    4.wrapInner(Element)：在匹配里面的内容外包裹一层html元素。
    注意：要插入的html标签要用双引号包裹，并且要按照HTML的格式书写，可以使用存在的元素来包裹元素，但是原元素不会移动位置。
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div id="div"></div>
    <p>this is p</p>
    <p>this is also p</p>
</body>
<script>
    $(function () {
        $("p:first-of-type").wrap("#div");
    })
</script>
</html>

可以用已经存在的元素来包裹其他的元素，但是原来的元素不会移动位置，只是产生了一个副本。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style type="text/css">
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div>
        <p>this p in div</p>
    </div>
</body>
<script type="text/javascript">
    $(function () {
        $("p").unwrap();
    })
</script>
</html>

这里删除了p元素的父元素div。在css中给div添加了一个样式，这样在移除div之后，能够看到明显的效果。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="../jquery-3.2.1.min.js"></script>
    <style type="text/css">
        div {
            width: 100px;
            height: 200px;
            background-color: orange;
            border:1px solid #ccc;
        }
    </style>
</head>
<body>
    <span>this is p1</span>
    <span>this is p2</span>
    <span>this is p3</span>
</body>
<script>
    $(function(){
        $("span").wrapAll("<div></div>");
    })
</script>
</html>

wrapAll在所有的匹配的元素外面添加一个HTML元素。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div></div>
</body>
<script>
    $(function () {
        $("div").wrapInner("<p>this is p</p>");
    })
</script>
</html>

在一个空的div中添加了一个p元素。

 

posted on 2017-08-02 22:26  观琪不喻  阅读(79)  评论(0)    收藏  举报

导航