超詳盡的DOM操作講解办绝，每一個(gè)函數(shù)都給出了具體實(shí)現(xiàn)冒黑。

1.創(chuàng)建節(jié)點(diǎn)

var $p_node = $("<p></p>")    //創(chuàng)建節(jié)點(diǎn)
var $p_node = $("<p>helloworld</>")  //創(chuàng)建帶有文本的節(jié)點(diǎn)
var $div_node = $("<div id='div1'></div>")    //創(chuàng)建帶有屬性的節(jié)點(diǎn)
$("#p1").append($p_node)    //用append方法添加節(jié)點(diǎn)

2.插入內(nèi)容

2.1內(nèi)部插入

內(nèi)部插入试伙，顧名思義嘁信，就是指向目標(biāo)元素的內(nèi)部插入節(jié)點(diǎn)，插入的內(nèi)容在元素內(nèi)部疏叨，類(lèi)似于一種父子關(guān)系潘靖；與之向?qū)?yīng)的是外部插入，外部插入指的是在元素外部插入蚤蔓，插入后的內(nèi)容在元素外部卦溢，更像是一種兄弟關(guān)系。

append方法和appendTo方法

$("#div1").append($p_node)  //以下結(jié)果是相同的
$($p_node).appendTo("#div1")

prepend和prepend方法

$("#div1").prepend($p_node)  //一線結(jié)果也是一樣的
$($p_node).prependTo("#div1")  //不過(guò)與append不同单寂，元素插入的是，目標(biāo)元素內(nèi)部的前部分

2.2外部插入

after方法和insertAfter方法

$("#div1").after("<p>helloworld</p>")    //以下效果是一樣的
$("<p>helloworld</p>").insertAfter("#div1")

before()和insertBofore()方法：

$("#div1").before("<p>helloworld</p>")   //以下效果是一樣的
$("<p>helloworld</p>").insertBefore("#div1")

3刪除內(nèi)容

remove方法：

//remove
$("button").click(function(){  //點(diǎn)擊button移除div2
    $("#div2").remove();
})

empty方法：

//empty
$("button").click(function(){  //清空div2的內(nèi)部包含的內(nèi)容
    $("#div2").empty()
})

? remove和empty的不同：通過(guò)上邊的兩個(gè)例子吐辙，remove移除的是匹配到的元素的所以內(nèi)容（包括該元素自身）宣决，而empty移除的僅是匹配元素的內(nèi)部元素，而它本身被保留了下來(lái)

detach方法：

p.on{     //定義p的一個(gè)狀態(tài)
    background-color: red;     
}
$("p").click(function(){     //對(duì)p綁定一個(gè)事件
    $(this).toggleClass("on")  //切換狀態(tài)
})
var state
$("#detach_button").click(function(){
    if(state){
        state.appendTo("body")   //將state暫存的內(nèi)容添加到body中
        state=null
    }else{
        state=$("p").detach();  //對(duì)p使用detach方法昏苏，返回值暫存state中
    }
})

? 在上面的程序中尊沸，我們對(duì)p標(biāo)簽添加了一個(gè)點(diǎn)擊事件，效果是切換p的背景贤惯，當(dāng)我們對(duì)p使用detach方法時(shí)洼专，將detach分離出的內(nèi)容暫存在state中，當(dāng)再次將state添加到body后孵构，發(fā)現(xiàn)p的click事件仍然存在壶熏，這就是detach與remove的不同之處

4.克隆內(nèi)容

clone([withDataAndEvents],[deepWithDataAndEnents])

參數(shù)說(shuō)明：

• withDataAndEvents 是否保留事件處理函數(shù)和數(shù)據(jù)，默認(rèn)為false
• deepWithDataAndEvents 是否設(shè)置是否對(duì)子元素也保留處理函數(shù)和數(shù)據(jù)浦译，默認(rèn)值與第一個(gè)參數(shù)匹配

$("#para1").click(function(){
    $(this).toggleClass("on")
})
$("#clone").click(function(){
    $("#para1").clone(false).insertAfter("#clone")
})

當(dāng)withDataAndEvents值為false時(shí)棒假，點(diǎn)擊button會(huì)添加一個(gè)p標(biāo)簽溯职，但是點(diǎn)擊p并沒(méi)有反映，而當(dāng)值為true時(shí)帽哑，clone方法會(huì)復(fù)制處理函數(shù)谜酒，所以此時(shí)點(diǎn)擊p標(biāo)簽時(shí)就會(huì)出現(xiàn)樣式的變換

