基于jQuery排序及应用实现Tab栏特效_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")
//对所有获取的元素进行了排序，跟原来的结构没有关系

     

     

     

     

     


----------

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

  

     

        上路
        中路 / 辅助
        打野
        下路

    
   

      

         
夏侯惇
         
李信
         
曜
         
吕布
     
     

        
上官婉儿
        
弈星
        
甄姬
        
女娲
     
     

        
赵云
        
露娜
        
娜可露露
        
夏侯惇
     
     

        
后羿
        
虞姬
        
狄仁杰
        
鲁班
     
  
 

 

    

    

    

    

    
h2
 
 

      

       

       

        

        
h2
  
   

   

  //通过each()操作
$ps.each(function(i){
 // i 记录的是这一次遍历时，当前元素在jQuery对象大排序中的位置
     $(this).click(function(){
     console.log($(this).index())
     //这个内部的this是事件源
    console.log(i);
     })
 })

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

$("td").each(function(){
    //判断当前td在父级中所处的位置
    if($(this).index() % 2 == 0){
       $(this).css("background-color","skyblue");
    }
})