删繁就简，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实现是否是很是清爽，快捷有力呢。