一：包装结点：指用指定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>
