一、jQuery選擇器
1.1 jQuery 基礎選擇器
原生 JS 擷取元素方式很多，很雜，而且相容性情況不一緻，是以 jQuery 給我們做了封裝，使擷取元素統一标準。
$(“選擇器”) // 裡面選擇器直接寫 CSS 選擇器即可，但是要加引号
1.2 jQuery 層級選擇器
知識鋪墊
jQuery 設定樣式
$('div').css('屬性', '值') 1.3 隐式疊代
周遊内部 DOM 元素（僞數組形式存儲）的過程就叫做隐式疊代。
簡單了解：給比對到的所有元素進行循環周遊，執行相應的方法，而不用我們再進行循環，簡化我們的操作，友善我們調用。
1.4 jQuery 篩選選擇器
1.5 jQuery 篩選方法
重點記住： parent() children() find() siblings() eq()
1.6 jQuery 裡面的排他思想
想要多選一的效果，排他思想：目前元素設定樣式，其餘的兄弟元素清除樣式。
$(this).css(“color”,”red”);
$(this).siblings(). css(“color”,””);
案例：淘寶服飾精品案例
- 核心原理：滑鼠經過左側盒子某個小li，就讓内容區盒子相對應圖檔顯示，其餘的圖檔隐藏。
- 需要得到目前小li 的索引号，就可以顯示對應索引号的圖檔
- jQuery 得到目前元素索引号 $(this).index()
- 中間對應的圖檔，可以通過 eq(index) 方法去選擇
- 顯示元素 show() 隐藏元素 hide()
鍊式程式設計
鍊式程式設計是為了節省代碼量，看起來更優雅。
$(this).css('color', 'red').sibling().css('color', '');
使用鍊式程式設計一定注意是哪個對象執行樣式。
二、jQuery 樣式操作
2.1 操作 css 方法
jQuery 可以使用 css 方法來修改簡單元素樣式； 也可以操作類，修改多個樣式。
1. 參數隻寫屬性名，則是傳回屬性值
$(this).css(''color'');
2. 參數是屬性名，屬性值，逗号分隔，是設定一組樣式，屬性必須加引号，值如果是數字可以不用跟機關和引号
$(this).css(''color'', ''red'');
3. 參數可以是對象形式，友善設定多組樣式。屬性名和屬性值用冒号隔開， 屬性可以不用加引号
$(this).css({ "color":"white","font-size":"20px"});
2.2 設定類樣式方法
作用等同于以前的 classList，可以操作類樣式， 注意操作類裡面的參數不要加點。
1. 添加類
$(“div”).addClass(''current'');
2. 移除類
$(“div”).removeClass(''current'');
3. 切換類
$(“div”).toggleClass(''current'');
案例：tab 欄切換
點選上部的li，目前li 添加current類，其餘兄弟移除類。
點選的同時，得到目前li 的索引号
讓下部裡面相應索引号的item顯示，其餘的item隐藏
2.3 類操作與className差別
原生 JS 中 className 會覆寫元素原先裡面的類名。 jQuery 裡面類操作隻是對指定類進行操作，不影響原先的類名。
三、jQuery 效果
jQuery 給我們封裝了很多動畫效果，最為常見的如下：
3.1 顯示隐藏效果
1. 顯示文法規範
show([speed,[easing],[fn]])
2. 顯示參數
（1）參數都可以省略， 無動畫直接顯示。
（2）speed：三種預定速度之一的字元串(“slow”,“normal”, or “fast”)或表示動畫時長的毫秒數值(如：1000)。
（3）easing：(Optional) 用來指定切換效果，預設是“swing”，可用參數“linear”。
（4）fn: 回調函數，在動畫完成時執行的函數，每個元素執行一次。
1. 隐藏文法規範
hide([speed,[easing],[fn]])
2. 隐藏參數
（1）參數都可以省略， 無動畫直接顯示。
（2）speed：三種預定速度之一的字元串(“slow”,“normal”, or “fast”)或表示動畫時長的毫秒數值(如：1000)。
（3）easing：(Optional) 用來指定切換效果，預設是“swing”，可用參數“linear”。
（4）fn: 回調函數，在動畫完成時執行的函數，每個元素執行一次。
1. 切換文法規範
toggle([speed,[easing],[fn]])
2. 切換參數
（1）參數都可以省略， 無動畫直接顯示。
（2）speed：三種預定速度之一的字元串(“slow”,“normal”, or “fast”)或表示動畫時長的毫秒數值(如：1000)。
（3）easing：(Optional) 用來指定切換效果，預設是“swing”，可用參數“linear”。
（4）fn: 回調函數，在動畫完成時執行的函數，每個元素執行一次。 建議：平時一般不帶參數，直接顯示隐藏即可。
2.2 滑動效果
1. 下滑效果文法規範
slideDown([speed,[easing],[fn]])
2. 下滑效果參數
（1）參數都可以省略。
（2）speed:三種預定速度之一的字元串(“slow”,“normal”, or “fast”)或表示動畫時長的毫秒數值(如：1000)。
（3）easing:(Optional) 用來指定切換效果，預設是“swing”，可用參數“linear”。
（4）fn: 回調函數，在動畫完成時執行的函數，每個元素執行一次。
1. 上滑效果文法規範
slideUp([speed,[easing],[fn]])
2. 上滑效果參數
（1）參數都可以省略。
（2）speed：三種預定速度之一的字元串(“slow”,“normal”, or “fast”)或表示動畫時長的毫秒數值(如：1000)。
（3）easing：(Optional) 用來指定切換效果，預設是“swing”，可用參數“linear”。
（4）fn: 回調函數，在動畫完成時執行的函數，每個元素執行一次。
1. 滑動切換效果文法規範
slideToggle([speed,[easing],[fn]])
2. 滑動切換效果參數
（1）參數都可以省略。
（2）speed：三種預定速度之一的字元串(“slow”,“normal”, or “fast”)或表示動畫時長的毫秒數值(如：1000)。
（3）easing：(Optional) 用來指定切換效果，預設是“swing”，可用參數“linear”。
（4）fn: 回調函數，在動畫完成時執行的函數，每個元素執行一次。
3.3 事件切換
hover([over,]out)
（1）over:滑鼠移到元素上要觸發的函數（相當于mouseenter）
（2）out:滑鼠移出元素要觸發的函數（相當于mouseleave）
（3）如果隻寫一個函數，則滑鼠經過和離開都會觸發它
3.4 動畫隊列及其停止排隊方法
1. 動畫或效果隊列
動畫或者效果一旦觸發就會執行，如果多次觸發，就造成多個動畫或者效果排隊執行。
2. 停止排隊
stop()
(1）stop() 方法用于停止動畫或效果。
(2) 注意： stop() 寫到動畫或者效果的前面， 相當于停止結束上一次的動畫。
3.5 淡入淡出效果
1. 淡入效果文法規範
fadeIn([speed,[easing],[fn]])
2. 淡入效果參數
（1）參數都可以省略。
（2）speed：三種預定速度之一的字元串(“slow”,“normal”, or “fast”)或表示動畫時長的毫秒數值(如：1000)。
（3）easing：(Optional) 用來指定切換效果，預設是“swing”，可用參數“linear”。
（4）fn: 回調函數，在動畫完成時執行的函數，每個元素執行一次。
1. 淡出效果文法規範
fadeOut([speed,[easing],[fn]])
2. 淡出效果參數
（1）參數都可以省略。
（2）speed：三種預定速度之一的字元串(“slow”,“normal”, or “fast”)或表示動畫時長的毫秒數值(如：1000)。
（3）easing：(Optional) 用來指定切換效果，預設是“swing”，可用參數“linear”。
（4）fn: 回調函數，在動畫完成時執行的函數，每個元素執行一次。
1. 淡入淡出切換效果文法規範
fadeToggle([speed,[easing],[fn]])
2. 淡入淡出切換效果參數
（1）參數都可以省略。
（2）speed：三種預定速度之一的字元串(“slow”,“normal”, or “fast”)或表示動畫時長的毫秒數值(如：1000)。
（3）easing：(Optional) 用來指定切換效果，預設是“swing”，可用參數“linear”。
（4）fn: 回調函數，在動畫完成時執行的函數，每個元素執行一次。
1. 漸進方式調整到指定的不透明度
fadeTo([[speed],opacity,[easing],[fn]])
2. 效果參數
（1）opacity 透明度必須寫，取值 0~1 之間。
（2）speed：三種預定速度之一的字元串(“slow”,“normal”, or “fast”)或表示動畫時長的毫秒數值(如：1000)。必須寫
（3）easing：(Optional) 用來指定切換效果，預設是“swing”，可用參數“linear”。
（4）fn: 回調函數，在動畫完成時執行的函數，每個元素執行一次。
2.6 自定義動畫 animate
1. 文法
animate(params,[speed],[easing],[fn])
2. 參數
（1）params: 想要更改的樣式屬性，以對象形式傳遞，必須寫。 屬性名可以不用帶引号， 如果是複合屬性則需要采取駝峰命名法 borderLeft。其餘參數都可以省略。
（2）speed：三種預定速度之一的字元串(“slow”,“normal”, or “fast”)或表示動畫時長的毫秒數值(如：1000)。
（3）easing：(Optional) 用來指定切換效果，預設是“swing”，可用參數“linear”。
（4）fn: 回調函數，在動畫完成時執行的函數，每個元素執行一次。
案例：王者榮耀手風琴效果
滑鼠經過某個小li 有兩步操作：
目前小li 寬度變為 224px， 同時裡面的小圖檔淡出，大圖檔淡入
其餘兄弟小li寬度變為69px， 小圖檔淡入， 大圖檔淡出
四、jQuery 屬性操作
4.1 設定或擷取元素固有屬性值 prop()
所謂元素固有屬性就是元素本身自帶的屬性，比如 <a> 元素裡面的 href ，比如 <input> 元素裡面的 type。
1. 擷取屬性文法
prop(''屬性'')
2. 設定屬性文法
prop(''屬性'', ''屬性值'')
4.2 設定或擷取元素自定義屬性值 attr()
使用者自己給元素添加的屬性，我們稱為自定義屬性。 比如給 div 添加 index =“1”。
1. 擷取屬性文法
attr(''屬性'') // 類似原生 getAttribute()
2. 設定屬性文法
attr(''屬性'', ''屬性值'') // 類似原生 setAttribute()
改方法也可以擷取 H5 自定義屬性
4.3 資料緩存 data()
data() 方法可以在指定的元素上存取資料，并不會修改 DOM 元素結構。一旦頁面重新整理，之前存放的資料都将被移除。
1. 附加資料文法
data(''name'',''value'') // 向被選元素附加資料
2. 擷取資料文法
date(''name'') // 向被選元素擷取資料
同時，還可以讀取 HTML5 自定義屬性 data-index ，得到的是數字型
五、jQuery 内容文本值
主要針對元素的内容還有表單的值操作。
1. 普通元素内容 html()（ 相當于原生inner HTML)
html() // 擷取元素的内容 html(''内容'') // 設定元素的内容
2. 普通元素文本内容 text() (相當與原生 innerText)
text() // 擷取元素的文本内容
text(''文本内容'') // 設定元素的文本内容
3. 表單的值 val()（ 相當于原生value)
val() // 擷取表單的值
val(''内容'') // 設定表單的值
六、jQuery 元素操作
主要是周遊、建立、添加、删除元素操作。
6.1 周遊元素
jQuery 隐式疊代是對同一類元素做了同樣的操作。 如果想要給同一類元素做不同操作，就需要用到周遊。
文法1：
$("div").each(function (index, domEle) { xxx; }）
1. each() 方法周遊比對的每一個元素。主要用DOM處理。 each 每一個
2. 裡面的回調函數有2個參數： index 是每個元素的索引号; demEle 是每個DOM元素對象，不是jquery對象
3. 是以要想使用jquery方法，需要給這個dom元素轉換為jquery對象 $(domEle)
文法2：
$.each(object，function (index, element) { xxx; }） 1. $.each()方法可用于周遊任何對象。主要用于資料處理，比如數組，對象
2. 裡面的函數有2個參數： index 是每個元素的索引号; element 周遊内容
6.2 建立元素
文法：
$(''<li></li>'');
動态的建立了一個 <li>
6.3 添加元素
1. 内部添加
element.append(''内容'')
把内容放入比對元素内部最後面，類似原生 appendChild。
element.prepend(''内容'') 把内容放入比對元素内部最前面。
2. 外部添加
element.after(''内容'') // 把内容放入目标元素後面
element.before(''内容'') // 把内容放入目标元素前面
内部添加元素，生成之後，它們是父子關系。
外部添加元素，生成之後，他們是兄弟關系。
6.4 删除元素
remove 删除元素本身。
empt() 和 html('''') 作用等價，都可以删除元素裡面的内容，隻不過 html 還可以設定内容。
七、jQuery 尺寸、位置操作
7.1 jQuery 尺寸
- 以上參數為空，則是擷取相應值，傳回的是數字型。
- 如果參數為數字，則是修改相應值。
- 參數可以不必寫機關。
7.2 jQuery 位置
位置主要有三個： offset()、position()、scrollTop()/scrollLeft()
1. offset() 設定或擷取元素偏移
- offset() 方法設定或傳回被選元素相對于文檔的偏移坐标，跟父級沒有關系。
- 該方法有2個屬性 left、top 。offset().top 用于擷取距離文檔頂部的距離，offset().left 用于擷取距離文檔左側的距離。
- 可以設定元素的偏移：offset({ top: 10, left: 30 });
2. position() 擷取元素偏移
- position() 方法用于傳回被選元素相對于帶有定位的父級偏移坐标，如果父級都沒有定位，則以文檔為準。
- 該方法有2個屬性 left、top。position().top 用于擷取距離定位父級頂部的距離，position().left 用于擷取距離定位父級左側的距離。
- 該方法隻能擷取。
3. scrollTop()/scrollLeft() 設定或擷取元素被卷去的頭部和左側
- scrollTop() 方法設定或傳回被選元素被卷去的頭部。
- 不跟參數是擷取，參數為不帶機關的數字則是設定被卷去的頭部。