DOM創(chuàng)建節(jié)點及節(jié)點屬性
通過JavaScript可以很方便的獲取DOM節(jié)點，從而進行一系列的DOM操作祭玉。但實際上一般開發(fā)者都習慣性的先定義好HTML結構，但這樣就非常不靈活了春畔。
試想下這樣的情況：如果我們通過AJAX獲取到數(shù)據(jù)之后然后才能確定結構的話脱货，這種情況就需要動態(tài)的處理節(jié)點了
本文向大家介紹一下如何使用JavaScript創(chuàng)建div節(jié)點元素，主要包括創(chuàng)建div節(jié)點元素的屬性和創(chuàng)建div節(jié)點元素的樣式兩大部分內容律姨，相信本文介紹一定會讓你有所收獲振峻。
先介紹下需要用到的瀏覽器提供的一些原生的方法（這里不處理低版本的IE兼容問題）
創(chuàng)建流程比較簡單，大體如下：
- 創(chuàng)建節(jié)點(常見的：元素择份、屬性和文本)
- 添加節(jié)點的一些屬性
- 加入到文檔中
流程中涉及的一點方法：
? 創(chuàng)建元素：document.createElement
? 設置屬性：setAttribute
? 添加文本：innerHTML
? 加入文檔：appendChild
如右邊代碼所示扣孟，寫一個最簡單的元素創(chuàng)建，我們會發(fā)現(xiàn)幾個問題： - 每一個元素節(jié)點都必須單獨創(chuàng)建
- 節(jié)點是屬性需要單獨設置缓淹，而且設置的接口不是很統(tǒng)一
- 添加到指定的元素位置不靈活
- 最后還有一個最重要的：瀏覽器兼容問題處理
針對這一系列的DOM操作的問題哈打，jQuery給出了一套非常完美的接口方法，我們之后就開始深入學習
實例：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
.left,
.right {
width: 300px;
height: 120px;
}
.left div,
.right div {
width: 100px;
height: 90px;
padding: 5px;
margin: 5px;
float: left;
border: 1px solid #ccc;
}
.left div {
background: #bbffaa;
}
.right div {
background: yellow;
}
</style>
</head>
<body>
<h2>動態(tài)創(chuàng)建元素節(jié)點</h2>
<div class="left">
<div class="aaron">點擊body區(qū)域會動態(tài)創(chuàng)建元素節(jié)點</div>
</div>
<script type="text/javascript">
var body = document.querySelector('body');
//提出了body區(qū)域
document.addEventListener('click',function(){
//創(chuàng)建2個div元素
var rightdiv = document.createElement('div')
var rightaaron = document.createElement("div");
//給2個div設置不同的屬性
rightdiv.setAttribute('class', 'right')
//設置div格子區(qū)域屬性
rightaaron.className = 'aaron'
rightaaron.innerHTML = "動態(tài)創(chuàng)建DIV元素節(jié)點";
//設置文字內容
//2個div合并成包含關系
rightdiv.appendChild(rightaaron)
//在div的格子中加入文檔
//繪制到頁面body
body.appendChild(rightdiv)
},false)
</script>
</body>
</html>
要理解為什么要設置兩個div節(jié)點讯壶。因為料仗，right是一個屬性，right div是子div的一個屬性伏蚊。
jQuery節(jié)點創(chuàng)建與屬性的處理
上一節(jié)介紹了通過JavaScript原生接口創(chuàng)建節(jié)點立轧，在處理上是非常復雜與繁瑣的。我們可以通過使用jQuery來簡化了這個過程
創(chuàng)建元素節(jié)點：
可以有幾種方式躏吊，后面會慢慢接觸氛改。常見的就是直接把這個節(jié)點的結構給通過HTML標記字符串描述出來，通過$()函數(shù)處理比伏，$("html結構")
$("<div></div>")
創(chuàng)建為本節(jié)點：
與創(chuàng)建元素節(jié)點類似胜卤，可以直接把文本內容一并描述
$("<div>我是文本節(jié)點</div>")
創(chuàng)建為屬性節(jié)點：
與創(chuàng)建元素節(jié)點同樣的方式
$("<div id='test' class='aaron'>我是文本節(jié)點</div>")
我們通過jQuery把上一屆的代碼改造一下，如右邊代碼所示
一條一句就搞定了赁项，跟寫HTML結構方式是一樣的
$("<div class='right'><div class='aaron'>動態(tài)創(chuàng)建DIV元素節(jié)點</div></div>")
這就是jQuery創(chuàng)建節(jié)點的方式葛躏，讓我們保留HTML的結構書寫方式，非常的簡單悠菜、方便和靈活
DOM內部插入append()與appendTo()
動態(tài)創(chuàng)建的元素是不夠的舰攒，它只是臨時存放在內存中，最終我們需要放到頁面文檔并呈現(xiàn)出來悔醋。那么問題來了摩窃，怎么放到文檔上？
這里就涉及到一個位置關系芬骄，常見的就是把這個新創(chuàng)建的元素猾愿，當作頁面某一個元素的子元素放到其內部鹦聪。針對這樣的處理，jQuery就定義2個操作的方法
append：這個操作與對指定的元素執(zhí)行原生的appendChild方法匪蟀，將它們添加到文檔中的情況類似椎麦。
appendTo：實際上，使用這個方法是顛倒了常規(guī)的$(A).append(B)的操作材彪，即不是把B追加到A中，而是把A追加到B中琴儿。
簡單的總結就是：
.append()和.appendTo()兩種方法功能相同段化，主要的不同是語法——內容和目標的位置不同
append()前面是被插入的對象，后面是要在對象內插入的元素內容
appendTo()前面是要插入的元素內容造成，而后面是被插入的對象
DOM外部插入after()與before()
節(jié)點與節(jié)點之前有各種關系显熏，除了父子，祖輩關系晒屎，還可以是兄弟關系喘蟆。之前我們在處理節(jié)點插入的時候，接觸到了內部插入的幾個方法鼓鲁，這節(jié)我們開始講外部插入的處理蕴轨，也就是兄弟之間的關系處理，這里jQuery引入了2個方法骇吭，可以用來在匹配I的元素前后插入內容
選擇器的描述：
? before與after都是用來對相對選中元素外部增加相鄰的兄弟節(jié)點
? 2個方法都是都可以接收HTML字符串橙弱，DOM 元素，元素數(shù)組燥狰，或者jQuery對象棘脐，用來插入到集合中每個匹配元素的前面或者后面
? 2個方法都支持多個參數(shù)傳遞after(div1,div2,....) 可以參考右邊案例代碼
注意點：
? after向元素的后邊添加html代碼，如果元素后面有元素了龙致，那將后面的元素后移蛀缝，然后將html代碼插入
? before向元素的前邊添加html代碼，如果元素前面有元素了目代，那將前面的元素前移屈梁，然后將html代碼插
DOM內部插入prepend()與prependTo()
在元素內部進行操作的方法，除了在被選元素的結尾（仍然在內部）通過append與appendTo插入指定內容外像啼，相應的還可以在被選元素之前插入俘闯，jQuery提供的方法是prepend與prependTo
選擇器的描述：
通過右邊代碼可以看到prepend與prependTo的使用及區(qū)別：
? .prepend()方法將指定元素插入到匹配元素里面作為它的第一個子元素 (如果要作為最后一個子元素插入用.append()).
? .prepend()和.prependTo()實現(xiàn)同樣的功能，主要的不同是語法忽冻，插入的內容和目標的位置不同
? 對于.prepend() 而言真朗，選擇器表達式寫在方法的前面，作為待插入內容的容器僧诚，將要被插入的內容作為方法的參數(shù)
? 而.prependTo() 正好相反遮婶，將要被插入的內容寫在方法的前面蝗碎，可以是選擇器表達式或動態(tài)創(chuàng)建的標記，待插入內容的容器作為參數(shù)旗扑。
這里總結下內部操作四個方法的區(qū)別：
? append()向每個匹配的元素內部追加內容
? prepend()向每個匹配的元素內部前置內容
? appendTo()把所有匹配的元素追加到另一個指定元素的集合中
? prependTo()把所有匹配的元素前置到另一個指定的元素集合中
DOM外部插入insertAfter()與insertBefore()
與內部插入處理一樣蹦骑，jQuery由于內容目標的位置不同，然增加了2個新的方法insertAfter與insertBefore
? .before()和.insertBefore()實現(xiàn)同樣的功能臀防。主要的區(qū)別是語法——內容和目標的位置眠菇。 對于before()選擇表達式在函數(shù)前面，內容作為參數(shù)袱衷，而.insertBefore()剛好相反捎废，內容在方法前面，它將被放在參數(shù)里元素的前面
? .after()和.insertAfter() 實現(xiàn)同樣的功能致燥。主要的不同是語法——特別是（插入）內容和目標的位置登疗。 對于after()選擇表達式在函數(shù)的前面，參數(shù)是將要插入的內容嫌蚤。對于 .insertAfter(), 剛好相反辐益，內容在方法前面，它將被放在參數(shù)里元素的后面
? before脱吱、after與insertBefore智政。insertAfter的除了目標與位置的不同外，后面的不支持多參數(shù)處理
注意事項：
? insertAfter將JQuery封裝好的元素插入到指定元素的后面急凰，如果元素后面有元素了女仰，那將后面的元素后移，然后將JQuery對象插入抡锈；
? insertBefore將JQuery封裝好的元素插入到指定元素的前面疾忍，如果元素前面有元素了，那將前面的元素前移床三，然后將JQuery對象插入一罩；
DOM節(jié)點刪除之empty()的基本用法
要移除頁面上節(jié)點是開發(fā)者常見的操作，jQuery提供了幾種不同的方法用來處理這個問題撇簿，這里我們開仔細了解下empty方法
empty 顧名思義聂渊，清空方法，但是與刪除又有點不一樣四瘫，因為它只移除了 指定元素中的所有子節(jié)點汉嗽。
這個方法不僅移除子元素（和其他后代元素），同樣移除元素里的文本找蜜。因為饼暑，根據(jù)說明，元素里任何文本字符串都被看做是該元素的子節(jié)點。請看下面的HTML：
<div class="hello"><p>慕課網(wǎng)</p></div>
如果我們通過empty方法移除里面div的所有元素弓叛，它只是清空內部的html代碼彰居，但是標記仍然留在DOM中
//通過empty處理
$('.hello').empty()
//結果：<p>慕課網(wǎng)</p>被移除
<div class="hello"></div>
DOM節(jié)點刪除之remove()的有參用法和無參用法
remove與empty一樣，都是移除元素的方法撰筷，但是remove會將元素自身移除陈惰，同時也會移除元素內部的一切，包括綁定的事件及與該元素相關的jQuery數(shù)據(jù)毕籽。
例如一段節(jié)點抬闯，綁定點擊事件
<div class="hello"><p>慕課網(wǎng)</p></div>
$('.hello').on("click",fn)
如果不通過remove方法刪除這個節(jié)點其實也很簡單，但是同時需要把事件給銷毀掉关筒，這里是為了防止"內存泄漏"画髓，所以前端開發(fā)者一定要注意，綁了多少事件平委，不用的時候一定要記得銷毀
通過remove方法移除div及其內部所有元素，remove內部會自動操作事件銷毀方法夺谁，所以使用使用起來非常簡單
//通過remove處理
$('.hello').remove()
//結果：<div class="hello"><p>慕課網(wǎng)</p></div> 全部被移除
//節(jié)點不存在了,同事事件也會被銷毀
remove表達式參數(shù)：
remove比empty好用的地方就是可以傳遞一個選擇器表達式用來過濾將被移除的匹配元素集合廉赔，可以選擇性的刪除指定的節(jié)點
我們可以通過$()選擇一組相同的元素，然后通過remove（）傳遞篩選的規(guī)則匾鸥，從而這樣處理
對比右邊的代碼區(qū)域蜡塌，我們可以通過類似于這樣處理
$("p").filter(":contains('3')").remove()
DOM節(jié)點刪除之empty和remove區(qū)別
要用到移除指定元素的時候，jQuery提供了empty()與remove([expr])二個方法勿负，兩個都是刪除元素馏艾，但是兩者還是有區(qū)別
empty方法
? 嚴格地講，empty()方法并不是刪除節(jié)點奴愉，而是清空節(jié)點琅摩，它能清空元素中的所有后代節(jié)點
? empty不能刪除自己本身這個節(jié)點
remove方法
? 該節(jié)點與該節(jié)點所包含的所有后代節(jié)點將同時被刪除
? 提供傳遞一個篩選的表達式，刪除指定合集中的元素
以上就是二者的區(qū)別锭硼，我們具體通過右邊代碼部分加深理解
DOM節(jié)點刪除之保留數(shù)據(jù)的刪除操作detach()
如果我們希望臨時刪除頁面上的節(jié)點房资，但是又不希望節(jié)點上的數(shù)據(jù)與事件丟失，并且能在下一個時間段讓這個刪除的節(jié)點顯示到頁面檀头，這時候就可以使用detach方法來處理
detach從字面上就很容易理解轰异。讓一個web元素托管。即從當前頁面中移除該元素暑始，但保留這個元素的內存模型對象搭独。
來看看jquery官方文檔的解釋：
這個方法不會把匹配的元素從jQuery對象中刪除，因而可以在將來再使用這些匹配的元素廊镜。與remove()不同的是牙肝，所有綁定的事件、附加的數(shù)據(jù)等都會保留下來。
$("div").detach()這一句會移除對象惊奇，僅僅是顯示效果沒有了互躬。但是內存中還是存在的。當你append之后颂郎，又重新回到了文檔流中吼渡。就又顯示出來了。
當然這里要特別注意乓序，detach方法是JQuery特有的寺酪，所以它只能處理通過JQuery的方法綁定的事件或者數(shù)據(jù)
參考右邊的代碼區(qū)域，通過 $("p").detach()把所有的P元素刪除后替劈，再通過append把刪除的p元素放到頁面上寄雀，通過點擊文字，可以證明事件沒有丟失
例子：
var p;
$("#bt1").click(function() {
if (!$("p").length) return; //true的時候代表已經(jīng)是空的了陨献。去重
//通過detach方法刪除元素
//只是頁面不可見盒犹，但是這個節(jié)點還是保存在內存中
//數(shù)據(jù)與事件都不會丟失
p = $("p").detach()
});
$("#bt2").click(function() {
//把p元素在添加到頁面中
//事件還是存在
$("body").append(p);
});
DOM拷貝clone()
克隆節(jié)點是DOM的常見操作，jQuery提供一個clone方法眨业，專門用于處理dom的克隆
.clone()方法深度 復制所有匹配的元素集合急膀，包括所有匹配元素、匹配元素的下級元素龄捡、文字節(jié)點卓嫂。
clone方法比較簡單就是克隆節(jié)點，但是需要注意聘殖，如果節(jié)點有事件或者數(shù)據(jù)之類的其他處理晨雳，我們需要通過clone(ture)傳遞一個布爾值ture用來指定，這樣不僅僅只是克隆單純的節(jié)點結構奸腺，還要把附帶的事件與數(shù)據(jù)給一并克隆了
例如：
HTML部分
<div></div>
JavaScript部分
$("div").on('click', function() {//執(zhí)行操作})
//clone處理一
$("div").clone() //只克隆了結構餐禁，事件丟失
//clone處理二
$("div").clone(true) //結構、事件與數(shù)據(jù)都克隆
使用上就是這樣簡單洋机，使用克隆的我們需要額外知道的細節(jié)：
? clone()方法時坠宴，在將它插入到文檔之前，我們可以修改克隆后的元素或者元素內容绷旗，如右邊代碼我 $(this).clone().css('color','red') 增加了一個顏色
? 通過傳遞true喜鼓，將所有綁定在原始元素上的事件處理函數(shù)復制到克隆元素上
? clone()方法是jQuery擴展的，只能處理通過jQuery綁定的事件與數(shù)據(jù)
? 元素數(shù)據(jù)（data）內對象和數(shù)組不會被復制衔肢，將繼續(xù)被克隆元素和原始元素共享庄岖。深復制的所有數(shù)據(jù)，需要手動復制每一個
<script type="text/javascript">
//只克隆節(jié)點
//不克隆事件
$(".aaron1").on('click', function() {
$(".left").append( $(this).clone().css('color','red') )
})
</script>
<script type="text/javascript">
//克隆節(jié)點
//克隆事件
$(".aaron2").on('click', function() {
console.log(1)
$(".left").append( $(this).clone(true).css('color','blue') )
})
</script>
DOM替換replaceWith()和replaceAll()
之前學習了節(jié)點的內插入角骤、外插入以及刪除方法隅忿，這節(jié)會學習替換方法replaceWith
.replaceWith( newContent )：用提供的內容替換集合中所有匹配的元素并且返回被刪除元素的集合
簡單來說：用$()選擇節(jié)點A心剥，調用replaceWith方法，傳入一個新的內容B（HTML字符串背桐，DOM元素优烧，或者jQuery對象）用來替換選中的節(jié)點A
看個簡單的例子：一段HTML代碼
<div>
<p>第一段</p>
<p>第二段</p>
<p>第三段</p>
</div>
替換第二段的節(jié)點與內容
$("p:eq(1)").replaceWith('<a style="color:red">替換第二段的內容</a>')
通過jQuery篩選出第二個p元素，調用replaceWith進行替換链峭，結果如下
<div>
<p>第一段</p>
<a style="color:red">替換第二段的內容</a>'
<p>第三段</p>
</div>
.replaceAll( target ) ：用集合的匹配元素替換每個目標元素
.replaceAll()和.replaceWith()功能類似畦娄，但是目標和源相反，用上述的HTML結構弊仪，我們用replaceAll處理
$('<a style="color:red">替換第二段的內容</a>').replaceAll('p:eq(1)')
總結：
? .replaceAll()和.replaceWith()功能類似熙卡，主要是目標和源的位置區(qū)別
? .replaceWith()與.replaceAll() 方法會刪除與節(jié)點相關聯(lián)的所有數(shù)據(jù)和事件處理程序
? .replaceWith()方法，和大部分其他jQuery方法一樣励饵，返回jQuery對象驳癌，所以可以和其他方法鏈接使用
? .replaceWith()方法返回的jQuery對象引用的是替換前的節(jié)點，而不是通過replaceWith/replaceAll方法替換后的節(jié)點
$(".bt1").on('click', function() {
//找到內容為第二段的p元素
//通過replaceWith刪除并替換這個節(jié)點
$(".right > div:first p:eq(1)").replaceWith('<a style="color:red">replaceWith替換第二段的內容</a>')
})
</script>
<script type="text/javascript">
//找到內容為第六段的p元素
//通過replaceAll刪除并替換這個節(jié)點
$(".bt2").on('click', function() {
$('<a style="color:red">replaceAll替換第六段的內容</a>').replaceAll('.right > div:last p:last');
})
DOM包裹wrap()方法
如果要將元素用其他元素包裹起來役听，也就是給它增加一個父元素颓鲜，針對這樣的處理，JQuery提供了一個wrap方法
.wrap( wrappingElement )：在集合中匹配的每個元素周圍包裹一個HTML結構
簡單的看一段代碼：
<p>p元素</p>
給p元素增加一個div包裹
$('p').wrap('<div></div>')
最后的結構典予，p元素增加了一個父div的結構
<div>
<p>p元素</p>
</div>
.wrap( function ) ：一個回調函數(shù)灾杰，返回用于包裹匹配元素的 HTML 內容或 jQuery 對象
使用后的效果與直接傳遞參數(shù)是一樣，只不過可以把代碼寫在函數(shù)體內部熙参，寫法不同而已
以第一個案例為例：
$('p').wrap(function() {
return '<div></div>'; //與第一種類似，只是寫法不一樣
})
注意：
.wrap()函數(shù)可以接受任何字符串或對象麦备，可以傳遞給$()工廠函數(shù)來指定一個DOM結構孽椰。這種結構可以嵌套了好幾層深，但應該只包含一個核心的元素凛篙。每個匹配的元素都會被這種結構包裹黍匾。該方法返回原始的元素集，以便之后使用鏈式方法呛梆。
<script type="text/javascript">
$(".aaron1").on('click', function() {
//給所有p元素锐涯，增加父容器div
$('p').wrap('<div></div>')
})
</script>
<script type="text/javascript">
$(".aaron2").on('click', function() {
$('a').wrap(function() {
return '<div class="' + $(this).text() + '" />';
})
})
</script>
DOM包裹unwrap()方法
我們可以通過wrap方法給選中元素增加一個包裹的父元素。相反填物，如果刪除選中元素的父元素要如何處理 ?
jQuery提供了一個unwarp()方法 纹腌，作用與wrap方法是相反的。將匹配元素集合的父級元素刪除滞磺，保留自身（和兄弟元素升薯，如果存在）在原來的位置。
看一段簡單案例：
<div>
<p>p元素</p>
</div>
我要刪除這段代碼中的div击困，一般常規(guī)的方法會直接通過remove或者empty方法
$('div').remove();
但是如果我還要保留內部元素p涎劈，這樣就意味著需要多做很多處理，步驟相對要麻煩很多，為了更便捷蛛枚，jQuery提供了unwarp方法很方便的處理了這個問題
$('p').unwarp();
找到p元素谅海，然后調用unwarp方法，這樣只會刪除父輩div元素了
結果：
<p>p元素</p>
這個方法比較簡單蹦浦，也不接受任何參數(shù)扭吁，注意參考下案例的使用即可
DOM包裹wrapAll()方法
wrap是針對單個dom元素處理，如果要將集合中的元素用其他元素包裹起來白筹，也就是給他們增加一個父元素智末，針對這樣的處理，JQuery提供了一個wrapAll方法
.wrapAll( wrappingElement )：給集合中匹配的元素增加一個外面包裹HTML結構
簡單的看一段代碼：
<p>p元素</p>
<p>p元素</p>
給所有p元素增加一個div包裹
$('p').wrapAll('<div></div>')
最后的結構徒河，2個P元素都增加了一個父div的結構
<div>
<p>p元素</p>
<p>p元素</p>
</div>
.wrapAll( function ) ：一個回調函數(shù)系馆，返回用于包裹匹配元素的 HTML 內容或 jQuery 對象
通過回調的方式可以單獨處理每一個元素
以上面案例為例，
$('p').wrapAll(function() {
return '<div><div/>';
})
以上的寫法的結果如下顽照，等同于warp的處理了
<div>
<p>p元素</p>
</div>
<div>
<p>p元素</p>
</div>
注意：
.wrapAll()函數(shù)可以接受任何字符串或對象由蘑，可以傳遞給$()工廠函數(shù)來指定一個DOM結構。這種結構可以嵌套多層代兵，但是最內層只能有一個元素尼酿。所有匹配元素將會被當作是一個整體，在這個整體的外部用指定的 HTML 結構進行包裹植影。
DOM包裹wrapInner()方法
如果要將合集中的元素內部所有的子元素用其他元素包裹起來裳擎，并當作指定元素的子元素，針對這樣的處理思币，JQuery提供了一個wrapInner方法
.wrapInner( wrappingElement )：給集合中匹配的元素的內部鹿响，增加包裹的HTML結構
聽起來有點繞，可以用個簡單的例子描述下谷饿，簡單的看一段代碼：
<div>p元素</div>
<div>p元素</div>
給所有元素增加一個p包裹
$('div').wrapInner('<p></p>')
最后的結構惶我，匹配的di元素的內部元素被p給包裹了
<div>
<p>p元素</p>
</div>
<div>
<p>p元素</p>
</div>
.wrapInner( function ) ：允許我們用一個callback函數(shù)做參數(shù)，每次遇到匹配元素時博投，該函數(shù)被執(zhí)行绸贡，返回一個DOM元素，jQuery對象毅哗，或者HTML片段听怕，用來包住匹配元素的內容
以上面案例為例，
$('div').wrapInner(function() {
return '<p></p>';
})
以上的寫法的結果如下虑绵，等同于第一種處理了
<div>
<p>p元素</p>
</div>
<div>
<p>p元素</p>
</div>
注意：
當通過一個選擇器字符串傳遞給.wrapInner() 函數(shù)叉跛，其參數(shù)應該是格式正確的 HTML，并且 HTML 標簽應該是被正確關閉的蒸殿。
jQuery遍歷之children()方法
jQuery是一個合集對象筷厘，如果想快速查找合集里面的第一級子元素鸣峭，此時可以用children()方法。這里需要注意：.children(selector) 方法是返回匹配元素集合中每個元素的所有子元素（僅兒子輩酥艳，這里可以理解為就是父親-兒子的關系）
理解節(jié)點查找關系：
<div class="div">
<ul class="son">
<li class="grandson">1</li>
</ul>
</div>
代碼如果是$("div").children()摊溶，那么意味著只能找到ul，因為div與ul是父子關系充石，li與div是祖輩關系莫换，因此無法找到。
children()無參數(shù)
允許我們通過在DOM樹中對這些元素的直接子元素進行搜索骤铃，并且構造一個新的匹配元素的jQuery對象
注意：jQuery是一個合集對象拉岁，所以通過children是匹配合集中每一給元素的第一級子元素
.children()方法選擇性地接受同一類型選擇器表達式
$("div").children(".selected")
同樣的也是因為jQuery是合集對象，可能需要對這個合集對象進行一定的篩選惰爬，找出目標元素喊暖，所以允許傳一個選擇器的表達式
jQuery遍歷之find()方法
jQuery是一個合集對象，如果想快速查找DOM樹中的這些元素的后代元素撕瞧，此時可以用find()方法陵叽，這也是開發(fā)使用頻率很高的方法。這里要注意 children與find方法的區(qū)別丛版，children是父子關系查找巩掺，find是后代關系（包含父子關系）
理解節(jié)點查找關系：
<div class="div">
<ul class="son">
<li class="grandson">1</li>
</ul>
</div>
代碼如果是$("div").find("li")，此時页畦，li與div是祖輩關系胖替，通過find方法就可以快速的查找到了。
.find()方法要注意的知識點：
? find是遍歷當前元素集合中每個元素的后代豫缨。只要符合刊殉，不管是兒子輩，孫子輩都可以州胳。
? 與其他的樹遍歷方法不同，選擇器表達式對于 .find() 是必需的參數(shù)逸月。如果我們需要實現(xiàn)對所有后代元素的取回栓撞，可以傳遞通配選擇器 '*'。
? find只在后代中遍歷碗硬，不包括自己瓤湘。
? 選擇器 context 是由 .find() 方法實現(xiàn)的；因此恩尾，$('.item-ii').find('li') 等價于 $('li', '.item-ii')(找到類名為item-ii的標簽下的li標簽)弛说。
注意重點：
.find()和.children()方法是相似的
1.children只查找第一級的子節(jié)點
2.find查找范圍包括子節(jié)點的所有后代節(jié)點
jQuery遍歷之parent()方法
jQuery是一個合集對象翰意，如果想快速查找合集里面的每一個元素的父元素（這里可以理解為就是父親-兒子的關系）木人，此時可以用parent()方法
因為是父元素信柿，這個方法只會向上查找一級
理解節(jié)點查找關系：
<div class="div">
<ul class="son">
<li class="grandson">1</li>
</ul>
</div>
查找ul的父元素div, $(ul).parent()，就是這樣簡單的表達
parent()無參數(shù)
parent()方法允許我們能夠在DOM樹中搜索到這些元素的父級元素醒第，從有序的向上匹配元素渔嚷，并根據(jù)匹配的元素創(chuàng)建一個新的 jQuery 對象
注意：jQuery是一個合集對象，所以通過parent是匹配合集中每一個元素的父元素
parent()方法選擇性地接受同一型選擇器表達式
同樣的也是因為jQuery是合集對象稠曼，可能需要對這個合集對象進行一定的篩選形病，找出目標元素，所以允許傳一個選擇器的表達式
jQuery遍歷之parents()方法
jQuery是一個合集對象霞幅，如果想快速查找合集里面的每一個元素的所有祖輩元素漠吻，此時可以用parents()方法
其實也類似find與children的區(qū)別，parent只會查找一級司恳，parents則會往上一直查到查找到祖先節(jié)點
理解節(jié)點查找關系：
<div class="div">
<ul class="son">
<li class="grandson">1</li>
</ul>
</div>
在li節(jié)點上找到祖 輩元素div途乃， 這里可以用$("li").parents()方法
parents()無參數(shù)
parents()方法允許我們能夠在DOM樹中搜索到這些元素的祖先元素，從有序的向上匹配元素抵赢，并根據(jù)匹配的元素創(chuàng)建一個新的 jQuery 對象;
返回的元素秩序是從離他們最近的父級元素開始的
注意：jQuery是一個合集對象欺劳，所以通過parent是匹配合集中所有元素的祖輩元素
parents()方法選擇性地接受同一型選擇器表達式
同樣的也是因為jQuery是合集對象，可能需要對這個合集對象進行一定的篩選铅鲤，找出目標元素划提，所以允許傳一個選擇器的表達式
注意事項：
1 .parents()和.parent()方法是相似的，但后者只是進行了一個單級的DOM樹查找
2 $( "html" ).parent()方法返回一個包含document的集合邢享，而$( "html" ).parents()返回一個空集合鹏往。
jQuery遍歷之closest()方法
以選定的元素為中心，往內查找可以通過find骇塘、children方法伊履。如果往上查找，也就是查找當前元素的父輩祖輩元素款违，jQuery提供了closest()方法策幼，這個方法類似parents但是又有一些細微的區(qū)別聚假，屬于使用頻率很高的方法
closest()方法接受一個匹配元素的選擇器字符串
從元素本身開始，在DOM 樹上逐級向上級元素匹配，并返回最先匹配的祖先元素
例如：在div元素中滚秩，往上查找所有的li元素诱担，可以這樣表達
$("div").closet("li')
注意：jQuery是一個合集對象厘肮，所以通過closest是匹配合集中每一個元素的祖先元素
closest()方法給定的jQuery集合或元素來過濾元素
同樣的也是因為jQuery是合集對象拷橘，可能需要對這個合集對象進行一定的篩選，找出目標元素气嫁，所以允許傳一個jQuery的對象
注意事項：在使用的時候需要特別注意下
粗看.parents()和.closest()是有點相似的当窗，都是往上遍歷祖輩元素，但是兩者還是有區(qū)別的寸宵，否則就沒有存在的意義了
- 起始位置不同：.closest開始于當前元素 .parents開始于父元素
- 遍歷的目標不同：.closest要找到指定的目標崖面，.parents遍歷到文檔根元素元咙，closest向上查找，直到找到一個匹配的就停止查找嘶朱，parents一直查找到根元素蛾坯，并將匹配的元素加入集合
- 結果不同：.closest返回的是包含零個或一個元素的jquery對象，parents返回的是包含零個或一個或多個元素的jquery對象
jQuery遍歷之next()方法
jQuery是一個合集對象疏遏，如果想快速查找指定元素集合中每一個元素緊鄰的后面同輩元素的元素集合脉课，此時可以用next()方法
理解節(jié)點查找關系：
如下class="item-1"元素就是紅色部分，那藍色的class="item-2"就是它的兄弟元素
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
next()無參數(shù)
允許我們找遍元素集合中緊跟著這些元素的直接兄弟元素财异，并根據(jù)匹配的元素創(chuàng)建一個新的 jQuery 對象倘零。
注意：jQuery是一個合集對象，所以通過next匹配合集中每一個元素的下一個兄弟元素
next()方法選擇性地接受同一類型選擇器表達式
同樣的也是因為jQuery是合集對象戳寸，可能需要對這個合集對象進行一定的篩選呈驶，找出目標元素，所以允許傳一個選擇器的表達式
jQuery遍歷之prev()方法
jQuery是一個合集對象疫鹊，如果想快速查找指定元素集合中每一個元素緊鄰的前面同輩元素的元素集合袖瞻，此時可以用prev()方法
理解節(jié)點查找關系：
如下藍色的class="item-2"的li元素，紅色的節(jié)點就是它的prev兄弟節(jié)點
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
prev()無參數(shù)
取得一個包含匹配的元素集合中每一個元素緊鄰的前一個同輩元素的元素集合
注意：jQuery是一個合集對象拆吆，所以通過prev是匹配合集中每一個元素的上一個兄弟元素
prev()方法選擇性地接受同一類型選擇器表達式
同樣的也是因為jQuery是合集對象聋迎，可能需要對這個合集對象進行一定的篩選，找出目標元素枣耀，所以允許傳一個選擇器的表達式
jQuery遍歷之siblings()
jQuery是一個合集對象霉晕，如果想快速查找指定元素集合中每一個元素的同輩元素，此時可以用siblings()方法
理解節(jié)點查找關系：
如下藍色的class="item-2"的li元素捞奕，紅色的節(jié)點就是它的siblings兄弟節(jié)點
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
siblings()無參數(shù)
取得一個包含匹配的元素集合中每一個元素的同輩元素的元素集合
注意：jQuery是一個合集對象牺堰，所以通過siblings是匹配合集中每一個元素的同輩元素
siblings()方法選擇性地接受同一類型選擇器表達式
同樣的也是因為jQuery是合集對象，可能需要對這個合集對象進行一定的篩選颅围，找出目標元素伟葫，所以允許傳一個選擇器的表達式
jQuery遍歷之a(chǎn)dd()方法
jQuery是一個合集對象，通過$()方法找到指定的元素合集后可以進行一系列的操作院促。$()之后就意味著這個合集對象已經(jīng)是確定的筏养，如果后期需要再往這個合集中添加一新的元素要如何處理？jQuery為此提供add方法一疯，用來創(chuàng)建一個新的jQuery對象 ，元素添加到匹配的元素集合中
.add()的參數(shù)可以幾乎接受任何的$()夺姑，包括一個jQuery選擇器表達式墩邀，DOM元素，或HTML片段引用盏浙。
簡單的看一個案例：
操作：選擇所有的li元素眉睹，之后把p元素也加入到li的合集中
<ul>
<li>list item 1</li>
<li>list item 3</li>
</ul>
<p>新的p元素</p>
處理一：傳遞選擇器
$('li').add('p')
處理二：傳遞dom元素
$('li').add(document.getElementsByTagName('p')[0])
還有一種方式荔茬，就是動態(tài)創(chuàng)建P標簽加入到合集，然后插入到指定的位置竹海，但是這樣就改變元素的本身的排列了
$('li').add('<p>新的p元素</p>').appendTo(目標位置)
jQuery遍歷之each()
jQuery是一個合集對象慕蔚，通過$()方法找到指定的元素合集后可以進行一系列的操作。比如我們操作$("li").css('') 給所有的li設置style值斋配，因為jQuery是一個合集對象孔飒，所以css方法內部就必須封裝一個遍歷的方法，被稱為隱式迭代的過程艰争。要一個一個給合集中每一個li設置顏色坏瞄，這里方法就是each
.each() 方法就是一個for循環(huán)的迭代器，它會迭代jQuery對象合集中的每一個DOM元素甩卓。每次回調函數(shù)執(zhí)行時鸠匀，會傳遞當前循環(huán)次數(shù)作為參數(shù)(從0開始計數(shù)
所以大體上了解3個重點：
each是一個for循環(huán)的包裝迭代器
each通過回調的方式處理，并且會有2個固定的實參逾柿，索引與元素
each回調方法中的this指向當前迭代的dom元素
看一個簡單的案例
<ul>
<li>慕課網(wǎng)</li>
<li>Aaron</li>
</ul>
開始迭代li缀棍，循環(huán)2次
$("li").each(function(index, element) {
index 索引 0,1
element是對應的li節(jié)點 li,li
this 指向的是li
})
這樣可以在循環(huán)體會做一些邏輯操作了，如果需要提前退出机错，可以以通過返回 false以便在回調函數(shù)內中止循
