006-JQuery文档处理

 

内部插入

  •  append(content|fn) ：向每个匹配的元素内部追加内容
  •  appendTo(content) ：将内容追加到指定的元素中
  •  prepend(content) ：向每个匹配的元素内部最前面加入内容
  •  prependTo(content) ：将内容追加到指定的元素集合的最前面

示例：

 

 1 <!DOCTYPE html>
 2 <head>
 3   <meta charset="utf-8">
 4   <title>内部插入</title>
 5 
 6   <script src="js/jquery-1.8.0.min.js" charset="utf-8"></script>
 7 
 8 </head>
 9 <body>
10   <div class="box">
11     <p class="p1">line1</p>
12     <p class="p2">line2</p>
13     <p class="p3">line3</p>
14     <p class="p4">line4</p>
15   </div>
16 
17   <script type="text/javascript">
18     // 在box里面追加一个p
19     $(".box").append("<p class='p5'>line5</p>");
20 
21     // 把一个u标签加到div里面
22     $("<u>uuuuuuuu</u>").appendTo(".box");
23 
24     // 在box最前面加一个p
25     $(".box").prepend("<p class='p0'>line0</p>");
26 
27     // 把一个b标签加到div最前面
28     $("<b>bbbbbbbb</b>").prependTo(".box");
29   </script>
30 </body>
View Code

 

 

外部插入

  •  after(content|fn) ：在匹配的元素之后插入内容
  •  before(content|fn) ：在匹配的元素之前插入内容
  •  insertAfter(content) ：将内容插入指定的元素后面
  •  insertBefore(content) ：将内容插入指定的元素前面

示例：

 1 <!DOCTYPE html>
 2 <head>
 3   <meta charset="utf-8">
 4   <title>外部插入</title>
 5   <script src="js/jquery-1.8.0.min.js" charset="utf-8"></script>
 6 
 7 </head>
 8 <body>
 9   <div class="box">
10     <p class="p1">line1</p>
11     <p class="p2">line2</p>
12     <p class="p3">line3</p>
13     <p class="p4">line4</p>
14   </div>
15 
16   <script type="text/javascript">
17     // 在p1前面插入p0
18     $(".p1").before("<p class='p0'>line0</p>");
19 
20     // 在p4前面插入p5
21     $(".p4").after("<p class='p5'>line5</p>");
22 
23     // 将b标签插入在box前面
24     $("<b>bbbbbbbb</b>").insertBefore(".box");
25 
26     // 将u标签插入在box后面
27     $("<u>uuuuuuuu</u>").insertAfter(".box");
28   </script>
29 </body>
View Code

包裹

  •  wrap(html|element|fn) ：将匹配的元素使用结构化标记包裹起来
  •  unwrap() ：移出元素的父元素，这能快速取消 .wrap()方法的效果
  •  wrapAll(html|ele) ：将所有匹配的元素用单个结构化标记包裹起来
  •  wrapInner(htm|element|fnl) ：将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来

示例：

 1 <!DOCTYPE html>
 2 <head>
 3   <meta charset="utf-8">
 4   <title>包裹</title>
 5   <script src="js/jquery-1.8.0.min.js" charset="utf-8"></script>
 6 
 7 </head>
 8 <body>
 9     <p class="p1">line1</p>
10     <p class="p2">line2</p>
11     <p class="p3">line3</p>
12     <p class="p4">line4</p>
13 
14     <div class="container">
15       <div class="inner">Hello</div>
16       <div class="inner">Goodbye</div>
17     </div>
18   <script type="text/javascript">
19     // 将p标签使用div包裹起来
20     $("p").wrap("<div class='wrap'></div>");
21 
22     // 用原先div的内容作为新div的class，将每一个inner包裹起来
23     // 结果：
24     // <div class="container">
25     //   <div class="Hello">
26     //     <div class="inner">Hello</div>
27     //   </div>
28     //   <div class="Goodbye">
29     //     <div class="inner">Goodbye</div>
30     //   </div>
31     // </div>
32     $(".inner").wrap(function(){
33       return '<div class="'+$(this).text()+'"></div>';
34     });
35   </script>
36 </body>
warp示例
 1 <!DOCTYPE html>
 2 <head>
 3   <meta charset="utf-8">
 4   <title>包裹</title>
 5   <script src="js/jquery-1.8.0.min.js" charset="utf-8"></script>
 6 
 7 </head>
 8 <body>
 9     <p class="p1">line1</p>
