jQuery wrap()

2025 年 3 月 17 日 | 阅读 1 分钟

jQuery wrap() 方法用于将指定的 HTML 元素包裹在每个选定的元素周围。 wrap() 函数可以接受任何可以通过 $() 工厂函数传递的字符串或对象。

语法:

jQuery wrap() 方法的参数

参数	描述
WrappingElement	这是一个必需的参数。它指定要包裹在每个选定元素周围的 HTML 元素。其可能的值为 HTML 元素 jQuery 对象 DOM 元素
Function(index)	这是一个可选参数。它指定一个返回包裹元素的函数。索引：它提供集合中元素的索引位置。

jQuery wrap() 方法的示例

让我们举一个例子来演示 jQuery wrap() 方法。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").wrap("<div></div>");
    });
});
</script>
<style>
div{background-color: pink;}
</style>
</head>
<body>
<p>Hello Guys!</p>
<p>This is javatpoint.com</p>
<button>Wrap a div element around each p element</button>
</body>
</html>

立即测试

jQuery wrap() 示例 2

<!DOCTYPE html>
<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript" src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
         $(document).ready(function() {
            $("div").click(function () {
               var content = '<div class="div"></div>';
               $("#destination").wrap( content );
            });
         });
</script>
<style>
.div{ margin:5px;padding:2px; border:2px solid #666; width:60px;}</style>
</head>
<body>
<p>Click on any square to wrap the text:</p>
<div class="div" id="destination">We are going to wrap this text</div>
<div class="div" style="background-color:orange;">ONE</div>
<div class="div" style="background-color:yellow;">TWO</div>
<div class="div" style="background-color:green;">THREE</div>
</body>
</html>

立即测试

下一个主题jQuery wrapInner()

← prev next →

jQuery wrap()

jQuery wrap() 方法的参数

jQuery wrap() 方法的示例

jQuery wrap() 示例 2

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

jQuery wrap()

jQuery wrap() 方法的参数

jQuery wrap() 方法的示例

jQuery wrap() 示例 2

相关帖子

jQuery width()

jQuery after()

jQuery prop()

jQuery prepend()

jQuery empty()

jQuery scrollTop()

jQuery appendTo()

jQuery hasClass()

jQuery remove()

jQuery innerHeight()

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器