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

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

本节书摘来自异步社区《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>
01 
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;
10  }
11  </style>
12 </head>
13 <body>
14  
15 <h2>Paragraphs below are wrapped. Click the paragraphs to 
16  test wrap()</h2>
17 
18 <p>Paragraph to wrap</p>
19 <p>Paragraph to wrap</p>
20 
21 <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
22 
23 <script>
24 // 请将下列代码移至一个外部的.js文件中
25 $(document).ready(function() {
26  
27  $('p').wrap('<div class="wrapper"/>');
28 
29  $('p').click(function() {
30   $(this).unwrap('<div class="wrapper"/>');
31  });
32  
33 });
34 </script>
35 </body>
36 </html>

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

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

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

00 <!DOCTYPE html>
01 
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;
10  }
11  </style>
12 </head>
13 <body>
14 
15 <h2>The paragraphs below are modified with wrapInner()</h2>
16 
17 <p>Paragraph to wrap</p>
18 <p>Paragraph to wrap</p>
19 
20 <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
21 
22 <script>
23 //请将下列代码移至一个外部的.js文件中
24 $(document).ready(function() {
25  
26  $('p').wrapInner('<div class="wrapper"/>');
27 
28  // 不能用unwrap()来解包:
29  // $('p').click(function() {
30  //  $(this).unwrap('<div class="wrapper"/>');
31  // });
32  
33 });
34 </script>
35 </body>
36 </html>

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

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

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

00 <!DOCTYPE html>
01 
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;
10  }
11  </style>
12 </head>
13 <body>
14 
15 <h2>Paragraphs below are wrapped with wrapAll() Click 
16   the paragraphs to unwrap()</h2>
17 
18 <p>Paragraph to wrap</p>
19 <p>Paragraph to wrap</p>
20 
21 <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
22 
23 <script>
24 // 请将下列代码移至一个外部的.js文件中
25 $(document).ready(function() {
26  
27  $('p').wrapAll('<div class="wrapper"/>');
28 
29  $('p').click(function(){
30   $(this).unwrap('<div class="wrapper"/>');
31  });
32  
33 });
34 </script>
35 </body>
36 </html>

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

相关文章
|
JavaScript
jQuery学习(九)—常用的包裹方法
jQuery学习(九)—常用的包裹方法
|
JSON 前端开发 JavaScript
【前端】使用jQuery封装一套UI组件 - 级联选择器组件
本篇文章来讲解下级联选择器组件 级联选择器,在实际项目中也是比较常用的组件,比如:省市区三级关联,上下级联动等 最后面会附上全部代码
1340 0
|
6月前
|
Web App开发 缓存 JavaScript
JQuery Kendo UI使用技巧总结
JQuery Kendo UI使用技巧总结
42 4
jquery-easyui和jquery-ui的slider冲突解决
jquery-easyui和jquery-ui的slider冲突解决
|
移动开发 JavaScript 前端开发
前后端的展示页面.本项目采用了以下知识点.JSP Servlect HTML5 JQUERY JavaScript Css3 MYSQL Sping架包 和几个框架。(二)
前后端的展示页面.本项目采用了以下知识点.JSP Servlect HTML5 JQUERY JavaScript Css3 MYSQL Sping架包 和几个框架。
82 0
前后端的展示页面.本项目采用了以下知识点.JSP Servlect HTML5 JQUERY JavaScript Css3 MYSQL Sping架包 和几个框架。(二)
|
移动开发 JavaScript 前端开发
前后端的展示页面.本项目采用了以下知识点.JSP Servlect HTML5 JQUERY JavaScript Css3 MYSQL Sping架包 和几个框架。(一)
前后端的展示页面.本项目采用了以下知识点.JSP Servlect HTML5 JQUERY JavaScript Css3 MYSQL Sping架包 和几个框架。
91 0
前后端的展示页面.本项目采用了以下知识点.JSP Servlect HTML5 JQUERY JavaScript Css3 MYSQL Sping架包 和几个框架。(一)
|
JavaScript 前端开发 程序员
【前端】使用jQuery封装一套UI组件 - 是和否滑动切换组件
本篇文章来讲解下是和否的滑动切换组件 切换滑动组件,使用的场景实际上就是一个开和关的场景,一般有是和否,开和关,禁用和启用等等,只需要设置0和1即可
151 0
|
JavaScript 前端开发 程序员
【前端】使用jQuery封装一套UI组件 - 可编辑下拉框组件
下拉框也是比较常用的组件,对应原生的下拉标签就是select 本篇文章就来讲讲可编辑下拉框组件的封装过程
367 0
|
JavaScript 前端开发 程序员
【前端】使用jQuery封装一套UI组件 - 移动端时间选择组件
【首先要声明一点,技术不分好坏,能用好就行,不用鄙视老技术】 今天要给大家展示的是移动端时间选择组件 最开始,看到比较新颖的移动端时间选择组件是在某款手机上,分年月日下拉选择,UI界面也挺好看的 除了讲解实现的步骤以及关键点,文章最后面会有完整的代码
245 0
|
14天前
|
搜索推荐 Android开发 开发者
探索安卓开发中的自定义视图:打造个性化UI组件
【10月更文挑战第39天】在安卓开发的世界中,自定义视图是实现独特界面设计的关键。本文将引导你理解自定义视图的概念、创建流程,以及如何通过它们增强应用的用户体验。我们将从基础出发,逐步深入,最终让你能够自信地设计和实现专属的UI组件。