jquey学习2之jquery动态添加页面片段

简介: 第一个方法:append()方法     【1】$(selector).append(content)//向匹配的所有标签中的内容末尾处添加Html代码,会编译成页面显示。  1 2 3 4 5 $(document).

第一个方法:append()方法

    【1】$(selector).append(content)//向匹配的所有标签中的内容末尾处添加Html代码,会编译成页面显示。 

 1 <html>
 2 <head>
 3 <script type="text/javascript" src="/jquery/jquery.js"></script>
 4 <script type="text/javascript">
 5 $(document).ready(function(){
 6   $("button").click(function(){
 7     $("p").append(" <b>Hello world!</b>");
 8   });
 9 });
10 </script>
11 </head>
12 <body>
13 <p>This is a paragraph.</p>
14 <p>This is another paragraph.</p>
15 <button>在每个 p 元素的结尾添加内容</button>
16 </body>
17 </html>
View Code

    【2】$(selector).append(function(index,html))//利用函数,向匹配的所有标签中的内容末尾处添加html代码。会编译成页面显示。

 1 <html>
 2 <head>
 3 <script type="text/javascript" src="/jquery/jquery.js"></script>
 4 <script type="text/javascript">
 5 $(document).ready(function(){
 6   $("button").click(function(){
 7     $("p").append(function(n){
 8       return "<b>This p element has index " + n + "</b>";
 9     });
10   });
11 });
12 </script>
13 </head>
14 
15 <body>
16 <h1>This is a heading</h1>
17 <p>This is a paragraph.</p>
18 <p>This is another paragraph.</p>
19 <button>在每个 p 元素的结尾添加内容</button>
20 </body>
21 </html>
View Code

第二个方法:appendTo()方法
 
  【1】$(content).appendTo(selector)//在匹配的标签中的内容末尾处添加html代码,会编译显示

 1  <script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-1.9.1.min.js"></script>
 2     <script type="text/javascript">
 3         function testAppendTo(){
 4             $("<b>我是一只狼</b>").appendTo("p");
 5         }
 6     </script>
 7     
 8   </head>
 9   
10   <body >
11     “欢迎来到主页”
12     <input type="button" value="p的结尾处添加内容" onclick="testAppendTo();">
13     <p>我isgu中国ibggyi热播</p>
14     朗朗上口
15   </body>
View Code

 

第三个方法:after()方法

 

    【1】$(selector).after(content)//在匹配的元素的后边添加内容,不是元素内容的后边,【而是元素结尾处,意味着添加的内容会变成兄弟标签。】

 1   <script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-1.9.1.min.js"></script>
 2     <script type="text/javascript">
 3         function testAfter(){
 4             $("p").after("<b>我是一只狼</b>");
 5         }
 6     </script>
 7     
 8   </head>
 9   
10   <body >
11     “欢迎来到主页”
12     <input type="button" value="p后边添加内容" onclick="testAfter();">
13     <p>我isgu中国ibggyi热播</p>
14     朗朗上口
15   </body>
16 </html>
View Code

    【2$(selector).after(function(index))//在匹配元素的后边。利用函数添加内容

 

 

 1 <html>
 2 <head>
 3 <script type="text/javascript" src="/jquery/jquery.js"></script>
 4 <script type="text/javascript">
 5 $(document).ready(function(){
 6   $("button").click(function(){
 7     $("p").after(function(n){
 8       return "<p>The p element above has index " + n + "</p>";
 9     });
10   });
11 });
12 </script>
13 </head>
14 
15 <body>
16 <h1>This is a heading</h1>
17 <p>This is a paragraph.</p>
18 <p>This is another paragraph.</p>
19 <button>在每个 p 元素后插入内容</button>
20 </body>
21 </html>
View Code

 

第四个方法:before()方法

   【1】$(selector).before(content)//在匹配的元素的前边添加内容。【不是元素内容的开始处,而是意味着添加的内容会变成兄弟标签】

 

 1     <script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-1.9.1.min.js"></script>
 2     <script type="text/javascript">
 3         function testBefore(){
 4             $("p").before("<b>我是一只狼</b>");
 5         }
 6     </script>
 7     
 8   </head>
 9   
10   <body >
11     “欢迎来到主页”
12     <input type="button" value="p的前边添加内容" onclick="testBefore();">
13     <p>我isgu中国ibggyi热播</p>
14     朗朗上口
15   </body>
View Code

 

    【2】$(selector).before(function(index))//在匹配的元素的前边添加内容。利用函数的方式.

 1 <html>
 2 <head>
 3 <script type="text/javascript" src="/jquery/jquery.js"></script>
 4 <script type="text/javascript">
 5 $(document).ready(function(){
 6   $("button").click(function(){
 7     $("p").before(function(n){
 8       return "<p>The p element below has index " + n + "</p>";
 9     });
10   });
11 });
12 </script>
13 </head>
14 
15 <body>
16 <h1>This is a heading</h1>
17 <p>This is a paragraph.</p>
18 <p>This is another paragraph.</p>
19 <button class="btn1">在每个段落前面插入新的段落</button>
20 </body>
21 </html>
View Code

