本節案例請移步查看：jQuery-案例
歡迎學習交流！！！
持續更新中…

1. jQuery概述

JavaScript庫

JavaScript庫：即 library，是一個封裝好的特定的集合（方法和函式），從封裝一大堆函式的角度理解庫，就是在這個庫中，封裝了很多預先定義好的函式在里面，比如影片animate、hide、show，比如獲取元素等，
簡單理解： 就是一個JS 檔案，里面對原生js代碼進行了封裝，存放到里面，這樣可以快速高效的使用這些封裝好的功能了，
比如 jQuery，就是為了快速方便的操作DOM，里面基本都是函式（方法），
常見的JS庫：jQuery、Prototype、YUI、Dojo、Ext JS、移動端的zepto

jQuery概念

j：javascript，Query：查詢，即查詢js，把js中的DOM操作做了封裝，可以快速的查詢使用里面的功能，
jQuery封裝了JS常用的功能代碼，優化了DOM操作、事件處理、影片設計和Ajax互動

優點：

• 輕量級，核心檔案才幾十kb，不會影響頁面加載速度
• 跨瀏覽器兼容，基本兼容了現在主流的瀏覽器
• 鏈式編程、隱式迭代
• 對事件、樣式、影片支持，大大簡化了DOM操作
• 支持插件擴展開發，有著豐富的第三方的插件，例如：樹形選單、日期控制元件、輪播圖等
• 免費、開源

jQuery的入口函式

最簡便方式：（一定要記住）

$(function () {   
    ...  // 此處是頁面 DOM 加載完成的入口
 }) ;         

便于理解：

$(document).ready(function(){
   ...  //  此處是頁面DOM加載完成的入口
});       

• 等DOM結構渲染完畢后即可執行內部代碼，不必等到所有外部資源加載完成，jQuery幫助完成了封裝
• 相當于原生 js 中的 DOMContentLoaded，
• 不同于原生 js 中的 load 事件是等頁面檔案、外部的 js 檔案、css檔案、圖片加載完畢才執行內部代碼，

jQuery的頂級物件$

• $ 是 jQuery 的別稱，在代碼中可以使用 jQuery 代替 $，
• $ 是jQuery 的頂級物件， 相當于原生JavaScript中的 window，把元素利用$包裝成jQuery物件，就可以呼叫jQuery 的方法，

jQuery物件和DOM物件

// 1. 用原生 JS 獲取來的物件就是 DOM 物件
var myDiv = document.querySelector('div');   //myDiv是DOM物件
console.log(myDiv)
// 2. jQuery 方法獲取的元素就是 jQuery 物件，
$('div');    //$('div')是一個jQuery物件
console.log($('div'));
// 3. jQuery 物件本質是： 利用$對DOM 物件包裝后產生的物件（偽陣列形式存盤），
myDiv.style.display = 'none';
myDiv.hide();  //myDiv是一個dom物件，不能使用jQuery中的hide方法
$('div').style.display = 'none';   //這個$('div')是一個jQuery物件，不能使用原生js的屬性和方法

jQuery物件和DOM物件之間的相互轉換：

因為原生js 比 jQuery 更大，原生的一些屬性和方法 jQuery沒有給我們封裝. 要想使用這些屬性和方法需要把jQuery物件轉換為DOM物件才能使用，

1. DOM 物件轉換為 jQuery 物件： $(DOM物件)

$('div')

2. jQuery 物件轉換為 DOM 物件（兩種方式)

$('div') [index]       index 是索引號           

$('div') .get(index)    index 是索引號      

2. jQuery常用API

2.1 jQuery選擇器

基礎選擇器

$(“選擇器”)   //  里面選擇器直接寫 CSS 選擇器即可，但是要加引號      

層級選擇器

篩選選擇器

篩選選擇器：

篩選方法：

parent() children() find() siblings() eq()需重點記憶
屬性過濾選擇器：

【案例】新浪下拉選單案例

表單選擇器

子元素選擇器

• :nth-child(even/odd)：能選取每個父元素下的索引值為偶（數

隱式迭代

jQuery設定樣式：

$('div').css('屬性','值')

隱式迭代：遍歷內部DOM元素（偽陣列形式存盤）的程序，即給匹配到的所有元素進行回圈遍歷，執行相應的方法，而不用手動操作再進行回圈，簡化操作，方便呼叫，

jQuery里面的排他思想

實作多選一的效果，排他思想：當前元素設定樣式，其余的兄弟元素清除樣式

$(this).css(“color”,”red”);
$(this).siblings(). css(“color”,””);

鏈式編程：

可以節約代碼量，使代碼看起來更優雅，

$(this).css('color', 'red').sibling().css('color', '');     

注意：使用鏈式編程一定要注意是哪個物件執行樣式

2.2 jQuery樣式操作

操作CSS方法：可以修改簡單樣式、操作類、修改多個樣式

1. 引數只有屬性名則表示回傳屬性值（無修改的效果）

$(this).css(''color'');

2. 引數是屬性名，屬性值，逗號分隔，是設定一組樣式，數字值可以不用跟單位和引號

$(this).css(''color'', ''red'');

3. 設定多組樣式：引數以物件形式

$(this).css({ "color":"white","font-size":"20px"});

設定類樣式方法：相當于classList，注意操作類中的引數不加點

【案例】tab欄切換案例

類操作與className區別：

原生JS中className會覆寫元素原先里面的類名，
jQuery里面類操作知識對指定類進行操作，不影響原先的類名，

<div class="one"></div>
<script>
	//var one = dovument.querySelector(".one");
	//one.className = "two";  會把原先的類名"one"給覆寫掉
	$(".one").removeClass("two");   //不會覆寫掉，會在類名one后面追加two--->"one two"
</script>

2.3 jQuery(影片)效果

顯示與隱藏效果

引數說明：

1. 引數都可以省略，無影片直接顯示
2. speed：三種預定速度之一的字串(“slow”,“normal”, or “fast”)或表示影片時長的毫秒數值(如：1000)
3. easing：(Optional) 用來指定切換效果，默認是“swing”，可用引數“linear”，
4. fn: 回呼函式，在影片完成時執行的函式，每個元素執行一次，
5. 在使用toggle中，一般情況下不加引數，直接顯示隱藏即可

滑動效果及事件切換

滑動效果：

引數說明同上

//事件切換hover就是滑鼠經過和離開的復合寫法
$(".nav>li).hover(function() {
	$(this).children("ul").slideDown(200);
},function() {
	$(this).children("ul").slideUp(200);
});

事件切換：

1. over：相當于mouseenter，滑鼠移到元素上要觸發的函式
2. out：相當于mouseleave，滑鼠移除元素要觸發的函式
3. 若只寫一個函式，則滑鼠經過和離開都會觸發它

//只寫一個函式：滑鼠經過和離開都會觸發這個函式
$(".nav>li).hover(function() {
	$(this).children("ul").slideToggle(200);
});

影片佇列及停止排隊方法

影片或效果佇列：影片或效果一旦觸發就會執行，若多次觸發，就會造成多個影片或效果排隊執行

停止排隊：stop()

• 該方法用于停止影片或效果
• 注意：stop()寫到影片或者效果的前面，相當于停止結束上一次的影片

$(".nav>li).hover(function() {
	$(this).children("ul").stop().slideToggle(200);
});

淡入淡出效果

• opacity透明度必須寫，取值0~1之間
• speed必須寫，其余引數說明同上

自定義影片animate

引數：

• params: 想要更改的樣式屬性，以物件形式傳遞，必須寫， 屬性名可以不用帶引號， 如果是復合屬性則需要采取駝峰命名法 borderLeft，其余引數都可以省略