jQuery排序及應用(Tab欄特效的實作)-有解無憂

jQuery排序

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

jQuery 中獲得的物件，內部包含選擇的一組原生 js 物件，在 jQuery 物件中會進行一個新的大的排序，這個排序與原來的 HTML 結構沒有關系，

所以eq() 方法在 jQuery 物件中通過下標獲取某個物件，下標是 jQuery 物件中的大的排序的下標，

//選中所有p標簽
var $ps = $("p");
//生成了一個jquery物件，內部包含了所有的元素js物件
// 是一個類陣列物件，內部會按斬訓取順序進行一個大排序
// 排序與自己原來的父級沒有關系，只與在jQuery物件中的新的位置有關

// 給指定位置物件添加顏色
$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")
//對所有獲取的元素進行了排序，跟原來的結構沒有關系

--------第三組div里p標簽----------
<div >
     <p></p>
     <p ></p>
     <p></p>
     <p></p>
     <p></p>
</div>
----------
<script>
  // 通過類名選中標簽
  $(".b2p").eq(2).css("background-color","red")
  //得到第3組類名為b2p的 p 標簽，讓它變成紅色
</script>

index（）方法

jQuery 物件呼叫 index() 方法時，得到的是它自己在 HTML 結構中的兄弟中的下標位置，與新生成的jQuery 物件內部的大排序沒有關系，
它依賴于自身元素在父級中同級元素之間的位置

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

上圖為依次點擊圖中p標簽后，所顯示結果

??jQuery中設定排他方法，在jQuery中可以通過this特殊設定進行鏈式呼叫，讓兄弟通過siblings方法，批量設定成默認效果，

應用：Tab欄特效中的排他

自己的級別的排他：給自己this添加（要添加的屬性）類名，讓其他的兄弟洗掉該類名，
對應的部分的排他：給對應位置的元素添加（要添加的屬性）類名，其他兄弟洗掉該類名，
找對應關系，使用的是自己的index（）下標，讓另一組中下標相同的項作為對應項，
通過選中另一組的對應項利用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 >
     <div >
        <span ><a href="https://www.cnblogs.com/dreamtown/p/#">上路</a></span>
        <span><a href="https://www.cnblogs.com/dreamtown/p/#">中路</a> / <a href="https://www.cnblogs.com/dreamtown/p/#">輔助</a></span>
        <span><a href="https://www.cnblogs.com/dreamtown/p/#">打野</a></span>
        <span><a href="https://www.cnblogs.com/dreamtown/p/#">下路</a></span>

    </div>
   <div >
      <ul >
         <li ><a href="https://www.cnblogs.com/dreamtown/p/#">夏侯惇</a></li>
         <li><a href="https://www.cnblogs.com/dreamtown/p/#">李信</a></li>
         <li><a href="https://www.cnblogs.com/dreamtown/p/#">曜</a></li>
         <li><a href="https://www.cnblogs.com/dreamtown/p/#">呂布</a></li>
     </ul>
     <ul>
        <li ><a href="https://www.cnblogs.com/dreamtown/p/#">上官婉兒</a></li>
        <li><a href="https://www.cnblogs.com/dreamtown/p/#">弈星</a></li>
        <li><a href="https://www.cnblogs.com/dreamtown/p/#">甄姬</a></li>
        <li><a href="https://www.cnblogs.com/dreamtown/p/#">女媧</a></li>
     </ul>
     <ul>
        <li ><a href="https://www.cnblogs.com/dreamtown/p/#">趙云</a></li>
        <li><a href="https://www.cnblogs.com/dreamtown/p/#">露娜</a></li>
        <li><a href="https://www.cnblogs.com/dreamtown/p/#">娜可露露</a></li>
        <li><a href="https://www.cnblogs.com/dreamtown/p/#">夏侯惇</a></li>
     </ul>
     <ul>
        <li ><a href="https://www.cnblogs.com/dreamtown/p/#">后羿</a></li>
        <li><a href="https://www.cnblogs.com/dreamtown/p/#">虞姬</a></li>
        <li><a href="https://www.cnblogs.com/dreamtown/p/#">狄仁杰</a></li>
        <li><a href="https://www.cnblogs.com/dreamtown/p/#">魯班</a></li>
     </ul>
  </div>
 </div>
</body>

script部分:

<script src="https://www.cnblogs.com/dreamtown/jq/jquery-1.12.4.min.js"></script>
<script>
  //獲取元素
  var $spans = $(".tab .title span");
  //添加滑鼠移上事件
  $spans.mouseenter(function(){
    // 存盤對應span下標的下標值，后面需要找到對應的ul
    var ind = $(this).index();
    // 自己級別的排他 
    //$(this).addClass("current").siblings().removeClass("current");
    $(".tab .detail ul").eq(ind)
    .addClass("current").siblings().removeClass("current")
           
    </script>

? ? 上面的方法在一個tab欄中效果實作沒有問題，但是當頁面有多個tab欄時，jQuery物件中大排序和index獲取的順序就會不統一，出現問題，

? 解決方法：span和ul的查找全部使用鏈式呼叫，通過節點關系查找

<script src="https://www.cnblogs.com/dreamtown/jq/jquery-1.12.4.min.js"></script>
<script>
   // 查找所有對應ul時，不要單獨選擇所有的ul，通過當前的 this 的節點關系查找
   // 鏈式呼叫的方式，找到自己父級中的兄弟中的所有子級
  $(this).addClass("current").siblings().removeClass("current")
  .parent().siblings().children().eq(ind).addClass("current")
  .siblings().removeClass("current");
  // title的兄弟detail
  })
</script>

jQuery 物件進行的操作都是批量操作，批量操作只能執行一些簡單的效果，如果想對 JQ 物件中的每一個元素以及內部的后
代元素進行一些復雜操作，程式很難執行

each（）遍歷

each（）的引數是一個函式

作用：對jQuery物件中的元素每一個都執行函式內部的操作

each方法基本原理就是for回圈，從物件的下標為0的項一直遍歷到最后一項，然后對每一項進行操作
- 優點
  
  each的函式內部也有一個this，指向的是進來遍歷的每一次的元素，

<body>
 <div >
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <h2>h2</h2>
 </div>
 <div >
      <p></p>
       <p></p>
       <p></p>
        <p></p>
        <h2>h2</h2>
  </div>
   
</body>
   
<script src="https://www.cnblogs.com/dreamtown/jq/jquery-1.12.4.min.js"></script>
<script>
var $box = $(".box");
//每個div內的第二個p添加紅色
$box.each(function(){  
   $(this).children().eq(1).css("background-color","pink");
})
</script>

each的函式可以傳一個引數i，i表示的是這一次的遍歷物件在整體的jQuery物件大排序中的下標位置

  //通過each()操作
$ps.each(function(i){
 // i 記錄的是這一次遍歷時，當前元素在jQuery物件大排序中的位置
     $(this).click(function(){
     console.log($(this).index())
     //這個內部的this是事件源
    console.log(i);
     })
 })

同理，如果想實作表格隔列變色的話，依靠jQuery大排列順序來實作奇偶不同變色的話，后期若給表格再添加列，都會出現問題，無法對應，所以使用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");
    }
})

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/270862.html

標籤：jQuery

上一篇：jQuery鏈式呼叫

下一篇：WEB前端第六十五課——H5新特性：Worker執行緒、Files、FileReader、getUserMedia