1. DOM操作的分類(lèi)：
DOM Core:JavaScript中的getElementByID，getElementByTagName，getAttribute，setAttribute等方法都是其的組成部分。
HTML_DOM：如document.forms //HTML-DOM提供了一個(gè)forms對(duì)象；element.src //獲取某元素的屬性。
CSS_DOM:獲取和設(shè)置style對(duì)象的各種屬性，如element.style.color="red"。
2. jQuery中的DOM操作：
1.查找節(jié)點(diǎn)：
var $li=$('ul li:eq(1)'); //獲取<ul>中第二個(gè)<li>節(jié)點(diǎn)
var li_txt=$li.text();
alert(li_txt);
2.創(chuàng)建節(jié)點(diǎn)屬性：
var $para=$('p');
var p_txt=$para.attr("title");
alert(p_txt);
3. 創(chuàng)建節(jié)點(diǎn)：
3.1 創(chuàng)建元素節(jié)點(diǎn)：
var $li_1=$("<li></li>");
var $li_2=$("<li></li>");
$("ul").append($li_1);
$("ul").append($li_2);
3.2 創(chuàng)建文本節(jié)點(diǎn)：
var $li_1=$("<li>香蕉</li>");
var $li_2=$("<li>雪梨</li>");
$('ul').append($li_1);
$('ul').append($li_2);//鏈?zhǔn)讲僮鳎?('ul').append($li_1).append($li_2)
3.3 創(chuàng)建節(jié)點(diǎn)屬性：
4. 插入節(jié)點(diǎn)
append():向每個(gè)匹配的元素內(nèi)部追加內(nèi)容；
appendTo():將匹配的元素追加到指定的元素中例如：$('a').appendto('b')是將a追加到b中
prepend():向每個(gè)匹配的元素內(nèi)部前置內(nèi)容；
prependTo():將所有匹配的元素前置到指定的元素中。
after():在每個(gè)匹配的元素之后插入內(nèi)容。
insertAfter():將所有匹配的元素插入到指定的元素后面。
before():在每個(gè)匹配的元素之前插入內(nèi)容
insertBefore():將所有匹配的元素插入到指定的元素的前面。
5. 刪除節(jié)點(diǎn)
5.1 remove()方法
$('ul li:eq(2)').remove(); //獲取元素<ul>中第二個(gè)<li>后，從網(wǎng)頁(yè)中將其刪除
$('ul li:eq(2)').remove("li[title!=菠蘿]"); //支持通過(guò)傳遞參數(shù)選擇性地刪除某些元素。
5.2 empty()方法：清空節(jié)點(diǎn)內(nèi)容，不是刪除。
6. 復(fù)制節(jié)點(diǎn)
$('ul li').click(function(){
$(this).clone().appendTo("ul"); //復(fù)制當(dāng)前節(jié)點(diǎn)，并追加到<ul>中
})
clone(true):表示復(fù)制元素的同時(shí)復(fù)制改元素所綁定的事件。
7. 替換節(jié)點(diǎn)
7.1 replaceWith()方法
將所有匹配的元素都替換成HTML或者DOM元素
$('p').replaceWith("<strong>你最不喜歡的水果</strong>");
7.2 replaceAll()方法
改方法顛倒了replaceWith的操作
$("<strong>你最不喜歡的水果</strong>").replaceAll("p");
8. 包裹節(jié)點(diǎn)
wrap()方法：將所有的元素用其他標(biāo)記單獨(dú)包裹起來(lái)。
$("<strong>").wrap("<b></b>"); //用b標(biāo)簽將strong標(biāo)簽包裹起來(lái)。
warpAll()方法：將所有的元素用其他標(biāo)記全部包裹起來(lái)。
warpInner()方法：將每一個(gè)匹配元素的子內(nèi)容用其他標(biāo)記包裹起來(lái)。
9. 屬性操作
9.1 獲取屬性和設(shè)置屬性：
var $para=$('p');
var p_txt=$para.attr("title");//獲取<p>元素的title屬性
$('p').attr("title","your title"); //設(shè)置單個(gè)屬性；
$('p').attr({"title":"your title","name":"your name"}); //將一個(gè)”名/值”形式的對(duì)象設(shè)置為匹配元素的屬性
9.2 刪除屬性：removeAttr()方法
$('p').removeAttr("title"); //刪除<p>元素的屬性title;
10 樣式操作
10.1 獲取樣式和設(shè)置樣式：
var $p_class=$('p').attr("class"); //獲取<p>元素的Class;
$("p").attr("class","high"); //設(shè)置<p>元素的樣式為"high"，即替換已有的樣式。
10.2 追加樣式
$("p").addClass("high"); //給<p>元素追加樣式"high”；
10.3 移除樣式
$("p").removeClass("high"); //移除<p>元素的樣式"high";
10.4 切換樣式，交替執(zhí)行代碼
$("toggleBtn").toggle(function(){
//code 顯示元素
},fucntion(){
//code 隱藏元素
})
10.5 判斷是否含有樣式
$("p").hasClass("high"); //判斷<p>元素是否含有樣式"high";
這個(gè)方式是為了增強(qiáng)代碼可讀性而產(chǎn)生的，在jquery內(nèi)部實(shí)際上是調(diào)用了is()方法來(lái)完成這個(gè)功能的。改方法等價(jià)于如下代碼：
$("p").is(".high"); //is(.+class)
11 設(shè)置和獲取HTML、文本和值
1. html()方法：讀取或設(shè)置某個(gè)元素的HTML內(nèi)容
$("p").html(); //獲取<p>元素的html代碼
$("p").html("<strong>你最喜歡的水果是？</strong>"); //設(shè)置<p>元素的html代碼。
2. text()方法：該方法類(lèi)似與javascript中的innerText屬性，用來(lái)設(shè)置或讀取某個(gè)元素中的文本內(nèi)容。
$("p").text(); //獲取<p>元素的文本內(nèi)容；
$("p).text("你最喜歡的水果是？"); //設(shè)置<p>元素的文本內(nèi)容為“你最喜歡的水果是？”
3. val()方法：該方法類(lèi)似與javascript中的value屬性，用于獲取或設(shè)置某個(gè)元素的值。
<input type="text" id="address" value="請(qǐng)輸入郵箱地址">/
$("#address").val(); //獲取id=address文本框的值。
12. 遍歷節(jié)點(diǎn)：
1. children()方法：該方法用于取得匹配元素的子元素集合，只考慮子元素，不考慮其他任何后代元素。
2. next()方法：用于取得匹配元素后面緊鄰的同輩元素。
3. prev()方法：用于取得匹配元素前面緊鄰的同輩元素。
4. siblings()方法：用于取得匹配元素前后的同輩元素。
5. closet()方法：用于取得最近的匹配元素
13. CSS-DOM操作
1. css()方法。
$("p").css({"color":"red","width":"12px"}); //設(shè)置多個(gè)樣式。
$("p").css("color":"red"); //設(shè)置單個(gè)樣式。
2. offset()方法：獲取當(dāng)前元素在當(dāng)前視窗的相對(duì)偏移，其中返回的對(duì)象包括兩個(gè)屬性，即top和left，它只對(duì)可見(jiàn)元素有效。
var offset=$("p").offset();
var left=offset.left;
var top=offset.top;
3. position()方法：獲取元素相對(duì)于最近一個(gè)position樣式屬性設(shè)置為relative或者absolute的祖父節(jié)點(diǎn)的相對(duì)偏移量，也返回top和left屬性。
4. scrollTop()方法和scrollLeft()方法:這兩個(gè)方法分別是獲取元素的滾動(dòng)條距頂端的距離和距左側(cè)的距離
聯(lián)系客服
