# jQuery—–DOM操作(文檔處理)
Dom是Document Object Model的縮寫,意思是文檔對象模型。DOM是一種與瀏覽器、平臺、語言無關的接口,使用該接口可以輕松訪問頁面中所有的標準組件。DOM操作可以分為三個方面即DOM Core(核心)、HTM-DOM和CSS-DOM。
每一個網頁都可以用DOM表示出來,每個DOM都可以看作是一棵DOM樹。下面的html頁面結構可以構建出一棵DOM樹,代碼:
~~~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"
<title>DOM Demo</title>
</head>
<body>
<p title="選擇你最喜歡的水果.">你最喜歡的水果是?</p>
<ul>
<li title="蘋果">蘋果</li>
<li title="橘子">橘子</li>
<li title="菠蘿">菠蘿</li>
</ul>
</body>
</html>
~~~
構建出的DOM樹如下:

JQuery中的DOM操作主要對包括:建【新建】、增【添加】、刪【刪除】、改【修改】、查【查找】【像數據庫操作】。下面的DOM操作將圍繞上面的DOM樹進行學習JQueryDOM操作。
### 一、查–查找DOM節點
查找節點非常容易,使用選擇器就能輕松完成各種查找工作。
例:查找元素節點p返回p內的文本內容
~~~
$("p").text();
~~~
例:查找元素節點p的屬性返回屬性名稱對應的屬性值
~~~
$("p").attr("title"),返回p的屬性title的值。
~~~
### 二、建–新建DOM節點
**1、創建元素節點**
創建元素節點并且把節點作為`<ul>`元素的子節點添加到DOM節點樹上。先創建元素點,創建元素節點使用Jquery的工廠函數`$()`來完成,格式如下:`$(html)`,該方法會根據傳入的html字符串返回一個DOM對象,并將DOM對象包裝成一個JQuery對象后返回。創建一個元素節點JQuery代碼如下:
~~~
$li1=$("<li></li>")
~~~
代碼返回`$li1`就是一個由DOM對象包裝成的JQuery對象。把新建節點添加到DOM樹中JQuery代碼如下:
~~~
$("ul").append($li1);
~~~
添加后頁面中只能看到`<li>`元素默認的”·”,由于沒有為節點添加文本所以只顯示默認符號,下面創建文本節點。
**PS:**append()方法是添加DOM節點方法詳見增–添加DOM節點。
**2、創建文本節點**
使用JQuery的工廠函數`$()`同樣能夠創建文本節點,創建文本節點的JQuery代碼如下:
~~~
$li2=$("<li>蘋果</li>");
~~~
代碼返回`$li2`就是一個由DOM對象包裝成JQuery對象,把新建的文本節點添加到DOM樹中JQuery代碼如下:
~~~
$("ul").append($li2);
~~~
添加后頁面中能看到”·蘋果”,右鍵查看頁面源碼發現新加的文本節點沒有title屬性。下面方法創建帶屬性的節點。
**3、創建屬性節點**
創建屬性節點同元素節點、文本節點一樣使用JQuery的工廠函數完成。創建屬性節點的JQuery代碼如下:
~~~
$li3=$("<li title='榴蓮'>榴蓮</li>");
~~~
代碼返回`$li3`也是一個由DOM對象包裝成JQuery對象,把新建的屬性節點添加到DOM樹中JQuery代碼如下:
~~~
$("ul").append($li3);
~~~
添加后頁面中能看到”·榴蓮”,右鍵查看頁面源碼發現新加的屬性節點有title=’榴蓮’屬性。
### 三、增–添加DOM節點
**1、插入節點**

**(1). 節點追加-父子關系**
~~~
$(“ul”).append(“<li>強</li>”); 后置追加
$(“ul”).prepend(“<li>強</li>”); 前置追加
$(“ul”).append(jquery對象); 把指定對象后置追加
(jquery對象如果是頁面上已有的元素節點,那么就被挪動位置到ul里邊)
$(“ul”).prepend(jquery對象); 把指定對象前置追加
$(“<li>強</li>”).appendTo(“ul”); 被追加(后置)
$(“<li>強</li>”).prependTo(“ul”); 被追加(前置)
~~~
~~~
<script>
function f1(){
//主動:追加字符串、已有節點對象、新節點對象
$("#one").append("<li>其實</li>");//==>被追加到第一個ul的最后一個li
$("#one").prepend("<li>good</li>");//==>被追加到第一個ul的第一個li
$("#one").append($("#two li:eq(1)"));//==>“家”被移動到第一個ul的最后一個li,原來的li被移除
$("#one").append($("<li>abc</li>")); //documentCreateElement();
//被動 :沒有找到的節點直接創建新節點、已有節點則執行移動操作
$("<li>年</li>").appendTo("#one");//==>這里不用$符號$("#one");
$("<li>新</li>").prependTo("#one");
$("#two li:eq(3)").appendTo("#one");
}
</script>
<body>
<ul id="one">
<li>四</li>
<li>大</li>
<li>家</li>
<li>族</li>
</ul>
<ul id="two">
<li>喬</li>
<li>家</li>
<li>大</li>
<li>院</li>
</ul>
<ul>
<li>老大</li>
</ul>
<input type="button" value="觸發" onclick="f1()">
</body>
~~~
**(2). 節點追加—兄弟關系**

