18：jQuery选择器

jQuery 1.x 版本和 2.x 版本有什么区别?

jQuery1.x对IE6，7，8还支持，而jQuery2.x不再对IE8或更早的浏览器支持。

新版本还加入了更多的 api,

介绍 jQuery 常见的选择器，以及以下 api 的用法，给出范例

.eq
.next / .prev
.nextAll / .prevAll
.siblings
.parent / .parents
.children / .find
.filter
.has
.is

html
css
javaScript

jquery

使用 jQuery 实现 Tab 切换效果

提示
参考 http://js.jirengu.com/yakah，

$('.mei-tab .tab').on('click',function(){
  $(this).addClass('active')
         .siblings()
         .removeClass('active')  

   $(this).parents('.mei-tab')
       .find('.panel')
       .eq($(this).index())
       .addClass('active')
       .siblings()
       .removeClass('active')
})

使用 原生 js 实现 Tab 切换效果

提示
参考: http://js.jirengu.com/rayez

document.querySelectorAll('.mei-tab .tab').forEach(function(node){
node.addEventListener('click',function(){
var index
this.parentElement.querySelectorAll('.tab').forEach(function(tab, idx){
tab.classList.remove('active')
if(node === tab){
index = idx
}
})
this.classList.add('active')
this.parentElement.nextElementSibling.querySelectorAll('.panel').forEach(function(panel){
panel.classList.remove('active')
})
this.parentElementSibling.querySelectorAll('.panel')
[index].classList.add('active')
})
})