JQuery中的DOM操作
一種與瀏覽器喘帚，平臺(tái)负溪，語言無關(guān)的接口蓬推。使用該接口可以輕松地訪問頁面中所有的標(biāo)準(zhǔn)組件烫幕。
DOM Core：DOM Core 并不專屬于 JavaScript俺抽，任何一種支持 DOM 的程序設(shè)計(jì)語言都可以使用它。它的用途并非僅限于處理網(wǎng)頁较曼，也可以用來處理任何一種是用標(biāo)記語言編寫出來的文檔磷斧，例如：XML。
HTML DOM：使用 JavaScript 和 DOM 為 HTML 文件編寫腳本時(shí)捷犹，有許多專屬于HTML-DOM的屬性弛饭。
CSS-DOM：針對(duì)于CSS操作，在JavaScript中萍歉，CSS-DOM 主要用于獲取和設(shè)置 style 對(duì)象的各種屬性侣颂。
1.查找節(jié)點(diǎn)
請(qǐng)見上面的“基本選擇器”。
2.創(chuàng)建節(jié)點(diǎn)
使用JQuery的工廠函數(shù)枪孩，創(chuàng)建一個(gè)新節(jié)點(diǎn)：var $newNode = $(“<p>你好</p>”);憔晒，然后將新節(jié)點(diǎn)插入到指定元素節(jié)點(diǎn)處。
3.插入節(jié)點(diǎn)
將新創(chuàng)建的節(jié)點(diǎn)销凑，或獲取的節(jié)點(diǎn)插入指定的位置丛晌。
“$node.append($newNode)”，向每個(gè)匹配的元素內(nèi)部的結(jié)尾處追加結(jié)尾處斗幼。如澎蛛，“$("p").append("<b>Hello</b>");”將"<b>Hello</b>"添加到"p"內(nèi)部的結(jié)尾處。
“$newNode.appendTo($node)”蜕窿，將新元素追加到每個(gè)匹配元素內(nèi)部的結(jié)尾處谋逻。
“$node.prepend($newNode)”，向每個(gè)匹配的元素內(nèi)部的結(jié)尾處追加開始處桐经。如毁兆，“$("p").prepend("<b>Hello</b>");”將"<b>Hello</b>"添加到"p"內(nèi)部的起始處。
“$newNode.prependTo($node)”阴挣， 將新元素追加到每個(gè)匹配元素內(nèi)部的開始處气堕。
“$node.after($newNode)”，向每個(gè)匹配的元素的之后插入內(nèi)容畔咧，是并列兄弟茎芭。如，“$("p").after("<b>Hello</b>");”將"<b>Hello</b>"插入到"p"的后邊誓沸。它們是兄弟關(guān)系梅桩。
“$newNode.insertAfter($node)”，將新元素插入到每個(gè)匹配元素之后拜隧。
“$newNode.before($node)”宿百，向每個(gè)匹配的元素的之前插入內(nèi)容趁仙。如，“$("p").before("<b>Hello</b>");”將"<b>Hello</b>"插入到"p"的前面垦页，它們是兄弟關(guān)系雀费。
“$node.insertBefore($newNode)”，將新元素插入到每個(gè)匹配元素之前外臂。
注意：如果插入的節(jié)點(diǎn)是不是新創(chuàng)建的坐儿，插入將變成移動(dòng)操作。所以宋光，在插入這樣的節(jié)點(diǎn)之前應(yīng)該使用clone的節(jié)點(diǎn)貌矿。
4.刪除節(jié)點(diǎn)
從DOM中刪除所有匹配的元素。如罪佳，“$("p").remove(".hello");”刪除所為class屬性值為hello的p元素逛漫，還有它下面的所有元素。
從DOM中清除所有匹配的元素赘艳。如酌毡，“$("p").empty();”清除所有p元素，還有它下面的所有元素蕾管。
5.復(fù)制節(jié)點(diǎn)
克隆匹配的DOM元素枷踏。如，“$("p").clone();”返回克隆后的副本掰曾，但不具有任何行為旭蠕。如果要將DOM的事件一起克隆，應(yīng)該使用“$("p").clone(true);”旷坦。
6.替換節(jié)點(diǎn)
將所有匹配的元素都替換為指定的 HTML 或 DOM 元素掏熬。如，$("p").replaceWith("<b>Paragraph. </b>");秒梅，將所有p元素旗芬，替換為"<b>Paragraph. </b>"。
與replaceWith相返：$("<b>Paragraph. </b>").replaceAll("p");捆蜀。
7.包裹節(jié)點(diǎn)
wrap()：將指定節(jié)點(diǎn)用其他標(biāo)記包裹起來疮丛。該方法對(duì)于需要在文檔中插入額外的結(jié)構(gòu)化標(biāo)記非常有用， 而且不會(huì)破壞原始文檔的語義辆它。如誊薄，“$("p").wrap("<div class='wrap'></div>");”。每個(gè)p元素被包裹到<div>中娩井。
wrapAll()：將所有匹配的元素用一個(gè)元素來包裹暇屋。而wrap()方法是將所有的元素進(jìn)行單獨(dú)包裹似袁。如洞辣，“$("p").wrapAll("<div></div>");”咐刨，將所有p元素包裹到<div>中。
wrapInner()：將每一個(gè)匹配的元素的子內(nèi)容(包括文本節(jié)點(diǎn))用其他結(jié)構(gòu)化標(biāo)記包裹起來扬霜。如定鸟，“$("p").wrapInner("<b></b>");”， <b>被每一個(gè)p元素包裹著瓶。
8.屬性設(shè)置
attr()：獲取屬性和設(shè)置屬性联予。
當(dāng)為該方法傳遞一個(gè)參數(shù)時(shí)，即為某元素的獲取指定屬性材原。如沸久，“$("img").attr("src");”，獲取img元素的src屬性值余蟹。
當(dāng)為該方法傳遞兩個(gè)參數(shù)時(shí)卷胯，即為某元素設(shè)置指定屬性的值。如威酒，“$("img").attr("src","test.jpg");”窑睁，設(shè)置img元素的src屬性值為test.jsp。
jQuery 中有很多方法都是一個(gè)函數(shù)實(shí)現(xiàn)獲取和設(shè)置葵孤。如：attr()担钮，html()，text()尤仍，val()箫津，height()，width()吓著，css()等鲤嫡。
removeAttr()：刪除指定元素的指定屬性。
9.樣式操作
可以通過“attr()”設(shè)置或獲取css樣式绑莺。
追加樣式：addClass() 暖眼。如，“$("p").addClass("selected");”纺裁，向所有P元素中追加“selected”樣式诫肠。
移除樣式：removeClass() --- 從匹配的元素中刪除全部或指定的class。如欺缘，“$("p").removeClass("selected");”栋豫，刪除所有P元素中的“selected”。
切換樣式：toggleClass() --- 控制樣式上的重復(fù)切換谚殊。如果類名存在則刪除它丧鸯，如果類名不存在則添加它。如嫩絮，“$("p").toggleClass("selected");”丛肢，所有的P元素中围肥，如果存在“selected”樣式就刪除“selected”樣式，否則就添加“selected”樣式蜂怎。
判斷是否含有某個(gè)樣式：hasClass() --- 判斷元素中是否含有某個(gè) class穆刻，有返回 true； 否則返回 false杠步。如氢伟，“$(this).hasClass("protected")”，判斷當(dāng)前節(jié)點(diǎn)是否有“protected”樣式幽歼。
10.設(shè)置或獲取HTML朵锣、文本和值
讀取和設(shè)置某個(gè)元素中的 HTML 內(nèi)容： html()，該方法可以用于 XHTML甸私，但不能用于 XML 文檔猪勇。
讀取和設(shè)置某個(gè)元素中的文本內(nèi)容：text()，該方法既可以用于 XHTML 也可以用于 XML 文檔颠蕴。
讀取和設(shè)置某個(gè)元素中的值：val()泣刹，該方法類似 JavaScript 中的 value 屬性。對(duì)于文本框犀被，下拉列表框椅您，單選框該方法可返回元素的值(多選框只能返回第一個(gè)值)。如果為多選下拉列表框寡键，則返回一個(gè)包含所有選擇值的數(shù)組掀泳。
11.常用遍歷節(jié)點(diǎn)的方法
取得匹配元素的所有子元素組成的集合：children()。該方法只考慮第一層子元素而不考慮任何后代元素西轩。
取得匹配元素后面緊鄰的兄弟元素的集合(但集合中只有一個(gè)元素)：next()员舵。
取得匹配元素前面緊鄰的兄弟元素的集合(但集合中只有一個(gè)元素)：prev()。
取得匹配元素前后所有的兄弟元素: siblings()藕畔。
12.CSS-DOM操作
獲取和設(shè)置元素的樣式屬性：css()马僻。
獲取和設(shè)置元素透明度：opacity()屬性。
獲取和設(shè)置元素高度注服，寬度：height()韭邓，width()。在設(shè)置值時(shí)溶弟，若只傳遞數(shù)字女淑，則默認(rèn)單位是px。如需要使用其他單位則需傳遞一個(gè)字符串辜御，例如 “$(“p:first”).height(“2em”)”鸭你；
獲取元素在當(dāng)前視窗中的相對(duì)位移：offset()。它返回的對(duì)象包含了兩個(gè)屬性：top，left袱巨。該方法只對(duì)可見元素有效袜茧。
