jQuery 是一個(gè)快速、小巧、功能豐富的 JavaScript 庫(kù)。它的核心設(shè)計(jì)思想是 "Write Less, Do More"（寫(xiě)得更少，做得更多），通過(guò)封裝常見(jiàn)的 JavaScript 任務(wù)，提供簡(jiǎn)潔易用的 API，解決瀏覽器兼容性問(wèn)題，讓 Web 開(kāi)發(fā)更加高效。

jQuery雖然不再是現(xiàn)代Web開(kāi)發(fā)的必需品，但在維護(hù)舊項(xiàng)目、快速原型開(kāi)發(fā)或特定場(chǎng)景下仍有價(jià)值。jQuery的學(xué)習(xí)從新手到高手分為3個(gè)階段：核心基礎(chǔ)-選擇器、DOM操作、事件處理；中級(jí)技能-Ajax、動(dòng)畫(huà)效果、插件開(kāi)發(fā)；高級(jí)理解-性能優(yōu)化、與原生JS互操作、架構(gòu)理解。

1 jQuery 概述

1.1 JavaScript 庫(kù)

庫(kù)，是用于開(kāi)發(fā)軟件的子程序集合。庫(kù)和可執(zhí)行文件的區(qū)別是，庫(kù)不是獨(dú)立程序，他們是向其他程序提供服務(wù)的代碼庫(kù)鏈接。

JavaScript 庫(kù)：即 library，是一個(gè)封裝好的特定的集合（方法和函數(shù)）。就是把各種常用的代碼片段，組織起來(lái)放在一個(gè) js 文件里，組成一個(gè)包，這個(gè)包就是 JavaScript 庫(kù)。

簡(jiǎn)單理解：就是一個(gè) JS文件，里面對(duì)我們?cè)?js 代碼進(jìn)行了封裝，存放到里面。這樣我們就可以快速高效的使用這些封裝好的功能了。

比如 jQuery，就是為了快速方便的操作 DOM，里面基本都是函數(shù)（方法）。再比如 Prototype、Dojo、Extjs 、 YUI、移動(dòng)端的 zepto 等等，這些都是優(yōu)秀的 JavaScript 庫(kù)。它們都是對(duì)原生 JavaScript 的封裝，內(nèi)部都是用 JavaScript 實(shí)現(xiàn)的。

1.2 jQuery

jQuery 是一個(gè)快速、簡(jiǎn)潔的 JavaScript 框架，是繼 Prototype 之后又一個(gè)優(yōu)秀的 JavaScript 代碼庫(kù)（ 或 JavaScript 框架 ）。 jQuery 設(shè)計(jì)的宗旨是 “write Less，Do More”，即倡導(dǎo)寫(xiě)更少的代碼，做更多的事情。

jQuery = javascript Query（查詢(xún)）。意思是查詢(xún) js，把 js 中的 DOM 操作做了封裝，我們可以快速的查詢(xún)使用里面的功能。

它封裝 JavaScript 常用的功能代碼，提供一種簡(jiǎn)便的 JavaScript 設(shè)計(jì)模式，優(yōu)化 HTML 文檔操作、事件處理、動(dòng)畫(huà)設(shè)計(jì)和 Ajax 交互。

優(yōu)勢(shì)：

