一 認識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時一般有兩個可選的版本，一個是壓縮版（不包含換行和空格，體積更小，多用于實際項目開發），另一個是未壓縮版（包含換行和空格，體積稍大，多用于學習和測試）。

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

另外，jQuery從第二個大的版本開始，為了優化網絡響應和使語法更加簡潔，拋棄了對IE6、7、8的支持，并且從2.1.0開始，壓縮版本的文件中也不再包含注釋信息了。為了獲得更好的兼容性，我們這里使用的jQuery文件版本號是1.12.4。

二 jQuery核心

1，$符號

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

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

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

jQuery.noConflict(); 

在使用jQuery編程之前，首先調用noConflict()方法，解除jQuery對$符號的占用，這樣就可以解決這一問題了。但往后就只能通過變量jQuery來使用jQuery的所有功能了。

2，參數

$核心函數可以接收3種類型的參數，分別是函數引用、字符串、DOM對象。

a) 接收一個函數

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

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

b) 接收字符串

var box1 = $('div'); 
//接收css選擇器字符串，可以拿到DOM tree中相應的DOM元素，并把它包裝成jQuery對象 
var box2 = $('<div></div>'); 
//接收HTML代碼片段，可以創建相應的DOM元素，并把它包裝秤jQuery對象 

c) 接收DOM元素

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

如果核心函數接收一個DOM元素，那么它會把該DOM元素包裝成一個jQuery對象，并返回。

jQuery對象事實上是一個類數組，保存了獲取到的DOM元素。只有通過jQuery對象才可以訪問jQuery提供的屬性和方法。

3，靜態方法

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

$.holdReady(true); 
$(function(){ 
//some code 
}); 
$.joldReady(false); 
//參數true，暫停ready方法的執行，參數false，恢復ready方法的執行 

三 jQuery 屬性和節點

1，選擇器

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

$('p');//標簽選擇器 
$('.class');//類選擇器 
$('#id');//id選擇器 
$('[type=text]');//屬性選擇器 
$('input[type=email]');//組合選擇器 
$(#id p);//后代選擇器 
$(#id p:first-child);//篩選選擇器 
//... 

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

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

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

$('div').find('span');//查找div內部的span，等同于$('div span') 
$('li').first();//獲取匹配的元素中的第一個 
$('li').last();//獲取匹配的元素中的最后一個 
$('div').next();//獲取所有匹配到的div的下一個兄弟元素的集合 
$('div').prev();//獲取所欲匹配到的div的上一個兄弟元素的集合 
$('div').parent();//獲取匹配到的div的共同父元素 
$('div').children();//獲取div的子元素集合 
$('div').siblings();//獲取div的兄弟元素集合 
//... 

2，屬性操作

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

屬性及屬性節點相關：

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

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

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

class類相關：

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

文本及結構相關：

$('div').html();//獲取第一個匹配到的div的內容 
$('div').html('<p>我是段落</p>');//設置所有匹配到的div的內容 
$('div').text();//獲取所有匹配元素的文本內容 
$('div').text('hello');//設置所有匹配到的div的文本內容 
$('input').val();//獲取匹配元素value值 
$('input').val('hello');//獲取匹配元素value值 

css相關：

$('div').css('background-color','red');//設置元素的單個css屬性 
$('div').css({ 
width:'200px', 
height:'200px', 
background-color:'red' 
});//通過對象設置多個css屬性 

尺寸及位置相關：

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

3，節點

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

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

四 jQuery 事件

1，事件綁定和移除

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

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

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

jQuery通過off方法解除事件綁定。

function test(){}; 
$('div').on('click',test); 
$('div').off();//移除div綁定的所有事件 
$('div').off('click');//移除div綁定的所有click事件 
$('div').off('click',test);//移除div綁定的具體事件 

2，阻止事件冒泡和默認行為

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

$('div').on('click',function(){ 
//some code 
e.stopPropagation(); 
}); 
//阻止事件冒泡 
$('a').on('click',function(){ 
//some code 
return false；//簡單方式 
//e.preventDefault();//W3C標準方式 
}); 
//阻止默認行為 

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

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

$('div').on('click',function(){ 
//some code 
}); 
//一般需要等到用戶點擊div，函數才會被執行 
$('div').triggerHandler('click'); 
//自動觸發div的click事件，不用等到用戶點擊 

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

$('div').one('click',function(){ 
//some code 
}); 
//jQuery通過one方法綁定一個只會被觸發一次的事件處理程序 

4，事件委托

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

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

五 jQuery 動畫

1，顯示和隱藏

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

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

這兩個方法還可以接受一個回調函數作為第二個參數，用于設置動畫完成后需要執行的操作。

2，展開和收起

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

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

展開后收起動畫常用來做下拉菜單。

3，淡入淡出

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

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

4，自定義動畫

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

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

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

5，停止和延遲

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

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

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

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

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

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

六 jQuery Ajax

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

1，ajax()方法

ajax方法接收一個對象作為參數，對象的屬性名為ajax的設置參數，屬性值為ajax的設置值。

$.ajax({ 
type: "POST", 
url: "some.php", 
data: "name=ren&age=12", 
cache: false; 
dataType:"text", 
success: function(msg){ 
//some code 
}, 
error:function(msg){ 
//some code 
} 
 }); 

常用的參數有：

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()方法。

$.get( 
"url", 
{ name: "ren", age: "12" }, 
function(msg){ 
//some code 
}, 
"text" 
); 

該方法只需要4個參數，發送請求的url，發送的數據，請求成功的回調函數，期望的返回值類型。

3，post()方法

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

$.post( 
"url", 
{ name: "ren", age: "12" }, 
function(msg){ 
//some code 
}, 
 "text" 
); 

4，load()方法

load()方法可以直接請求服務器的數據并添加到DOM元素中。默認使用get方式，如果你向服務器發送了數據，將自動轉換為post方式。

$("div").load( 
"test.html", 
{name:"ren",age:"12"}, 
function(){//some code} 
); 
//載入一份新的html文檔到div中，并向服務器發送了數據。 

load()方法可以有3個參數，請求的url，向服務器發送的數據，請求成功后的回調函數。