第一个方法：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>
【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>
第二个方法：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>
第三个方法：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>
【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>
第四个方法：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>
【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>
第五个方法：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>
第六个方法：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>
功能类似，但实现的目的或细节存在差异的方法：
【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>
删除元素，还能恢复元素
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>
移动元素，并保留其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>
第七个方法：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>
【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>
第八个方法：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>
第九个方法：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>
第十个方法：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>
【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>
dsf
