刪繁就簡，jquery的快捷編程

用簡單案例說話

在平常生活中，製做一個切換item的active屬性的items塊是一個很是常見的小案例，普遍應用於諸多行業，今天咱們從這樣一個簡單的案例來學習jquery是怎樣替代js去達到快捷編程的。

案例視圖

vip套餐案例

在這個案例中，共有三個表明不一樣期限的vip套餐item，點擊item後使item處於激活狀態，激活效果爲改變邊框樣式，同時還須要保證選擇其餘套餐，以前處於激活狀態的item 會失效。

激活狀態

激活切換

原生js解決方案

咱們先考慮如何用原生Js完成這個案例，將實現過程的思路調理清晰，再使用jquery改寫腳本。思路以下：
獲取item數組，對item數組進行循環操做，在每次循環中對對應下標i的item元素進行事件監聽，發生鼠標點擊事件後，再次對整個item數組進行循環操做，將全部item移除active類名，再將this指針指向的被鼠標點擊的元素，增長一個active類名。

代碼實現

var oType = document.querySelectorAll('.item-price');
             for (let i = 0; i < oType.length; i++) {
                oType[i].addEventListener('click', function(){
                for (let j of oType) {
                  j.classList.remove('active');
                }
                  this.classList.add('active');
              })
            }
複製代碼

jquery解決方案

在原生js方案中，須要使用嵌套循環去實現這樣一個案例，看上去十分繁瑣。使用jquery則很是快捷簡便，思路以下:
使用類名選擇器獲取item，添加click事件，對使用類名選擇器的元素添加過濾器，過濾獲得已有active類名的item，移除其active類名，使用jquery對象$(this)，添加active類名開關。

代碼實現

$(".item-price").click(function(){
            $(".item-price").filter(".on").removeClass("on");
            $(this).toggleClass("on");
    })
複製代碼

比較之下，使用jquery實現是否是很是清爽，快捷有力呢。