jQuery DOM-獲取、設定、新增、刪除html文字的內容
1.獲得內容和屬性
text() - 設定或返回所選元素的文字內容
html() - 設定或返回所選元素的內容（包括 HTML 標記）
val() - 設定或返回表單欄位的值
attr() - 獲取屬性
例1.通過text() 和 html() 方法來獲得內容：
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
});
</script>
</head>
<body>
<p id="test">這是段落中的<b>粗體</b>文字。</p>
<button id="btn1">顯示文字</button>
<button id="btn2">顯示 HTML</button>
</body>
</html>
例2.通過 jQuery val() 方法獲得表單輸入欄位的值：
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert("Value: " + $("#test").val());
});
});
</script>
</head>
<body>
<p>姓名：<input type="text" id="test" value="米老鼠"></p>
<button>顯示值</button>
</body>
</html>
例3.演示 attr() 方法獲得屬性href的方法
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert($("#w3s").attr("href"));
});
});
</script>
</head>
<body>
<p><a href="http://www.w3school.com.cn" id="w3s">W3School.com.cn</a></p>
<button>顯示 href 值</button>
</body>
</html>
2.設定內容和屬性
text() - 設定或返回所選元素的文字內容
html() - 設定或返回所選元素的內容（包括 HTML 標記）
val() - 設定或返回表單欄位的值
attr() - 設定屬性
例1.通過 text()、html() 以及 val() 方法來設定內容：
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
});
</script>
</head>
<body>
<p id="test1">這是段落。</p>
<p id="test2">這是另一個段落。</p>
<p>Input field: <input type="text" id="test3" value="Mickey Mouse"></p>
<button id="btn1">設定文字</button>
<button id="btn2">設定 HTML</button>
<button id="btn3">設定值</button>
</body>
</html>
例2.text()、html() 以及 val() 的回撥函式
上面的三個 jQuery 方法：text()、html() 以及 val()，同樣擁有回撥函式。回撥函式由兩個引數：被選元素列表中當前元素的下標，以及原始（舊的）值。然後以函式新值返回您希望使用的字串。
下面的例子演示帶有回撥函式的 text() 和 html()：
例項
$("#btn1").click(function(){
$("#test1").text(function(i,origText){
return "Old text: " + origText + " New text: Hello world!
(index: " + i + ")";
});
});
$("#btn2").click(function(){
$("#test2").html(function(i,origText){
return "Old html: " + origText + " New html: Hello <b>world!</b>
(index: " + i + ")";
});
});
例3.設定屬性 - attr()
jQuery attr() 方法也用於設定/改變屬性值。
下面的例子演示如何改變（設定）連結中 href 屬性的值：
例項
$("button").click(function(){
$("#w3s").attr("href","http://www.w3school.com.cn/jquery");
});
attr() 方法也允許您同時設定多個屬性。
下面的例子演示如何同時設定 href 和 title 屬性：
例項
$("button").click(function(){
$("#w3s").attr({
"href" : "http://www.w3school.com.cn/jquery",
"title" : "W3School jQuery Tutorial"
});
});
例4.attr() 的回撥函式
jQuery 方法 attr()，也提供回撥函式。回撥函式由兩個引數：被選元素列表中當前元素的下標，以及原始（舊的）值。然後以函式新值返回您希望使用的字串。
例項
$("button").click(function(){
$("#w3s").attr("href", function(i,origValue){
return origValue + "/jquery";
});
});
3.新增元素
append() - 在被選元素的結尾插入內容
prepend() - 在被選元素的開頭插入內容
after() - 在被選元素之後插入內容
before() - 在被選元素之前插入內容
例
$("p").append("Some appended text.");
$("p").prepend("Some prepended text.");
例
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
function appendText()
{
var txt1="<p>Text.</p>"; // 以 HTML 建立新元素
var txt2=$("<p></p>").text("Text."); // 以 jQuery 建立新元素
var txt3=document.createElement("p");
txt3.innerHTML="Text."; // 通過 DOM 來建立文字
$("body").append(txt1,txt2,txt3); // 追加新元素
}
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button onclick="appendText()">追加文字</button>
</body>
</html>
4.刪除元素
remove() - 刪除被選元素（及其子元素）
empty() - 從被選元素中刪除子元素
過濾被刪除的元素
jQuery remove() 方法也可接受一個引數，允許您對被刪元素進行過濾。
該引數可以是任何 jQuery 選擇器的語法。
下面的例子刪除 class="italic" 的所有 <p> 元素：
例項
$("p").remove(".italic");
5.類操作
addClass() - 向被選元素新增一個或多個類
removeClass() - 從被選元素刪除一個或多個類
toggleClass() - 對被選元素進行新增/刪除類的切換操作
css() - 設定或返回樣式屬性
例1.
$("button").click(function(){
$("h1,h2,p").addClass("blue");
$("div").addClass("important");
});
例2.
$("button").click(function(){
$("h1,h2,p").removeClass("blue");
});
例3.
$("button").click(function(){
$("h1,h2,p").toggleClass("blue");
});
6.css（）方法
例1：返回首個匹配元素的 background-color 值：
$("p").css("background-color");
例2；設定 CSS 屬性
語法：
css("propertyname","value");
為所有匹配元素設定 background-color 值：
$("p").css("background-color","yellow");
$("p").css({"background-color":"yellow","font-size":"200%"});
7.尺寸
width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()
width() 方法設定或返回元素的寬度（不包括內邊距、邊框或外邊距）。
height() 方法設定或返回元素的高度（不包括內邊距、邊框或外邊距）。
innerWidth() 方法返回元素的寬度（包括內邊距）。
innerHeight() 方法返回元素的高度（包括內邊距）。
outerWidth() 方法返回元素的寬度（包括內邊距和邊框）。
outerHeight() 方法返回元素的高度（包括內邊距和邊框）
例
$(".btn1").click(function(){
$("p").width(200);
});