1. 輕量級(jí)。體積小，不會(huì)影響頁(yè)面加載速度
2. 強(qiáng)大的選擇器
3. 方便的選擇頁(yè)面元素（模仿 css 選擇器更精確、更靈活）
4. 出色的 DOM 操作的封裝
5. 對(duì)事件、樣式、動(dòng)畫(huà)支持，大大簡(jiǎn)化了 DOM 操作
6. 跨瀏覽器兼容?；炯嫒萘爽F(xiàn)在主流的瀏覽器
7. 鏈?zhǔn)讲僮鳌㈦[式迭代
8. 支持插件擴(kuò)展開(kāi)發(fā)。有著豐富的第三方插件。
9. 免費(fèi)、開(kāi)源

2 jQuery 基本使用

2.1 jQuery 下載

① 官網(wǎng)地址：jQuery

② 版本區(qū)別：

• 1x：兼容IE678,使用最為廣泛，官網(wǎng)只做BUG維護(hù)，功能不再新增。因此一般項(xiàng)目來(lái)說(shuō)，使用1.X版本就可以了。

• 2x：不兼容ie678，很少有人使用，官方只做BUG維護(hù)，功能不再新增。如果不考慮兼容低版本的瀏覽器可以使用2.x。(過(guò)渡)

• 3x：不兼容ie678，只支持最新的瀏覽器。除非特殊要求，一般不會(huì)使用3.x版本的，很多老的jQuery插件不支持這個(gè)版本。

2.2 導(dǎo)入方式

方式一：本地導(dǎo)入

直接在需要使用 jQuery 的頁(yè)面引入 .js 文件：

<script src=" jQuery.js 文件路徑"></script>

方式二：在線(xiàn)導(dǎo)入

我們可以通過(guò)在 script 的 src 屬性中寫(xiě)一個(gè)網(wǎng)址來(lái)導(dǎo)入在線(xiàn)的 jquery 代碼。

<script src="http://code.jquery.com/jquery-latest.js"></script>

2.3 jQuery 的入口函數(shù)

• Js 入口函數(shù)會(huì)在 DOM 元素加載完畢并且圖片也加載完畢之后再執(zhí)行
• jQuery 入口函數(shù)會(huì)等到 DOM 元素加載完畢，但不會(huì)等到圖片加載完畢再執(zhí)行

$(document).ready(function (){
    alert("hello jquery");
})
jQuery(document).ready(function () {
    alert("hello jquery");
})

// 簡(jiǎn)化方式，推薦
$(function () {
    alert("hi jquery");
})
jQuery(function () {
    alert("hi jquery");
})

2.4 jQuery 的頂級(jí)對(duì)象 $

• $是 jQuery 的別稱(chēng)，在代碼中可以使用 jQuery 代替$，但為了方便，通常都使用$。

• 沖突——多庫(kù)共存

  原因：隨著jQuery的流行，采用jQuery和$符為命名空間的 js 庫(kù)越來(lái)越多，當(dāng)然 jQuery 的$符也是參照的 Prototype庫(kù)的，所以當(dāng)多個(gè)庫(kù)同時(shí)以$符或者 jQuery 為命名空間時(shí)，那么此時(shí)，就會(huì)產(chǎn)生沖突。

  解決方法：

1. 釋放使用權(quán)

jQuery.noConflict();
//1.釋放操作在其他函數(shù)之前
//2.釋放后不能用dollar符

2. 修改訪(fǎng)問(wèn)符號(hào)

var suiBian = jQuery.noConflict();
//此時(shí)suiBian為新的訪(fǎng)問(wèn)符號(hào)

2.5 DOM對(duì)象 和 jQuery 對(duì)象

DOM 對(duì)象：用原生 js 獲取過(guò)來(lái)的對(duì)象就是 DOM 對(duì)象。

jQuery 對(duì)象：用 jQuery 方式獲取過(guò)來(lái)的對(duì)象就是 jQuery 對(duì)象。本質(zhì)：通過(guò) $ 把 DOM 元素進(jìn)行了封裝（偽數(shù)組形式存儲(chǔ)）。

區(qū)別：jQuery 對(duì)象只能使用 jQuery 方法，反之亦然。

相互轉(zhuǎn)換：

• DOM --> jQuery

$('DOM對(duì)象');

• jQuery --> DOM（兩種方式）

$('DOM對(duì)象')[index]; // index 是索引號(hào)
$('DOM對(duì)象').get(index);

3 jQuery 常用 API

3.1 jQuery 選擇器

3.1.1 jQuery 基礎(chǔ)選擇器

jQuery選擇器雖然很多，但是選擇器之間可以相互替代，就是說(shuō)獲取一個(gè)元素，你會(huì)有很多種方法獲取到。所以我們平時(shí)真正能用到的只是少數(shù)的最常用的選擇器。

$(“選擇器”) // 選擇器格式與 css 選擇器格式一摸一樣

3.1.2 jQuery 層級(jí)選擇器

3.1.3 過(guò)濾選擇器

3.1.4 篩選選擇器（方法）

篩選選擇器的功能與過(guò)濾選擇器有點(diǎn)類(lèi)似，但是用法不一樣，篩選選擇器主要是方法。

3.1.5 排他思想

$(function() {
  $("button").click(function(){
      $(this).css();  // 對(duì)自己設(shè)置變化
      $(this).siblings("button").css();  // 給其他兄弟去掉變化
  })
})

3.1.6 鏈?zhǔn)骄幊?/h4>

$(function() {
  $("button").click(function(){
   	$(this).css().siblings("button").css();  // 對(duì)自己設(shè)置變化,給其他兄弟去掉變化
  })
})

3.1.7 隱式迭代

遍歷 jQuery 對(duì)象內(nèi)部 DOM 元素（偽數(shù)組形式存儲(chǔ)）的過(guò)程就叫隱式迭代