第五个方法:clone()方法 

         【1】$(selector).clone(includeEvents)//将匹配的元素进行克隆出一个副本。includeEvents.可选。布尔值。规定是否复制元素的所有事件处理。默认地,副本中不包含事件处理器。

 1 <html>
 2 <head>
 3 <script type="text/javascript" src="/jquery/jquery.js"></script>
 4 <script type="text/javascript">
 5 $(document).ready(function(){
 6   $("button").click(function(){
 7     $("body").append($("p").clone());
 8   });
 9 });
10 </script>
11 </head>
12 <body>
13 <p>This is a paragraph.</p>
14 <button>复制每个 p 元素,然后追加到 body 元素</button>
15 </body>
16 </html>
View Code

第六个方法:empty()方法 

      【1】$(selector).empty()//移除匹配元素的内容(包括子节点和文本内容)元素本身还存在

 

 1   <script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-1.9.1.min.js"></script>
 2     <script type="text/javascript">
 3         function testEmty(){
 4             $("p").empty();
 5         }
 6     </script>
 7     
 8   </head>
 9   
10   <body >
11     “欢迎来到主页”
12     <input type="button" value="移除p中的内容" onclick="testEmty();">
13     <p>我isgu中国ibggyi热播</p>
14     朗朗上口
15   </body>
View Code

 

  功能类似,但实现的目的或细节存在差异的方法:

  【2】$(selector).remove()//移除所有匹配的元素。元素本身已经不存在

  【3】$(selector).detach()//移除所有匹配的元素。

        detach() 方法移除被选元素,包括所有文本和子节点。

       这个方法会保留 jQuery 对象中的匹配的元素,因而可以在将来再使用这些匹配的元素。

       detach() 会保留所有绑定的事件、附加的数据,这一点与 remove() 不同。

    移动元素

 

 1 <html>
 2 <head>
 3 <script type="text/javascript" src="/jquery/jquery.js"></script>
 4 <script type="text/javascript">
 5 $(document).ready(function(){
 6   $("button").click(function(){
 7     $("body").append($("p").detach());
 8   });
 9 });
10 </script>
11 </head>
12 <body>
13 <p>This is a paragraph.</p>
14 <button>移动 p 元素</button>
15 </body>
16 </html>
View Code

 

    删除元素,还能恢复元素

 

 1 <html>
 2 <head>
 3 <script type="text/javascript" src="/jquery/jquery.js"></script>
 4 <script type="text/javascript">
 5 $(document).ready(function(){
 6   var x;
 7   $("#btn1").click(function(){
 8     x=$("p").detach();
 9   });
10   $("#btn2").click(function(){
11     $("body").prepend(x);
12   });
13 });
14 </script>
15 </head>
16 <body>
17 <p>这是一个段落。</p>
18 <button id="btn1">删除 p 元素</button>
19 <button id="btn2">恢复 p 元素</button>
20 </body>
21 </html>
View Code

 

    移动元素,并保留其click事件

 1 <html>
 2 <head>
 3 <script type="text/javascript" src="/jquery/jquery.js"></script>
 4 <script type="text/javascript">
 5 $(document).ready(function(){
 6   $("button").click(function(){
 7     $("body").append($("p").detach());
 8   });
 9  $("p").click(function(){
10     $(this).animate({fontSize:"+=1px"})
11   });
12 });
13 </script>
14 </head>
15 <body>
16 <p>在本段落移动之后,试着点击该段落,请注意它保留了 click 事件。</p>
17 <button>移动 p 元素</button>
18 </body>
19 </html>
View Code

 

 

 

 

 

第七个方法:prepend()方法 

   【1】$(selector).prepend(content)//方法在被选元素的开头(仍位于内部)插入指定内容。

 1 <html>
 2 <head>
 3 <script type="text/javascript" src="/jquery/jquery.js"></script>
 4 <script type="text/javascript">
 5 $(document).ready(function(){
 6   $("button").click(function(){
 7     $("p").prepend("<b>Hello world!</b> ");
 8   });
 9 });
10 </script>
11 </head>
12 <body>
13 <p>This is a paragraph.</p>
14 <p>This is another paragraph.</p>
15 <button>在每个 p 元素的开头插入内容</button>
16 </body>
17 </html>
View Code

    【2$(selector).prepend(function(index,html))//利用函数,在匹配元素的内容的开始处添加新的内容

必需。规定返回待插入内容的函数。

  • index - 可选。接受选择器的 index 位置。
  • html - 可选。接受选择器的当前 HTML。
 1 <html>
 2 <head>
 3 <script type="text/javascript" src="/jquery/jquery.js"></script>
 4 <script type="text/javascript">
 5 $(document).ready(function(){
 6   $("button").click(function(){
 7     $("p").prepend(function(n){
 8       return "<b>这个 p 元素的 index 是:" + n + "</b> ";
 9     });
10   });
11 });
12 </script>
13 </head>
14 
15 <body>
16 <h1>这是一个标题</h1>
17 <p>这是一个段落。</p>
18 <p>这是另一个段落。</p>
19 <button>在每个 p 元素的开头插入内容</button>
20 </body>
21 </html>
View Code

