一：包装结点：指用指定HTML结构包装现有元素，被包装元素成为结构的子结点。就好像python中的装饰器。
1：wrap()：
wrap方法用指定HTML结构包装结点，参数可以是HTML字符串、选择器或者jQuery对象。匹配多个结点时，分别包装各个结点。
2：wrapAll()：
wrapAll方法将所有选中的结点包装在一个HTML结构中，参数可以是HTML字符串、选择器或者jQuery对象。
1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta charset="utf-8">
6 <title>包装现有元素</title>
7 <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js">
8 </script>
9 <style type="text/css">
10 div {
11 border: 1px solid rebeccapurple;
12 padding: 5px;
13 margin: 5px;
14 }
15 </style>
16 </head>
17 <script>
18 $(function() {
19 $(‘#btn‘).click(function() {
20 //$(‘:type‘)
21 $(‘:text‘).wrap(‘<div><b></b></div>‘)
22 })
23 $(‘#btn1‘).click(function() {
24 /*
25 $(‘元素‘).$(‘span‘)匹配到了三个span元素,
26 返回的jQuery对象是一个数组,包含这三个span元素的jQuery对象,
27 返回的jQuery对象可以通过下标来操纵你指定下标的span元素。
28 */
29 $(‘span‘).wrapAll(‘<div><b></b></div>‘)
30 var a = $(‘span‘)
31 console.log(typeof a)
32 console.log(a)
33 })
34 })
35 </script>
36
37 <body>
38 用户名：
39 <input type="text" value="username"><br>
40 <span type="text">wrap包装：当匹配到多个结点时分别包装结点,</span><br>
41 <!--单击包装后在浏览器中查看源代码-->
42 <button id="btn">wrap包装</button><br>
43 <button id="btn1">wrapAll元素</button><br>
44 <!--wrapAll方法会把所有的span元素包装到一个指定的HTML结构中-->
45 <span >知道学院</span>在线<span>jQuery教程</span><br>
46 </body>
47
48 </html>
二：
1：wrapInner()方法
wrapInner方法用指定的HTML结构包装选中结点的内部内容,即包装的是选中的结点的内部,而选中的元素处于指定的HTML结构的外面.相当于wrapInner方法添加的是指定的子元素。注意wrap和wrapInner方法的区别.
2：unwrap()方法
unwrap方法可解除包装，即删除其父结点，原来的祖父结点成为其父结点。
1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta charset="utf-8">
6 <title>注意wrap和wrapInner包装结点的区别</title>
7 <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js">
8 </script>
9 <script>
10 $(function() {
11 $(‘#btn1‘).click(function() {
12 $(‘span‘).wrapInner(‘<div><b></b></div>‘)
13 })17 })
18 </script>
19 <style>
20 div {
21 border: 1px solid red;
22 padding: 5px;
23 margin: 5px;
24 }
25 </style>
26 </head>
27
28 <body>
29 操作页面元素
30 <span>知道学院</span>在线<span>jQuery教程</span>
31 <button id="btn1">wrapInner元素</button>
33 </body>
34
35 </html>
#unwrap()方法：解除指定的结点外面的父元素。
1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta charset="utf-8">
6 <title>注意wrap和wrapInner包装结点的区别</title>
7 <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js">
8 </script>
9 <script>
10 $(function() {
11 $(‘#btn2‘).click(function() {
12 $(‘span‘).unwrap()
13 })
14 })
15 </script>
16 <style>
17 div {
18 border: 1px solid red;
19 padding: 5px;
20 margin: 5px;
21 }
22 </style>
23 </head>
24
25 <body>
26 操作页面元素
27 <div><b><span>知道学院</span>在线<span>jQuery教程</span></b></div>
28 <button id="btn2">unwrap解包装</button>
29 </body>
30
31 </html>
原文地址：https://www.cnblogs.com/1314bjwg/p/12283227.html
时间： 2024-10-12 22:26:46