1.1. jQuery 介紹
1.1.1 JavaScript 庫
JavaScript庫：即 library，是一個封裝好的特定的集合（方法和函式）。從封裝一大堆函式的角度理解庫，就是在這個庫中，封裝了很多預先定義好的函式在裡面，比如動畫animate、hide、show，比如獲取元素等。
簡單理解： 就是一個JS 檔案，裡面對我們原生js程式碼進行了封裝，存放到裡面。這樣我們可以快速高效的使用這些封裝好的功能了。
比如 jQuery，就是為了快速方便的操作DOM，裡面基本都是函式（方法）。
常見的JavaScript 庫：jQuery、Prototype、YUI、Dojo、Ext JS、移動端的zepto等，這些庫都是對原生 JavaScript 的封裝，內部都是用 JavaScript 實現的，我們主要學習的是 jQuery。
1.1.2 jQuery的概念
jQuery總體概況如下 :
jQuery 是一個快速、簡潔的 JavaScript 庫，其設計的宗旨是“write Less，Do More”，即倡導寫更少的程式碼，做更多的事情。
j 就是 JavaScript； Query 查詢； 意思就是查詢js，把js中的DOM操作做了封裝，我們可以快速的查詢使用裡面的功能。
jQuery 封裝了 JavaScript 常用的功能程式碼，最佳化了 DOM 操作、事件處理、動畫設計和 Ajax 互動。
學習jQuery本質： 就是學習呼叫這些函式（方法）。
jQuery 出現的目的是加快前端人員的開發速度，我們可以非常方便的呼叫和使用它，從而提高開發效率。
1.1.3 jQuery的優點
輕量級。核心檔案才幾十kb，不會影響頁面載入速度。
跨瀏覽器相容，基本相容了現在主流的瀏覽器。
鏈式程式設計、隱式迭代。
對事件、樣式、動畫支援，大大簡化了DOM操作。
支援外掛擴充套件開發。有著豐富的第三方的外掛，例如：樹形選單、日期控制元件、輪播圖等。
免費、開源。
1.2. jQuery 的基本使用
1.2.1 jQuery 的下載
jQuery的官網地址： jQuery，官網即可下載最新版本。
各個版本的下載：jQuery CDN
版本介紹：
1x ：相容 IE 678 等低版本瀏覽器， 官網不再更新
2x ：不相容 IE 678 等低版本瀏覽器， 官網不再更新
3x ：不相容 IE 678 等低版本瀏覽器， 是官方主要更新維護的版本
1.2.2. 體驗jQuery
步驟：
引入jQuery檔案。
在文件最末尾插入 script 標籤，書寫體驗程式碼。
$('div').hide() 可以隱藏盒子。
1.2.3. jQuery的入口函式
jQuery中常見的兩種入口函式：
// 第一種: 簡單易用。
$(function () {
... // 此處是頁面 DOM 載入完成的入口
}) ;
// 第二種: 繁瑣，但是也可以實現
$(document).ready(function(){
... // 此處是頁面DOM載入完成的入口
});
總結：
等著 DOM 結構渲染完畢即可執行內部程式碼，不必等到所有外部資源載入完成，jQuery 幫我們完成了封裝。
相當於原生 js 中的 DOMContentLoaded。
不同於原生 js 中的 load 事件是等頁面文件、外部的 js 檔案、css檔案、圖片載入完畢才執行內部程式碼。
更推薦使用第一種方式。
1.2.4. jQuery中的頂級物件$
$是 jQuery 的別稱，在程式碼中可以使用 jQuery 代替，但一般為了方便，通常都直接使用 $ 。
$是jQuery的頂級物件，相當於原生JavaScript中的 window。把元素利用$包裝成jQuery物件，就可以呼叫jQuery 的方法。
1.2.5. jQuery 物件和 DOM 物件
使用 jQuery 方法和原生JS獲取的元素是不一樣的，總結如下 :
用原生 JS 獲取來的物件就是 DOM 物件
jQuery 方法獲取的元素就是 jQuery 物件。
jQuery 物件本質是： 利用$對DOM 物件包裝後產生的物件（偽陣列形式儲存）。
注意：
只有 jQuery 物件才能使用 jQuery 方法，DOM 物件則使用原生的 JavaScirpt 方法。
1.2.6. jQuery 物件和 DOM 物件轉換
DOM 物件與 jQuery 物件之間是可以相互轉換的。因為原生js 比 jQuery 更大，原生的一些屬性和方法 jQuery沒有給我們封裝. 要想使用這些屬性和方法需要把jQuery物件轉換為DOM物件才能使用。
// 1.DOM物件轉換成jQuery物件，方法只有一種
var box = document.getElementById('box'); // 獲取DOM物件
var jQueryObject = $(box); // 把DOM物件轉換為 jQuery 物件
// 2.jQuery 物件轉換為 DOM 物件有兩種方法：
// 2.1 jQuery物件[索引值]
var domObject1 = $('div')[0]
// 2.2 jQuery物件.get(索引值)
var domObject2 = $('div').get(0)
總結：實際開發比較常用的是把DOM物件轉換為jQuery物件，這樣能夠呼叫功能更加強大的jQuery中的方法。
1.3. jQuery 選擇器
原生 JS 獲取元素方式很多，很雜，而且相容性情況不一致，因此 jQuery 給我們做了封裝，使獲取元素統一標準。
1.3.1. 基礎選擇器
$("選擇器") // 裡面選擇器直接寫 CSS 選擇器即可，但是要加引號
1.3.2. 層級選擇器
層級選擇器最常用的兩個分別為：後代選擇器和子代選擇器。
基礎選擇器和層級選擇器案例程式碼
<body>
<div>我是div</div>
<div class="nav">我是nav div</div>
<p>我是p</p>
<ul>
<li>我是ul 的</li>
<li>我是ul 的</li>
<li>我是ul 的</li>
</ul>
<script>
$(function() {
console.log($(".nav"));
console.log($("ul li"));
})
</script>
</body>
1.3.3. 篩選選擇器
篩選選擇器，顧名思義就是在所有的選項中選擇滿足條件的進行篩選選擇。常見如下 :
案例程式碼
<body>
<ul>
<li>多個裡面篩選幾個</li>
<li>多個裡面篩選幾個</li>
<li>多個裡面篩選幾個</li>
<li>多個裡面篩選幾個</li>
<li>多個裡面篩選幾個</li>
<li>多個裡面篩選幾個</li>
</ul>
<ol>
<li>多個裡面篩選幾個</li>
<li>多個裡面篩選幾個</li>
<li>多個裡面篩選幾個</li>
<li>多個裡面篩選幾個</li>
<li>多個裡面篩選幾個</li>
<li>多個裡面篩選幾個</li>
</ol>
<script>
$(function() {
$("ul li:first").css("color", "red");
$("ul li:eq(2)").css("color", "blue");
$("ol li:odd").css("color", "skyblue");
$("ol li:even").css("color", "pink");
})
</script>
</body>
另: jQuery中還有一些篩選方法，類似DOM中的透過一個節點找另外一個節點，父、子、兄以外有所加強。
偏重於記憶，演示程式碼略。
1.3.4 知識鋪墊
jQuery 設定樣式
$('div').css('屬性', '值')
jQuery 裡面的排他思想
// 想要多選一的效果，排他思想：當前元素設定樣式，其餘的兄弟元素清除樣式。
$(this).css(“color”,”red”);
$(this).siblings(). css(“color”,””);
隱式迭代
// 遍歷內部 DOM 元素（偽陣列形式儲存）的過程就叫做隱式迭代。
// 簡單理解：給匹配到的所有元素進行迴圈遍歷，執行相應的方法，而不用我們再進行迴圈，簡化我們的操作，方便我們呼叫。
$('div').hide(); // 頁面中所有的div全部隱藏，不用迴圈操作
鏈式程式設計
// 鏈式程式設計是為了節省程式碼量，看起來更優雅。
$(this).css('color', 'red').sibling().css('color', '');
1.3.5 案例：淘寶服飾精品案例
滑鼠放在左側不同文字右側顯示不同圖片，就像tab選項卡
思路分析:
1.核心原理：滑鼠經過左側盒子某個小li，就讓內容區盒子相對應圖片顯示，其餘的圖片隱藏。
2.需要得到當前小li 的索引號，就可以顯示對應索引號的圖片
3.jQuery 得到當前元素索引號 $(this).index()
4.中間對應的圖片，可以透過 eq(index) 方法去選擇
5.顯示元素 show() 隱藏元素 hide()
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-size: 12px;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
.wrapper {
width: 250px;
height: 248px;
margin: 100px auto 0;
border: 1px solid pink;
border-right: 0;
overflow: hidden;
}
#left,
#content {
float: left;
}
#left li {
background: url(images/lili.jpg) repeat-x;
}
#left li a {
display: block;
width: 48px;
height: 27px;
border-bottom: 1px solid pink;
line-height: 27px;
text-align: center;
color: black;
}
#left li a:hover {
background-image: url(images/abg.gif);
}
#content {
border-left: 1px solid pink;
border-right: 1px solid pink;
}
</style>
<script src="jquery.min.js"></script>
<script>
$(function() {
// 1. 滑鼠經過左側的小li
$("#left li").mouseover(function() {
// 2. 得到當前小li 的索引號
var index = $(this).index();
console.log(index);
// 3. 讓我們右側的盒子相應索引號的圖片顯示出來就好了
// $("#content div").eq(index).show();
// 4. 讓其餘的圖片（就是其他的兄弟）隱藏起來
// $("#content div").eq(index).siblings().hide();
// 鏈式程式設計
$("#content div").eq(index).show().siblings().hide();
})
})
</script>
</head>
<body>
<div class="wrapper">
<ul id="left">
<li><a href="#">女靴</a></li>
<li><a href="#">雪地靴</a></li>
<li><a href="#">冬裙</a></li>
<li><a href="#">呢大衣</a></li>
<li><a href="#">毛衣</a></li>
<li><a href="#">棉服</a></li>
<li><a href="#">女褲</a></li>
<li><a href="#">羽絨服</a></li>
<li><a href="#">牛仔褲</a></li>
</ul>
<div id="content">
<div>
<a href="#"><img src="images/女靴.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="images/雪地靴.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="images/冬裙.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="images/呢大衣.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="images/毛衣.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="images/棉服.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="images/女褲.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="images/羽絨服.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="images/牛仔褲.jpg" width="200" height="250" /></a>
</div>
</div>
</div>
</body>
</html>
程式碼實現略。(詳情參考原始碼)
1.4. jQuery 樣式操作
jQuery中常用的樣式操作有兩種：css() 和 設定類樣式方法
1.4.1. 方法1: 操作 css 方法
jQuery 可以使用 css 方法來修改簡單元素樣式； 也可以操作類，修改多個樣式。
常用以下三種形式 :
// 1.引數只寫屬性名，則是返回屬性值
var strColor = $(this).css('color');
// 2. 引數是屬性名，屬性值，逗號分隔，是設定一組樣式，屬性必須加引號，值如果是數字可以不用跟單位和引號
$(this).css(''color'', ''red'');
// 3. 引數可以是物件形式，方便設定多組樣式。屬性名和屬性值用冒號隔開， 屬性可以不用加引號
$(this).css({ "color":"white","font-size":"20px"});
注意：css() 多用於樣式少時操作，多了則不太方便。
1.4.2. 方法2: 設定類樣式方法
作用等同於以前的 classList，可以操作類樣式， 注意操作類裡面的引數不要加點。
常用的三種設定類樣式方法：
// 1.新增類
$("div").addClass("current");
// 2.刪除類
$("div").removeClass("current");
// 3.切換類
$("div").toggleClass("current");
注意：
設定類樣式方法比較適合樣式多時操作，可以彌補css()的不足。
原生 JS 中 className 會覆蓋元素原先裡面的類名，jQuery 裡面類操作只是對指定類進行操作，不影響原先的類名。
1.4.3. 案例：tab 欄切換
思路分析:
1.點選上部的li，當前li 新增current類，其餘兄弟移除類。
2.點選的同時，得到當前li 的索引號
3.讓下部裡面相應索引號的item顯示，其餘的item隱藏
<body>
<div class="tab">
<div class="tab_list">
<ul>
<li class="current">商品介紹</li>
<li>規格與包裝</li>
<li>售後保障</li>
<li>商品評價（50000）</li>
<li>手機社群</li>
</ul>
</div>
<div class="tab_con">
<div class="item" style="display: block;">
商品介紹模組內容
</div>
<div class="item">
規格與包裝模組內容
</div>
<div class="item">
售後保障模組內容
</div>
<div class="item">
商品評價（50000）模組內容
</div>
<div class="item">
手機社群模組內容
</div>
</div>
</div>
<script>
$(function() {
// 1.點選上部的li，當前li 新增current類，其餘兄弟移除類
$(".tab_list li").click(function() {
// 鏈式程式設計操作
$(this).addClass("current").siblings().removeClass("current");
// 2.點選的同時，得到當前li 的索引號
var index = $(this).index();
console.log(index);
// 3.讓下部裡面相應索引號的item顯示，其餘的item隱藏
$(".tab_con .item").eq(index).show().siblings().hide();
});
})
</script>
</body>
程式碼實現略。(詳情參考原始碼)
1.5. jQuery 效果
jQuery 給我們封裝了很多動畫效果，最為常見的如下：
顯示隱藏：show() / hide() / toggle() ;
劃入劃出：slideDown() / slideUp() / slideToggle() ;
淡入淡出：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;
自定義動畫：animate() ;
注意：
動畫或者效果一旦觸發就會執行，如果多次觸發，就造成多個動畫或者效果排隊執行。
jQuery為我們提供另一個方法，可以停止動畫排隊：stop() ;
1.5.1. 顯示隱藏
顯示隱藏動畫，常見有三個方法：show() / hide() / toggle() ;
語法規範如下:
程式碼演示
<body>
<button>顯示</button>
<button>隱藏</button>
<button>切換</button>
<div></div>
<script>
$(function() {
$("button").eq(0).click(function() {
$("div").show(1000, function() {
alert(1);
});
})
$("button").eq(1).click(function() {
$("div").hide(1000, function() {
alert(1);
});
})
$("button").eq(2).click(function() {
$("div").toggle(1000);
})
// 一般情況下，我們都不加引數直接顯示隱藏就可以了
});
</script>
</body>
1.5.2. 滑入滑出
滑入滑出動畫，常見有三個方法：slideDown() / slideUp() / slideToggle() ;
語法規範如下:
程式碼演示
<body>
<button>下拉滑動</button>
<button>上拉滑動</button>
<button>切換滑動</button>
<div></div>
<script>
$(function() {
$("button").eq(0).click(function() {
// 下滑動 slideDown()
$("div").slideDown();
})
$("button").eq(1).click(function() {
// 上滑動 slideUp()
$("div").slideUp(500);
})
$("button").eq(2).click(function() {
// 滑動切換 slideToggle()
$("div").slideToggle(500);
});
});
</script>
</body>
小案例：下拉選單略（詳情參看原始碼）。
<body>
<ul class="nav">
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">評論</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">評論</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">評論</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">評論</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
</ul>
<script>
$(function() {
// 滑鼠經過
// $(".nav>li").mouseover(function() {
// // $(this) jQuery 當前元素 this不要加引號
// // show() 顯示元素 hide() 隱藏元素
// $(this).children("ul").slideDown(200);
// });
// // 滑鼠離開
// $(".nav>li").mouseout(function() {
// $(this).children("ul").slideUp(200);
// });
// 1. 事件切換 hover 就是滑鼠經過和離開的複合寫法
// $(".nav>li").hover(function() {
// $(this).children("ul").slideDown(200);
// }, function() {
// $(this).children("ul").slideUp(200);
// });
// 2. 事件切換 hover 如果只寫一個函式，那麼滑鼠經過和滑鼠離開都會觸發這個函式
$(".nav>li").hover(function() {
$(this).children("ul").slideToggle();
});
})
</script>
</body>
1.5.3 淡入淡出
淡入淡出動畫，常見有四個方法：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;
語法規範如下:
程式碼演示
<body>
<button>淡入效果</button>
<button>淡出效果</button>
<button>淡入淡出切換</button>
<button>修改透明度</button>
<div></div>
<script>
$(function() {
$("button").eq(0).click(function() {
// 淡入 fadeIn()
$("div").fadeIn(1000);
})
$("button").eq(1).click(function() {
// 淡出 fadeOut()
$("div").fadeOut(1000);
})
$("button").eq(2).click(function() {
// 淡入淡出切換 fadeToggle()
$("div").fadeToggle(1000);
});
$("button").eq(3).click(function() {
// 修改透明度 fadeTo() 這個速度和透明度要必須寫
$("div").fadeTo(1000, 0.5);
});
});
</script>
</body>
1.5.4 自定義動畫
自定義動畫非常強大，透過引數的傳遞可以模擬以上所有動畫，方法為：animate() ;
語法規範如下:
程式碼演示
<body>
<button>動起來</button>
<div></div>
<script>
$(function() {
$("button").click(function() {
$("div").animate({
left: 500,
top: 300,
opacity: .4,
width: 500
}, 500);
})
})
</script>
</body>
1.5.5 停止動畫排隊
動畫或者效果一旦觸發就會執行，如果多次觸發，就造成多個動畫或者效果排隊執行。
停止動畫排隊的方法為：stop() ;
stop() 方法用於停止動畫或效果。
stop() 寫到動畫或者效果的前面， 相當於停止結束上一次的動畫。
總結: 每次使用動畫之前，先呼叫 stop() ,在呼叫動畫。
1.5.6. 事件切換
jQuery中為我們新增了一個新事件 hover() ; 功能類似 css 中的偽類 :hover 。介紹如下
語法
hover([over,]out) // 其中over和out為兩個函式
over:滑鼠移到元素上要觸發的函式（相當於mouseenter）
out:滑鼠移出元素要觸發的函式（相當於mouseleave）
如果只寫一個函式，則滑鼠經過和離開都會觸發它
hover事件和停止動畫排列案例
<body>
<ul class="nav">
<li>
<a href="#">微博</a>
<ul><li><a href="">私信</a></li><li><a href="">評論</a></li><li><a href="">@我</a></li></ul>
</li>
<li>
<a href="#">微博</a>
<ul><li><a href="">私信</a></li><li><a href="">評論</a></li><li><a href="">@我</a></li></ul>
</li>
</ul>
<script>
$(function() {
// 滑鼠經過
// $(".nav>li").mouseover(function() {
// // $(this) jQuery 當前元素 this不要加引號
// // show() 顯示元素 hide() 隱藏元素
// $(this).children("ul").slideDown(200);
// });
// // 滑鼠離開
// $(".nav>li").mouseout(function() {
// $(this).children("ul").slideUp(200);
// });
// 1. 事件切換 hover 就是滑鼠經過和離開的複合寫法
// $(".nav>li").hover(function() {
// $(this).children("ul").slideDown(200);
// }, function() {
// $(this).children("ul").slideUp(200);
// });
// 2. 事件切換 hover 如果只寫一個函式，那麼滑鼠經過和滑鼠離開都會觸發這個函式
$(".nav>li").hover(function() {
// stop 方法必須寫到動畫的前面
$(this).children("ul").stop().slideToggle();
});
})
</script>
</body>
1.5.7. 案例：王者榮耀手風琴效果
思路分析: 1.滑鼠經過某個小li 有兩步操作： 2.當前小li 寬度變為 224px， 同時裡面的小圖片淡出，大圖片淡入 3.其餘兄弟小li寬度變為69px， 小圖片淡入， 大圖片淡出
<body>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
// 滑鼠經過某個小li 有兩步操作：
$(".king li").mouseenter(function() {
// 1.當前小li 寬度變為 224px， 同時裡面的小圖片淡出，大圖片淡入
$(this).stop().animate({
width: 224
}).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
// 2.其餘兄弟小li寬度變為69px， 小圖片淡入， 大圖片淡出
//siblings("li") 引數意思是兄弟是li,可能兄弟還有其它元素，但是給指定是li
$(this).siblings("li").stop().animate({
width: 69
}).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
})
});
</script>
<div class="king">
<ul>
<li class="current">
<a href="#">
<img src="images/m1.jpg" alt="" class="small">
<img src="images/m.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="images/l1.jpg" alt="" class="small">
<img src="images/l.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="images/c1.jpg" alt="" class="small">
<img src="images/c.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="images/w1.jpg" alt="" class="small">
<img src="images/w.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="images/z1.jpg" alt="" class="small">
<img src="images/z.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="images/h1.jpg" alt="" class="small">
<img src="images/h.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="images/t1.jpg" alt="" class="small">
<img src="images/t.png" alt="" class="big">
</a>
</li>
</ul>
</div>
</body>
程式碼實現略。(詳情參考原始碼)