第八个方法:prependTo()方法

 

【1】$(content).prependTo(selector)//在匹配元素的开头(仍位于内部)插入指定内容。和prepend()方法功效一样,不一样在选择器和添加内容的位置
 1 <html>
 2 <head>
 3 <script type="text/javascript" src="/jquery/jquery.js"></script>
 4 <script type="text/javascript">
 5 $(document).ready(function(){
 6   $(".btn1").click(function(){
 7     $("<b>Hello World!</b>").prependTo("p");
 8   });
 9 });
10 </script>
11 </head>
12 <body>
13 <p>This is a paragraph.</p>
14 <p>This is another paragraph.</p>
15 <button class="btn1">在每个 p 元素的开头插入文本</button>
16 </body>
17 </html>
View Code

第九个方法:replaceAll()方法

【1】$(content).replaceAll(selector)//用指定的内容替换所有的匹配元素(包括文本和子节点)
 
 1    <script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-1.9.1.min.js"></script>
 2     <script type="text/javascript">
 3         function testReplaceAll(){
 4             $("<b>我是一只狼</b>").replaceAll("p");
 5         }
 6     </script>
 7     
 8   </head>
 9   
10   <body >
11     “欢迎来到主页”
12     <input type="button" value="replaceAll" onclick="testReplaceAll();">
13     <p>我isgu中国ibggyi热播</p>
14     <p>sdafgyi热播</p>
15     
16     朗朗上口
17   </body>
View Code
 

第十个方法:replaceWith()方法

 

【1】$(selector).replaceWith(content)//将所有匹配的元素替换成指定的内容
 1 <script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-1.9.1.min.js"></script>
 2     <script type="text/javascript">
 3         function testReplaceWith(){
 4             $("p").replaceWith("<b>我是一只狼</b>");
 5         }
 6     </script>
 7     
 8   </head>
 9   
10   <body >
11     “欢迎来到主页”
12     <input type="button" value="replaceWith" onclick="testReplaceWith();">
13     <p>我isgu中国ibggyi热播</p>
14     <p>sdafgyi热播</p>
15     
16     朗朗上口
17   </body>
View Code

【2】$(selector).replaceWith(function())//使用指定的函数替换匹配元素的内容

 
 1 <html>
 2 <head>
 3 <script type="text/javascript" src="/jquery/jquery.js"></script>
 4 <script type="text/javascript">
 5 $(document).ready(function(){
 6   $("button").click(function(){
 7     $("p").replaceWith(function(){
 8     return "<p>Hello World!</p>";
 9     });
10   });
11 });
12 </script>
13 </head>
14 <body>
15 <p>这是一个段落。</p>
16 <p>这是另一个段落。</p>
17 <button class="btn1">用新的 p 元素替换所有段落</button>
18 </body>
19 </html>
View Code
 

dsf

 

 

 
相关文章
|
15天前
|
JavaScript 前端开发 CDN
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
本文是关于jQuery的学习笔记,涵盖了jQuery的简介、语法、选择器、事件处理以及hide()、show()、toggle()等方法的使用。
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
|
2月前
|
JavaScript
分别用jquery和js修改页面元素
分别用jquery和js修改页面元素
29 2
|
3月前
|
移动开发 开发框架 JavaScript
基于Jquery WeUI的微信开发H5页面控件的经验总结(1)
基于Jquery WeUI的微信开发H5页面控件的经验总结(1)
|
2月前
|
JavaScript Java
分别使用java script和jQuery添加页面元素
分别使用java script和jQuery添加页面元素
28 0
|
3月前
|
移动开发 JSON JavaScript
基于Jquery WeUI的微信开发H5页面控件的经验总结(2)
基于Jquery WeUI的微信开发H5页面控件的经验总结(2)
|
4月前
|
开发框架 JavaScript 前端开发
技术经验解读:从零开始学习jQuery(十)jQueryUI常用功能实战
技术经验解读:从零开始学习jQuery(十)jQueryUI常用功能实战
37 0
|
5月前
|
JavaScript 前端开发 索引
jQuery学习教程,写更少的代码,做更多的事情(二)
jQuery学习教程,写更少的代码,做更多的事情(二)
|
5月前
|
XML JavaScript 前端开发
JavaScript学习 -- jQuery库
JavaScript学习 -- jQuery库
73 0
|
5月前
|
JavaScript 前端开发 数据安全/隐私保护
jQuery选择器-第2次课-大部分跟CSS3选择器类似-几乎没有学习成本-附案例-作业等
jQuery选择器-第2次课-大部分跟CSS3选择器类似-几乎没有学习成本-附案例-作业等
37 0
|
5月前
|
JavaScript 前端开发 API
jquery是什么-是否还有必要学-与JS的区别-学习技巧-文末附资料、案例、作业
jquery是什么-是否还有必要学-与JS的区别-学习技巧-文末附资料、案例、作业
76 0