一、jQuery簡介
1.0 JavaScript程式設計比較噁心的地方
噁心1：選擇元素麻煩，全線相容的方法只有getElementById()和getElementsByTagName()兩個。其他的方法是不都相容的。getElementsByClassName()通過類名選擇元素，IE9開始相容。
噁心2：樣式操作麻煩，得到原生樣式，需要我們自己造輪子getStyle()
噁心3：動畫麻煩，需要我們自己造輪子animate();
噁心4：批量控制麻煩，大量出現的for迴圈語句；排他操作麻煩
噁心5：HTML節點操作麻煩
噁心的東西，能用“輪子”來解決，事實上我們已經造了兩個輪子：getStyle、animate。
能不能把所有輪子組合起來，成為一個框架呢？jQuery就是這樣的一個東西。
1.1 簡介
jQuery是DOM程式設計領域的霸主，極大的簡化了原生JavaScript的DOM程式設計。是免費開源的、語法設計簡單，可以更便捷開發，例如選擇元素、製作動畫效果等功能。
jQuery中含有豐富的輪子，完美解決了選擇元素難、樣式難、動畫難、批量操作難等各種相容問題，讓工程師只需要思考業務，而不必思考細枝末節的相容問題。jQuery是一個js檔案，相容多瀏覽器的JavaScript庫（框架）。
優點：使用簡單方便
宗旨：Write Less, Do More. 寫的少，做的多
1.2 為什麼要學習jQuery
jquery開發簡單、易懂、相容性好（幾乎解決了所有的相容性問題）。
1.3 JavaScript和jQuery的關係
JavaScript和jQuery的關係好比父子，JavaScript是父親，jquery是兒子（青出於藍）
1.4 jQuery版本
|
帶有.min標識是經過壓縮js檔案，但是程式碼和沒壓縮的一樣，不用擔心，專案中都用.min的，因為檔案體積小。如要檢視原始碼，就用沒壓縮的。 |
在官網下載的有3種版本：
|
1.x 相容所有的瀏覽器，PC端開發都用這個 2.x 不相容IE678的，一般用於移動端 3.x 是最新的版本，不相容IE678，一般用在移動端 |
下載的時候有兩個選擇：
所有jQuery版本下載地址：http://code.jquery.com/jquery/
1.5 jQuery使用
1、先引入jQuery檔案包（外部JS檔案）
1、換行在寫script標籤，在裡面寫js程式碼
2、使用$()方法用什麼就選擇什麼，不用去寫繁瑣的獲取元素的JS程式碼。例如：$('div')
$()函式是jQuery核心函式，query是選擇的意思，也就是說jQuery的核心招牌動作就是選擇元素：
|
$('.box ul li').hide(1500); |
語法：
|
$('選擇器'); |
注意：
1、選擇的就是符合條件的元素，而不是一個
2、$('選擇器')裡面的選擇器和CSS選擇器完全一致
$也可以用jQuery代替，它們是同一個函式。
|
$('選擇器'); |
等價於：
|
jQuery('選擇器'); |
二、載入函式的區別
2.1 JavaScript入口函式
語法：
window.onload = function(){ }
注意：不能寫多個，如果有多個入口函式，只執行後面寫的。
2.2jQuery入口函式
語法：
$(function(){});
注意：可以同時寫多個，並且按順序執行。
【建議】：
|
入口一個足夠，不建議寫多個，JS和jQuery入口函式是通用的。 |
三、jQuery物件
3.1 jQuery物件不是原生JS物件
$()函式，能夠根據CSS選擇元素，比如：
|
$("#box") 等於 jQuery("#box") |
注意：選出來的是一個類陣列物件，jQuery自己的物件，這個jQuery物件後面不能是原生JS的語法：
|
$('#box').style.backgroundColor = 'green'; |
因為.style.backgroundColor= 'green';是原生JS語法，$()的物件是jQuery，不能混用。
如果要把jQuery物件，轉為原生JS物件，加[0]或get()方法即可。
|
$('#box')[0].style.backgroundColor = 'green'; |
|
$('#box').get(0).style.backgroundColor = 'green'; |
3.2原生JS物件和jQuery之間互相轉換
jQuery物件→原生JS物件：方法就是根據下標獲取其中一項元素。
|
$('p').innerHTML = '你好！'; $('p')[0].innerHTML = '你好！'; $('p')[0].html('你好'); |
原生JS物件→jQuery物件：將原生JS物件放在$()中即可。
var oBox = document.getElementById('box'); //$(oBox).style.backgroundColor = 'blue'; $(oBox).hide()
3.3引號的問題
|
$('選擇器') |
注意引號不能丟，在jQuery世界中，只有三個物件不能加引號，其他必須加引號：
|
$(this) $(document) $(window) |
$()獲得的元素一個類陣列的物件，由一些自定義屬性和方法組成，還要我們獲取原生JS的元素物件。
可以通過兩個方法獲取原生元素物件的長度：
第一個：length屬性，可以返回內部元素的長度，通過下標獲取某一項元素物件
|
console.log($('p').length); console.log($('p')[0]); |
第二個：size()方法，可以返回內部元素的長度
|
console.log($('p').size()); |
index()方法：能夠返回元素在結構中同級元素中的位置（下標）。
|
console.log($('#box').index()); |
四、jQuery操作CSS樣式
eq() 是遍歷方法，並且可以通過下標選擇某個元素
在jquery中操作CSS，全都使用css()這個方法
【中文語法解釋】：
|
1、獲取CSS屬性值：$('選擇器').css('屬性名'); 一個參數列示獲取屬性值 2、單屬性CSS設定：$('選擇器').css('屬性名','屬性值'); 3、多屬性CSS設定：$('選擇器').css({'屬性名':'屬性值','屬性名':'屬性值'}); |
【程式碼語法解釋】：
|
1、獲取CSS屬性值：$('選擇器').css('width'); 一個參數列示獲取屬性值 2、單屬性CSS設定：$('選擇器').css('width','100px'); 3、多屬性CSS設定：$('div').css({'width':'200px','height':'200px'}); |
屬性名和屬性值之間用“：”隔開，每一組CSS用逗號隔開，最外層用({})包住，是JSON的格式。
其實CSS屬性可以不寫引號，但是如果遇到“-”就必須要寫上。但是不建議不寫，規範來說還是全部加上引號，避免出錯。
多屬性可以換行（下圖為例）
CSS值運算：
|
$('div').css('width','-=20px'); $('div').css('width','+=20px'); |
五、jQuery操作HTML
5.1jQuery操作HTML標籤內容
通過html()方法可以獲取或設定HTML標籤的內容。
|
獲取標籤內容：$('選擇器').html(); 設定標籤內容：$('選擇器').html('需要設定的內容'); |
5.2jQuery操作HTML標籤屬性
屬性的英文單詞：attribute，jQuery把複雜的單詞簡化為attr
|
操作HTML標籤屬性的方法：attr() |
語法：
|
獲取屬性值：attr('屬性名'); 單屬性設定：attr('屬性名','屬性值'); 多屬性設定：attr({'屬性名':'屬性值','屬性名':'屬性值'}); |
注意：attr()方法和css()方法語法完全一致。
六、jQuery動畫
6.1 jQuery基礎動畫
|
hide() 隱藏 show() 顯示 toggle() 顯示和隱藏的切換 |
以上3種方法，預設是沒有動畫的，需要新增動畫，可以在括號內填寫毫秒引數控制動畫時間。
6.2 jQuery滑動動畫
|
slideUp() 向上滑動隱藏 slideDown() 向下滑動顯示 slideToggle() 滑動顯示和隱藏的切換 |
以上3種方法，預設有動畫，也可以毫秒控制動畫時間
注意：如果給img標籤設定了滑動動畫，就必須給img標籤設寬度或高度，否則就變對角線動畫了。
6.3 jQuery透明度動畫
|
fadeIn() 淡入顯示 fadeOut() 淡出隱藏 fadeToggle() 淡入淡出之間切換 fadeTo(時間,透明度值) 設定透明度，透明度的值0~1之間 |
$('button').eq(0).click(function(){
$('div').fadeOut(2000); //淡出隱藏
});
$('button').eq(1).click(function(){
$('div').fadeIn(2000); //淡入顯示
});
$('button').eq(2).click(function(){
$('div').fadeToggle(1000); //淡入淡出切換
});
$('button').eq(3).click(function(){
$('div').fadeTo(1000,0.5); //在1秒鐘設定透明度為0.5
});
注意所有動畫方法都有回撥函式fadeIn(speed,callback);
七、基本選擇器
jQuery中$()是萬能選擇器，絕大部分選擇器都是和CSS選擇器一樣。
八、篩選選擇器和方法
8.1篩選選擇器
篩選選擇器主要通過特定的過濾規則篩選除所需要的元素，該選擇器都是“：”開頭，並且寫在$()函式內。
$('p:first').css('background','skyblue'); //選中第一個p標籤
$('p:last').css('background','skyblue'); //選中最後一個p標籤
$('p:even').css('background','skyblue'); //選中所有偶數的p標籤
$('p:odd').css('background','orange'); //選中所有偶數的p標籤
$('p:gt(3)').css('background','orange'); //選中大於指定編號的p標籤
$('p:lt(3)').css('background','orange'); //選中小於指定編號的p標籤
$('p:eq(3)').css('background','orange'); //選中下標為3的p標籤，索引值從0開始
$('p:not(.op)').css('background','orange'); //選中所有p標籤，但排除類名為.op的
8.2篩選方法
|
first() 選中第一個元素 last() 選中最後一個元素 eq(3) 選中指定下標的元素 |
$('p').first().css('background','orange'); //選中第一個p標籤
$('p').last().css('background','orange'); //選中最後一個p標籤
$('p').eq(3).css('background','orange'); //選中下標為3的p標籤
九、節點關係選擇器
9.1三巨頭：父、子、兄
|
$('div').parent() 選中當前div元素的父親 $('div').children() 選中當前div元素的兒子 $('div').siblings() 選中當前div的所有兄弟，不包括自己 |
注意，以上3個方法中，都可以填引數，引數都是選擇器
|
$(this) 代表當前物件的事件源（和js的this一樣） |
9.2其他節點關係
find()：找的是元素的後代的一些元素，根據引數的選擇器去選擇。
|
$('.box').find('li').css("border","1px solid red"); //選中.box所有的後代li |
next()：選中的是當前元素的下一個元素，必須是同級的。
|
$('.box2').next().css("border","1px solid red"); //選中box2下一級兄弟 |
nextAll()：選中的是當前元素後面的所有兄弟元素。內部可以傳引數，選擇符合選擇器的後面的兄弟。
|
$('.box2').nextAll().css("border","1px solid red"); //選中box2下一級所有的兄弟 |
prev()：選中的是當前元素的上一個元素，必須是同級的。
|
$('.box2').prev().css("border","1px solid green"); //選中box2上一級兄弟 |
prevAll()：選中的是當前元素前面的所有兄弟元素。內部可以傳引數，選擇符合選擇器的後面的兄弟
|
$('.box2').prevAll().css("border","1px solid green"); //選中box2上一級所有兄弟 |
parents()：選擇的是包含html標籤在內的所有祖先元素。內部可以傳引數，選擇符合選擇器的祖先元素。
|
$('.box ul li').parents().css("border","1px solid #000"); //選中li標籤所有的祖先元素 $('.box ul li').parents('.box1').css('border','1px solid red'); //選中li標籤.box祖先元素 |
十、鏈式程式設計
但凡針對同一個目標進行所有的操作，都可以通過“點”語法來連續寫，這種叫做“鏈式程式設計”。
十一、索引值index()
在jQuery中用選擇器選出來的元素都有一個index()方法，這個方法可以獲取當前元素在父級中的下標（索引值）
（自己家的孩子排行大小，根隔壁老王家的孩子排行大小沒關係）
$('ul li').click(function(){
alert($(this).index()); //獲取當前被點選那個li元素在父級中的下標
console.log($('ul li').eq(8)); //把全部選擇的元素進行大排隊
});
十二、jQuery操作class
雖然attr()方法也可以操作class屬性，但是jQuery專門為我們封裝了一些操作class的方法，更方便更直觀。
|
addClass() 新增class類 removeClass() 刪除class類 toggleClass() 切換類，刪除和新增之間切換 hasClass() 判斷是否有class類，true表示有，false表示沒有 |
以上4個方法的引數，都是class類名，並且不會覆蓋原有的class類名，除非類名相同。
注意：圓括號內的只能是class類名，不能加“.”
|
addClass('box'); 正確的 addClass('.box'); 錯誤的 |
十三、事件監聽方法
hover()方法整合了滑鼠移入和移出兩個事件。
【語法】：
$('div').hover(function(){
//滑鼠移入執行的事情
},function(){
//滑鼠離開執行的事情
});
【語法2】：
$('div').hover(function(){
//滑鼠移入移出兩個事件執行的程式碼
});
引數解釋：
|
hover(引數1,引數2); |
引數1和引數2都是匿名函式function(){}，如果只寫一個引數，表示滑鼠移入和移出兩個事件。
十四、animate()自定義動畫
animate()方法用於建立CSS屬性集的自定義動畫，通過CSS樣式將元素從一個狀態慢慢的變化到另一種狀態的過程。
animate()是動畫的意思，原生JS動畫必須依靠setInterval，根據步長和間隔時間操作運動。animate()方法內部用setInterval已經封裝好了，不用自己算步長。
14.1 animate()語法
|
$(選擇器).animate({css樣式},時間,運動方式,回撥函式); |
|
引數1：CSS屬性名：屬性值，JSON個數{'width':500} 引數2：動畫執行總時間，毫秒 引數3：動畫的運動方式，引數要用引號，例如：linear是勻速運動 引數4：回撥函式function(){}，動畫完畢後，執行的函式 |
以上引數，除了引數1，其他都是可選的。
14.2可以參與運動的屬性
http://www.w3school.com.cn/jquery/effect_animate.asp
參考上面的連結，裡面羅列了所有能運動的屬性，有數值的都能參與運動。
我們關心不能參與運動的有哪些？
|
1、background-color 背景色，但是CSS3可以 2、background-position背景定位，但是CSS3可以 3、大部分CSS3屬性都不能動畫，border-radius除外 |
14.3動畫佇列
jQuery中有一個機制，叫“動畫佇列”。
什麼叫“佇列”，比喻：食堂打飯，先進的先出
什麼叫“棧”，比喻：羽毛球筒，先進的後出
同一個元素animate的時候，會按照順序執行
$('div').animate({'left':500},2000);
$('div').animate({'top':500},2000);
$('div').animate({'left':0},2000);
$('div').animate({'top':0},2000);
上面四段動畫等價於這一行程式碼：
同一個元素多次打點呼叫動畫方法，動畫會自動排成佇列，誰先寫，誰先執行。
$('div').animate({'left':500},2000).animate({'top':500},2000).animate({'left':0},2000).animate({'top':0},2000);
下面的動畫是同時執行，不會按順序執行：
$('div').animate({'left':500,'top':300},2000);
//非動畫語句會同時執行
$('div').eq(0).animate({"left":500},1000);
$('div').eq(1).css({"background-color":"pink"});
animate是非同步的語句，JS解析動畫的時候，不會死等動畫。
14.4非同步語句和回撥函式
animate動畫方法是一個非同步語句，也可以寫回撥函式，描述動畫結束後可以做什麼。
|
$('div').animate({'width':500},2000,'linear',function(){ //動畫執行完畢後的回撥函式 $(this).css('background-color','skyblue'); }); |
14.5 delay()延遲動畫
所有的jQuery動畫方法都可以用delay()，表示動畫不是立即執行，需要等待一段時間。
引數：規定延遲的時間
$('div').delay(1000).slideUp();
$('div').delay(1000).slideDown();
$('div').delay(2000).animate({"left":500},1000);
上面寫法等價於：
$('div').delay(1000).slideUp().delay(1000).slideDown().delay(2000).animate({"left":500},1000);
只要是動畫方法都可以使用delay()延遲。
14.6 stop()停止動畫方法
jQuery所有動畫採取的都是排隊機制的播放形式，如果相繼觸發10次動畫，那麼沒有執行的動畫會依次排隊等待執行。
stop()：可以清空動畫的排隊機制，一定要寫在執行動畫的前面，命令運動的元素停止。
|
stop(是否清空動畫佇列,是否完成當前動畫) |
第一個引數：表示是否清空動畫佇列，true表示清空，false表示不清空
第二個引數：表示是否完成當前動畫，true表示立即完成，false表示立即停止不動
兩個引數預設不寫：都是false
$('button').eq(0).click(function(){
$('div').animate({'left':1000}, 2000);
$('div').animate({'top':500}, 1500);
$('div').animate({'left':0}, 1500);
$('div').animate({'top':0}, 1500);
});
//不清空動畫佇列，立即停止當前動畫，執行後面佇列的動畫
$('button').eq(1).click(function(){
$('div').stop(); //等價於stop(false,false)
});
//清空動畫佇列，立即停止當前動畫，盒子留在此時的位置（常用）
$('button').eq(2).click(function(){
$('div').stop(true); //等價於stop(true,false)
});
//清空動畫佇列，立即停止當前動畫，並且瞬間完成當前動畫
$('button').eq(3).click(function(){
$('div').stop(true,true);
});
//不清空動畫佇列，立即停止當前動畫，並且瞬間完成當前動畫，繼續執行後面的動畫
$('button').eq(4).click(function(){
$('div').stop(false,true);
});
//不清空動畫佇列，立即停止當前動畫，並且瞬間完成當前動畫，繼續執行後面的動畫
$('button').eq(5).click(function(){
$('div').finish(); //finish()瞬間完成所有動畫佇列！
});
當一個元素身上積累了很多動畫，不經意就積累了，我們稱為“流氓”。
希望新的動畫觸發時，前面這個動畫全部清空，立即停止，防止使用者頻繁觸發事件
方法1：用stop()，清空動畫佇列
//每次點選按鈕，都會讓div增加一個動畫佇列 $('button').eq(0).click(function(){ //先清空所有動畫佇列，然後執行新的動畫 $('div').stop(true).animate({'left':0}, 2000); }); $('button').eq(1).click(function(){ //先清空所有動畫佇列，然後執行新的動畫 $('div').stop(true).animate({'left':1000}, 2000); });
14.7 is()方法
方法2：節流方法，判斷元素是否正在運動過程中，如果是，就不執行後面的操作；如果不是，就執行後面的動畫。
元素都有一個方法叫is() 它可以判斷是否處於某種狀態。
is表示“是不是”，而不是“是”，表示檢測某一個元素否具備某種狀態，返回布林型別。
$(this).is('.t'); //判斷當前被點選的p是不是有.t的類名，是就返回true $(this).is('#t'); //判斷當前被點選的p是不是有#t的id，是就返回true $(this).is('p:odd'); //判斷當前被點選的p是不是奇數，是就返回true $(this).is('p:lt(3)'); //判斷當前被點選的p下標是不是小於3 $(this).is('p:visible'); //判斷當前被點選的p是不是可見
|
$('p').is(':animated'); 判斷這個元素是否正在運動中，返回true或fasle |
判斷是否正在運動中，可以防止動畫的積累：
只要動畫正在進行，那麼我不接受新的命令
和之前學stop()不一樣，動畫正在執行中，立即停止當前動畫，執行新的命令。
$('button').eq(0).click(function(){
if($('div').is(':animated')){
return; //如果當前這個div是在運動，直接return結束後面程式碼的執行
}
$('div').animate({'left':0}, 2000);
});
$('button').eq(1).click(function(){
if($('div').is(':animated')){
return; //如果當前這個div是在運動，直接return結束後面程式碼的執行
}
$('div').animate({'left':1000}, 2000);
});
簡化後的程式碼：
$('button').eq(0).click(function(){
if(!$('div').is(':animated')){
$('div').animate({'left':0}, 2000);
}
});
$('button').eq(1).click(function(){
if(!$('div').is(':animated')){
$('div').animate({'left':1000}, 2000);
}
});
十五、jQuery each()遍歷方法
jQuery的each()方法，表示遍歷，$()選擇出來的元素，把每個被選中的元素匹配，可以認為是一個佇列，那麼each就遍歷這個佇列中的每一個元素，遍歷之後就可以執行一些操作：
each 在英語表示“每一個”
|
$('div p').each(function(index,ele){ 對每一個元素的操作 }) |
【引數解釋】：
|
index 當前被選中元素的編號（索引值） ele 當前被選中的元素（也可以用this代替），如果用this代替，可以不寫這個引數 |
$('div').each(function(index,ele){
//index就是每次進來遍歷的元素下標
//this指向的是每次進來的那個元素
$(this).children().eq(1).css('background-color','red');
});