簡(jiǎn)單理解：給匹配的所有元素進(jìn)行循環(huán)遍歷，執(zhí)行相應(yīng)的方法，而不是我們?cè)龠M(jìn)行循環(huán)，簡(jiǎn)化我們的操作，方便我們的調(diào)用。

// 給四個(gè)div設(shè)置背景顏色為粉色 jquery對(duì)象不能使用style
$("div").css("background", "pink");
// 隱式迭代就是把匹配的所有元素內(nèi)部進(jìn)行遍歷循環(huán)，給每一個(gè)元素添加css這個(gè)方法
$("ul li").css("color", "red");

3.2 jQuery 樣式操作

3.2.1 操作 css 方法

jQuery 可以使用 css 方法來(lái)修改簡(jiǎn)單元素樣式；也可以操作類(lèi)，修改多個(gè)樣式。

• 參數(shù)只寫(xiě)屬性名，則是返回屬性值

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

• 參數(shù)是屬性名，屬性值，中間由逗號(hào)分隔，是一組樣式，屬性必須加引號(hào)，值如果是數(shù)字可以不用跟單位和引號(hào)

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

• 參數(shù)可以是對(duì)象形式，方便設(shè)置多組樣式。屬性名和屬性值用冒號(hào)隔開(kāi)，屬性可以不用加引號(hào)

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

3.2.2 設(shè)置樣式類(lèi)方法

作用等同于以前的 classList，可以操作類(lèi)樣式，注意操作類(lèi)里面的參數(shù)不要加點(diǎn)

• 添加類(lèi)

$("div").addClass("current");

• 移除類(lèi)

$("div").removeClass("current");

• 切換類(lèi)

$("div").toggleClass("current");

3.2.3 與原生 js 區(qū)別

// js 中的 className 會(huì)覆蓋元素原先里面的類(lèi)名
var one = document.querySelector(".one");
one.className = "two";  // one : class="two"

// jQuery 里面的類(lèi)操作只是對(duì)指定類(lèi)進(jìn)行操作，不影響原先的類(lèi)名
$(".one").addClass("two");  // one: class="one two"

3.3 jQuery 效果

3.3.1 顯示隱藏效果

① 顯示效果

• 語(yǔ)法規(guī)范

show([speed,[easing],[fn]])

• 概述

  • 顯示隱藏的匹配元素。

  • 這個(gè)就是 ‘show( speed, [callback] )’ 無(wú)動(dòng)畫(huà)的版本。如果選擇的元素是可見(jiàn)的，這個(gè)方法將不會(huì)改變?nèi)魏螙|西。無(wú)論這個(gè)元素是通過(guò)hide()方法隱藏的還是在CSS里設(shè)置了display:none;，這個(gè)方法都將有效。

• 顯示參數(shù)

  • 參數(shù)都可以省略，省略后沒(méi)有動(dòng)畫(huà)，直接顯示。
  • speed:三種預(yù)定速度之一的字符串(“slow”,“normal”, or “fast”)或表示動(dòng)畫(huà)時(shí)長(zhǎng)的毫秒數(shù)值(如：1000)。
  • easing:(Optional) 用來(lái)指定切換效果，默認(rèn)是"swing"，可用參數(shù)"linear"。
  • fn:在動(dòng)畫(huà)完成時(shí)執(zhí)行的函數(shù)，每個(gè)元素執(zhí)行一次。

② 隱藏效果

• 語(yǔ)法規(guī)范

hide([speed,[easing],[fn]])

• 概述

  • 隱藏顯示的元素。

  • 這個(gè)就是 ‘hide( speed, [callback] )’ 的無(wú)動(dòng)畫(huà)版。如果選擇的元素是隱藏的，這個(gè)方法將不會(huì)改變?nèi)魏螙|西。

• 顯示參數(shù)

  • 參數(shù)都可以省略，省略后沒(méi)有動(dòng)畫(huà)，直接隱藏。
  • speed:三種預(yù)定速度之一的字符串(“slow”,“normal”, or “fast”)或表示動(dòng)畫(huà)時(shí)長(zhǎng)的毫秒數(shù)值(如：1000)。
  • easing:(Optional) 用來(lái)指定切換效果，默認(rèn)是"swing"，可用參數(shù)"linear"。
  • fn:在動(dòng)畫(huà)完成時(shí)執(zhí)行的函數(shù)，每個(gè)元素執(zhí)行一次。

3.3.2 滑動(dòng)效果

① 下滑效果

