children()方法
jQuery是一個合集物件，如果想快速查詢合集裡面的第一級子元素，此時可以用children()方法。這裡需要注意：.children(selector) 方法是返回匹配元素集合中每個元素的所有子元素（僅兒子輩，這裡可以理解為就是父親-兒子的關係）
節點查詢關係
<div class="div">
<ul class="son">
<li class="grandson">1</li>
</ul>
</div>
程式碼如果是$(“div”).children()，那麼意味著只能找到ul，因為div與ul是父子關係，li與div是祖輩關係，因此無法找到
children()無引數
允許通過在DOM樹中對這些元素的直接子元素進行搜尋，並且構造一個新的匹配元素的jQuery物件
注意：jQuery是一個合集物件，所以通過children匹配合集中每一個元素的第一級子元素
.children()方法選擇性地接受同一型別選擇器表示式
$("div").children(".selected")同樣的也是因為jQuery是合集物件，可能需要對這個合集物件進行一定的篩選，找出目標元素，所以允許傳一個選擇器的表示式
find()方法
jQuery是一個合集物件，如果想快速查詢DOM樹中的這些元素的後代元素，此時可以用find()方法，這也是開發使用頻率很高的方法。這裡要注意 children與find方法的區別，children是父子關係查詢，find是後代關係（包含父子關係）
節點查詢關係
<div class="div">
<ul class="son">
<li class="grandson">1</li>
</ul>
</div>
程式碼如果是$(“div”).find(“li”)，此時，li與div是祖輩關係，通過find方法就可以快速的查詢到
.find()方法要注意的知識點
-
find是遍歷當前元素集合中每個元素的後代。只要符合，不管是兒子輩，孫子輩都可以
-
與其他的樹遍歷方法不同，選擇器表示式對於 .find() 是必需的引數。如果我們需要實現對所有後代元素的取回，可以傳遞通配選擇器 `*`
-
find只在後代中遍歷，不包括自己
-
選擇器 context 是由 .find() 方法實現的；因此，$(`.item-ii`).find(`li`) 等價於 $(`li`, `.item-ii`)(找到類名為item-ii的標籤下的li標籤)
注意重點
.find()和.children()方法是相似的
-
children只查詢第一級的子節點
-
find查詢範圍包括子節點的所有後代節點
parent()方法
jQuery是一個合集物件，如果想快速查詢合集裡面的每一個元素的父元素（這裡可以理解為就是父親-兒子的關係），此時可以用parent()方法；因為是父元素，這個方法只會向上查詢一級
節點查詢關係
<div class="div">
<ul class="son">
<li class="grandson">1</li>
</ul>
</div>
// 查詢ul的父元素div, $(ul).parent()
parent()無引數
parent()方法允許我們能夠在DOM樹中搜尋到這些元素的父級元素，從有序的向上匹配元素，並根據匹配的元素建立一個新的 jQuery 物件
注意：jQuery是一個合集物件，所以通過parent是匹配合集中每一個元素的父元素
parent()方法選擇性地接受同一型選擇器表示式
同樣的也是因為jQuery是合集物件，可能需要對這個合集物件進行一定的篩選，找出目標元素，所以允許傳一個選擇器的表示式
parents()方法
jQuery是一個合集物件，如果想快速查詢合集裡面的每一個元素的所有祖輩元素，此時可以用parents()方法
其實也類似find與children的區別，parent只會查詢一級，parents則會往上一直查到查詢到祖先節點
節點查詢關係
<div class="div">
<ul class="son">
<li class="grandson">1</li>
</ul>
</div>
// 在li節點上找到祖輩元素div，用$("li").parents()方法
parents()無引數
parents()方法允許我們能夠在DOM樹中搜尋到這些元素的祖先元素，從有序的向上匹配元素，並根據匹配的元素建立一個新的 jQuery 物件；返回的元素秩序是從離他們最近的父級元素開始的
注意：jQuery是一個合集物件，所以通過parent是匹配合集中所有元素的祖輩元素
parents()方法選擇性地接受同一型選擇器表示式
同樣的也是因為jQuery是合集物件，可能需要對這個合集物件進行一定的篩選，找出目標元素，所以允許傳一個選擇器的表示式
注意事項
-
.parents()和.parent()方法是相似的，但後者只是進行了一個單級的DOM樹查詢
-
$( “html” ).parent()方法返回一個包含document的集合，而$( “html” ).parents()返回一個空集合。
closest()方法
以選定的元素為中心，往內查詢可以通過find、children方法。如果往上查詢，也就是查詢當前元素的父輩祖輩元素，jQuery提供了closest()方法，這個方法類似parents但是又有一些細微的區別，屬於使用頻率很高的方法
closest()方法接受一個匹配元素的選擇器字串
從元素本身開始，在DOM 樹上逐級向上級元素匹配，並返回最先匹配的祖先元素
// 在div元素中，往上查詢所有的li元素，可以這樣表達
$("div").closet("li`)
注意：jQuery是一個合集物件，所以通過closest是匹配合集中每一個元素的祖先元素
closest()方法給定的jQuery集合或元素來過濾元素
同樣的也是因為jQuery是合集物件，可能需要對這個合集物件進行一定的篩選，找出目標元素，所以允許傳一個jQuery的物件
注意事項
-
起始位置不同：.closest開始於當前元素 .parents開始於父元素
-
遍歷的目標不同：.closest要找到指定的目標，.parents遍歷到文件根元素，closest向上查詢，直到找到一個匹配的就停止查詢，parents一直查詢到根元素，並將匹配的元素加入集合
-
結果不同：.closest返回的是包含零個或一個元素的jquery物件，parents返回的是包含零個或一個或多個元素的jquery物件
next()方法
jQuery是一個合集物件，如果想快速查詢指定元素集合中每一個元素緊鄰的後面同輩元素的元素集合，此時可以用next()方法
節點查詢關係
//如下的class="item-2"就是class="item-1"的兄弟元素
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
next()無引數
允許我們找遍元素集合中緊跟著這些元素的直接兄弟元素，並根據匹配的元素建立一個新的 jQuery 物件。
注意：jQuery是一個合集物件，所以通過next匹配合集中每一個元素的下一個兄弟元素
next()方法選擇性地接受同一型別選擇器表示式
同樣的也是因為jQuery是合集物件，可能需要對這個合集物件進行一定的篩選，找出目標元素，所以允許傳一個選擇器的表示式
prev()方法
jQuery是一個合集物件，如果想快速查詢指定元素集合中每一個元素緊鄰的前面同輩元素的元素集合，此時可以用prev()方法
節點查詢關係
如下的class=”item-1″節點就是class=”item-2″的li元素的prev兄弟節點
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
prev()無引數
取得一個包含匹配的元素集合中每一個元素緊鄰的前一個同輩元素的元素集合
注意：jQuery是一個合集物件，所以通過prev是匹配合集中每一個元素的上一個兄弟元素
prev()方法選擇性地接受同一型別選擇器表示式
同樣的也是因為jQuery是合集物件，可能需要對這個合集物件進行一定的篩選，找出目標元素，所以允許傳一個選擇器的表示式
siblings()
jQuery是一個合集物件，如果想快速查詢指定元素集合中每一個元素的同輩元素，此時可以用siblings()方法
節點查詢關係
如下是class=”item-1″和class=”item-3″就是class=”item-2″的siblings兄弟節點
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
siblings()無引數
取得一個包含匹配的元素集合中每一個元素的同輩元素的元素集合
注意：jQuery是一個合集物件，所以通過siblings是匹配合集中每一個元素的同輩元素
siblings()方法選擇性地接受同一型別選擇器表示式
同樣的也是因為jQuery是合集物件，可能需要對這個合集物件進行一定的篩選，找出目標元素，所以允許傳一個選擇器的表示式
add()方法
jQuery是一個合集物件，通過$()方法找到指定的元素合集後可以進行一系列的操作。$()之後就意味著這個合集物件已經是確定的，如果後期需要再往這個合集中新增一新的元素要如何處理？jQuery為此提供add方法，用來建立一個新的jQuery物件 ，元素新增到匹配的元素集合中
.add()的引數可以幾乎接受任何的$()，包括一個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])
// 動態建立P標籤加入到合集，然後插入到指定的位置，但是這樣就改變元素的本身的排列了
$(`li`).add(`<p>新的p元素</p>`).appendTo(目標位置)
each()
jQuery是一個合集物件，通過$()方法找到指定的元素合集後可以進行一系列的操作
如操作$(“li”).css(“) 給所有的li設定style值，因為jQuery是一個合集物件，所以css方法內部就必須封裝一個遍歷的方法，被稱為隱式迭代的過程。要一個一個給合集中每一個li設定顏色，這裡方法就是each
.each() 方法就是一個for迴圈的迭代器，它會迭代jQuery物件合集中的每一個DOM元素。每次回撥函式執行時，會傳遞當前迴圈次數作為引數(從0開始計數)
三個重點
-
each是一個for迴圈的包裝迭代器
-
each通過回撥的方式處理，並且會有2個固定的實參，索引與元素
-
each回撥方法中的this指向當前迭代的dom元素
例項：
<ul>
<li>克利夫蘭騎士</li>
<li>LeBorn James</li>
</ul>
開始迭代li，迴圈2次
$("li").each(function(index, element) {
index 索引 0,1
element是對應的li節點 li,li
this 指向的是li
})
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
.left {
width: auto;
height: 150px;
}
.left div {
width: 150px;
height: 120px;
padding: 5px;
margin: 5px;
float: left;
background: #bbffaa;
border: 1px solid #ccc;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>each方法</h2>
<div class="left first-div">
<div class="div">
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>
</div>
<div class="div">
<ul>
<li>list item 4</li>
<li>list item 5</li>
<li>list item 6</li>
</ul>
</div>
</div>
<br/>
<button>點選：each方法遍歷元素</button>
<button>點選：each方法回撥判斷</button>
<script type="text/javascript">
$("button:first").click(function() {
//遍歷所有的li
//修改每個li內的字型顏色
$("li").each(function(index, element) {
$(this).css(`color`,`red`)
})
})
</script>
<script type="text/javascript">
$("button:last").click(function() {
//遍歷所有的li
//修改偶數li內的字型顏色
$("li").each(function(index, element) {
if (index % 2) {
$(this).css(`color`,`blue`)
}
})
})
</script>
</body>
</html>