一、jQuery排序

eq（）排序，可以看作是一個(gè)篩選方法

• jQuery 中獲得的對(duì)象，內(nèi)部包含選擇的一組原生 js 對(duì)象，在 jQuery 對(duì)象中會(huì)進(jìn)行一個(gè)新的大的排序，這個(gè)排序與原來的 HTML 結(jié)構(gòu)沒有關(guān)系。

所以eq() 方法在 jQuery 對(duì)象中通過下標(biāo)獲取某個(gè)對(duì)象，下標(biāo)是 jQuery 對(duì)象中的大的排序的下標(biāo)。

//選中所有p標(biāo)簽
var $ps = $("p");
//生成了一個(gè)jquery對(duì)象，內(nèi)部包含了所有的元素js對(duì)象
// 是一個(gè)類數(shù)組對(duì)象，內(nèi)部會(huì)按照獲取順序進(jìn)行一個(gè)大排序
// 排序與自己原來的父級(jí)沒有關(guān)系，只與在jQuery對(duì)象中的新的位置有關(guān)

// 給指定位置對(duì)象添加顏色
$ps.eq(1).css("background-color","pink")
$ps.eq(4).css("background-color","skyblue")
$ps.eq(8).css("background-color","purple")
$ps.eq(7).css("background-color","lightgreen")
$ps.eq(10).css("background-color","orange")
//對(duì)所有獲取的元素進(jìn)行了排序，跟原來的結(jié)構(gòu)沒有關(guān)系

第三組div里p標(biāo)簽

? ? ?

? ? ?

? ? ?

? ? ?

? ? ?


----------

二、index（）方法

• jQuery 對(duì)象調(diào)用index() 方法時(shí)，得到的是它自己在 HTML 結(jié)構(gòu)中的兄弟中的下標(biāo)位置。與新生成的jQuery 對(duì)象內(nèi)部的大排序沒有關(guān)系。
• 它依賴于自身元素在父級(jí)中同級(jí)元素之間的位置

//index（） 兄弟中的排序
$ps.click(function(){
? //點(diǎn)擊輸出自己的index值
? console.log($(this).index());
})

上圖為依次點(diǎn)擊圖中p標(biāo)簽后，所顯示結(jié)果

??jQuery中設(shè)置排他方法，在jQuery中可以通過this特殊設(shè)置進(jìn)行鏈?zhǔn)秸{(diào)用，讓兄弟通過siblings方法，批量設(shè)置成默認(rèn)效果。

三、應(yīng)用：Tab欄特效中的排他

• 自己的級(jí)別的排他：給自己this添加（要添加的屬性）類名，讓其他的兄弟刪除該類名。
• 對(duì)應(yīng)的部分的排他：給對(duì)應(yīng)位置的元素添加 （要添加的屬性）類名，其他兄弟刪除該類名。
• 找對(duì)應(yīng)關(guān)系，使用的是自己的index（）下標(biāo)，讓另一組中下標(biāo)相同的項(xiàng)作為對(duì)應(yīng)項(xiàng)。
• 通過選中另一組的對(duì)應(yīng)項(xiàng)利用eq（）方法選擇下標(biāo)項(xiàng)。

html部分：

? 

? ? ?

? ? ? ? 上路
? ? ? ? 中路 / 輔助
? ? ? ? 打野
? ? ? ? 下路

? ? 
? ?

? ? ? 

? ? ? ? ?
夏侯惇
? ? ? ? ?
李信
? ? ? ? ?
曜
? ? ? ? ?
呂布
? ? ?
? ? ?

? ? ? ? 
上官婉兒
? ? ? ? 
弈星
? ? ? ? 
甄姬
? ? ? ? 
女媧
? ? ?
? ? ?

? ? ? ? 
趙云
? ? ? ? 
露娜
? ? ? ? 
娜可露露
? ? ? ? 
夏侯惇
? ? ?
? ? ?

? ? ? ? 
后羿
? ? ? ? 
虞姬
? ? ? ? 
狄仁杰
? ? ? ? 
魯班
? ? ?
? 
?

script部分:

????上面的方法在一個(gè)tab欄中效果實(shí)現(xiàn)沒有問題， 但是當(dāng)頁面有多個(gè)tab欄時(shí)，jQuery對(duì)象中大排序和index獲取的順序就會(huì)不統(tǒng)

出現(xiàn)問題

??解決方法：span和ul的查找全部使用鏈?zhǔn)秸{(diào)用，通過節(jié)點(diǎn)關(guān)系查找

jQuery 對(duì)象進(jìn)行的操作都是批量操作，批量操作只能執(zhí)行一些簡單的效果，如果想對(duì) JQ 對(duì)象中的每一個(gè)元素以及內(nèi)部的后
代元素進(jìn)行一些復(fù)雜操作，程序很難執(zhí)行

each（）遍歷

each（）的參數(shù)是一個(gè)函數(shù)

作用：對(duì)jQuery對(duì)象中的元素每一個(gè)都執(zhí)行函數(shù)內(nèi)部的操作

each方法基本原理就是for循環(huán)，從對(duì)象的下標(biāo)為0的項(xiàng)一直遍歷到最后一項(xiàng)，然后對(duì)每一項(xiàng)進(jìn)行操作

優(yōu)點(diǎn)：

each的函數(shù)內(nèi)部也有一個(gè)this，指向的是進(jìn)來遍歷的每一次的元素。

?

? ? 

? ? 

? ? 

? ? 

? ? 
h2
?
?

? ? ? 

? ? ? ?

? ? ? ?

? ? ? ? 

? ? ? ? 
h2
? 
? ?

? ?

each的函數(shù)可以傳一個(gè)參數(shù)i，i表示的是這一次的遍歷對(duì)象在整體的jQuery對(duì)象大排序中的下標(biāo)位置

? //通過each()操作
$ps.each(function(i){
?// i 記錄的是這一次遍歷時(shí)，當(dāng)前元素在jQuery對(duì)象大排序中的位置
? ? ?$(this).click(function(){
? ? ?console.log($(this).index())
? ? ?//這個(gè)內(nèi)部的this是事件源
? ? console.log(i);
? ? ?})
?})

同理，如果想實(shí)現(xiàn)表格隔列變色的話，依靠jQuery大排列順序來實(shí)現(xiàn)奇偶不同變色的話，后期若給表格再添加列，都會(huì)出現(xiàn)問題，無法對(duì)應(yīng)。所以使用each（）方法，將每一行作為一個(gè)操作單元，讓每一行中的列進(jìn)行隔列變色

var $trs = $("tr");
$trs.each(function(){
? ? $(this).children(":odd").css("background-color","skyblue");
})

另一種方法就是使用td判斷，只要不使用jQuery的大排序，就不會(huì)影響后期插入列

$("td").each(function(){
? ? //判斷當(dāng)前td在父級(jí)中所處的位置
? ? if($(this).index() % 2 == 0){
? ? ? ?$(this).css("background-color","skyblue");
? ? }
})