• 語(yǔ)法規(guī)范

slideDown([speed],[easing],[fn])

• 概述

  • 通過(guò)高度變化（向下增大）來(lái)動(dòng)態(tài)地顯示所有匹配的元素，在顯示完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)。
  • 這個(gè)動(dòng)畫(huà)效果只調(diào)整元素的高度，可以使匹配的元素以“滑動(dòng)”的方式顯示出來(lái)。

• 顯示參數(shù)

  • 參數(shù)都可以省略。

  • speed:三種預(yù)定速度之一的字符串(“slow”,“normal”, or “fast”)或表示動(dòng)畫(huà)時(shí)長(zhǎng)的毫秒數(shù)值(如：1000)。

  • easing:(Optional) 用來(lái)指定切換效果，默認(rèn)是"swing"，可用參數(shù)"linear"。

  • fn:在動(dòng)畫(huà)完成時(shí)執(zhí)行的函數(shù)，每個(gè)元素執(zhí)行一次。

② 上滑效果

• 語(yǔ)法規(guī)范

slideUp([speed,[easing],[fn]])

• 概述

  • 通過(guò)高度變化（向上減小）來(lái)動(dòng)態(tài)地隱藏所有匹配的元素，在隱藏完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)。
  • 這個(gè)動(dòng)畫(huà)效果只調(diào)整元素的高度，可以使匹配的元素以“滑動(dòng)”的方式隱藏起來(lái)。

• 顯示參數(shù)

  • 參數(shù)都可以省略。

  • speed:三種預(yù)定速度之一的字符串(“slow”,“normal”, or “fast”)或表示動(dòng)畫(huà)時(shí)長(zhǎng)的毫秒數(shù)值(如：1000)。

  • easing:(Optional) 用來(lái)指定切換效果，默認(rèn)是"swing"，可用參數(shù)"linear"。

  • fn:在動(dòng)畫(huà)完成時(shí)執(zhí)行的函數(shù)，每個(gè)元素執(zhí)行一次。

③ 滑動(dòng)效果

• 語(yǔ)法規(guī)范

slideToggle([speed],[easing],[fn])

• 概述

  • 通過(guò)高度變化來(lái)切換所有匹配元素的可見(jiàn)性，并在切換完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)。
  • 這個(gè)動(dòng)畫(huà)效果只調(diào)整元素的高度，可以使匹配的元素以“滑動(dòng)”的方式隱藏或顯示。

• 顯示參數(shù)

  • 參數(shù)都可以省略。

  • speed:三種預(yù)定速度之一的字符串(“slow”,“normal”, or “fast”)或表示動(dòng)畫(huà)時(shí)長(zhǎng)的毫秒數(shù)值(如：1000)。

  • easing:(Optional) 用來(lái)指定切換效果，默認(rèn)是"swing"，可用參數(shù)"linear"。

  • fn:在動(dòng)畫(huà)完成時(shí)執(zhí)行的函數(shù)，每個(gè)元素執(zhí)行一次。

3.3.3 事件切換

• 語(yǔ)法規(guī)范

hover([over,]out)

• 概述

  • 一個(gè)模仿懸停事件（鼠標(biāo)移動(dòng)到一個(gè)對(duì)象上面及移出這個(gè)對(duì)象）的方法。這是一個(gè)自定義的方法，它為頻繁使用的任務(wù)提供了一種“保持在其中”的狀態(tài)。
  • 當(dāng)鼠標(biāo)移動(dòng)到一個(gè)匹配的元素上面時(shí)，會(huì)觸發(fā)指定的第一個(gè)函數(shù)。當(dāng)鼠標(biāo)移出這個(gè)元素時(shí)，會(huì)觸發(fā)指定的第二個(gè)函數(shù)。而且，會(huì)伴隨著對(duì)鼠標(biāo)是否仍然處在特定元素中的檢測(cè)（例如，處在div中的圖像），如果是，則會(huì)繼續(xù)保持“懸停”狀態(tài)，而不觸發(fā)移出事件（修正了使用mouseout事件的一個(gè)常見(jiàn)錯(cuò)誤）。

• 顯示參數(shù)

  • over:鼠標(biāo)移到元素上要觸發(fā)的函數(shù)（相當(dāng)于 mouseenter）。

  • out:鼠標(biāo)移出元素要觸發(fā)的函數(shù)（相當(dāng)于 mouseenter）。

3.3.4 動(dòng)畫(huà)隊(duì)列及其停止排隊(duì)方法

① 動(dòng)畫(huà)或效果隊(duì)列

