基于jQuery排序及應(yīng)用實現(xiàn)Tab欄特效
一、jQuery排序
eq()排序,可以看作是一個篩選方法
- jQuery 中獲得的對象,內(nèi)部包含選擇的一組原生 js 對象,在 jQuery 對象中會進(jìn)行一個新的大的排序,這個排序與原來的 HTML 結(jié)構(gòu)沒有關(guān)系。
所以eq()
方法在 jQuery 對象中通過下標(biāo)獲取某個對象,下標(biāo)是 jQuery 對象中的大的排序的下標(biāo)。
//選中所有p標(biāo)簽 var $ps = $("p"); //生成了一個jquery對象,內(nèi)部包含了所有的元素js對象 // 是一個類數(shù)組對象,內(nèi)部會按照獲取順序進(jìn)行一個大排序 // 排序與自己原來的父級沒有關(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") //對所有獲取的元素進(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 對象調(diào)用
index()
方法時,得到的是它自己在 HTML 結(jié)構(gòu)中的兄弟中的下標(biāo)位置。與新生成的jQuery 對象內(nèi)部的大排序沒有關(guān)系。 - 它依賴于自身元素在父級中同級元素之間的位置
//index() 兄弟中的排序 $ps.click(function(){ ? //點擊輸出自己的index值 ? console.log($(this).index()); })
上圖為依次點擊圖中p標(biāo)簽后,所顯示結(jié)果
jQuery中設(shè)置排他方法,在jQuery中可以通過this特殊設(shè)置進(jìn)行鏈?zhǔn)秸{(diào)用,讓兄弟通過siblings方法,批量設(shè)置成默認(rèn)效果。
三、應(yīng)用:Tab欄特效中的排他
- 自己的級別的排他:給自己this添加(要添加的屬性)類名,讓其他的兄弟刪除該類名。
- 對應(yīng)的部分的排他:給對應(yīng)位置的元素添加 (要添加的屬性)類名,其他兄弟刪除該類名。
- 找對應(yīng)關(guān)系,使用的是自己的index()下標(biāo),讓另一組中下標(biāo)相同的項作為對應(yīng)項。
- 通過選中另一組的對應(yīng)項利用eq()方法選擇下標(biāo)項。
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(){ ? ? // 存儲對應(yīng)span下標(biāo)的下標(biāo)值,后面需要找到對應(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)沒有問題, 但是當(dāng)頁面有多個tab欄時,jQuery對象中大排序和index獲取的順序就會不統(tǒng)
出現(xiàn)問題
解決方法:span和ul的查找全部使用鏈?zhǔn)秸{(diào)用,通過節(jié)點關(guān)系查找
<script src="../jq/jquery-1.12.4.min.js"></script> <script> ? ?// 查找所有對應(yīng)ul時,不要單獨選擇所有的ul,通過當(dāng)前的 this 的節(jié)點關(guān)系查找 ? ?// 鏈?zhǔn)秸{(diào)用的方式,找到自己父級中的兄弟中的所有子級 ? $(this).addClass("current").siblings().removeClass("current") ? .parent().siblings().children().eq(ind).addClass("current") ? .siblings().removeClass("current"); ? // title的兄弟detail ? }) </script>
jQuery 對象進(jìn)行的操作都是批量操作,批量操作只能執(zhí)行一些簡單的效果,如果想對 JQ 對象中的每一個元素以及內(nèi)部的后
代元素進(jìn)行一些復(fù)雜操作,程序很難執(zhí)行
each()遍歷
each()的參數(shù)是一個函數(shù)
作用:對jQuery對象中的元素每一個都執(zhí)行函數(shù)內(nèi)部的操作
each
方法基本原理就是for循環(huán),從對象的下標(biāo)為0的項一直遍歷到最后一項,然后對每一項進(jìn)行操作
優(yōu)點:
each的函數(shù)內(nèi)部也有一個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"); //每個div內(nèi)的第二個p添加紅色 $box.each(function(){ ? ? ?$(this).children().eq(1).css("background-color","pink"); }) </script>
each
的函數(shù)可以傳一個參數(shù)i,i表示的是這一次的遍歷對象在整體的jQuery對象大排序中的下標(biāo)位置
? //通過each()操作 $ps.each(function(i){ ?// i 記錄的是這一次遍歷時,當(dāng)前元素在jQuery對象大排序中的位置 ? ? ?$(this).click(function(){ ? ? ?console.log($(this).index()) ? ? ?//這個內(nèi)部的this是事件源 ? ? console.log(i); ? ? ?}) ?})
同理,如果想實現(xiàn)表格隔列變色的話,依靠jQuery大排列順序來實現(xiàn)奇偶不同變色的話,后期若給表格再添加列,都會出現(xiàn)問題,無法對應(yīng)。所以使用each()方法,將每一行作為一個操作單元,讓每一行中的列進(jìn)行隔列變色
var $trs = $("tr"); $trs.each(function(){ ? ? $(this).children(":odd").css("background-color","skyblue"); })
另一種方法就是使用td判斷,只要不使用jQuery的大排序,就不會影響后期插入列
$("td").each(function(){ ? ? //判斷當(dāng)前td在父級中所處的位置 ? ? if($(this).index() % 2 == 0){ ? ? ? ?$(this).css("background-color","skyblue"); ? ? } })
到此這篇關(guān)于基于jQuery排序及應(yīng)用實現(xiàn)Tab欄特效的文章就介紹到這了,更多相關(guān)jQuery實現(xiàn)Tab欄特效內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
修改jquery.lazyload.js實現(xiàn)頁面延遲載入
jquery.lazyload.js并未真正的實現(xiàn)頁面延遲載入,它的實現(xiàn)原理是頁面載入完畢后將html中所有img標(biāo)簽的src屬性都替換為空,把src的初始值存儲到一個自定義的屬性中,當(dāng)頁面滾動到img標(biāo)簽位置時再將圖片載入進(jìn)來。2010-12-12jquery中的mouseleave和mouseout的區(qū)別 模仿下拉框效果
不論鼠標(biāo)指針離開被選元素還是任何子元素,都會觸發(fā) mouseout 事件,只有在鼠標(biāo)指針離開被選元素時,才會觸發(fā) mouseleave 事件2012-02-02jQuery中[attribute^=value]選擇器用法實例
這篇文章主要介紹了jQuery中[attribute^=value]選擇器用法,實例分析了[attribute^=value]選擇器的功能、定義及匹配以某些值開始的元素的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2014-12-12