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]);
    })
})

雖然沒有統計過頁面載入時間，不過僅從肉眼上就能看出來，速度快了不少。