動(dòng)畫(huà)或者效果一旦觸發(fā)就會(huì)執(zhí)行，如果多次觸發(fā)，就造成多個(gè)動(dòng)畫(huà)或者效果排隊(duì)執(zhí)行。

② 停止排隊(duì)

• 語(yǔ)法規(guī)范

stop([clearQueue],[jumpToEnd])

• 概述

  • 停止所有在指定元素上正在運(yùn)行的動(dòng)畫(huà)。
  • 如果隊(duì)列中有等待執(zhí)行的動(dòng)畫(huà)(并且clearQueue沒(méi)有設(shè)為true)，他們將被馬上執(zhí)行。

• 顯示參數(shù)

  • queue:用來(lái)停止動(dòng)畫(huà)的隊(duì)列名稱(chēng)。

  • clearQueue:如果設(shè)置成true，則清空隊(duì)列?？梢粤⒓唇Y(jié)束動(dòng)畫(huà)。

  • jumpToEnd:如果設(shè)置成true，則完成隊(duì)列?？梢粤⒓赐瓿蓜?dòng)畫(huà)。

注意：stop() 寫(xiě)到動(dòng)畫(huà)或者效果的前面，相當(dāng)于停止結(jié)束上一次的動(dòng)畫(huà)。

3.3.5 淡入淡出效果

① 淡入效果

• 語(yǔ)法規(guī)范

fadeIn([speed],[easing],[fn])

• 概述

  • 通過(guò)不透明度的變化來(lái)實(shí)現(xiàn)所有匹配元素的淡入效果，并在動(dòng)畫(huà)完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)。
  • 這個(gè)動(dòng)畫(huà)只調(diào)整元素的不透明度，也就是說(shuō)所有匹配的元素的高度和寬度不會(huì)發(fā)生變化。

• 顯示參數(shù)

  • 參數(shù)都可以省略

  • speed:三種預(yù)定速度之一的字符串(“slow”,“normal”, or “fast”)或表示動(dòng)畫(huà)時(shí)長(zhǎng)的毫秒數(shù)值(如：1000)。

  • easing:(Optional) 用來(lái)指定切換效果，默認(rèn)是"swing"，可用參數(shù)"linear"。

  • fn:在動(dòng)畫(huà)完成時(shí)執(zhí)行的函數(shù)，每個(gè)元素執(zhí)行一次。

② 淡出效果

• 語(yǔ)法規(guī)范

fadeOut([speed],[easing],[fn])

• 概述

  • 通過(guò)不透明度的變化來(lái)實(shí)現(xiàn)所有匹配元素的淡出效果，并在動(dòng)畫(huà)完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)。
  • 這個(gè)動(dòng)畫(huà)只調(diào)整元素的不透明度，也就是說(shuō)所有匹配的元素的高度和寬度不會(huì)發(fā)生變化。

• 顯示參數(shù)

  • 參數(shù)都可以省略。
  • speed:三種預(yù)定速度之一的字符串(“slow”,“normal”, or “fast”)或表示動(dòng)畫(huà)時(shí)長(zhǎng)的毫秒數(shù)值(如：1000)。
  • easing:(Optional) 用來(lái)指定切換效果，默認(rèn)是"swing"，可用參數(shù)"linear"。
  • fn:在動(dòng)畫(huà)完成時(shí)執(zhí)行的函數(shù)，每個(gè)元素執(zhí)行一次。

③ 淡入淡出切換效果

• 語(yǔ)法規(guī)范

fadeToggle([speed,[easing],[fn]])

• 概述

  • 通過(guò)不透明度的變化來(lái)開(kāi)關(guān)所有匹配元素的淡入和淡出效果，并在動(dòng)畫(huà)完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)。
  • 這個(gè)動(dòng)畫(huà)只調(diào)整元素的不透明度，也就是說(shuō)所有匹配的元素的高度和寬度不會(huì)發(fā)生變化。

• 顯示參數(shù)

  • 參數(shù)都可以省略。
  • speed:三種預(yù)定速度之一的字符串(“slow”,“normal”, or “fast”)或表示動(dòng)畫(huà)時(shí)長(zhǎng)的毫秒數(shù)值(如：1000)。
  • easing:(Optional) 用來(lái)指定切換效果，默認(rèn)是"swing"，可用參數(shù)"linear"。
  • fn:在動(dòng)畫(huà)完成時(shí)執(zhí)行的函數(shù)，每個(gè)元素執(zhí)行一次。

④ 漸進(jìn)方式調(diào)整到指定的不透明度

