<!DOCTYPE html>
<html><head lang="en"> <meta charset="UTF-8"> <title>jquery添加</title> <script src = "h5/jquery/jquery.1.11.3.min.js"></script> <!--<script type="text/javascript">--> <!--$(document).ready(function(){--> <!--//jQuery append() 方法--在被选元素的结尾插入内容--> <!--$("#btn1").click(function(){--> <!--$("p").append("<b>Append text</b>");--> <!--});--> <!--$("#btn2").click(function(){--> <!--$("li").append("<li>Append item</li>");--> <!--});--> <!--//jQuery prepend() 方法-- 在被选元素的开头插入内容--> <!--$("#btn1").click(function(){--> <!--$("p").prepend("<b>添加文本哦</b>");--> <!--});--> <!--$("#btn2").click(function(){--> <!--$("ol").prepend("<li>Prepend item</li>");--> <!--});--> <!--});--> <!--</script>--> <script> //通过 append() 和 prepend() 方法添加若干新元素 function appendText(){ var txt1 = "<p>Text.</p>"; var txt2 = $("<p></p>").text("Text"); var txt3 = document.createElement("p"); txt3.innerHTML = "Text"; $("body").append(txt1,txt2,txt3); } //jQuery after() 和 before() 方法 $("#bt1").click(function(){ $("txt").before("<b>before</b>"); }); $("#bt2").click(function(){ $("txt").after("<b>after</b>"); }); //通过 after() 和 before() 方法添加若干新元素 function afterText(){ var text1 = "<b>I</b>"; var text2 = $("<li></li>").text("Love"); var text3 = document.createElement("big"); text3.innerHTML = "You!" $("img").after(text1,text2.text3); } //jQuery remove() 方法-- 删除被选元素（及其子元素） $("button").click(function(){ $("#div1").remove(); }); //jQuery empty() 方法--从被选元素中删除子元素 $("button").click(function(){ $("#div2").empty(); }); //过滤被删除的元素 $("button").click(function(){ $("p").remove(".italic"); }); //jquery addClass() - 向被选元素添加一个或多个类 $("button").click(function(){ $("h1,h2,p").addClass("pink"); $("div").addClass("important"); }); //在 addClass() 方法中规定多个类 $("button").click(function(){ $("#div-1").addClass("important-1 blue-1"); }); //jQuery removeClass() 方法 $("button").click(function(){ $("h3,h4,p").removeClass("blue"); }); //jQuery toggleClass() 方法 $("button").click(function(){ $("h1,h2,p").toggleClass("blue"); }); //返回 CSS 属性 $("button").click(function(){ alert("Background color = " + $("p").css("backround-color")); }); //设置 CSS 属性 $("button").click(function(){ $("p").css("background-color","purple"); }); </script> <style type="text/css"> .important{ font-weight: bold; font-size: xx-large; } .blue{ color:blue; } .important-1{ font-weight: bold; font-size: x-large; } .blue-1{ color:hotpink; } </style></head><body><p>这是第一个段落。</p><p>这是第二个段落。</p><ol> <li>One list</li> <li>Two list</li> <li>Three list</li></ol><button type="button" value="添加文本" id = "btn1">追加文本</button><button type="button" value="添加列表" id = "btn2">追加列表</button><!--通过 append() 和 prepend() 方法添加若干新元素--><p>This is a paragraph.</p><button onclick = "appendText()">追加文本</button><br><br><!--jQuery after() 和 before() 方法--><input type="text" value="hello world." id = "txt"><br><br><button id = "bt1">在文本框前面添加文字</button><button id = "bt2">在文本框后面添加文字</button><br><br><!--通过 after() 和 before() 方法添加若干新元素--><img src = "01.jpg" alt = "honey"><br><br><button οnclick="afterText()">在图片后面添加文本</button><br><br><!--jQuery remove() 方法-- 删除被选元素（及其子元素）--><div id = "div1" style="width:400px; height: 400px;background-color: pink; border: 1px solid black"> <p>This is the first paragraph</p> <p>This is another .</p> <p>Everything will be ok!</p></div><br><button>删除div元素</button><br><br><!--jQuery empty() 方法--从被选元素中删除子元素--><div id = "div2" style="width:400px; height: 400px;background-color: purple; border: 1px solid black"> <p>This is the first paragraph</p> <p>This is another .</p> <p>Everything will be ok!</p></div><br><button>删除div元素</button><br><br><!--过滤被删除的元素--><p>This is the first paragraph</p><p class="italic">This is another .</p><p class="italic">Everything will be ok!</p><br><button >删除所有class = italic的段落。</button><br><br><!--jquery addClass() - 向被选元素添加一个或多个类--><h1>Headline one.</h1><h2>Headline iwo.</h2><p>first,you should be ok.</p><p>Second,you must be ok!</p><div>Hello world!</div><button>向元素添加类</button><br><br><!--在 addClass() 方法中规定多个类--><div id="div-1">这是第一个文本。</div><div id = "div-2">这是第二个文本。</div><br><br><button>向第一个div元素添加类</button><br><br><!--jQuery removeClass() 方法--><h3 class="blue">One !!</h3><h4 class="blue">Two!!!</h4><p class="blue">You are special!</p><p>You must try your best!</p><br><button>从元素上面删除类</button><br><br><!--jQuery toggleClass() 方法--><h1>Headline one.</h1><h2>Headline iwo.</h2><p>first,you should be ok.</p><p>Second,you must be ok!</p><button>切换CSS类</button><br><br><!--返回 CSS 属性--><h1>This is a headline.</h1><p style="background-color: cornflowerblue">这是第一个自然段。</p><p style="background-color: palevioletred">这是第二个自然段。</p><p style="background-color: pink">这是第三个自认段。</p><button>返回p元素的背景色</button><br><br><!--设置 CSS 属性--><p style="background-color: cornflowerblue">这是个自然段。</p><p style="background-color: palevioletred">这是个自然段。</p><p style="background-color: pink">这是个自然段。</p><button>设置p元素的背景色</button></body></html>