為了能全面地講解DOM操作，首先需要構建一個網頁。因為每一張網頁都能用DOM表示出來，而每一份DOM都可以看作一棵DOM樹。
HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>dom</title>
</head>
<body>
<p title="選擇你最喜歡的水果." >你最喜歡的水果是?</p>
<ul>
<li title='蘋果'>蘋果</li>
<li title='橘子'>橘子</li>
<li title='菠蘿'>菠蘿</li>
</ul>
</body>
</html>
一，尋找節點
a,尋找元素節點
var $li = $("ul li:eq(1)");//擷取第二個<li>元素節點
var li_txt = $li.text();//獲得第二個<li>元素的text
b,尋找屬性節點
var $para = $("p"); //擷取p節點
var p_txt = $para.attr("title"); //輸出<p>元素節點屬性title的值
二，建立節點
a,建立元素節點
var $li_1 = $("<li></li>");
var $li_2 = $("<li></li>");
然後使用jQuery的append()方法將建立的元素插入到頁面中
b,建立文本節點
var $li_1 = $("<li>香蕉</li>");
var $li_2 = $("<li>雪梨</li>");
var $parent = $("ul");
$("ul").append($li_1);
$("ul").append($li_2);
c,建立屬性節點
var $li = $("<li title="香蕉"></li>");
var $parent = $("ul");
$parent.append($li);
三，插入節點
將新建立的節點插入某個文檔的方法並非只有一種，在iQuery中還提供了其他兒種插入節點的方法。
a,append():向每個匹配的元素內部追加內容
HTML：<p>我想說:</p>
jQuery:$("p").append("<b>你好</b>");
結果:<p>我想說:<b>你好</b></p>
b,appendTo():將所有匹配的元素追加到指定的元素中。
HTML：<p>我想說:</p>
jQuery:$("<b>你好</b>").appendTo("p");
結果:<p>我想說:<b>你好</b></p>
c,prepend()：向每個匹配的元素內部前置內容
HTML：<p>我想說</p>
jQuery:$("p").prepend("<b>你好</b>");
結果：<p><b>你好</b>我想說:</p>
d,prependTo():將所有匹配的元素前置到指定的元素中。
e,after():在每個匹配的元索之後插入內容
f,insertAfter():將所有匹配的元素插入到指定元素的後面
g,before():在每個匹配的元素之前插入內容
h,insertBefore():將所有匹配的元素捅入到指定的元素的前面。
四，刪除節點
a,remove()：從DOM中刪除所有匹配的元素，傳入的參數用於根據jQuery運算式來篩選元素。
b,empty():清空節點，它能清空元素中的所有後代節點。
五,複製節點
$("ul li").click(function(){
$(this).clone().appendTo("ul");
})
六,替換節點：replaceWith()和replaceAll()
$("p").replaceWith("<strong>替換</strong>");
下面代碼實現同樣的功能：
$("<strong>替換</strong>").replaceAll("p");
七，包裹節點 wrap()，wrapAll()，wrapInner()
$("strong").wrap("<b></b>");//用<b>把<strong>元素包裹起來。
八，屬性操作
a,擷取屬性和設定屬性
var $para = $("p");
var p_txt = $para.attr("title"); //擷取屬性
$("p").attr("title":"your title","name":"your name");//設定屬性。
b,刪除屬性
$("p").removeAttr("title");
九,樣式操作
a,擷取樣式和設定樣式
HTML:<p class="myClass" title="選擇你喜歡的水果">你喜歡的水果是？</p>
var p_class = $("p").attr("class");//擷取<p>元素的class屬性
$("p").attr("class","high");//設定<p>元素的class為high
b,追加樣式
<style type="text/css">
.high{
font-weight:bold;
color:red;
}
.another{
font-weight:italic;
color:blue;
}
</style>
$("input:eq(2)").click(function(){
$("p").addClass("another");
});
c,移除樣式
$("p").removeClass("high");
d,轉場樣式
toggleBtn.toggle(function(){
//元素顯示 1
},function(){
//元素隱藏 2
})
toggle()方法此處的作用是交替執行代碼③和代碼④兩個函數，如果元素原來是顯示的，則隱藏它：如果元素原來是隱藏的，則顯示它。此時，toggle()方法主要是控制行為上的重複切換。
$("p").toggleClass("another");//重複切換類名"another"
e,判斷是否含有某個樣式
hasClass()可以用來判斷元素中是甭含有某個class，如果有，則返回true，否則返回false。
例如可以使用下面的代碼來判斷<p>元素中是否含有“another”的class:
$("p").hasClass("another");
十，設定和擷取HTML、文本和值
a,html()方法
此方法類似於javascript中的innerHTML 屬性，可以用來讀取或者設定某個元素中的HTML內容。
$("p").html("<strong>你最喜歡的水果是？</strong>");
b,text()方法
此方法類似於JavaScript中的innerText屬性，可以用來讀取或者沒置某個元素中的常值內容。
var p_text = $("p").text();
c,val()方法
此方法類似於JavaScript中的value屬性，可以用來設定和擷取元索的值。無論元素是文字框，
下拉式清單還足單選框，它都可以返回元素的值。如果元素為多選，
則返回一個包含所有選擇的值的數組。
例：HTML:<input type="text" id="address" value="請輸入郵箱地址"/><br />
<input type="text" id="password" value="請輸入郵箱密碼"/><br />
<input type="button" value="登陸"/>
當地址框擷取滑鼠焦點時，如果地址框的值為“請輸入郵箱地址”，則將地址框中的值清空。可以使用如下的jQuery代碼：
$("#address").focus(function(){
var txt_value=$(this).val();
if(txt.value=="請輸入郵箱地址"){
$(this).val("");
}
});
注意：focus()方法相當於JavaScript中的onfocus()方法，作用是處理獲得焦點時的事件。blur()方法相當於JavaScript中的onblur()方法，作用是處理失去焦點時的事件。
十一，遍曆節點
a,children()方法
該方法用於取得匹配元素的子項目集合。
b,next()方法
該方法用於取得匹配元素後面緊鄰的同輩元素。
c,prev()方法
該方法用於取得匹配元素前面緊鄰的同輩元素。
d,siblings()方法
該方法用於取得匹配元素前後所有的同輩元素。
e,closest()方法
它用來取得最近的匹配元素。首先檢查當前元素是否匹配，如果匹配則直接返回元素本身。如果不匹配則向上尋找父元素，逐級向上直到找到匹配選取器的元素。如果什麼都沒找到則返回一個空的jQuery對象。
十二，CSS-DOM操作
例：$("p").css("color");//擷取<p>元素的樣式顏色
$("p").css("color","red");//設定<p>元素的樣式顏色為紅色
a,offset()方法
它的作用是擷取元素在當前視窗的相對位移，其中返回的對象包含兩個屬性，即top和left，它只對可見元素有效。
var offset = $("p").offset();//擷取<p>元素的offset()
var left = offset.left; //擷取左位移
var top = offset.top; //擷取右位移
b,position()方法
擷取元素相對於最近的一個position樣式屬性設定為relative或者absolute的祖父節點的相對位移，與offset()一樣，它返回的對象也包括兩個屬性，即top和left。
c,scrollTop()方法和scrollLeft()方法
這兩個方法的作用分別是擷取元素的捲軸距頂端的距離和距左側的距離
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
