---恢復內容開始---

jQuery中的DOM操作

【DOM操作分類】

DOM操作分為DOM Core（核心）、HTML-DOM和CSS-DOM三個方面。

DOM Core：任何一種支持DOM的程序設計語言都可以使用它。它不僅可以用於處理網頁，也可以處理任何一種使用標記語言編寫出來的文檔。

HTML-DOM：它提供了一些更簡明的記號來描述各種HTML元素的屬性。不過它只能用來處理web文檔。

CSS-DOM：是針對CSS的操作，其主要作用是獲取設置style對象的各種屬性。通過改變style對象的各種屬性，可以使網頁呈現出不同的效果。

【jQuery中的DOM操作】

查找元素節點

var $li=$("ul li:eq(1)");    //獲取<ul>裏第二個<li>節點
var li_txt=$li.text();         //獲取第二個<li>元素節點文本內容
alert(li_txt);                     //打印文本內容

查找屬性節點：利用jQuery選擇器查找到需要的元素後，就可以使用attr()方法來獲取它的各種屬性的值。此方法的參數可以是一個，也可以是兩個。

var $para=$("p");                     //獲取<p>節點
var p_txt=$para.attr("title");    //獲取<p>元素節點屬性title
alert(p_txt);                             //打印title屬性

創建節點：常見的就是直接把這個節點的結構給通過HTML標記字符串描述出來，通過$()函數處理，$("html結構")。如

//創建元素節點
var $li_1=$("<li></li>")  //創建一個<li>元素
$("ul").append($li_1);      //添加到<ul>節點中，使之能在網頁中顯示
//創建文本節點
var $li_2=$("<li>香蕉</li>")  //創建一個<li>元素，包括元素節點和文本節點
$("ul").append($li_2);

創建屬性節點與創建文本節點類似，也是直接在創建元素節點時一起創建。

插入節點的方法：

刪除節點：jQuery提供了remove()、detach()和empty()三種刪除節點的方法。

remove()方法：當某個節點用remove()方法刪除後，該節點所包含的所有後代節點將同時被刪除。

detach()方法：從DOM中去掉所有匹配的元素。但這個方法不會把匹配的元素從jQuery對象中刪除。

empty()方法：這個方法並不是刪除節點，而是清空節點。它能清空元素中所有後代節點。

複製節點

使用clone()方法

$("ul li").click(function(){
    $(this).clone().appendTo("ul");  //複製當前單擊的節點，並將它追加到<ul>元素中
})

替換節點：replaceWith()和replaceAll()方法。

replaceWith()方法是將所有匹配的元素都替換成指定的HTML或者DOM元素。而replaceAll()方法的作用與replaceWith()相同，只是顛倒了replaceWith()的操作。

包裹節點：wrap()方法。對於要在文檔中插入額外的結構化標記非常有用，而且不會破壞原始文檔的語義。

wrapAll()：會將所有匹配的元素用一個元素來包裹。

wrapInner()方法：將每個匹配的元素的子內容（包括文本節點）用其他結構化的標記包裹起來。

屬性操作：用attr()方法來獲取和設置元素屬性，removeAttr方法來刪除元素屬性。

獲取屬性和設置屬性：

var $para=$("p");       //獲取<p>節點
var p_txt=$para.attr("title");    //獲取<p>元素節點屬性title

如果要設置<p>元素的屬性的title值，也可以使用同一方法，只不過需要傳遞兩個參數，即屬性名稱和對應的值。

刪除屬性

$("p").removeAttr("title");    //刪除<p>元素的屬性title
//運行代碼後，<p>元素的title屬性將被刪除，由
<p title="選擇你最愛的水果">你最愛的水果？</p>
//變為
<p>不最愛的水果？</p>

jQuery1.6中新增了prop()和removeProp()，分別用來獲取在匹配的元素集中的第一個元素的屬性值和為匹配的元素刪除設置的屬性。

樣式操作

追加樣式：addClass()方法來追加樣式。

$("p").addClass("another"); //給<p>元素追加“another”類

如果給一個元素添加多個class值，那麼久相當於合併他們的樣式。如果不同的class設定了同一樣式的屬性，則後者覆蓋前者。

移除樣式：removeClass()方法。從匹配的元素中刪除全部或指定的class。

切換樣式：toggle()方法，主要是控制行為上的重複切換。toggleClass()方法可以控制樣式上的重複切換，如果類名存在則刪除它，如果不存在則添加它。

判斷是否含有某個樣式：hasClass()方法。有，返回true，否則返回false。

設置和獲取HTML、文本和值

html()方法：類似於JavaScript中的innerHTML屬性，可以用來讀取或者設置某個元素中的HTML內容。

　　　　　　html()方法可以用於XHTML文檔，但不能用於XML文檔。

text()方法：類似於JavaScript中的innerText屬性，可以用來讀取或設置某個元素中的文本內容。

　　　　　　JavaScript中的innerText屬性並不能在Firefox瀏覽器下運行，而jQuery的text()方法支持所有瀏覽器。

　　　　　　text()方法符HTML文檔和XML文檔都有效。

val()方法：類似於JavaScript中的value屬性，可以用來設置和獲取元素的值。

遍歷節點

children()方法：用於匹配元素的子元素合集。而且children()方法只考慮子元素而不考慮其他後代元素。

next()方法：用於取得匹配元素後面緊鄰的同輩元素。

prev()方法：用於取得匹配元素前面緊鄰的同輩元素。

siblings()方法：用於取得匹配元素前後所有同輩元素。

closest()方法：用於取得最近的匹配元素。

CSS-DOM操作

簡單來説，就是讀取和設置style對象的各種屬性。

offset()方法：獲取元素在當前視窗的相對偏差。其中返回的對象包含top和left兩個屬性，它只對可見元素有效。

position()方法：獲取相對於最近的一個position樣式屬性設置為relative彙總absolute的祖父節點的相對偏差。返回的對象屬性與offset()一樣。

scrollTop()方法和scrollLeft()方法：分別可以獲取元素的滾動條距頂端的距離和距左側的距離。可以將這兩個方法指定一個參數，控制元素的滾動條滾動到指定位置。                

---恢復內容結束---