您当前的位置：首页 > 计算机 > 编程开发 > JavaScript

jQuery wrap()、wrapAll()和wrapInner()方法

时间：03-07来源：作者：点击数：

在 jQuery 中，如果想要将某个元素用其他元素包裹起来，我们可以用 wrap()、wrapAll() 和 wrapInner() 3种方法来实现。下面就对这三种方法一一介绍。

jQuery wrap()方法

在 jQuery 中，我们可以使用 wrap() 方法将所选元素用其他元素包裹起来。

语法：

$(A).wrap(B)

$(A).wrap(B) 表示将 A 元素用 B 元素包裹起来。

举例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            $("#btn").click(function () {
                $("p").wrap('<div style="background-color:orange;"></div>');
            });
        })
    </script>
</head>
<body>
    <p>城东书院</p>
    <p>城东书院</p>
    <p>城东书院</p>
    <input id="btn" type="button" value="包裹" />
</body>
</html>

默认情况下，预览效果如图 1 所示。

图 1：默认效果

我们点击【包裹】按钮后，预览效果如图 2 所示。

图2：点击按钮后的效果

jQuery wrapAll()方法

我们都知道，replaceWith() 和 replaceAll() 这两个方法的功能是相同的，只不过操作对象是颠倒的而已。但是这里大家要注意啦：wrap() 和 wrapAll() 这两个方法的功能是不相同的。

在 jQuery 中，wrap() 方法是将所有元素“单独”包裹，而 wrapAll() 方法是将所匹配的元素“一起”包裹。

<p>城东书院</p>
<p>城东书院</p>
<p>城东书院</p>

对于上面这段代码，如果使用$("p").wrap("<div></div>")，则会得到以下结果：

<div><p>城东书院</p><div>
<div><p>城东书院</p><div>
<div><p>城东书院</p><div>

如果使用$("p").wrapAll("<div></div>")，则会得到以下结果：

<div>
    <p>城东书院</p>
    <p>城东书院</p>
    <p>城东书院</p>
</div>

举例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            $("#btn").click(function () {
                $("p").wrapAll('<div style="background-color:orange;"></div>');
            });
        })
    </script>
</head>
<body>
    <p>城东书院</p>
    <p>城东书院</p>
    <p>城东书院</p>
    <input id="btn" type="button" value="包裹" />
</body>
</html>

默认情况下，预览效果如图 3 所示。

图 3：默认效果

我们点击【包裹】按钮后，此时预览效果如图 4 所示。

图 4：点击按钮后的效果

jQuery wrapInner()方法

在 jQuery 中，我们可以使用 wrapInner() 方法将所选元素的“内部所有元素以及文本”用其他元素包裹起来。

语法：

$(A).wrapInner(B)

$(A).wrapInner(B) 表示将 A 元素的“内部所有元素以及文本”用 B 元素包裹起来。注意，wrapInner() 方法不会包裹 A 元素本身。

举例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            $("#btn").click(function () {
                $("p").wrapInner("<strong></strong>");
            });
        })
    </script>
</head>
<body>
    <p>城东书院</p>
    <p>城东书院</p>
    <p>城东书院</p>
    <input id="btn" type="button" value="包裹" />
</body>
</html>

默认情况下，预览效果如图 5 所示。

图 5：默认效果

我们点击【包裹】按钮后，预览效果如图 6 所示。

图 6：点击按钮后的效果

我们点击【包裹】按钮后，此时得到的 HTML 结构如下。

<p><strong>城东书院</strong></p>
<p><strong>城东书院</strong></p>
<p><strong>城东书院</strong></p>

方便获取更多学习、工作、生活信息请关注本站微信公众号 城东书院微信服务号

来顶一下

返回首页

上一篇:jQuery each()方法的用法下一篇:jQuery replaceWith()和replaceAll()方法

高考生入学注意：这些大	【健康】纯净水、天然
14种竞赛生升学路径盘	excel后缀xls和xlsx有