基于jQuery排序及應(yīng)用實(shí)現(xiàn)Tab欄特效
更新時(shí)間：2022年03月20日 09:35:38 作者：小白可別不舉鐵
這篇文章主要介紹了基于jQuery排序及應(yīng)用實(shí)現(xiàn)Tab欄特效，jquery是基于JavaScript語言寫出來的一個(gè)框架，它封裝JavaScript常用的功能代碼，提供一種簡(jiǎn)便的JavaScript設(shè)計(jì)模式，但實(shí)質(zhì)上還是js，所以JQuery也屬于網(wǎng)頁編程語言。下面更多內(nèi)容需要的小伙伴可以參考一下
一、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)簽
<div class="b3">
? ? ?<p></p>
? ? ?<p class="b2p"></p>
? ? ?<p></p>
? ? ?<p></p>
? ? ?<p></p>
</div>
----------
<script>
? // 通過類名選中標(biāo)簽
? $(".b2p").eq(2).css("background-color","red")
? //得到第3組類名為b2p的 p 標(biāo)簽，讓它變成紅色
</script>
二、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部分：
<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");
? //添加鼠標(biāo)移上事件
? $spans.mouseenter(function(){
? ? // 存儲(chǔ)對(duì)應(yīng)span下標(biāo)的下標(biāo)值，后面需要找到對(duì)應(yīng)的ul
? ? var ind = $(this).index();
? ? // 自己級(jí)別的排他?
? ? //$(this).addClass("current").siblings().removeClass("current");
? ? $(".tab .detail ul").eq(ind)
? ? .addClass("current").siblings().removeClass("current")
? ? ? ? ? ?
? ? </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)系查找
<script src="../jq/jquery-1.12.4.min.js"></script>
<script>
? ?// 查找所有對(duì)應(yīng)ul時(shí)，不要單獨(dú)選擇所有的ul，通過當(dāng)前的 this 的節(jié)點(diǎn)關(guān)系查找
? ?// 鏈?zhǔn)秸{(diào)用的方式，找到自己父級(jí)中的兄弟中的所有子級(jí)
? $(this).addClass("current").siblings().removeClass("current")
? .parent().siblings().children().eq(ind).addClass("current")
? .siblings().removeClass("current");
? // title的兄弟detail
? })
</script>
jQuery 對(duì)象進(jìn)行的操作都是批量操作，批量操作只能執(zhí)行一些簡(jiǎn)單的效果，如果想對(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)來遍歷的每一次的元素。
<body>
?<div class="box">
? ? <p></p>
? ? <p></p>
? ? <p></p>
? ? <p></p>
? ? <h2>h2</h2>
?</div>
?<div class="box">
? ? ? <p></p>
? ? ? ?<p></p>
? ? ? ?<p></p>
? ? ? ? <p></p>
? ? ? ? <h2>h2</h2>
? </div>
? ?
</body>
? ?
<script src="../jq/jquery-1.12.4.min.js"></script>
<script>
var $box = $(".box");
//每個(gè)div內(nèi)的第二個(gè)p添加紅色
$box.each(function(){ ?
? ?$(this).children().eq(1).css("background-color","pink");
})
</script>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");
? ? }
})到此這篇關(guān)于基于jQuery排序及應(yīng)用實(shí)現(xiàn)Tab欄特效的文章就介紹到這了,更多相關(guān)jQuery實(shí)現(xiàn)Tab欄特效內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JQuery AJAX實(shí)現(xiàn)目錄瀏覽與編輯的代碼
這部分作為后臺(tái)的一部分實(shí)現(xiàn)，目的是實(shí)現(xiàn)某個(gè)指定目錄下所有文件夾和文件的瀏覽，同時(shí)不顯示不允許的格式，對(duì)于文本格式和代碼文件可以進(jìn)行編輯2008-10-10
這篇文章主要介紹了js/jquery判斷圖片是否存在的函數(shù)代碼,需要的朋友可以參考下2023-06-06
下面小編就為大家?guī)硪黄褂肑Q完成表格隔行換色的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要介紹了jquery中filter方法用法,實(shí)例分析了filter方法的功能并對(duì)比了與find方法的區(qū)別,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了jQuery遍歷Table的具體實(shí)現(xiàn),需要的朋友可以參考下2014-04-04
通過jquery實(shí)現(xiàn)tab標(biāo)簽瀏覽效果
這篇文章主要介紹了通過jquery實(shí)現(xiàn)tab標(biāo)簽瀏覽效果2007-02-02
這篇文章主要介紹了JQuery顯示隱藏DIV的方法及代碼實(shí)例,本文講解了載入時(shí)隱藏、動(dòng)態(tài)隱藏和顯示兩部分內(nèi)容,需要的朋友可以參考下2015-04-04
這篇文章主要介紹了jQuery中DOM操作原則,結(jié)合實(shí)例形式分析了jQuery針對(duì)dom元素操作的四種常見原則,需要的朋友可以參考下2019-08-08
jquery輸入數(shù)字隨機(jī)抽獎(jiǎng)特效的簡(jiǎn)單實(shí)現(xiàn)代碼
下面小編就為大家?guī)硪黄猨query輸入數(shù)字隨機(jī)抽獎(jiǎng)特效的簡(jiǎn)單實(shí)現(xiàn)代碼。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06
jquery中郵箱地址 URL網(wǎng)站地址正則驗(yàn)證實(shí)例代碼
QQ網(wǎng)站有一個(gè)網(wǎng)站舉報(bào)的功能，看了一些js代碼覺得寫得很不錯(cuò)，我就拿下來了，下面是一個(gè)email驗(yàn)證與url網(wǎng)址驗(yàn)證js代碼，分享給大家2013-09-09