第一个方法：append()方法

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

 <html>

 <head>

 <script type="text/javascript" src="/jquery/jquery.js"></script>

 <script type="text/javascript">

 $(document).ready(function(){

   $("button").click(function(){

     $("p").append(" <b>Hello world!</b>");

   });

 });

 </script>

 </head>

 <body>

 <p>This is a paragraph.</p>

 <p>This is another paragraph.</p>

 <button>在每个 p 元素的结尾添加内容</button>

 </body>

 </html>

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

 <html>

 <head>

 <script type="text/javascript" src="/jquery/jquery.js"></script>

 <script type="text/javascript">

 $(document).ready(function(){

   $("button").click(function(){

     $("p").append(function(n){

       return "<b>This p element has index " + n + "</b>";

     });

   });

 });

 </script>

 </head>

 <body>

 <h1>This is a heading</h1>

 <p>This is a paragraph.</p>

 <p>This is another paragraph.</p>

 <button>在每个 p 元素的结尾添加内容</button>

 </body>

 </html>

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

  <script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-1.9.1.min.js"></script>

     <script type="text/javascript">

         function testAppendTo(){

             $("<b>我是一只狼</b>").appendTo("p");

         }

     </script>

   </head>

   <body >

     “欢迎来到主页”

     <input type="button" value="p的结尾处添加内容" onclick="testAppendTo();">

     <p>我isgu中国ibggyi热播</p>

     朗朗上口

   </body>

第三个方法：after()方法

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

   <script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-1.9.1.min.js"></script>

     <script type="text/javascript">

         function testAfter(){

             $("p").after("<b>我是一只狼</b>");

         }

     </script>

   </head>

   <body >

     “欢迎来到主页”

     <input type="button" value="p后边添加内容" onclick="testAfter();">

     <p>我isgu中国ibggyi热播</p>

     朗朗上口

   </body>

 </html>

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

 <html>

 <head>

 <script type="text/javascript" src="/jquery/jquery.js"></script>

 <script type="text/javascript">

 $(document).ready(function(){

   $("button").click(function(){

     $("p").after(function(n){

       return "<p>The p element above has index " + n + "</p>";

     });

   });

 });

 </script>

 </head>

 <body>

 <h1>This is a heading</h1>

 <p>This is a paragraph.</p>

 <p>This is another paragraph.</p>

 <button>在每个 p 元素后插入内容</button>

 </body>

 </html>

第四个方法：before()方法

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

     <script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-1.9.1.min.js"></script>

     <script type="text/javascript">

         function testBefore(){

             $("p").before("<b>我是一只狼</b>");

         }

     </script>

   </head>

   <body >

     “欢迎来到主页”

     <input type="button" value="p的前边添加内容" onclick="testBefore();">

     <p>我isgu中国ibggyi热播</p>

     朗朗上口

   </body>

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

 <html>

 <head>

 <script type="text/javascript" src="/jquery/jquery.js"></script>

 <script type="text/javascript">

 $(document).ready(function(){

   $("button").click(function(){

     $("p").before(function(n){

       return "<p>The p element below has index " + n + "</p>";

     });

   });

 });

 </script>

 </head>

 <body>

 <h1>This is a heading</h1>

 <p>This is a paragraph.</p>

 <p>This is another paragraph.</p>

 <button class="btn1">在每个段落前面插入新的段落</button>

 </body>

 </html>

第五个方法：clone()方法　

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

 <html>

 <head>

 <script type="text/javascript" src="/jquery/jquery.js"></script>

 <script type="text/javascript">

 $(document).ready(function(){

   $("button").click(function(){

     $("body").append($("p").clone());

   });

 });

 </script>

 </head>

 <body>

 <p>This is a paragraph.</p>

 <button>复制每个 p 元素，然后追加到 body 元素</button>

 </body>

 </html>

第六个方法：empty()方法　

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

   <script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-1.9.1.min.js"></script>

     <script type="text/javascript">

         function testEmty(){

             $("p").empty();

         }

     </script>

   </head>

   <body >

     “欢迎来到主页”

     <input type="button" value="移除p中的内容" onclick="testEmty();">

     <p>我isgu中国ibggyi热播</p>

     朗朗上口

   </body>

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

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

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

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

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

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

　　　　移动元素

 <html>

 <head>

 <script type="text/javascript" src="/jquery/jquery.js"></script>

 <script type="text/javascript">

 $(document).ready(function(){

   $("button").click(function(){

     $("body").append($("p").detach());

   });

 });

 </script>

 </head>

 <body>

 <p>This is a paragraph.</p>

 <button>移动 p 元素</button>

 </body>

 </html>

