《jQuery、jQuery UI及jQuery Mobile技巧与示例》——3.15　技巧：包裹和解包元素

本节书摘来自异步社区《jQuery、jQuery UI及jQuery Mobile技巧与示例》一书中的第3章，第3.15节，作者：【荷】Adriaan de Jonge , 【美】Phil Dutson著，更多章节内容可以访问云栖社区“异步社区”公众号查看

3.15 技巧：包裹和解包元素

如果你想用一个新的HTML元素封装一个已经存在的元素，jQuery提供了多个函数来帮你完成此项工作。每个函数的名字都包含了单词“wrap”，但它们的工作细节却不一样。代码清单3-15演示了wrap()最基本的用法。

代码清单3-15 包裹和解包段落元素

00 !DOCTYPE html 

02 html lang="en" 

03 head 

04 title The wrap() and unwrap() function /title 

05 style 

06 /* 请将下列代码移至一个外部的

07 .css文件 */

08 div.wrapper {

09 border: 1px solid red;

11 /style 

12 /head 

13 body 

15 h2 Paragraphs below are wrapped. Click the paragraphs to 

16 test wrap() /h2 

18 p Paragraph to wrap /p 

19 p Paragraph to wrap /p 

21 script src="http://code.jquery.com/jquery-1.7.2.min.js" /script 

23 script 

24 // 请将下列代码移至一个外部的.js文件中

25 $(document).ready(function() {

27 $(p).wrap( div / 

29 $(p).click(function() {

30 $(this).unwrap( div / 

31 });

33 });

34 /script 

35 /body 

36 /html 

在这个例子中，每个段落元素都被包裹在它自己的包裹div（wrapper div）里面。然后，使用unwrap()函数移除这些div。

代码清单3-16演示了wrapInner()函数的用法。

代码清单3-16 包裹段落元素的内容

00 !DOCTYPE html 

02 html lang="en" 

03 head 

04 title The wrapInner() function /title 

05 style 

06 /* 请将下列代码移至一个外部的

07 .css文件 */

08 div.wrapper {

09 border: 1px solid red;

11 /style 

12 /head 

13 body 

15 h2 The paragraphs below are modified with wrapInner() /h2 

17 p Paragraph to wrap /p 

18 p Paragraph to wrap /p 

20 script src="http://code.jquery.com/jquery-1.7.2.min.js" /script 

22 script 

23 //请将下列代码移至一个外部的.js文件中

24 $(document).ready(function() {

26 $(p).wrapInner( div / 

28 // 不能用unwrap()来解包:

29 // $(p).click(function() {

30 // $(this).unwrap( div / 

31 // });

33 });

34 /script 

35 /body 

36 /html 

在这个例子中，段落元素自身没有被包裹。相反，段落元素的内容被包裹了。这意味着现在p元素包含了一个div。unwrap()函数在这个示例中是不能工作的。请记住将div放置在段落元素中不但是个坏习惯，而且还会导致你的HTML代码变得不规范，这个示例只是演示wrapInner()如何工作。

代码清单3-17演示了wrapAll()的用途。

代码清单3-17 包裹一组段落元素

00 !DOCTYPE html 

02 html lang="en" 

03 head 

04 title The wrapAll() function /title 

05 style 

06 /* 请将下列代码移至一个外部的

07 .css文件 */

08 div.wrapper {

09 border: 1px solid red;

11 /style 

12 /head 

13 body 

15 h2 Paragraphs below are wrapped with wrapAll() Click 

16 the paragraphs to unwrap() /h2 

18 p Paragraph to wrap /p 

19 p Paragraph to wrap /p 

21 script src="http://code.jquery.com/jquery-1.7.2.min.js" /script 

23 script 

24 // 请将下列代码移至一个外部的.js文件中

25 $(document).ready(function() {

27 $(p).wrapAll( div / 

29 $(p).click(function(){

30 $(this).unwrap( div / 

31 });

33 });

34 /script 

35 /body 

36 /html 

在这个示例中，一个包裹div包含了所有选取的段落元素。unwrap()函数则移除这个包裹元素。

【前端】使用jQuery封装一套UI组件 - 级联选择器组件 本篇文章来讲解下级联选择器组件 级联选择器，在实际项目中也是比较常用的组件，比如：省市区三级关联，上下级联动等 最后面会附上全部代码
【前端】使用jQuery封装一套UI组件 - 是和否滑动切换组件 本篇文章来讲解下是和否的滑动切换组件 切换滑动组件，使用的场景实际上就是一个开和关的场景，一般有是和否，开和关，禁用和启用等等，只需要设置0和1即可
【前端】使用jQuery封装一套UI组件 - 移动端时间选择组件 【首先要声明一点，技术不分好坏，能用好就行，不用鄙视老技术】 今天要给大家展示的是移动端时间选择组件 最开始，看到比较新颖的移动端时间选择组件是在某款手机上，分年月日下拉选择，UI界面也挺好看的 除了讲解实现的步骤以及关键点，文章最后面会有完整的代码
【前端】使用jQuery封装一套UI组件 - 单选框 目前前端技术发展非常快，各大厂都开源和分享了自家的前端框架，非常多成熟的UI组件供大家选择，很实用也很方便，给开发上节省了不少时间成本，当然少不了学习成本，不过也不会占用太多时间，只要有前端基础的话，原理基本都是通用的，只是写法不一样。 因此，除了学习现有的优秀前端之外，最好能自己根据原理封装一套自己的UI组件，目的是为了更好的理解前端知识点以及锻炼编程逻辑
异步社区 异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区，也是国内领先的IT专业图书社区，致力于优质学习内容的出版和分享，实现了纸书电子书的同步上架，于2015年8月上线运营。公众号【异步图书】，每日赠送异步新书。