《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()函数则移除这个包裹元素。

相关文章
|
2月前
|
JavaScript
jQuery - 添加元素
通过 jQuery,可以很容易地添加新元素/内容。
47 10
|
3月前
|
JavaScript 前端开发
jQuery - 添加元素
jQuery - 添加元素
25 2
|
3月前
|
JavaScript 前端开发
jQuery - 添加元素
jQuery - 添加元素
30 6
|
4月前
|
JavaScript
分别用jquery和js修改页面元素
分别用jquery和js修改页面元素
42 2
|
4月前
|
前端开发 JavaScript
jQuery改变元素的方法
jQuery改变元素的方法
29 1
|
4月前
|
JavaScript Java
分别使用java script和jQuery添加页面元素
分别使用java script和jQuery添加页面元素
36 0
|
4月前
|
前端开发 开发工具 git
|
4月前
|
JavaScript
JQuery——动态添加元素导致点击事件失效
JQuery——动态添加元素导致点击事件失效
45 0
|
6月前
|
开发工具 Android开发 开发者
Android `.9.png` 图像是用于UI的可拉伸格式,保持元素清晰度和比例
【6月更文挑战第26天】Android `.9.png` 图像是用于UI的可拉伸格式,保持元素清晰度和比例。通过边上的黑线定义拉伸区域,右下角黑点标识内容区域,适应文本或组件大小变化。常用于按钮、背景等,确保跨屏幕尺寸显示质量。Android SDK 提供`draw9patch.bat`工具来创建和编辑。**
262 6
|
6月前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作