5.替換內(nèi)容

replaceWith方法：

$("#replace").click(function(){
    $(this).replaceWith("<div>"+$(this).text()+"</div>")
})

? replaceWIth方法是將選中的元素替換為目標(biāo)元素，此操作是移動(dòng)妻枕，不是復(fù)制僻族。

replaceAll方法：

$("#replaceAll").click(function(){
    $("<div>"+$(this).text()+"</div>").replaceAll(this)
})

? 兩個(gè)方法實(shí)際上是一對(duì)相反的操作，上面兩個(gè)程序結(jié)果相同

6.包裹內(nèi)容

6.1外包

wrap方法：

$("p").wrap("<li></li>")為p標(biāo)簽外包裹li標(biāo)簽

6.2內(nèi)包

wrapInner方法：

$("div").wrapInner("<li></li>")為div內(nèi)包裹一個(gè)li標(biāo)簽

6.3總包

wrapAll

其效果在所有元素外包一層結(jié)構(gòu)屡谐。

$("div").wrapAll("<li></li>")

6.4卸包

$("div").unwrap();

刪除父級(jí)元素

7.屬性操作

使用prop方法來(lái)設(shè)置屬性：

$("input[checked='checked']").prop({
    disabled:true
})               //設(shè)置被選中的checkbox為不可用狀態(tài)

當(dāng)prop只有一個(gè)參數(shù)時(shí)述么，此時(shí)表示讀取元素的屬性，該方法返回的是元素的屬性：

console.log($("input[checked='checked']").prop("disabled"))
//result : true

使用attr方法來(lái)設(shè)置屬性：

$("#link").attr("href","https://www.baidu.com")
//使用attr方法改變a標(biāo)簽的href

同理愕掏，當(dāng)函數(shù)參數(shù)只有一個(gè)時(shí)度秘，返回的同樣是元素的屬性

console.log($("#link").attr("href"))
//result : https://www.baidu.com

? attr方法和prop方法的不同：使用prop的原則，1.只添加屬性名饵撑，而不添加屬性值就會(huì)生效剑梳。2.只要屬性為true/false

removeProp方法：

$("a").prop("size","10");  //給a設(shè)置一個(gè)自定義屬性size
console.log($("a").prop("size"))  //10
$("a").removeProp("size")   //使用removeProp方法刪除屬性
console.log($("a").prop("size"))  //undefined

removeAttr方法：

$("input").removeAttr("disabled")  

8.類(lèi)操作

addClass: 添加類(lèi)

$("p").addClass("blue size")   //為p標(biāo)簽添加兩個(gè)類(lèi)
p.blue{
    background-color: blue;
}
p.size{
    font-size: 30px;
}

removeClass: 移除類(lèi)

//removeClass
$("#removeClass").click(function(){   //點(diǎn)擊removeClass按鈕刪除p標(biāo)簽的兩個(gè)類(lèi)
    $("p").removeClass("blue size")
})

toggleClass: 切換類(lèi)

//toggleClass
$("#toggleClass").click(function(){    //點(diǎn)擊toggleClass按鈕 
    $("p").toggleClass("red smallSize",true)  //第二個(gè)參數(shù)為true,原先的類(lèi)被移除
    $("p").toggleClass("blue size",false)  //第二個(gè)參數(shù)為false，添加新類(lèi)
})

hasClass:判斷是否存在該類(lèi)

//hasClass
console.log($("p").hasClass("blue"))
//result: true

9.讀寫(xiě)文本和值

1.使用html方法讀寫(xiě)HTML

//html
var d=$("#div1").html()
$("#div2").html(d)

2.用text方法讀寫(xiě)文本

//text
console.log($("p").text());  //讀取p標(biāo)簽的文本

3.用val方法讀寫(xiě)值

$("#getVal").click(function(){  //點(diǎn)擊getVal按鈕使用val方法獲取文本框的值
    console.log($("input[type='text']").val())
})

10樣式表操作

css方法操作樣式表

$("p").css({   //為p標(biāo)簽設(shè)置CSS屬性
    "font-size":"20px",
    "background-color":"gray"
})

使用height和width方法設(shè)置元素大小

$("#div1").height(100)
$("#div1").width("80%")

11.訪問(wèn)文檔樹(shù)

jQuery定義了children(),next(),prev(),parent()四種基本方法來(lái)遍歷元素