• 語(yǔ)法規(guī)范

fadeTo([[speed],opacity,[easing],[fn]])

• 概述

  • 把所有匹配元素的不透明度以漸進(jìn)方式調(diào)整到指定的不透明度，并在動(dòng)畫(huà)完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)。
  • 這個(gè)動(dòng)畫(huà)只調(diào)整元素的不透明度，也就是說(shuō)所有匹配的元素的高度和寬度不會(huì)發(fā)生變化。

• 顯示參數(shù)

  • speed:三種預(yù)定速度之一的字符串(“slow”,“normal”, or “fast”)或表示動(dòng)畫(huà)時(shí)長(zhǎng)的毫秒數(shù)值(如：1000)。
  • opacity:一個(gè)0至1之間表示透明度的數(shù)字。
  • easing:(Optional) 用來(lái)指定切換效果，默認(rèn)是"swing"，可用參數(shù)"linear"。
  • fn:在動(dòng)畫(huà)完成時(shí)執(zhí)行的函數(shù)，每個(gè)元素執(zhí)行一次。

3.3.6 自定義動(dòng)畫(huà) animate

• 語(yǔ)法規(guī)范

animate(params,[speed],[easing],[fn])

• 概述

  • 用于創(chuàng)建自定義動(dòng)畫(huà)的函數(shù)。
  • 這個(gè)函數(shù)的關(guān)鍵在于指定動(dòng)畫(huà)形式及結(jié)果樣式屬性對(duì)象。這個(gè)對(duì)象中每個(gè)屬性都表示一個(gè)可以變化的樣式屬性（如“height”、“top”或“opacity”）。注意：所有指定的屬性必須用駱駝形式，比如用marginLeft代替margin-left。
  • 而每個(gè)屬性的值表示這個(gè)樣式屬性到多少時(shí)動(dòng)畫(huà)結(jié)束。如果是一個(gè)數(shù)值，樣式屬性就會(huì)從當(dāng)前的值漸變到指定的值。如果使用的是“hide”、“show”或“toggle”這樣的字符串值，則會(huì)為該屬性調(diào)用默認(rèn)的動(dòng)畫(huà)形式。

• 顯示參數(shù)

  • params:一組包含作為動(dòng)畫(huà)屬性和終值的樣式屬性和及其值的集合（用對(duì)象實(shí)現(xiàn)），必須寫(xiě)。
  • speed:三種預(yù)定速度之一的字符串(“slow”,“normal”, or “fast”)或表示動(dòng)畫(huà)時(shí)長(zhǎng)的毫秒數(shù)值(如：1000)。
  • easing:(Optional) 用來(lái)指定切換效果，默認(rèn)是"swing"，可用參數(shù)"linear"。
  • fn:在動(dòng)畫(huà)完成時(shí)執(zhí)行的函數(shù)，每個(gè)元素執(zhí)行一次。

3.4 屬性操作

3.4.1 設(shè)置或獲取元素固有屬性值 prop()

所謂元素固有屬性就是元素本身自帶的屬性，如<a>元素里面的herf，<input>元素里面的type。

① 獲取屬性語(yǔ)法

prop("屬性")

② 設(shè)置屬性語(yǔ)法

prop("屬性","屬性值")

3.4.2 設(shè)置或獲取元素自定義屬性值 attr()

自定義屬性就是用戶(hù)自己給元素添加的屬性。比如給li添加index="1"。

① 獲取屬性語(yǔ)法

attr("屬性")

② 設(shè)置屬性語(yǔ)法

attr("屬性","屬性值")

該方法也可用于獲取 H5 自定義屬性。

3.4.3 數(shù)據(jù)緩存 data()

data()方法可以在指定的元素上存取數(shù)據(jù)，并不會(huì)修改DOM 的元素結(jié)構(gòu)，一旦頁(yè)面刷新，之前存放的數(shù)據(jù)都將被移除。

① 附加數(shù)據(jù)語(yǔ)法

data("key","value")  // 向被選元素附加數(shù)據(jù)

② 獲取數(shù)據(jù)語(yǔ)法

data("key")  // 從被選元素獲取數(shù)據(jù)

如果瀏覽器支持 HTML5，同樣可以讀取該 DOM 中使用 data-[key] = [value] 所存儲(chǔ)的值。

3.5 jQuery 內(nèi)容文本值

3.5.1 普通元素內(nèi)容 html()

相當(dāng)于原生 js 中的 innerHTML

html()  // 獲取元素的內(nèi)容
html("內(nèi)容")  // 設(shè)置元素的內(nèi)容