　　　　删除元素，还能恢复元素

 <html>

 <head>

 <script type="text/javascript" src="/jquery/jquery.js"></script>

 <script type="text/javascript">

 $(document).ready(function(){

   var x;

   $("#btn1").click(function(){

     x=$("p").detach();

   });

   $("#btn2").click(function(){

     $("body").prepend(x);

   });

 });

 </script>

 </head>

 <body>

 <p>这是一个段落。</p>

 <button id="btn1">删除 p 元素</button>

 <button id="btn2">恢复 p 元素</button>

 </body>

 </html>

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

 <html>

 <head>

 <script type="text/javascript" src="/jquery/jquery.js"></script>

 <script type="text/javascript">

 $(document).ready(function(){

   $("button").click(function(){

     $("body").append($("p").detach());

   });

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

     $(this).animate({fontSize:"+=1px"})

   });

 });

 </script>

 </head>

 <body>

 <p>在本段落移动之后，试着点击该段落，请注意它保留了 click 事件。</p>

 <button>移动 p 元素</button>

 </body>

 </html>

第七个方法：prepend()方法　

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

 <html>

 <head>

 <script type="text/javascript" src="/jquery/jquery.js"></script>

 <script type="text/javascript">

 $(document).ready(function(){

   $("button").click(function(){

     $("p").prepend("<b>Hello world!</b> ");

   });

 });

 </script>

 </head>

 <body>

 <p>This is a paragraph.</p>

 <p>This is another paragraph.</p>

 <button>在每个 p 元素的开头插入内容</button>

 </body>

 </html>

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

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

  • index - 可选。接受选择器的 index 位置。
  • html - 可选。接受选择器的当前 HTML。
 <html>

 <head>

 <script type="text/javascript" src="/jquery/jquery.js"></script>

 <script type="text/javascript">

 $(document).ready(function(){

   $("button").click(function(){

     $("p").prepend(function(n){

       return "<b>这个 p 元素的 index 是：" + n + "</b> ";

     });

   });

 });

 </script>

 </head>

 <body>

 <h1>这是一个标题</h1>

 <p>这是一个段落。</p>

 <p>这是另一个段落。</p>

 <button>在每个 p 元素的开头插入内容</button>

 </body>

 </html>

第八个方法：prependTo()方法

【1】$(content).prependTo(selector)//在匹配元素的开头（仍位于内部）插入指定内容。和prepend()方法功效一样，不一样在选择器和添加内容的位置
 <html>

 <head>

 <script type="text/javascript" src="/jquery/jquery.js"></script>

 <script type="text/javascript">

 $(document).ready(function(){

   $(".btn1").click(function(){

     $("<b>Hello World!</b>").prependTo("p");

   });

 });

 </script>

 </head>

 <body>

 <p>This is a paragraph.</p>

 <p>This is another paragraph.</p>

 <button class="btn1">在每个 p 元素的开头插入文本</button>

 </body>

 </html>

第九个方法：replaceAll()方法

【1】$(content).replaceAll(selector)//用指定的内容替换所有的匹配元素（包括文本和子节点）






    <script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-1.9.1.min.js"></script>

     <script type="text/javascript">

         function testReplaceAll(){

             $("<b>我是一只狼</b>").replaceAll("p");

         }

     </script>

   </head>

   <body >

     “欢迎来到主页”

     <input type="button" value="replaceAll" onclick="testReplaceAll();">

     <p>我isgu中国ibggyi热播</p>

     <p>sdafgyi热播</p>

     朗朗上口

   </body>








第十个方法：replaceWith()方法


【1】$(selector).replaceWith(content)//将所有匹配的元素替换成指定的内容






 <script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-1.9.1.min.js"></script>

     <script type="text/javascript">

         function testReplaceWith(){

             $("p").replaceWith("<b>我是一只狼</b>");

         }

     </script>

   </head>

   <body >

     “欢迎来到主页”

     <input type="button" value="replaceWith" onclick="testReplaceWith();">

     <p>我isgu中国ibggyi热播</p>

     <p>sdafgyi热播</p>

     朗朗上口

   </body>






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








 <html>

 <head>

 <script type="text/javascript" src="/jquery/jquery.js"></script>

 <script type="text/javascript">

 $(document).ready(function(){

   $("button").click(function(){

     $("p").replaceWith(function(){

     return "<p>Hello World!</p>";

     });

   });

 });

 </script>

 </head>

 <body>

 <p>这是一个段落。</p>

 <p>这是另一个段落。</p>

 <button class="btn1">用新的 p 元素替换所有段落</button>

 </body>

 </html>








