DOM操作的分類
DOM Core 並不專屬於javascript，任何一種支持DOM的程序設計語言都可以使用它。
它的用途並非僅限與處理網頁，也可以用來處理任何一種使用標記語言編寫出來的文檔。例如XML
javascript中的getElementById(),getElementByTagName(),getAttribute()和setAttribute()等方法，這些都是Dom Core的組成部分。
使用DOM Core來獲取表單對象的方法
document.getElementByTagName(
"from"
);
使用DOM Core來獲取某元素的src屬性的方法：
element.getAttribute(
"src"
);
構建DOM元素
<body>
<p title=
"選擇你最喜歡的水果"
>你最喜歡的水果是?</p>
<ul>
<li title=
'蘋果'
>蘋果</li>
<li title=
'橘子'
>橘子</li>
<li title=
'菠蘿'
>菠蘿</li>
</ul>
</body>
使用jQeruy在文檔數上查找節點非常容易，可以通過在第2章介紹的jQuery選擇器來完成。
1.查找元素節點
獲取元素節點並打印出它的文本內容，jQuery代碼如下:
var $li = $(
"ul li:eq(1)"
); 獲取<ul>里第2個<li> 節點
var li_txt=$li.text();
//獲取第2個<li>元素節點的文本內容
alert(li_txt);
//打印文本內容，這里會打印出橘子
以上代碼獲取了<ul>元素里第2個<li>節點，並將它的文本內容
"橘子"
打印出來
2.查找屬性節點
利用jQuery 選擇器查找到需要的元素后，就可以使用attr()方法來獲取它的各種屬性的值.attr()方法得參數可以是一個，也可以是兩個。當參數是一個時，則是要查詢的屬性的名字。
獲取屬性節點並打印出它的文本內容，jQuery代碼如下：
var $para = $(
"p"
);
//獲取<p>節點
var p_txt=$para.attr(
"title"
);
//獲取<p>元素節點屬性title
alert(p_txt);
//打印title屬性值
創建節點
在dom 操作中，常常需要動態創建HTML內容，是文檔在瀏覽器里面的呈現效果發生變法，並且達到各種各樣的人機交互的目的。
1. 創建元素節點
例如要創建兩個<li>元素節點，並且要把它們作為<ul>元素節點的子節點添加到DOM節點樹上。
(1)創建兩個<li>新元素。
(2)將這兩個新元素插入文檔中。
第(1)個步驟可以使用jQuery的工廠函數$()來完成。
$(html);
$(html)方法會根據傳入的HTML標記字符串，創建一個DOM對象，並將這個DOM對象包裝成一個jQuery對象后返回。
首先創建兩個<li>元素,jQuery代碼如下:
$(
"ul"
).append($li_1);
//添加到<ul>節點中，使之能在網頁中顯示
$(
"ul"
).append($li_2);
//可以采取鏈式寫法:$("ul").append($li_1).append($li_2);
注意事項：
(1)動態創建的新元素節點不會被自動添加到文檔中，而是需要使用其他方法將其插入文檔中。
(2)當創建單個元素時，要注意閉合標簽和使用標准的XHTML格式。
例如創建一個<p> 元素，使用$(
"<p/>"
)或者(
"<p></p>"
),但是不要使用$(
"<p>"
)或者大寫的$(
"<P/>"
);
2.創建文檔節點
var $li_1= $(
"<li>香蕉</li>"
);
//創建一個<li> 元素，包括元素節點和文本節點，香蕉就是創建的文本節點
var $li_2 =$(
"<li>雪梨</li>"
);
//創建一個<li> 元素，包括元素節點和文本節點，雪梨就是創建的文本節點。
$(
"ul"
).append($li_1);
//添加到<ul>節點中，使之能在網頁中顯示
$(
"ul"
).append($li_2);
//添加到<ul>節點中，使之能在網頁中顯示
以上代碼所示，創建文本節點就是在創建元素節點時直接把文本內容寫出來，然后使用append()等方法將他們添加到文檔中就可以了。
注意事項：
無論$(html)中的HTML代碼多么復雜，都要使用相同的方式來創建。
例如$(
"<li><em>這是</em><b>一個</b><a href='#'>復雜的組合</a></li>"
);
3.創建屬性節點
創建屬性及節點與創建文本節點類似，也是直接在創建元素節點時一起創建。
jQuery代碼如下:
var $li_1=$(
"<li title='香蕉'>香蕉</li>"
);
//創建一個<li>元素，包含元素節點，文本節點和屬性節點 其中title='香蕉'就是創建的屬性節點
var $li_2=$(
"<li title='雪梨'>雪梨</li>"
);
//創建一個<li>元素 包括元素節點，文本節點和屬性節點，其中title=‘雪梨’就是創建的屬性節點
$(
"ul"
).append($li_1);
$(
"ul"
).append($li_2);
//添加到<ul> 節點中，使之能在網頁中顯示
插入節點
動態創建HTML元素並沒有世界用處，還需要將新創建的元素插入文檔中，將新創建的節點插入文檔最簡單的辦法是，讓它成為這個文檔的某個節點的子節點。
使用append(),它會在元素內部追加新創建的內容。
jQuery中還有提供了其他幾種插入節點的方法。
方法 描述 示例
append() 向每個匹配的元素內部追加內容 HTML代碼
<p>我想說:</p>
jQuery代碼: $(
"p"
).append(
"<b>你好</b>"
); 結果: <p>我想說:<b>你好</b></p>
appendTo() 將所有匹配的元素追加到指定的元素中，
實際上，使用該方法是顛倒了常規的$(A).append(B)的操作，即不是將B追加到A中，而是將A追加到B中 HTML 代碼 <p>我想說:<p> jQuery代碼： $(
"<b>你好</b>"
).appendTo(
"p"
); 結果: <p>我想說：<b>你好</b></p>
prepend() 向每個匹配的元素內部前置內容 HTML代碼: <p>我想說:</p > jQuery代碼: $(
"p"
).prepend(
"<b>你好</b>"
);結果<p><b>你好</b>我想說:</p>
prependTo() 將所有匹配的元素前置到指定的元素中，實際上，使用該方法是顛倒了常規的$(A).prepend(B)的操作，即不是將B前置到A中，而是將A前置到B中。HTML 代碼 <p>我想說:</p> jQuery代碼: $(
"<b>你好</b>"
).prependTo(
"p"
); 結果<p><b>你好</b>我想說<p>
after() 在每個匹配的元素之后插入內容 HTML代碼 <p>我想說:<p> jQuery代碼: $(
"p"
).after(
"<b>你好<b>"
); 結果: <p>我想說:</p><b>你好</b>
insertAfter() 將所有匹配的元素插入到指定元素的后面，與after()顛倒了 HTML代碼<p> 我想說</p> jQuery代碼：$(
"<b>你好</b>"
).insertAfter(
"p"
); 結果<p>我想說：</p><b>你好</b>
before() 將每個匹配的元素之前插入內容 HTML代碼 <p>我想說:</p> jQuery 代碼：$(
"p"
).before(
"<b>你好</br>"
); 結果<b>你好</b>我想說:</p>
insertBefore() 將所有匹配的元素插入到指定的元素的前面，實際上，使用該方法是顛倒了常規的before的操作 $(
"<b> 你好</b>"
).insertBefore(
"p"
); 結果:<b>你好</b><p>我想說:</p>
刪除節點
如果文檔中某一個元素多余，那么應將其刪除，jQuery提供了兩種刪除節點的方法，即remove() 和empty()
1.remove()方法
作用是從DOM中刪除所有匹配的元素，傳入的參數用於根據jQuery表達式類篩選元素。
例如刪除圖3-11中<ul>節點中的第2個<li>元素節點，jQuery代碼如下:
$(
"ul li:eq(1)"
).remove();
//獲取第2個<li>元素節后，將它從網頁中移除
當某個節點用remove()方法刪除后，該節點所包含的所有后代節點將同時被刪除，這個方法得放回值是一個指向已被刪除的節點的引用，因此可以在以后再使用這些元素。
下面的jQuery代碼說明元素用remove()方法刪除后，還是可以繼續使用的。
var $li = $(
"ul li:eq(1)"
).remove();
//獲取第2個<li>元素節點后，將它從網頁中刪除
$li.appendTo(
"ul"
);
//把剛刪除的節點又重新添加到<ul>元素里
可以直接使用appendTo()方法得特性來簡化以上代碼：
$(
"ul li:eq(1)"
).appendTo(
"ul"
);
//appendTo()方法也可以用來移動元素
//移動元素時首先從文檔上刪除此元素，然后將該元素插入得到文檔中的指定節點。
另外remove()方法也可以通過傳遞參數來選擇性地刪除元素
$(
"ul li"
).remove(
"li[title!='菠蘿']"
);
//將<li>元素屬性title不等於"菠蘿" 的<li>元素刪除。
2.empty()方法
嚴格來講，empty()方法並不是刪除節點，而是清空節點，它能清空元素中的所有后台節點。
$(
"ul li:eq(1)"
).empty();
//獲取第2個<li>元素節點后，清空此元素里的內容，注意是元素里面。
使用firebud查看橘子節點發生變化 <li title=
'橘子'
/>
3.復制節點
復制節點也是常用的DOM操作之一，例如購入車，用戶不僅可以通過單擊商品下方的選擇按鈕購買相應的產品，也可以通過鼠標拖動商品
並將其放到購物車中，這個商品拖動功能就是用的復制節點，將用戶選擇的商品所處的節點元素復制一次，並將其跟隨鼠標移動，從而達到以下購物車的效果
$(
"ul li"
).click(function(){
$(
this
).clone().appendTo(
"ul"
);
//復制當前單擊的節點，並將它追加到<ul>元素中
});
//在頁面中點擊"菠蘿"后，列表最下方出現新節點"菠蘿"。
$(
this
).clone(
true
).appendTo(
"body"
);
//注意參數true
在clone()方法傳遞了一個參數
true
，它的含義是復制元素的同時復制元素中所綁定的事件，因此該元素的副本也同樣具備復制功能。
替換節點
如果要替換某個節點，jQuery提供了相應的方法，即replaceWith和 replaceAll()
replaceWith()方法得做喲偶那個是將所有匹配的元素都替換成指定的HTML或者DOM元素。
例如要將網頁中<p title=
"選擇你最喜歡的水果"
>你最喜歡的水果是?</p> 替換成<strong> 你最不喜歡的水果是?</strong> 可以使用如下jQuery代碼：
$(
"p"
).replaceWith(
"<strong>你最不喜歡的水果是?"
);
也可以使用jQuery中另一個方法repalceAll()來實現，該方法與replaceWith()方法得作用相同，只是顛倒了replaceWith的操作。
$(
"<strong>你最不喜歡的水果是?</strong>"
).replaceAll(
"p"
);
注意：
如果在替換之前，已經為元素綁定了事件，替換后原先綁定的事件將會與被替換的元素一起消失，需要在新元素上重新綁定事件。
4. 包裹節點
如果要將某個節點用其他標記包裹起來，jQuery提供了相應的方法，wrap()，該方法對於需要在文檔中插入額外的結構化標記非常有用，而且不會破壞原始文檔的語義。
jQuery代碼如下：
$(
"strong"
).wrap(
"<b></b>"
);
//用<b>標簽把<strong> 元素包裹起來
得到的結果如下：
<b><strong title=
"選擇你最喜歡的水果"
> 你最喜歡的水果是?</strong></b>
1.wrapAll()方法
該方法將會將所有匹配的元素用一個元素包裹。它不同於wrap()方法，wrap()方法將所有的元素進行單獨的包裹。
$(
"strong"
).wrap(
"<b></b>"
);
2.wrapinner()方法
該方法將每一個匹配的元素的子內容(包括文本節點) 用其他結構化的標記包裹起來，例如可以使用它來包裹<strong> 標簽的子內容:jQuery代碼如下：
$(
"strong"
).wrapInner(
"<b></b>"
);
運行代碼后，發現<strong>標簽內的內容被一對<b>標簽包裹了。
<strong title=
"選擇你最喜歡的水果"
><b>你最喜歡的水果是?</b></strong>
屬性操作
在jQuery 中，用attr() 方法來獲取和設置元素屬性，removeAtt() 方法來刪除元素屬性。
1.獲取屬性和設置屬性
如果要獲取<p>元素的屬性title,那么只需要給attr()方法傳遞一個參數，即屬性名稱。
var $para=$(
"p"
);
//獲取<p>節點
var p_txt=$para.attr(
"title"
);
//獲取<p>元素節點屬性title
如果要設置<p>元素的屬性title的值，也可以使用同一個方法，不同的是，需要傳遞兩個參數即屬性名稱和對應的值。
jQuery代碼如下：
$(
"p"
).attr(
"title"
,
"your title"
);
//設置單個的屬性值
//為同一個元素設置多個屬性值
$(
"p"
).attr({
"title"
:
"your title"
,
"name"
:
"test"
});
//將一個 "名值" 形式的對象設置為匹配元素的屬性。
jQuery中的很多方法都是同一個函數實現獲取(getter)和設置(setter)的，例如上面的attr()方法，即能設置元素屬性的值，也能獲取元素屬性的值，類似的還有html(),text(),height(),width(),val(),css()等方法。
2.刪除屬性
有時候需要刪除文檔元素的特定屬性，可以使用removeAttr()方法
刪除<p>元素的title屬性
$(
"p"
).removeAttr(
"title"
);
操作樣式
獲取樣式和設置樣式
HTML代碼如下：
<p
class
=
"myclass"
title=
"選擇你最喜歡的水果"
> 你最喜歡的水果是?</p>
class
也是<p>元素的屬性，因此獲取
class
和設置
class
都可以使用attr()方法。
var p_class = $(
"p"
).attr(
"class"
);
//獲取<p>元素的class
可以使用attr()方法來設置<p>元素的
class
，jquery代碼如下：
$(
"p"
).attr(
"class"
,
"high"
);
//設置<p>元素的class為high
他是將原來的
class
替換為
class
，而不是在原來的基礎上追加新的
class
追加樣式
jQuery提供了專門的addClass()方法來追加樣式，為了使例子更為容易理解，首先在<style>標簽里添加另一組樣式
<style>
.high{
font-weight:bold;
color:red;
}
.another{
font-style:italic;
color:blue;
}
//在網頁中追加class類的按鈕.
$(
"input:eq(2)"
).click(function(){
$(
"p"
).addClass(
"another"
);
//給<p>元素追加"another"類
})
attr() 和addClass()的區別
用途 追加樣式 設置樣式
對同一個網頁元素操作 <p>test</p>
第一次使用方法 $(
"p"
).addClass(
"high"
); $(
"p"
).attr(
"class"
,
"high"
);
第1次結果 <p
class
=
"high"
>test</p>
再次使用方法 $(
"p"
).addClass(
"another"
); $(
"p"
).attr(
"class"
,
"another"
);
結果 <p
class
=
"high another"
> test</p> <p
class
=
"another"
> test</p>
3移除樣式
如果單擊某一個按鈕時，刪除
class
的某個值，那么可以使用addClass()方法相反的removeClass()方法來完成，它的作用是從匹配的元素中刪除全部或者指定的
class
如下jQuery代碼來刪除
$(
"p"
).removeClass(
"high"
);
//移除<p>元素中為"high"的class
//如果要把<p>元素的兩個class都刪除，就要使用removeClass()
$(
"p"
).removeClass(
"high"
).removeClass(
"another"
);
//jquery提供了更簡單的方法
$(
"p"
).removeClass(
"high another"
);
另外，還可以使用removeClass()方法得一個特性來完成同樣的效果，它不帶參數的時候會將
class
的值全部刪除.
$(
"p"
).removeClass();
切換樣式
$toggleBtn.toggle(function(){
//3
},function(){
//4
});
toggle()方法此處的作用是交替執行代碼3和4兩個函數，如果元素原來是顯示的，則隱藏它，如果隱藏的，則顯示它，此時，toggle()方法主要是控制行為上的重復切換。
判斷是否含有某個樣式
hasClass可以用來判斷元素中是否有某個
class
，如果有，則返回
true
，否則返回
false
$(
"p"
).hasClass(
"another"
);
//jQuery內部實際上是調用了is()方法來完成這個功能的，該方法等價於
$(
"p"
).
is
(
".another"
)
1.設置和獲取HTML，文本和值
html()方法
$(
"P"
).html();
//獲取元素的html代碼
2.text() 方法
$(
"p"
).text();
//獲取<p>元素的文本內容
//text()可以對文本內容設置內容
$(
"p"
).text(
"你最喜歡的水果是?"
);
//設置<p>元素的文本內容
3.val()方法
val()方法取值
通過上面的例子可以發現val()方法不僅能設置元素的值，同時也能獲取元素的值，另外val() 方法還有另外一個用處，就是它能select(下拉列表框)，checkbox(多選框)和radio(單選框) 相應的選項被選中，在表單操作中會經常用到。
//使用val設置選中項
$(
"#single"
).val(
"選擇2號"
);
//如果要使下拉列表的第2項和第3項被選中
$(
"#multiple"
).val([
"選擇2號"
，
"選擇3號"
]);
//以數組的形式賦值
使多個文本框被選中
$(
":checkbox"
).val([
"check2"
,
"check3"
]);
$(
":radio"
).val([
"radio2"
]);
也可以使用attr()方法來實現同樣的功能
$(
"#single option:eq(1)"
).attr(
"selected"
,
true
);
//設置屬性selected
$(
"[value=radio2]:radio"
).attr(
"checked"
,
true
);
1 children()方法
該方法用於取得匹配元素的子元素集合
var $body = $(
"body"
) .children();
var $p=$(
"p"
).children();
var $ul = $(
"ul"
).children();
alert($body.length);
alert($p.length);
alert($ul.length);
2.next方法
該方法用於取得匹配元素后面緊鄰的同輩元素。
從dom樹的結構可以知道<p>元素的下一個同輩節點時<ul>，因此可以通過next() 方法來獲取<ul> 元素
var $p1 = $(
"p"
).next();
//取得緊鄰<p>元素后的同輩元素
<ul>
<li title=
'蘋果'
>蘋果</li>
<li title=
'橘子'
>橘子</li>
<li title=
'菠蘿'
>菠蘿</li>
</ul>
prev()方法
該方法用於取得匹配元素前面緊鄰的同輩元素。
從DOM樹的結構中可以知道<ul>元素的上一個同輩節點時<p>，因此可以通過prev()方法類獲取<p>元素
var $ul = $(
"ul"
).prev();
//取得緊鄰<ul>元素前得同輩元素
得到的結果將是:
<p title=
"選擇你最喜歡的水果"
>你最喜歡的水果是?</p>
4.siblings()方法
該方法用於取得匹配元素前后所有的同輩元素。
在第1章導航欄的例子中有段代碼如下：
$(
".has_children"
).click(function() {
$(
this
).addClass(
"highlight"
);
//為當前元素增加highlight類
.children(
"a"
).show().end()
.siblings().removeClass(
"highlight"
)
.children(
"a"
).hide();
})