一　　認識jQuery

　　jQuery是JavaScript Query的縮寫形式。jQuery是一款非常優秀的JavaScript庫，即便是MVVM框架盛行的今天，也有超過半數的網頁及應用直接或間接的使用了jQuery。jQuery的設計理念是“Write Less, Do More“，即寫的更少，做的更多！使用jQuery可以大大簡化我們的JS程式碼，從而提高開發效率。

　　jQuery現在有3個大的版本，分別是1.x，2.x，3.x。你可以從jQuery官方網站下載需要的版本，然後從本地引入到自己的專案，也可以使用CDN引入。在你下載jQuery時一般有兩個可選的版本，一個是壓縮版（不包含換行和空格，體積更小，多用於實際專案開發），另一個是未壓縮版（包含換行和空格，體積稍大，多用於學習和測試）。

1 <script src="jquery-1.12.4.js"></script>
2 <!--本地引入-->
3 <script src="//code.jquery.com/jquery-1.12.4.js"></script>
4 <!--CDN引入-->

　　另外，jQuery從第二個大的版本開始，為了優化網路響應和使語法更加簡潔，拋棄了對IE6、7、8的支援，並且從2.1.0開始，壓縮版本的檔案中也不再包含註釋資訊了。為了獲得更好的相容性，我們這裡使用的jQuery檔案版本號是1.12.4。

二　　jQuery核心

　　1，$符號

　　jQuery實際上是一個函式物件。事實上，jQuery通過全域性變數jQuery引用該函式物件，$符號是jQuery變數的一個別名，為了寫的更少，我們通常都使用$符號表示該物件。

1 window.jQuery === window.$; //true
2 jQuery === $;// true
3 typeof($);// 'function'

　　如果你還使用了其他框架，或自定義了$變數，那麼有可能和jQuery的$符號造成衝突。

1 jQuery.noConflict();

　　在使用jQuery程式設計之前，首先呼叫noConflict()方法，解除jQuery對$符號的佔用，這樣就可以解決這一問題了。但往後就只能通過變數jQuery

　　2，引數

　　$核心函式可以接收3種類型的引數，分別是函式引用、字串、DOM物件。

　　　　a) 接收一個函式　　

1 $(function(){
2     //some code
3 });
4 //這種方式的完整寫法應該是：
5 //$(document).ready(function(){some code});

　　　　這種方式類似原生JS的window.DOMContentLoaded方法，只要HTML文件解析完畢並生成DOM tree就會觸發該事件。但是在jQuery中可以同時存在多個該方法。

　　　　b) 接收字串

1 var box1 = $('div');
2 //接收css選擇器字串，可以拿到DOM tree中相應的DOM元素，並把它包裝成jQuery物件
3 var box2 = $('<div></div>');
4 //接收HTML程式碼片段，可以建立相應的DOM元素，並把它包裝秤jQuery物件

　　　　c) 接收DOM元素　　　　

1 var box = document.getElementById('#box');
2 var jBox = $(box);//jQuery obj

　　　　如果核心函式接收一個DOM元素，那麼它會把該DOM元素包裝成一個jQuery物件，並返回。

　　jQuery物件事實上是一個類陣列，儲存了獲取到的DOM元素。只有通過jQuery物件才可以訪問jQuery提供的屬性和方法。

　　3，靜態方法

　　jQuery提供了一些靜態方法，例如遍歷陣列，字串去空格，判斷資料型別等等，這些方法在ES5之前都是很實用的方法，但ES5之後，原生JS就已經實現了這類似的方法，所以這裡就不再詳細講解了，有興趣可以自行檢視官方文件。jQuery把ajax相關操作也封裝為靜態方法，稍後會專門講解。這裡要講的只有holdReady方法。

1 $.holdReady(true);
2 $(function(){
3     //some code
4 });
5 $.joldReady(false);
6 //引數true，暫停ready方法的執行，引數false，恢復ready方法的執行

三　　jQuery 屬性和節點

　　1，選擇器

　　選擇器是jQuery的核心功能。絕大多數css支援的選擇器都可以在jQuery得到支援。

