jQuery操作页面元素之包装元素
Posted 1314bjwg
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery操作页面元素之包装元素相关的知识，希望对你有一定的参考价值。
一：包装结点：指用指定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>
以上是关于jQuery操作页面元素之包装元素的主要内容，如果未能解决你的问题，请参考以下文章
如何使用Jquery / JavaScript完全删除canvas元素？
JavaScript之jQuery-10 T-Query(T-Query基本选择器T-Query对象操作方法创建元素事件绑定)