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

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

1 jQuery 概述

1.1 JavaScript 庫

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

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

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

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

1.2 jQuery

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

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

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

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

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

2 jQuery 基本使用

2.1 jQuery 下載

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

② 版本區(qū)別：

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

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

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

2.2 導(dǎo)入方式

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

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

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

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

我們可以通過在 script 的 src 屬性中寫一個(gè)網(wǎng)址來導(dǎo)入在線的 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 的別稱，在代碼中可以使用 jQuery 代替$，但為了方便，通常都使用$。

• 沖突——多庫共存

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

  解決方法：

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

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

2. 修改訪問符號(hào)

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

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

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

jQuery 對(duì)象：用 jQuery 方式獲取過來的對(duì)象就是 jQuery 對(duì)象。本質(zhì)：通過 $ 把 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選擇器雖然很多，但是選擇器之間可以相互替代，就是說獲取一個(gè)元素，你會(huì)有很多種方法獲取到。所以我們平時(shí)真正能用到的只是少數(shù)的最常用的選擇器。

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

3.1.2 jQuery 層級(jí)選擇器

3.1.3 過濾選擇器

3.1.4 篩選選擇器（方法）

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

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ǔ)）的過程就叫隱式迭代

簡(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 方法來修改簡(jiǎn)單元素樣式；也可以操作類，修改多個(gè)樣式。

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

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

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

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

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

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

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

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

• 添加類

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

• 移除類

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

• 切換類

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

3.2.3 與原生 js 區(qū)別

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

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

3.3 jQuery 效果

3.3.1 顯示隱藏效果

① 顯示效果

• 語法規(guī)范

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

• 概述

  • 顯示隱藏的匹配元素。

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

• 顯示參數(shù)

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

② 隱藏效果

• 語法規(guī)范

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

• 概述

  • 隱藏顯示的元素。

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

• 顯示參數(shù)

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

3.3.2 滑動(dòng)效果

① 下滑效果

• 語法規(guī)范

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

• 概述

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

• 顯示參數(shù)

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

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

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

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

② 上滑效果

• 語法規(guī)范

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

• 概述

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

• 顯示參數(shù)

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

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

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

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

③ 滑動(dòng)效果

• 語法規(guī)范

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

• 概述

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

• 顯示參數(shù)

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

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

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

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

3.3.3 事件切換

• 語法規(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è)常見錯(cuò)誤）。

• 顯示參數(shù)

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

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

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

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

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

② 停止排隊(duì)

• 語法規(guī)范

stop([clearQueue],[jumpToEnd])

• 概述

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

• 顯示參數(shù)

  • queue:用來停止動(dòng)畫的隊(duì)列名稱。

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

  • jumpToEnd:如果設(shè)置成true，則完成隊(duì)列。可以立即完成動(dòng)畫。

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

3.3.5 淡入淡出效果

① 淡入效果

• 語法規(guī)范

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

• 概述

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

• 顯示參數(shù)

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

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

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

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

② 淡出效果

• 語法規(guī)范

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

• 概述

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

• 顯示參數(shù)

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

③ 淡入淡出切換效果

• 語法規(guī)范

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

• 概述

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

• 顯示參數(shù)

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

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

• 語法規(guī)范

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

• 概述

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

• 顯示參數(shù)

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

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

• 語法規(guī)范

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

• 概述

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

• 顯示參數(shù)

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

3.4 屬性操作

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

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

① 獲取屬性語法

prop("屬性")

② 設(shè)置屬性語法

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

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

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

① 獲取屬性語法

attr("屬性")

② 設(shè)置屬性語法

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

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

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

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

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

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

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

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ì)同一類元素做相同操作。如果做不同操作，需要使用遍歷：

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

// 也可以寫成
$.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);//放到最后面，類似原生 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ù)可以不寫單位

3.7.2 jQuery 位置

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

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

② position() 獲取元素偏移

• position() 方法用于返回被選元素相對(duì)于帶有定位的父級(jí)偏移坐標(biāo)，如果父級(jí)沒有定位，則以文檔為準(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() 綁定事件

• 語法規(guī)范

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

• 概述

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

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

• 顯示參數(shù)

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

  • selector:一個(gè)選擇器字符串用于過濾器的觸發(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)寫，返回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

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

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

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

動(dòng)態(tài)創(chuàng)建的元素，click() 沒有辦法綁定事件，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() 解綁事件

• 語法規(guī)范

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

• 概述

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

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

• 顯示參數(shù)

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

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

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

• 示例

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

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

• 語法規(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)寫形式
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)畫：CSS3動(dòng)畫/過渡性能更好

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

最新評(píng)論