<!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 onclick="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>
原文：http://www.cnblogs.com/whatcanido/p/5093904.html