10     <p class="p2">line2</p>
11     <p class="p3">line3</p>
12     <p class="p4">line4</p>
13 
14     <div class="container">
15       <div class="inner">Hello</div>
16       <div class="inner">Goodbye</div>
17     </div>
18   <script type="text/javascript">
19     // 用一个生成的div将所有p包裹起来
20     $("p").wrapAll("<div></div>");
21 
22     // 给p内的内容加粗
23     $("p").wrapInner("<b></b>");
24 
25   </script>
26 </body>
wrapAll wrapInner 示例

 

替换

  •  replaceWith(content|fn) ：将所有匹配的元素替换成指定的HTML或DOM元素
  •  replaceAll(selector) ：用匹配的元素替换掉所有 selector匹配到的元素

示例：

 1 <!DOCTYPE html>
 2 <head>
 3   <meta charset="utf-8">
 4   <title>包裹</title>
 5   <script src="js/jquery-1.8.0.min.js" charset="utf-8"></script>
 6 
 7 </head>
 8 <body>
 9     <p class="p1">line1</p>
10     <p class="p2">line2</p>
11     <p class="p3">line3</p>
12     <p class="p4">line4</p>
13 
14     <div class="container">
15       <div class="inner">Hello</div>
16       <div class="inner">Goodbye</div>
17     </div>
18   <script type="text/javascript">
19     // 将p1替换为b
20     $(".p1").replaceWith("<b>line1</b>");
21 
22     // 使用b将所有的p2进行替换
23     $("<b>line2</b>").replaceAll(".p2");
24   </script>
25 </body>
replaceWith replaceAll 示例

 

删除与复制

  •  empty() ：删除匹配元素所有子节点（包括文本）
  •  remove([expr]) ：从DOM中删除所有匹配的元素，绑定的事件/附加的数据都会被删除
  •  detach([expr]) ：从DOM中删除所有匹配的元素，绑定的事件/附加的数据不会被删除
  •  clone([Even[,deepEven]]) ：克隆匹配的DOM元素并且选中这些克隆的副本，可以将副本添加到其他的位置，Even（true 或者 false）指示事件处理函数是否会被复制，DeepEven是否复制事件处理程序和克隆的元素的所有子元素的数据

示例：

 1 <!DOCTYPE html>
 2 <head>
 3   <meta charset="utf-8">
 4   <title>复制和删除</title>
 5   <script src="js/jquery-1.8.0.min.js" charset="utf-8"></script>
 6 
 7 </head>
 8 <body>
 9     <p class="p1">line1</p>
10     <p class="p2">line2</p>
11     <p class="p3">line3</p>
12     <p class="p4">line4</p>
13 
14     <div class="container">
15       <div class="inner">Hello</div>
16       <div class="inner">Goodbye</div>
17     </div>
18 
19     <button>Clone Me!</button>
20   <script type="text/javascript">
21     // 删除container的所有子元素
22     $(".container").empty();
23 
24     // 删除p1
25     $("p").remove(".p1");
26 
27     // 点击按钮可以复制
28     $("button").click(function(){
29       $(this).clone(true).insertAfter(this);
30     });
31 
32   </script>
33 </body>
复制和删除 示例

 

posted @ 2017-10-19 16:25  agmj  阅读(125)  评论(0)  编辑  收藏  举报