Jquery常用的2种操作

1.Tab选项卡 

在网站中比较常见的就是Tab,选项卡，就是点击一个盒子，显示出对应的另一个盒子。

首先先大概写一下结构，css就不再赘述了

<!-- 标题盒子--!>
<ul class="title">
      <li>超值推荐</li>
      <li>数据线/电源适配器</li>
      <li>保护套/后盖/贴膜</li>
   </ul>
<!-- 内容盒子--!>
 <ul class="product">
      <li>超值推荐1</li>
      <li>数据线/电源适配器2</li>
      <li>保护套/后盖/贴膜3</li>
 </ul>

直接上JQuery代码，我目前常用的1.8.3版本

$(".title").on("click","li",function(){//建议使用事件委托，将li的点击事件委托到ul上
    let i=$(".title li").index(this);//获取当前点击li的下标
    $(this).addClass("line").siblings().removeClass("line");//这里可以为点击元素添加下划线等    
//提前在css中写好
    $(".productt li").eq(i).css("display","block").siblings().css("display","none");

})

仅仅三行就可以实现，是不是非常简单。

第二个效果，在前端进行排序。

再做电商网站时，我们常常需要对商品的价格进行排序，常规的方法是在后端进行排序，然后返回前端渲染，但是这样太麻烦，而且会有缓冲时间，影响体验，今天我们直接从对DOM元素进行排序。

首先是数据加载时的处理，我们需要对盒子新增一个data属性，存放价格

 $.post("http://localhost/meizu_admin/getGoodList.php", "123",
        function (data, textStatus, jqXHR) {
           if(JSON.parse(data)){//检查一下返回数据是不是JSON
                let datas=JSON.parse(data);
                
                $.each(datas,function(index,val){
                 let price=datas[index].price;
                 let HtmlStr='';
                 HtmlStr=`<div class="good" data-price="${price}">...</div>`;
                 $(docunment).append(HtmlStr);
                });

           }else{
                showAlert("错误","返回数据不是一个JSON"); 
           }
        },
        "text"
    );

第二步，准备排序算法

//冒泡排序
function BubbleSort(arr,type){//arr是传入的一个JQuery对象数组，type是排序类型，由大到小和有小到大
    for(var i=0;i<arr.length-1;i++){
        for(var j=0;j<arr.length-1-i;j++){
            if(type=="down"){
                if(parseFloat(arr[j].attr("data-price"))>parseFloat(arr[j+1].attr("data-price"))){
                    var temp = arr[j];
                    arr[j] = arr[j+1];
                    arr[j+1] = temp;
                }
            }else{
                if(parseFloat(arr[j].attr("data-price"))<parseFloat(arr[j+1].attr("data-price"))){
                    var temp = arr[j];
                    arr[j] = arr[j+1];
                    arr[j+1] = temp;
                }
            }      
        }
    }
    return arr
}

第三步，组合

//假设有2个排序按钮,分别是由小到大和由大到小
$("input").on("click",function(){
    let type=this.value=="由小到大"?"up":"down";
    //1、获取当前页面全部商品
    let $datas=[];
    $.each($(".good"),function(index,val){
    //当这个盒子有价格那个属性时才排序
        if($(".good").eq(index).attr("data-price)!=""||
            $(".good").eq(index).attr("data-price)!=undefined){
           $datas.push($(".good").eq(index)) ;
        }

    });
    //调用排序方法
       let returns= BubbleSort($datas,type);
    //删除原有的盒子，其实最好是直接清空父元素的innerHTML,这里没有父元素故未写
     $.each($(".good"),function(index,val){
        $(".good").eq(index).remove();
     })
    // $(".good").remove(); 未测试
    //插入排序后的DOM元素
    $.each(returns, function (indexInArray, valueOfElement) { 
        $(document).append(returns[indexInArray]);
    })
})

虽然没有统计过页面加载时间，不过仅从肉眼上就能看出来，速度快了不少。