1 $('p');//標籤選擇器
2 $('.class');//類選擇器
3 $('#id');//id選擇器
4 $('[type=text]');//屬性選擇器
5 $('input[type=email]');//組合選擇器
6 $(#id p);//後代選擇器
7 $(#id p:first-child);//篩選選擇器
8 //...

　　通過核心函式獲取到的DOM元素都被包裝成jQuery物件，以類陣列的形式儲存。我們可以通過eq方法獲取其中某一個，還可以通過get方法獲取DOM物件。

1 var divList = $('div');//獲取所有div
2 var domDiv = divList.get(0);//獲取第一個Dom元素，如果有的話
3 var jqDiv = divList.eq(0);//獲取第一個jq物件，如果有的話
4 var another = $(domDiv);//把Dom元素轉化成jq物件

 　　另外jQuery還提供了一些通過層級結構查詢元素的方法。

1 $('div').find('span');//查詢div內部的span，等同於$('div span')
2 $('li').first();//獲取匹配的元素中的第一個
3 $('li').last();//獲取匹配的元素中的最後一個
4 $('div').next();//獲取所有匹配到的div的下一個兄弟元素的集合
5 $('div').prev();//獲取所欲匹配到的div的上一個兄弟元素的集合
6 $('div').parent();//獲取匹配到的div的共同父元素
7 $('div').children();//獲取div的子元素集合
8 $('div').siblings();//獲取div的兄弟元素集合
9 //...

　　2，屬性操作

　　獲取DOM元素之後，jQuery把它們包裝成jq物件，然後你就可以通過jQuery提供的方法修改相應的DOM元素了，包括CSS，文字，屬性節點，HTML結構等等。

　　屬性及屬性節點相關：

 1 $('div').attr('name','test');//設定屬性名：name，屬性值：test
 2 $('div').attr('name');//獲取屬性name的值
 3 $('div').removeAttr('name');//刪除屬性name
 4 
 5 ******************************
 6 
 7 $('div').prop('name','test');
 8 $('div').prop('name');
 9 $('div').removeProp('name');
10 //prop的用法和attr一模一樣，唯一不同的是prop既可以操作DOM元素的屬性，也可以操作它的屬性節點

　　當屬性沒有被顯示的設定時，通過attr()方法獲取將返回undefined，而prop()方法可以返回true或者false，所以，如果你要檢索和更改DOM屬性，比如元素的checked，selected，或disabled狀態，推薦使用prop()方法，其他時候都使用attr方法。

　　注意，使用上訴方法獲取屬性值時，返回的只是第一個匹配的DOM元素的相應屬性值。但是設定的時候卻是為所有匹配的DOM元素都新增該屬性。

　　class類相關：

1 $('div').addClass('test');//新增類，如需新增多個類，使用空格隔開即可
2 $('div').removeClass('test');//刪除類，如需刪除多個類，也用空格隔開即可
3 $('div').toggleClass('test');//切換類，如果DOM元素已經有該類了，那麼就刪除，如果沒有則新增

　　文字及結構相關：

1 $('div').html();//獲取第一個匹配到的div的內容
2 $('div').html('<p>我是段落</p>');//設定所有匹配到的div的內容
3 $('div').text();//獲取所有匹配元素的文字內容
4 $('div').text('hello');//設定所有匹配到的div的文字內容
5 $('input').val();//獲取匹配元素value值
6 $('input').val('hello');//獲取匹配元素value值

　　css相關：

1 $('div').css('background-color','red');//設定元素的單個css屬性
2 $('div').css({
3     width:'200px',
4     height:'200px',
5     background-color:'red'
6 });//通過物件設定多個css屬性

　　尺寸及位置相關：

1 $('div').width();//獲取div的內容區寬度，可傳參設定
2 $('div').height();//獲取div的內容區高度，可傳參設定
3 //innerWidth，innerHeight表示content+padding的寬高
4 //outerWidth，outerHeight表示content+padding+border的寬高
5 $('div').offset();//獲取div相對視口的偏移量，返回值是一個包含top和left屬性，且值為數字的物件
6 $('div').position();//獲取div相對父元素的偏移量，返回值是一個包含top和left屬性，且值為數字的物件
7 //offset和position都以畫素計，並且只對可見的元素起作用

　　3，節點

　　jQuery也提供了節點的增、刪、改、查相關方法。

1 $("div").append("<p>Hello</p>");//在div內部的末尾插入元素
2 $("div").prepend("<p>Hello</p>");//在div內部的開頭插入元素
3 $("div").after("<p>Hello</p>");//緊挨著div的後面插入元素
4 $("div").before("<p>Hello</p>");//緊挨著div的前面插入元素
5 $("div").remove();//刪除div元素，但是會保留文字
6 $("div").empty();//清空div中的所有內容

四　　jQuery 事件

　　1，事件繫結和移除

　　jQuery提供了兩種繫結事件的方式，第一種是on+事件名稱的具體事件方法，第二種是直接使用on方法。

1 $('div').onclick(function(){});
2 $('div').on('click',function(){});
3 //事件處理函式可以是匿名函式，也可以是函式引用，如果涉及到解除事件繫結，建議使用函式引用的方式

　　jQuery的事件繫結類似原生JS的addEventListener方法，可以同時繫結同一型別的多個事件，而不會相互覆蓋。

　　jQuery通過off方法解除事件繫結。

1 function test(){};
2 $('div').on('click',test);
3 $('div').off();//移除div繫結的所有事件
4 $('div').off('click');//移除div繫結的所有click事件
5 $('div').off('click',test);//移除div繫結的具體事件

　　2，阻止事件冒泡和預設行為

　　使用jQuery阻止事件冒泡和預設行為與原生JS一樣。不太清楚的可以檢視我的《DOM之事件（一）》。

 1 $('div').on('click',function(){
 2     //some code
 3     e.stopPropagation();
 4 });
 5 //阻止事件冒泡
 6 $('a').on('click',function(){
 7     //some code
 8      return false；//簡單方式
 9      //e.preventDefault();//W3C標準方式
10 });
11 //阻止預設行為

　　3，一次性事件和自動觸發事件

　　通常我們給元素繫結的事件處理程式需要特定的事件才能觸發，比如click，mouseover等等，jQuery提供了triggerHandler方法，你可以通過該方法手動觸發元素繫結的事件處理程式，而不用等到特定事件發生。

1 $('div').on('click',function(){
2     //some code
3 });
4 //一般需要等到使用者點選div，函式才會被執行
5 $('div').triggerHandler('click');
6 //自動觸發div的click事件，不用等到使用者點選

　　jQuery還提供了另一個方法：trigger。它的功能和triggerHandler方法一樣。他們的不同之處在於triggerHandler不會觸發事件的預設行為和冒泡。

1 $('div').one('click',function(){
2     //some code
3 });
4 //jQuery通過one方法繫結一個只會被觸發一次的事件處理程式

　　4，事件委託

　　jQuery通過delegate方法實現事件委託。該方法使用上和原生JS有一些區別，原生JS實現事件委託也請移步《DOM之事件（一）》。

1 $("ul").delegate("li", "click", function(){        
2     $(this).toggleClass("test");
3 });
4 //把li的點選事件委託給ul，被委託元素一般是委託元素的父元素

五　　jQuery 動畫

　　1，顯示和隱藏

　　jQuery通過show方法和hide方法實現元素的顯示和隱藏。它的原理是修改元素的display和寬高及opacity屬性。

1 $('div').show(1000);
2 //使div顯示，1000表示整個過程持續時間，單位是ms
3 $('div').hide(1000);
4 //使div隱藏

　　這兩個方法還可以接受一個回撥函式作為第二個引數，用於設定動畫完成後需要執行的操作。

　　2，展開和收起

　　jQuery通過slideDown，slideUp實現平緩的展開和收起元素。該方法是通過高度變化（向下增大或減小）來動態地顯示元素，在顯示完成後可選地觸發一個回撥函式。

1 $("p").slideDown(1000);
2 //展開，可以設定一個時間，表示整個過程持續時間，單位ms
3 $("p").slideUp(1000);
4 //收起
5 $("p").slideToggle(1000);
6 //切換

　　展開後收起動畫常用來做下拉選單。

　　3，淡入淡出

　　jQuery通過fadeIn和fadeOut實現淡入淡出效果。該方法的原理是修改元素的opacity屬性，不會改變元素的寬高。也可接收一個回撥函式。

1 $("div").fadeIn(1000);
2 //淡入，可一接收一個數字作為引數，表示過程持續時間，單位ms
3 $("div").fadeOut(1000);
4 //淡出
5 $("div").fadeTo(1000,0.5);
6 //調整到指定值
7 $("div").fadeToggle(1000);
8 //切換

　　4，自定義動畫

　　jQuery通過animate方法實現自定義動畫效果。

1 $('div').animate({
2     width:500px,
3     opacity:0.8
4 },1000);
5 //該方法接收一個物件，表示動畫結束時元素的狀態，第二引數是一個數字，表示持續時長，單位ms，也可以接收一個回撥函式作為第三個引數

　　注意，jQuery的動畫採用佇列形式，每編寫一個動畫，就向動畫佇列中插入一個，只能等前面的執行完後才執行後面的。

　　5，停止和延遲

　　jQuery的stop方法可以暫停正在執行的動畫。

1 $('div').stop();
2 //立即停止當前動畫，直接開始執行佇列中後續的動畫，如果有的話
3 $('div').stop(true,true);
4 //stop方法可以接收兩個blloean值作為引數。第一個規定在停止當前動畫的同時對否清除佇列中的其他動畫，第二個規定在停止當前動畫的同時是否要直接完成佇列中其他動畫。

　　介於jQuery通過佇列形式控制動畫執行，我們建議在呼叫jQuery動畫之前都先呼叫一次stop方法，以免造成動畫混亂。

1 $('div').stop();
2 $('div').animate({
3     //some code
4 },1000);

　　jQuery通過delay延遲動畫的執行。

1 $('div').animate({
2     width:200px;
3     height:200px;
4 },1000).delay(1000).animate({
5     background-color:red;
6 },1000);
7 //在改變寬高後等待1000ms再改變背景顏色

六　　jQuery Ajax

　　jQuery封裝了功能完整的Ajax方法，我們常用的jQuery方法有3個，分別是$.ajax()、$.get()、$.post()。

　　1，ajax()方法

　　ajax方法接收一個物件作為引數，物件的屬性名為ajax的設定引數，屬性值為ajax的設定值。

 1 $.ajax({
 2     type: "POST",
 3     url: "some.php",
 4     data: "name=ren&age=12",
 5     cache: false;
 6     dataType:"text",
 7     success: function(msg){
 8     //some code
 9    },
10     error:function(msg){
11     //some code
12     }
13 });

　　常用的引數有：

　　　　type：請求型別，可選值有post和get。

　　　　url：傳送請求的地址。

　　　　data：傳送到伺服器的資料。必須是“key0=value0&key1=value1“或鍵值對的形式（物件）。

　　　　cache：規定是否讀取快取資料，true表示讀取，false表示不讀取，直接從伺服器獲取。

　　　　dataType：期望伺服器返回的資料型別，可選值有xml，html，script，json，text。

　　　　success：ajax請求成功回撥函式。

　　　　error：ajax請求失敗回撥函式。

　　使用ajax()方法時，所有的設定引數都是可選的，除了上訴引數外，還有很多其他的引數可選，這讓我們在通過jQuery實現ajax時有了更大的靈活性。如果你想了解更多相關引數的資訊，請到jQuery官網查詢。

　　2，get()方法

　　如果你覺得ajax()方法傳送簡單get請求還是太麻煩，那麼你可以直接使用$.get()方法。

1 $.get(
2     "url",
3     { name: "ren", age: "12" },
4     function(msg){
5     //some code
6     },
7     "text"
8 );

　　該方法只需要4個引數，傳送請求的url，傳送的資料，請求成功的回撥函式，期望的返回值型別。

　　3，post()方法

　　使用$.post()方法和$.get()一樣，他們都只需要4個引數。

1 $.post(
2     "url",
3     { name: "ren", age: "12" },
4     function(msg){
5     //some code
6     },
7     "text"
8 );

　　4，load()方法

　　load()方法可以直接請求伺服器的資料並新增到DOM元素中。預設使用get方式，如果你向伺服器傳送了資料，將自動轉換為post方式。

1 $("div").load(
2     "test.html",
3     {name:"ren",age:"12"},
4     function(){//some code}
5 );
6 //載入一份新的html文件到div中，並向伺服器傳送了資料。

　　load()方法可以有3個引數，請求的url，向伺服器傳送的資料，請求成功後的回撥函式。

寫在最後：jQuery作為一款工具庫，我們只需要知道它能幹什麼和怎麼幹就好，不必完全深入的學習它。當我們需要用它的時候配合官方文件編寫相關程式碼即可。如果你在技術上有所追求，那麼你還是可以仔細研讀jQuery原始碼，相信一定會有不少收穫。其實不光jQuery，在你學習其他框架或庫或工具的時候，也可以按照這種方式學習，作為一個軟體工程師，計算機原理，作業系統，網路技術等等才是構造你上升的基石，其次才是各種程式語言，熱門框架及工具等等。

&n