思洋互动网站建设学前班

内容包装

所谓内容包装，实际上是在DIV中的内容外层再包裹上一层标记。内容包装需要使用jQuery的工具函数wrap()。例如，我们想利用动态包装操作将DIV中原有的文本转换成文字超链接。

该函数把所有匹配的元素用其他元素的结构化标记包裹起来。其语法形式如下：

1. wrap(html)  
2. wrap(elem)  
3. wrap(fn) 

注：html，HTML标记代码字符串，用于动态生成元素并包裹目标元素；elem，用于包装目标元素的DOM元素；fn，生成包裹结构的一个函数。

HTML代码和CSS样式参考光盘内容。下面直接看一下JavaScript功能实现：

1. 1 <script type="text/javascript"> 
2. 2   $(function(){  
3. 3       $("#wrap").click(function(){  
4. 4           $("#div1").wrapInner("<a href=    
5.     'http://jQuery.com'></a>");  
6.             //在div1内包装了一个超链接元素  
7. 5       });  
8. 6   });  
9. 7 </script> 

 

效果如图3.27所示。

图3.27  DIV内元素包装