~~~
$(“div”).after(“<span>hello</span>”); 后置追加兄弟節點
$(“div”).after(jquery對象); 把一個jquery對象后置追加為兄弟節點
$(“#one”).insertAfter(‘對象標志’); 已有對象被追加為對象標志的兄弟節點
$(“<span></span>”).insertAfter(“#ul”) 一個新的span對象被追加為ul的兄弟節點
~~~
~~~
<script>
function f1(){
//主動兄弟追加節點
$("#one").after("<span>tomorrow</span>");//第一個ul之后追加了一個span的兄弟節點
$("#one").after($("p"));//p節點被移動到第一個ul之后
//被動兄弟節點追加
$("<span>hello</span>").insertAfter("#one"); //新節點被追加
$("ul:eq(2)").insertAfter("#one"); //已有節點被追加
}
</script>
<body>
<ul id="one">
<li>四</li>
<li>大</li>
<li>家</li>
<li>族</li>
</ul>
<ul id="two">
<li>喬</li>
<li>家</li>
<li>大</li>
<li>院</li>
</ul>
<ul>
<li>老大</li>
</ul>
<p>road</p>
<input type="button" value="觸發" onclick="f1()">
</body>
~~~
### 四、刪–刪除DOM節點操作
**1. 節點刪除**
empty() 父節點刪除子節點
remove() 刪除匹配到的節點

~~~
<script>
function f1(){
//節點刪除
//$("#one").empty();//第一個ul的所有li被刪除,ul還在,一個空標簽
$("#two li:gt(0)").remove();//刪除匹配到的節點
}
</script>
<body>
<ul id="one">
<li>四</li>
<li>大</li>
<li>家</li>
<li>族</li>
</ul>
<ul id="two">
<li>喬</li>
<li>家</li>
<li>大</li>
<li>院</li>
</ul>
<ul>
<li>老大</li>
</ul>
<p>road</p>
<input type="button" value="觸發" onclick="f1()">
</body>
~~~
### 五、改–修改DOM節點操作
**1. 節點替換**

~~~
<script>
function f1(){
//節點替換(被動)
//"四"被"喬"替換,利用已有節點進行替換
$("#one li:eq(0)").replaceWith($("#two li:eq(0)"));
//利用新節點替換
$("#one li:eq(0)").replaceWith("<li>五</li>");
$("#one li:eq(0)").replaceWith($("<li>六</li>"));
//主動替換
$("<li>七</li>").replaceAll($("#one li:eq(2)"));
}
</script>
<body>
<ul id="one">
<li>四</li>
<li>大</li>
<li>家</li>
<li>族</li>
</ul>
<ul id="two">
<li>喬</li>
<li>家</li>
<li>大</li>
<li>院</li>
</ul>
<ul>
<li>老大</li>
</ul>
<p>road</p>
<input type="button" value="觸發" onclick="f1()">
</body>
~~~
**2. 節點復制**
clone(false) 復制節點本身和子級節點內容
clone(true) 復制節點本身和子級節點內容,同時復制節點的事件

~~~
<script>
function f1(){
//clone(true)同時復制節點和對應的事件
var qiao = $("#two li:eq(0)").clone(true);
$("#one").append(qiao);
}
$(function(){
$("#two li").each(function(){
//每個li被點擊,就輸出對應的文本內容
$(this).click(function(){
alert($(this).html());
});
});
});
</script>
<body>
<ul id="one">
<li>四</li>
<li>大</li>
<li>家</li>
<li>族</li>
</ul>
<ul id="two">
<li>喬</li>
<li>家</li>
<li>大</li>
<li>院</li>
</ul>
<ul>
<li>老大</li>
</ul>
<p>road</p>
<input type="button" value="觸發" onclick="f1()">
</body>
~~~
**3. 節點包裹 —子父關系**

~~~
<script>
function f1(){
//每個匹配節點都給找一個父級
$("ul").wrap("<div id='pear'></div>");//三個ul每個都被div包裹
$("#one").wrap($("p")); //已有節點被追加(復制)第一個ul被p包裹
//多個節點共用一個父級
$("ul").wrapAll("<div id='pear'></div>");//三個ul共同被一個div包裹
//把子內容包裹起來
//每個元素的子內容都被包裹
$("ul").wrapInner("<div id='pear'></div>");每個ul的所有li元素被div包裹
}
</script>
<body>
<ul id="one">
<li>四</li>
<li>大</li>
<li>家</li>
<li>族</li>
</ul>
<ul id="two">
<li>喬</li>
<li>家</li>
<li>大</li>
<li>院</li>
</ul>
<ul>
<li>老大</li>
</ul>
<p></p>
<input type="button" value="觸發" onclick="f1()">
</body>
~~~
### 六. 遍歷節點操作children()、next()、prev()、siblings()和closest()
- children()——方法用于取得匹配元素的子元素集合,只匹配子元素不考慮任何后代元素。方法如下:$(selector).children();例:
~~~
$("$("body").children().length;\\該示例獲得body元素的子元素個數;
~~~
- next()方法——用于匹配元素的下一個兄弟節點,方法如下:$(selector).next();例:
~~~
$("p").next().html();\\該示例獲得p元素的下一個兄弟節點的html內容。
~~~
- prev()方法——用于匹配元素的上一個兄弟節點,方法如下:$(selector).prev();例:
~~~
$("ul").prev().text();\\該示例獲得ul元素的上一個兄弟節點的文本內容。
~~~
- siblings方法——-用于匹配目標元素的所有兄弟元素,方法如下:$(selector).siblings();例:
~~~
$("p").slibings();\\示例獲得p元素的所有兄弟節點元素。
~~~
- closest()方法——用來取得最近的匹配元素,首先檢查當前元素是否匹配如果匹配則直接返回,否則繼續向上查找父元素中符合條件的元素返回,如果沒有匹配的元素則返回空JQuery對象。
ps:注意closest()、parent()、parents()方法的區別:
