jQuery

jQuery 是 Javascript 的一个库，官方网站是 jQuery 。

jQuery 的好处：

兼容性好
API 友好
需要兼容多款浏览器

什么时候用 jQuery

DOM 操作较多
简单的AJXA
需要兼容多款浏览器

什么时候不用 jQuery

页面交互加大
页面对流量有苛刻的要求
团队已经有 jQuery 代替品

jQuery 版本问题

1.x 和 2.x问题，1.x兼容性更好，2.x性能更好，兼容性相对较差。

jQuery 的两种API

$.noConflict()
$.each()
$('ul').addClass();
$('p').text('h1')

jQuery 选择器

引入 jQuery

<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>

常见的 jQuery 选择器，与 CSS3 选择器类似

基本选择器
$('*') 匹配所有元素
$('#id') 匹配 id 选择器
$('.class') 匹配类选择器
$('element') 匹配元素选择器
.eq
指定 index 的 jQuery 对象

$('div').eq(2)  // index 为 2 的 div 元素

.next / .prev
前一个或者下一个元素

$('.panel').next()  // 第一个类名为 panel 的下一个元素
$('.panel').prev()  // 第一个类名为 panel 的上一个元素

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

$('.panel').nextAll()  // 类名为 panel 的所有后面的同辈元素
$('.panel').prevAll()  // 类名为 panel 的所有前面的同辈元素

.siblings
获得匹配元素中的所有兄弟元素，可以二次筛选

$('.panel').siblings('.active')  // 类名为 panel 的兄弟元素中类名为 active 的元素

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

$('li.item').parent()  // li 元素中类名为 item 的元素的父元素
$('li.item').parents()  // li 元素中类名为 item 的元素的所有祖先元素

.children / .find
获得匹配元素集合中每个元素的子元素，选择器选择性筛选
查找符合选择器的后代元素

$('ul.level-2').children()  // 类名为 level-2 的 ul 元素的子元素
$('ul').find('li.current');  // ul 元素后代中类名为 current 的 li 元素

.filter
筛选当前结果集中符合条件的对象，参数可以是一个选择器或者一个函数

$('div.tab').fliter('.active')  //  类名为 tab 的 div 元素中具有 active 类的元素

.has
筛选匹配元素集合中的那些有相匹配的选择器或DOM元素的后代元素

$('.content').has('.active')  // 类名为 content 的元素中具有 active 类的元素

.is
判断当前匹配的元素集合中的元素，是否为一个选择器，DOM元素，或者jQuery对象，如果这些元素至少一个匹配给定的参数，那么返回true

if ( $target.is("li") ) {
  $target.css("background-color", "red");
}  // 如果选择的 target 对象是 li 元素，则修改 CSS。

用jQuery实现一个 tab 切换

首先画四个 tab ，分别是 1，2，3，4.每个对应一个 panel，one,two,three, four,点击不同的tab时，tab会有被点击的反馈，相应的英文单词也会改变。

html , CSS 如下

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Tab change</title>
  <style>
    .clear:after {
      content:'';
      clear:both;
      display:block;
    }
    .tab {
      float:left;
      background: #ccc;
      padding: 5px 30px;
      border-left:1px solid #aaa;  
      border-top:1px solid #aaa;
    }
    .tab:last-child {
      border-right:1px solid #aaa;
    }
    .tab:hover {
      cursor: pointer;
    }
    .header .active {
      background: #fff;
    }
    .content {
      margin-bottom: 50px;
    }
    .panel {
      display: none;
      width:70%;
      border:1px #ccc solid;
      background: #fff;
      padding: 50px 20px;
    }
    .panel.active {
      display: block;
    }
  </style>
</head>
<body>
  <div class="mod-tab">
    <div class="header clear">
      <div class="tab active">1</div>
      <div class="tab">2</div>
      <div class="tab">3</div>
      <div class="tab">4</div>
    </div>
    
    <div class="content">
      <div class="panel active">one</div>
      <div class="panel">two</div>
      <div class="panel">three</div>
      <div class="panel">four</div>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
</body>
</html>

jQuery 如下

$('.mod-tab .tab').on('click', function() {
  // tab change
  $(this).siblings().removeClass('active');
  $(this).addClass('active');
  
  // panel change 
  $(this).parents('.mod-tab').find('.panel')
         .eq($(this).index()).addClass('active')
          .siblings().removeClass('active');
});

原生 JS 如下

document.querySelector('.header').addEventListener('click', function(e){
  var tabItem = document.querySelector('.active');
  var contentItem = document.querySelector('.content');
  var currentIndex = 0;

  // tab change
  if(tabItem.classList.contains('tab')){
    tabItem.classList.remove('active');
    e.target.classList.add('active');
  }

  // panel change
  if(e.target.classList.contains('tab')){
    for(var i=0;i<this.children.length;i++){
      if(this.children[i] === e.target)
        currentIndex = i;
    }
    document.querySelectorAll('.active')[1].classList.remove('active');
    contentItem.children[currentIndex].classList.add('active');
 }