溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
今天小編給大家分享一下基于jQuery排序及怎么實現(xiàn)Tab欄特效的相關(guān)知識點，內(nèi)容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。
eq（）排序，可以看作是一個篩選方法
jQuery 中獲得的對象，內(nèi)部包含選擇的一組原生 js 對象，在 jQuery 對象中會進行一個新的大的排序，這個排序與原來的 HTML 結(jié)構(gòu)沒有關(guān)系。
所以eq() 方法在 jQuery 對象中通過下標獲取某個對象，下標是 jQuery 對象中的大的排序的下標。
//選中所有p標簽
var $ps = $("p");
//生成了一個jquery對象，內(nèi)部包含了所有的元素js對象
// 是一個類數(shù)組對象，內(nèi)部會按照獲取順序進行一個大排序
// 排序與自己原來的父級沒有關(guān)系，只與在jQuery對象中的新的位置有關(guān)
// 給指定位置對象添加顏色
$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")
//對所有獲取的元素進行了排序，跟原來的結(jié)構(gòu)沒有關(guān)系
第三組div里p標簽
<div class="b3">
<p></p>
<p class="b2p"></p>
<p></p>
<p></p>
<p></p>
</div>
----------
<script>
// 通過類名選中標簽
$(".b2p").eq(2).css("background-color","red")
//得到第3組類名為b2p的 p 標簽，讓它變成紅色
</script>
jQuery 對象調(diào)用index() 方法時，得到的是它自己在 HTML 結(jié)構(gòu)中的兄弟中的下標位置。與新生成的jQuery 對象內(nèi)部的大排序沒有關(guān)系。
它依賴于自身元素在父級中同級元素之間的位置
//index（） 兄弟中的排序
$ps.click(function(){
//點擊輸出自己的index值
console.log($(this).index());
})
上圖為依次點擊圖中p標簽后，所顯示結(jié)果
  jQuery中設(shè)置排他方法，在jQuery中可以通過this特殊設(shè)置進行鏈式調(diào)用，讓兄弟通過siblings方法，批量設(shè)置成默認效果。
