js中的两种“排他算法”

js原生代码：

//获取button事件源
var btns = document.querySelectorAll('button');

//为每个btn注册绑定事件
for (var i = 0; i < btns.length; i++) {
   
    btns[i].addEventListener('click', function(){
    
    //干掉全部的背景颜色
    for(var j = 0; j < btns.length; j++){
        
            btns[j].style.backgroundColor = '';
         }
            //设置当前被点击元素的背景颜色
            this.style.backgroundColor = 'hotpink';
      })
}

jQ代码：

$(function(){
           
    $('button').click(function() {

        //隐式迭代  当前元素改变颜色 
        $(this).css('background', 'hotpink');

        // 干掉其他兄弟元素背景颜色
        $(this).siblings('button').css('background', '');
    })
})

学了jQ语法糖后，发现能比js原生代码少些一万个字母🤞