3.5.2 普通元素文本內(nèi)容 text()

相當(dāng)于原生 js 中的 innerText

text()  // 獲取元素的內(nèi)容
text("內(nèi)容")  // 設(shè)置元素的內(nèi)容

3.5.3 表單值 val()

相當(dāng)于原生 js 中的 value

val()  // 獲取元素的內(nèi)容
val("內(nèi)容")  // 設(shè)置元素的內(nèi)容

3.6 jQuery 元素操作

3.6.1 遍歷元素

隱式迭代：對(duì)同一類(lèi)元素做相同操作。如果做不同操作，需要使用遍歷：

$("div").each(function (index, domEle) {xxx;})

// 也可以寫(xiě)成
$.each($("div"),function (index, domEle) {xxx;}))
// 主要用于處理數(shù)據(jù)

• index 是每個(gè)元素的索引號(hào)，domEle 是每個(gè) DOM 元素對(duì)象，不是 jQuery 對(duì)象

• 想要使用 jQuery 方法，就要給這個(gè) dom 元素轉(zhuǎn)換為 jQuery 對(duì)象 $(domEle)

3.6.2 創(chuàng)建元素

① 內(nèi)部添加

$("ul").append(li);//放到最后面，類(lèi)似原生 appendChild

② 外部添加

el.before(內(nèi)容);  // 把內(nèi)容放到目標(biāo)元素前面
el.after(內(nèi)容);  // 把內(nèi)容放到目標(biāo)元素后面

• 內(nèi)部添加元素后是父子關(guān)系

• 外部添加元素后是兄弟關(guān)系

3.6.3 刪除元素

el.remove()  // 刪除匹配節(jié)點(diǎn)（本身）
el.empty()  // 刪除匹配節(jié)點(diǎn)的子節(jié)點(diǎn)
el.html("")  // 相當(dāng)于 empty()

3.7 jQuery 尺寸、位置操作

3.7.1 jQuery 尺寸

• 以上參數(shù)為空，則獲取響應(yīng)值，返回的是數(shù)字型
• 如果參數(shù)未數(shù)字，則是修改相應(yīng)值
• 參數(shù)可以不寫(xiě)單位

3.7.2 jQuery 位置

① offset() 設(shè)置或獲取元素偏移

• offset() 方法設(shè)置或返回被選元素相對(duì)于文檔的偏移坐標(biāo)，跟父級(jí)沒(méi)有關(guān)系。
• 該方法有2個(gè)屬性 left 和 top。offset().top 用于獲取距離文檔頂部的距離，offset().left 用于獲取距離文檔左側(cè)的距離。
• 可以設(shè)置元素的偏移：offset({top:10,left:10})。

② position() 獲取元素偏移

• position() 方法用于返回被選元素相對(duì)于帶有定位的父級(jí)偏移坐標(biāo)，如果父級(jí)沒(méi)有定位，則以文檔為準(zhǔn)。

該方法只能獲取不能設(shè)置偏移

③ scrollTop()/scrollLeft() 設(shè)置或獲取元素被卷去的頭部或左側(cè)

• scollTop() 方法設(shè)置或返回被選元素卷去的頭部。
• scollLeft() 方法設(shè)置或返回被選元素卷去的左側(cè)。

4 jQuery 事件

4.1 事件注冊(cè)

單個(gè)事件注冊(cè)

element.事件(function);
$("div").click(function(){ 事件處理程序 })  // 其他事件和原生事件基本一致

4.2 事件處理

4.2.1 事件處理 on() 綁定事件

• 語(yǔ)法規(guī)范

on(events,[selector],[data],fn)

• 概述

  • 在選擇元素上綁定一個(gè)或多個(gè)事件的事件處理函數(shù)。

  • on() 方法綁定事件處理程序到當(dāng)前選定的 jQuery 對(duì)象中的元素。

• 顯示參數(shù)

  • events:一個(gè)或多個(gè)用空格分隔的事件類(lèi)型和可選的命名空間，如"click"或"keydown.myPlugin" 。

  • selector:一個(gè)選擇器字符串用于過(guò)濾器的觸發(fā)事件的選擇器元素的后代。如果選擇的< null或省略，當(dāng)它到達(dá)選定的元素，事件總是觸發(fā)。

  • data:當(dāng)一個(gè)事件被觸發(fā)時(shí)要傳遞event.data給事件處理函數(shù)。

  • fn:該事件被觸發(fā)時(shí)執(zhí)行的函數(shù)。 false 值也可以做一個(gè)函數(shù)的簡(jiǎn)寫(xiě)，返回false。