自己的級別的排他：給自己this添加（要添加的屬性）類名，讓其他的兄弟刪除該類名。
對應(yīng)的部分的排他：給對應(yīng)位置的元素添加 （要添加的屬性）類名，其他兄弟刪除該類名。
找對應(yīng)關(guān)系，使用的是自己的index（）下標，讓另一組中下標相同的項作為對應(yīng)項。
通過選中另一組的對應(yīng)項利用eq（）方法選擇下標項。
html部分：
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
.tab{
width: 360px;
height: 200px;
border-top: 2px solid #206f96;
margin: 100px;
float: left;
}
.tab .title{
width: 360px;
height: 40px;
overflow: hidden;
}
.tab .title span{
float: left;
width: 88px;
height: 38px;
border: 1px solid #52819c;
border-bottom: 1px solid #52819c;
background-color: #c0f3f7;
font: 16px/34px "SunSim";
text-align: center;
}
.tab .title span.current{
height: 40px;
background-color: rgb(255, 255, 255);
}
.tab .title span a{
color: rgb(34, 34, 34);
text-decoration: none;
}
.tab .detail{
height: 258px;
padding: 17px 0 0 9px;
}
.tab .detail ul{
display: none;
}
.tab .detail ul.current{
display: block;
}
.tab .detail ul li a{
color: #000;
text-decoration: none;
}
.tab .detail ul li.first{
font-weight: bold;
}
</style>
</head>
<body>
<div class="tab">
<div class="title">
<span class="current"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >上路</a></span>
<span><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >中路</a> / <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >輔助</a></span>
<span><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >打野</a></span>
<span><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >下路</a></span>
</div>
<div class="detail">
<ul class="current">
<li class="first"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >夏侯惇</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >李信</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >曜</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >呂布</a></li>
</ul>
<ul>
<li class="first"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >上官婉兒</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >弈星</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >甄姬</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >女媧</a></li>
</ul>
<ul>
<li class="first"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >趙云</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >露娜</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >娜可露露</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >夏侯惇</a></li>
</ul>
<ul>
<li class="first"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >后羿</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >虞姬</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >狄仁杰</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >魯班</a></li>
</ul>
</div>
</div>
</body>script部分:
<script src="../jq/jquery-1.12.4.min.js"></script>
<script>
//獲取元素
var $spans = $(".tab .title span");
//添加鼠標移上事件
$spans.mouseenter(function(){
// 存儲對應(yīng)span下標的下標值，后面需要找到對應(yīng)的ul
var ind = $(this).index();
// 自己級別的排他
//$(this).addClass("current").siblings().removeClass("current");
$(".tab .detail ul").eq(ind)
.addClass("current").siblings().removeClass("current")
</script>    上面的方法在一個tab欄中效果實現(xiàn)沒有問題， 但是當頁面有多個tab欄時，jQuery對象中大排序和index獲取的順序就會不統(tǒng)
出現(xiàn)問題
  解決方法：span和ul的查找全部使用鏈式調(diào)用，通過節(jié)點關(guān)系查找
<script src="../jq/jquery-1.12.4.min.js"></script>
<script>
// 查找所有對應(yīng)ul時，不要單獨選擇所有的ul，通過當前的 this 的節(jié)點關(guān)系查找
// 鏈式調(diào)用的方式，找到自己父級中的兄弟中的所有子級
$(this).addClass("current").siblings().removeClass("current")
.parent().siblings().children().eq(ind).addClass("current")
.siblings().removeClass("current");
// title的兄弟detail
})
</script>
jQuery 對象進行的操作都是批量操作，批量操作只能執(zhí)行一些簡單的效果，如果想對 JQ 對象中的每一個元素以及內(nèi)部的后
代元素進行一些復(fù)雜操作，程序很難執(zhí)行
each（）遍歷
each（）的參數(shù)是一個函數(shù)
作用：對jQuery對象中的元素每一個都執(zhí)行函數(shù)內(nèi)部的操作
each方法基本原理就是for循環(huán)，從對象的下標為0的項一直遍歷到最后一項，然后對每一項進行操作
優(yōu)點：
each的函數(shù)內(nèi)部也有一個this，指向的是進來遍歷的每一次的元素。
<body>
<div class="box">
<p></p>
<p></p>
<p></p>
<p></p>
<h3>h3</h3>
</div>
<div class="box">
<p></p>
<p></p>
<p></p>
<p></p>
<h3>h3</h3>
</div>
</body>
<script src="../jq/jquery-1.12.4.min.js"></script>
<script>
var $box = $(".box");
//每個div內(nèi)的第二個p添加紅色
$box.each(function(){
$(this).children().eq(1).css("background-color","pink");
})
</script>each的函數(shù)可以傳一個參數(shù)i，i表示的是這一次的遍歷對象在整體的jQuery對象大排序中的下標位置
//通過each()操作
$ps.each(function(i){
// i 記錄的是這一次遍歷時，當前元素在jQuery對象大排序中的位置
$(this).click(function(){
console.log($(this).index())
//這個內(nèi)部的this是事件源
console.log(i);
})
})
同理，如果想實現(xiàn)表格隔列變色的話，依靠jQuery大排列順序來實現(xiàn)奇偶不同變色的話，后期若給表格再添加列，都會出現(xiàn)問題，無法對應(yīng)。所以使用each（）方法，將每一行作為一個操作單元，讓每一行中的列進行隔列變色
var $trs = $("tr");
$trs.each(function(){
$(this).children(":odd").css("background-color","skyblue");
})另一種方法就是使用td判斷，只要不使用jQuery的大排序，就不會影響后期插入列
$("td").each(function(){
//判斷當前td在父級中所處的位置
if($(this).index() % 2 == 0){
$(this).css("background-color","skyblue");
}
})以上就是“基于jQuery排序及怎么實現(xiàn)Tab欄特效”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關(guān)注億速云行業(yè)資訊頻道。
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