dsf


 


 
												


											
jquey学习2之jquery动态添加页面片段的更多相关文章
	

    
								
  1. 给Jquery动态添加的元素添加事件
		
    给Jquery动态添加的元素添加事件 来源:[http://wangqixia.diandian.com/post/2011-05-10/6597866] 我想很多人都会向我一样曾经 被新元素的事件绑 ...
    
		
    2. 
						
  2. [转载]给Jquery动态添加的元素添加事件
		
    原文地址:给Jquery动态添加的元素添加事件作者:小飞侠 我想很多人都会向我一样曾经 被新元素的事件绑定困惑很久也就是在页面加载完成后给元素绑定了事件,但又新增加的元素上却没有绑定任何事件. js的 ...
    
		
    3. 
						
  3. jquery 动态添加和删除 ul li列表
		
    今天需要实现一个jquery动态添加和删除  ul li列表中的li行,自己简单的实现乐一个,分享一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...
    
		
    4. 
						
  4. jquery动态添加删除div--事件绑定,对象克隆
		
    我想做一个可以动态添加删除div的功能.中间遇到一个问题,最后在manong123.com开发文摘 版主的热心帮助下解答了(答案在最后) 使用到的jquery方法和思想就是:事件的绑定和销毁(unbi ...
    
		
    5. 
						
  5. JQuery动态添加控件并取值
		
    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
    
		
    6. 
						
  6. jquery 动态添加表格行
		
    jquery 动态添加表格行 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <h ...
    
		
    7. 
						
  7. jQuery动态添加删除select项
		
    // 添加 function col_add() { var selObj = $("#mySelect"); var value="value"; var t ...
    
		
    8. 
						
  8. jQuery动态添加删除CSS样式
		
    jQuery框架提供了两个CSS样式操作方法,一个是追加样式addClass,一个是移除样式removeClass,下面通过一个小例子讲解用法. jQuery动态追加移除CSS样式 <!DOCT ...
    
		
    9. 
						
  9. JQuery - 动态添加Html后，如何使CSS生效，JS代码可用？
		
    今天在开发JQuery Mobile程序时候,需要从服务器取得数据,随后显示在页面上的Listview控件中,数据完整获取到了,也动态添加到Listview控件中,但是数据对应的CSS没有任何效果了, ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 各个安卓版本 使用的 Linux Kernel Version
			
    Android Version |API Level |Linux Kernel in AOSP --------------------------------------------------- ...
    
			
    2. 
						
  2. Django MySQL数据库操作
			
    上一篇文章写了一些基本的Django操作,下面重点介绍数据库的内容. 对象之间的关系: 一对一 一对多 多对多 1.一对多 先演示一对多的关系,多个blog对应一个名字, 修改blog/models. ...
    
			
    3. 
						
  3. Confluence 6 从外部目录中同步数据手动同步缓存
			
    你可以通过单击用户目录(User Directories)界面中的同步(Synchronize)按钮,手动进行同步.如果一个同步进程已经正在同步的过程中的话,你就不能在上一个同步进程完成之前重新进行同 ...
    
			
    4. 
						
  4. 37mysql  表操作
			
    创建表 #语法: create table 表名( 字段名1 类型[(宽度) 约束条件], 字段名2 类型[(宽度) 约束条件], 字段名3 类型[(宽度) 约束条件] ); #注意: 1. 在同一张 ...
    
			
    5. 
						
  5. Android 7.0真实上手体验
			
    Android 7.0真实上手体验 Android 7.0的首个开发者预览版发布了,支持的设备只有Nexus6.Nexus 5X.Nexus 6P.Nexus 9.Nexus Player.Pixel ...
    
			
    6. 
						
  6. Matlab scatter 如何显示不同颜色点状
			
    有时候需要在matlab scatter绘图中显示不同颜色区分,如下图是人体血压高压.低压与年龄关系的散点图. 红色点表示高压 绿色点表示低压 用 matlab 如何实现呢? 1.创建一维矩阵x,y1 ...
    
			
    7. 
						
  7. Andriod给textview文本关键字循环标亮加粗
			
    在开发中,搜索到得关键字信息在展示时,通常需要标亮加粗,如下图(截取自蓝鲸医生助手搜索后的结果) 在文本中,关键字是“嘎”,所有“嘎”字都标亮加粗,标亮就是换种颜色.这里就要用到SpannableSt ...
    
			
    8. 
						
  8. OAF 功能中的参数含义
			
    OA.jsp?OAFunc=POS_HT_SP_B_SUPP&OAPB=POS_SM_PRODUCT_BRANDING&OAHP=POS_SM_ADMIN_HOME&OASF= ...
    
			
    9. 
						
  9. JQuery插件让图片旋转任意角度且代码极其简单 - 摘自网友
			
    JQuery插件让图片旋转任意角度且代码极其简单 2012-04-01 09:57:03     我来说两句      收藏    我要投稿 引入下方的jquery.rotate.js文件,然后通过$ ...
    
			
    10. 
						
  10. 多线程私有数据pthread_key_create
			
    参照:http://blog.csdn.net/xiaohuangcat/article/details/18267561 在多线程的环境下,进程内的所有线程共享进程的数据空间.因此全局变量为所有线程 ...
    
			
    11.