包裹节点
语法格式 | 参数说明 | 功能描述 |
wrap(html) | html参数为字符串代码,用于生成元素并包裹所选元素 | 把所有选择的元素用其他字符串代码包裹起来 |
wrap(elem) | elem参数用于包装所选元素的DOM元素 | 把所有选择的元素用其他DOM元素包装起来 |
wrap(fn) | fn参数为包裹结构的一个函数 | 把所有选择的元素用function函数返回的代码包裹起来 |
unwrap() | 无参数 | 移除所选元素的父元素或包裹标记 |
wrapAll(html) | html参数为字符串代码,用于生成元素兵包裹所选元素 | 把所有选择的元素用单个元素包裹起来 |
wrapAll(elem) | elem参数用于包装所选元素的DOM元素 | 把所有选择的元素用单个DOM元素包裹起来 |
wrapInner(html) | html参数为字符串代码,用于生成元素并包裹所选元素 | 把所遇选择的元素的子内容(包括文本节点)用字符串代码包裹起来 |
wrapInner(elem) | elem参数用于包装所选元素的DOM元素 | 把所有选择的元素的子内容(包括文本节点)用DOM元素包裹起来 |
wrapInner(fn) | fn参数为包裹结构的一个函数 | 把所有选择的元素的子内容(包括文本节点)用function函数返回的代码包裹起来 |
在上述表格中, wrap(html) 与 wrapInner(html) 方法较为常用,前者包裹外部元素,后者包裹内部元素的文本字符。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 5 <title>jQ包裹节点</title> 6 <style> 7 body{font-style: 12px;} 8 p{background-color: #eee;padding: 5px;width: 200px;} 9 </style> 10 <script type="text/javascript" src="jquery-1.8.3.js"></script> 11 <script> 12 $(function(){ 13 $("p").wrap("<b></b>"); //所有段落标记字体加粗 14 $("span").wrapInner("<i></i>"); //所有段落中的span标记斜体 15 }); 16 </script> 17 </head> 18 <body> 19 <p>最喜爱的体育运动:<span>羽毛球</span></p> 20 <p>最爱看哪类型图书:<span>网络、技术(纯忽悠,分明是玄幻小说)</span></p> 21 </body> 22 </html>
结果如下图所示: