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

<div class="mei-tab">
<div class="tab active">html</div>
<div class="tab1">css</div>
<div class="tab2">javaScript</div>
<div class="man">
<div class="min">jquery</div>
</div>
</div>

<script>
$('.tab').eq(2); // eq 获取结果集中的第三个jQuery对象

$('.tab1').next(); //next 取得匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。prev: 相反，获取元素之前的同辈元素

$('.tab2').nextAll(); //nextAll 获得每个匹配元素集合中每个元素所有后面的同辈元素，选择性筛选的选择器，prevAll与之相反，获取元素前面的同辈元素

$('.tab3').siblings(); //siblings 获得匹配元素集合中每个元素的兄弟元素,可以提供一个可选的选择器

$('tab').parent(); //parent 取得匹配元素集合中，每个元素的"父元素"，可以提供一个可选的选择器; parents 获得集合中每个匹配元素的"祖先元素"，可以提供一个可选的选择器作为参数

$('.mei-tab').children(); //children 获得匹配元素集合中每个元素的子元素，选择器选择性筛选;

$('.mei-tab').find('active');// find 查找符合选择器的后代元素;

$('div').filter('active'); //筛选当前结果集中符合条件的对象，参数可以是一个选择器或者一个函数

$('div').filter(function(index) {
return index % 3 == 2;
})

$('.div').has('.min'); //has 筛选匹配元素集合中的那些有相匹配的选择器或DOM元素的后代元素

if ( $target.is("div") ) {
$target.css("background-color", "red");
} //is 判断当前匹配的元素集合中的元素，是否为一个选择器，DOM元素，或者jQuery对象，如果这些元素至少一个匹配给定的参数，那么返回true
</script>

使用 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')
})
})