包裹节点


语法格式	参数说明	功能描述
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>

View Code

结果如下图所示：

高否？富否？帅否？否？滚去学习！