• 優(yōu)勢(shì)1

// 同一對(duì)象不同操作不同回調(diào)
$("div").on({
  mouseenter:function() {
    $(this).css("color", "red");
  },
  mouseleave:function() {
    $(this).css("color", "black");
  }
})

// 同一對(duì)象不同操作相同回調(diào)
$("div").on("mouseenter mouseleave", function(){
  $(this).toggleClass("current");
})

• 優(yōu)勢(shì)2

可以事件委派操作。事件委派的定義是：把原來(lái)子元素身上的事件綁定到父元素上，就是把事件委派給父元素。

$("ul").on("click", "li", function(){
  alert("clicked li");
});

• 優(yōu)勢(shì)3

動(dòng)態(tài)創(chuàng)建的元素，click() 沒(méi)有辦法綁定事件，on() 可以給動(dòng)態(tài)生成元素綁定事件。

$("ul").on("click", "li", function(){
  alert("clicked li");
});
let li = $("<li>click</li>");
$("ul").append(li);

4.2.2 事件處理 off() 解綁事件

• 語(yǔ)法規(guī)范

off(events,[selector],[fn])

• 概述

  • 在選擇元素上移除一個(gè)或多個(gè)事件的事件處理函數(shù)。

  • off() 方法移除用 on() 綁定的事件處理程序。

• 顯示參數(shù)

  • events:一個(gè)或多個(gè)空格分隔的事件類(lèi)型和可選的命名空間，或僅僅是命名空間，比如"click", “keydown.myPlugin”, 或者 “.myPlugin”。

  • selector:一個(gè)最初傳遞到 .on() 事件處理程序附加的選擇器。

  • fn:事件處理程序函數(shù)以前附加事件上，或特殊值 false。

• 示例

off();  // 解除所有事件
off("click");  // 只解除點(diǎn)擊事件
off("click", "li");  // 解除事件委托

4.2.3 事件處理 one() 綁定一次性事件

• 語(yǔ)法規(guī)范

one(type,[data],fn)

• 概述

  • 為每一個(gè)匹配元素的特定事件（像click）綁定一個(gè)一次性的事件處理函數(shù)。

• 顯示參數(shù)

  • type:添加到元素的一個(gè)或多個(gè)事件。由空格分隔多個(gè)事件。必須是有效的事件。

  • data:將要傳遞給事件處理函數(shù)的數(shù)據(jù)映射。

  • fn:每當(dāng)事件觸發(fā)時(shí)執(zhí)行的函數(shù)。

4.2.4 自動(dòng)觸發(fā)事件 trigger()

有些事件希望自動(dòng)觸發(fā)，比如輪播圖自動(dòng)播放功能與點(diǎn)擊右側(cè)按鈕功能一致，可以利用定時(shí)器自動(dòng)觸發(fā)右側(cè)按鈕點(diǎn)擊事件，不必鼠標(biāo)點(diǎn)擊觸發(fā)。

el.click();  // 簡(jiǎn)寫(xiě)形式
el.trigger("type");  // 自動(dòng)觸發(fā)形式
el.triggerHandler("type");  // 自動(dòng)觸發(fā)形式，不會(huì)觸發(fā)元素的默認(rèn)行為

4.3 事件對(duì)象

事件被觸發(fā)，就會(huì)有事件對(duì)象的產(chǎn)生。

on(events,[selector],function(even) { })
even.preventDefault()  // 阻止默認(rèn)行為 或者用 return false
even.stopPropagation()  // 阻止冒泡

5 學(xué)習(xí)建議

• 先掌握原生JavaScript：理解DOM、事件等基礎(chǔ)概念后再學(xué)jQuery

• 對(duì)比學(xué)習(xí)：每個(gè)jQuery方法思考“用原生JS如何實(shí)現(xiàn)”

• 適度投入：除非維護(hù)舊項(xiàng)目，否則不必深究所有細(xì)節(jié)

• 關(guān)注現(xiàn)代替代：

  • DOM操作：現(xiàn)代瀏覽器原生API已很強(qiáng)大

  • Ajax：使用fetch()或axios

  • 動(dòng)畫(huà)：CSS3動(dòng)畫(huà)/過(guò)渡性能更好

到此這篇關(guān)于jQuery從新手到高手的超詳細(xì)學(xué)習(xí)筆記（代碼示例）的文章就介紹到這了,更多相關(guān)jQuery學(xué)習(xí)筆記內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論