【筆記】【JavaScript】【jQuery】菜鳥程式設計學習筆記
阿新 • • 發佈：2022-05-11
前言
【內容】
- jQuery菜鳥程式設計學習筆記
- 具體詳情看目錄
【目的】
- 記錄本人在jQuery學習中的筆記
- 方便日後的工作與學習。
【學習資料】
【溫馨提示】
- 筆記中有些個人理解後整理的筆記，可能有所偏差，也懇請讀者幫忙指出，謝謝。
jQuery快速瞭解
啥是jQuery？
- 是一個 JavaScript 函式庫
- 是一個輕量級的"寫的少，做的多"的 JavaScript 庫
能幹什麼？
- HTML 元素選取
- HTML 元素操作
- CSS 操作
- HTML 事件函式
- JavaScript 特效和動畫
- HTML DOM 遍歷和修改
- AJAX
- Utilities
- 提供了大量的外掛
如何在網頁檔案中引入jQuery？
方法一：本地引用
-
從jQuery官網下載jQuery庫
- 下載版本（二選一）
- Production version - 用於實際的網站中，已被精簡和壓縮。
- Development version - 用於測試和開發（未壓縮，是可讀的程式碼）。
- 下載版本（二選一）
-
將下載的檔案放在網頁的同一目錄下
-
在html檔案中用
<script>標籤引用<head> <script src="jquery-對應版本.js"></script> </head>
方法二：通過CDN（內容分發網路） 引用
- 直接選一個複製到html中用
<script>標籤引用
/*Staticfile CDN*/ <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> /*百度 CDN:*/ <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script> /*又拍雲 CDN*/ <script src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"> </script> /*新浪 CDN*/ <script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script> /*Microsoft CDN*/ <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
【PS】推薦使用方法二引入jQuery
- 減少載入時間。
- 【解釋】 許多使用者在訪問其他站點時，已經從百度、又拍雲、新浪、谷歌或微軟載入過 jQuery。所以結果是，當他們訪問您的站點時，會從快取中載入 jQuery
- 提高載入速度。
- 【解釋】 大多數 CDN 都可以確保當用戶向其請求檔案時，會從離使用者最近的伺服器上返回響應
如何檢視jQuery使用版本？
- 按
F12開啟 Console（控制檯） 視窗 - 輸入
$.fn.jquery命令檢視當前 jQuery 使用的版本
如何使用jQuery？
jQuery語法
基礎語法
- 通過選取 HTML 元素，並對選取的元素執行某些操作
【格式】
$(selector).action()
$：定義jQuery
selector（選擇符）："查詢"和"查詢" HTML 元素（具體詳情）
action()：執行對元素的操作
文件就緒事件
- 所有 jQuery 函式位於一個 document ready 函式中
- 【原因】 為了防止文件在完全載入（就緒）之前執行 jQuery 程式碼，即在 DOM 載入完成後才可以對 DOM 進行操作。
【格式】
格式一：
$(document).ready(function(){
// 開始寫 jQuery 程式碼...
});
格式二：簡潔寫法（與以上寫法效果相同）
$(function(){
// 開始寫 jQuery 程式碼...
});
【拓展】JavaScript文件就緒事件
格式:
window.onload = function () {
// 執行程式碼
}
jQuery選擇器
- 允許對 HTML 元素組或單個元素進行操作。
- 更css中的選擇器相同。
- 所有選擇器都以美元符號開頭：
$()。
| 常用選擇器 | 格式 |
|---|---|
| 元素選擇器 | $("元素名") |
| id 選擇器 | $("#id名") |
| class 選擇器 | $(".類名") |
如何在獨立檔案中使用jQuery函式？
-
將jQuery 函式放到獨立的 .js 檔案中。
-
將函式直接新增到
<head>部分中示例：
<head> <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"> </script> <script src="my_jquery_functions.js"></script> </head>
【好處】
- jQuery 函式易於維護
jQuery事件
啥是事件？
-
頁面對不同訪問者的響應
-
常見 DOM 事件：
滑鼠事件 鍵盤事件 表單事件 文件/視窗事件 click keypress submit load dblclick keydown change resize mouseenter keyup focus scroll mouseleave blur unload hover
如何設定jQuery事件?
【格式】
$("selecter").action（function(){
//動作觸發後執行的程式碼！！！
}）;
selecter：選擇器
action：事件
function：函式
jQuery 效果
隱藏/顯示
hide()【隱藏】和 show()【顯示】
【格式】
$("selecter").hide(speed,callback);
$("selecter").hide(speed,callback);
speed（隱藏/顯示的速度）：可選
- 值：
slow、fast、毫秒
callback（隱藏/顯示後執行的函式）：可選
toggle()【將顯示的隱藏，將隱藏的顯示】
【格式】
$("selecter").toggle(speed,callback);
淡入/淡出
【注意】
- 大小寫不能變
fadeln()【淡入已已隱藏的元素】和 fadeOut() 【淡出可見元素】
【格式】
$("selector").fadeIn(speed,callback);
$("selector").fadeOut(speed,callback);
speed（隱藏/顯示的速度）：可選
- 值：
slow、fast、毫秒
callback（淡入後執行的函式）：可選
fadeToggle() 【元素已淡出，新增淡入效果；元素已淡入，新增淡出效果】
【格式】
$("selector").fadeToggle(speed,callback);
fadeTo() 【漸變淡入淡出】
【格式】
$("selector").fadeTo(speed,opacity,callback);
opacity(不透明度)：將淡入淡出效果設定為給定的不透明度（值介於 0 與 1 之間）
【注意】
- 沒有預設引數，必須加上 slow/fast/Time
滑動
slideDown() 【向下滑動元素】 和 slideUp()【向上滑動元素】
【格式】
$("selector").slideDown(speed,callback);
$("selector").slideUp(speed,callback);
speed（效果的時長）：可選
- 值：
slow、fast、毫秒
callback（滑動後執行的函式）：可選
slideToggle()【已向下滑動的元素，向上滑動；已向上滑動的元素，向下滑動】
【格式】
$("selector").slideToggle(speed,callback);
動畫
animate()【建立自定義動畫】
【格式】
$("selector").animate({params},speed,callback);
params（形成動畫的 CSS 屬性）：必需
-
可操作多個屬性
- 可以同時使用多個屬性
- 可以操作所有 CSS 屬性
-
必須使用駝峰標記法書寫所有的屬性名
- 例如必須使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。
- 色彩動畫並不包含在核心 jQuery 庫中
- 如果需要生成顏色動畫，您需要從 jquery.com 下載
顏色動畫 外掛。
- 如果需要生成顏色動畫，您需要從 jquery.com 下載
-
必須使用駝峰標記法書寫所有的屬性名
-
可使用相對值
- 相對值（該值相對於元素的當前值）。需要在值的前面加上
+=或-=
- 相對值（該值相對於元素的當前值）。需要在值的前面加上
-
可使用預定義的值
- 可以把屬性的動畫值設定為
show、hide或toggle
- 可以把屬性的動畫值設定為
-
可使用對列功能
- 編寫多個 animate() 呼叫，逐一執行這些 animate 呼叫。
speed（效果的時長）：可選
- 值：
slow、fast、毫秒
callback（動畫完成後執行的函式）：可選
【注意】
- 如需對位置進行操作，要記得首先把元素的 CSS position 屬性設定為 relative、fixed 或 absolute
- 【原因】預設情況下，所有 HTML 元素都有一個靜態位置，且無法移動。
停止動畫
stop() 【在它們完成之前，停止動畫或效果】
- 適用於所有 jQuery 效果函式，包括滑動、淡入淡出和自定義動畫
【格式】
$("selector").stop(stopAll,goToEnd);
stopAll(是否應該清除動畫佇列)：
-
false:預設- 僅停止活動的動畫，允許任何排入佇列的動畫向後執行。
-
true:所有動畫都不執行
goToEnd（是否立即完成當前動畫）：
-
false:預設- 會清除在被選元素上指定的當前動畫
-
true- 執行完當前動畫再停止後續動畫
Callback方法（回撥）
- 在當前動畫 100% 完成之後執行
- 有Callback和無Calback的區別
- 有Callback：執行完動畫在執行回撥函式
- 無Callback：直接執行後續函式
鏈（Chaining）
- 可以把動作/方法連結在一起
- 允許我們在一條語句中執行多個 jQuery 方法（在相同的元素上）
- 依次執行
【格式】
$("selecter").action1().action2().action3()....actionN();
【縮排格式】
$("selecter").action1()
.action2()
.action3()
...
.actionN();
【注意】
- 無須擔心縮排格式中的空格
- 【原因】jQuery 會拋掉多餘的空格，並當成一行長程式碼來執行上面的程式碼行。
更多方法【瞭解即可】
jQuery HTML
- jQuery 擁有可操作 HTML 元素和屬性的強大方法。
- jQuery 中非常重要的部分，就是操作 DOM 的能力。
- jQuery 提供一系列與 DOM 相關的方法，這使訪問和操作元素和屬性變得很容易。
【拓展】什麼是DOM？
- DOM = Document Object Model（文件物件模型）
- DOM 定義訪問 HTML 和 XML 文件的標準
獲取內容和屬性
獲取內容方法
| 方法名 | 設定或返回內容 |
|---|---|
| text() | 所選元素的文字內容 |
| html() | 所選元素的內容（包括 HTML 標記） |
| val() | 表單欄位的值 |
獲取屬性
attr() 【獲取自定義屬性值】
【格式】
$("selecter").attr("想要獲取值的屬性")
prop()【獲取固有屬性值】
【格式】
$("selecter").prop("想要獲取值的屬性")
【PS】
- 具有 true 和 false 兩個屬性的屬性，如 checked, selected 或者 disabled 使用prop()
【拓展】啥是固有屬性？
- 元素本身就帶有的屬性
- W3C 標準裡就包含有的屬性
- IDE 裡能夠智慧提示出的屬性
attr()和prop()的區別
| attr() | prop() | |
|---|---|---|
| 用途 | 獲取自定義屬性值 | 獲取固有屬性值 |
| 如果沒有相應的屬性，返回值 | undefined |
空字串 |
設定內容和屬性
設定內容方法
| 方法名 | 設定或返回內容 |
|---|---|
| text("文字內容") | 所選元素的文字內容 |
| html("帶標籤的內容") | 所選元素的內容（包括 HTML 標記） |
| val("值") | 表單欄位的值 |
text()、html() 以及 val() 的回撥函式
【格式】
$("selecter").text(function(index,origText){
//方法程式碼
});
$("selecter").html(function(index,origText){
//方法程式碼
});
$("selecter").val(function(index,origText){
//方法程式碼
});
index：被選元素列表中當前元素的下標
origText：原始（舊的）值。
設定屬性
attr()方法設定屬性值
【格式】
//設定單個屬性
$("selecter").attr("屬性","想要設定的值");
//設定多個屬性
$("selecter").attr({
"屬性1":"屬性1的值",
"屬性2":"屬性2的值",
....
"屬性N":"屬性N的值",
});
attr() 的回撥函式
【格式】
$("selecter").attr("屬性",function(index,orgValue){
//方法程式碼
});
index：被選元素列表中當前元素的下標
orgValue：原始（舊的）值
新增元素/內容
append()【在被選元素的結尾插入內容（仍然在該元素的內部）】
【格式】
$("selecter").append("追加文字");
prepend() 【在被選元素的開頭插入內容（仍然在該元素的內部）】
【格式】
$("selecter").prepend("在開頭追加文字");
通過 append() 和 prepend() 方法新增若干新元素、
【思路】
- 建立若干個新元素
- 這些元素可以通過 text/HTML、jQuery 或者 JavaScript/DOM 來建立
- 然後通過 append() 方法把這些新元素追加到文字中（對 prepend() 同樣有效）
【格式】
var txt1="<p>文字-1。</p>"; // 使用 HTML 標籤建立文字
var txt2=$("<p></p>").text("文字-2。"); // 使用 jQuery 建立文字
var txt3=document.createElement("p");
txt3.innerHTML="文字-3。"; // 使用 DOM 建立文字 text with DOM
$("body").append(txt1,txt2,txt3); // 追加新元素
after() 【在被選元素之後插入內容】 和 before()【在被選元素之前插入內容】
【格式】
$("selecter"").after("在元素後面新增文字");
$("selecter").before("在元素前面新增文字");
通過 after() 和 before() 方法新增若干新元素
【思路】
- 建立若干新元素
- 這些元素可以通過 text/HTML、jQuery 或者 JavaScript/DOM 來建立
- 然後通過 after() 方法把這些新元素插到文字中（對 before() 同樣有效）
【格式】
var txt1="<b>I </b>"; // 使用 HTML 建立元素
var txt2=$("<i></i>").text("love "); // 使用 jQuery 建立元素
var txt3=document.createElement("big"); // 使用 DOM 建立元素
txt3.innerHTML="jQuery!";
$("selecter").after(txt1,txt2,txt3); // 在圖片後新增文字
【append/prepend】和【after/before】有什麼區別?
- 【append/prepend】 是在選擇元素內部嵌入。
- 【after/before】 是在元素外面追加。
刪除元素/內容
remove()方法
刪除被選元素和子元素
【格式】
$("selecter").remove();
過濾被刪除的元素
【格式】
$("selecter").remove("selecter");
empty()方法
刪除被選元素的子元素
【格式】
$("selecter").empty();
獲取並設定CSS類
| 方法名 | 功能 |
|---|---|
addClass() |
向不同的元素新增 class 屬性 |
removeClass() |
在不同的元素中刪除指定的 class 屬性 |
toggleClass() |
對被選元素進行新增/刪除類的切換操作 |
【格式】
$("元素1,元素2,元素3,...,元素N").addClass("類名1 類名2 類名N");
$("元素1,元素2,元素3,...,元素N").removeClass("類名1 類名2 類名N");
$("元素1,元素2,元素3,...,元素N").toggleClass("類名1 類名2 類名N");
【注意】
- 指定多個元素用
,隔開 - 新增多個類用
空格隔開
CSS()方法
返回指定的 CSS 屬性的值
【格式】
$("selecter").css("propertyname");
propertyname：想要獲取值的CSS屬性
設定指定的 CSS 屬性
【格式】
$("selecter").css("propertyname","value");
propertyname：想要設定值的CSS屬性
value：該屬性的值
設定多個 CSS 屬性
【格式】
$("selecter").css({
"屬性1":"值1",
"屬性2":"值2",
...
"屬性N":"值N",
});
尺寸
【設定或返回元素的寬度】
| 方法名 | 描述 |
|---|---|
width() |
不包括內邊距、邊框或外邊距 |
innerWidth() |
包括內邊距 |
outerWidth() |
包括內邊距和邊框 |
【格式】
$("selecter").width();
$("selecter").innerWidth();
$("selecter").outerWidth();
【設定或返回元素的高度】
| 方法名 | 描述 |
|---|---|
height() |
不包括內邊距、邊框或外邊距 |
innerWidth() |
包括內邊距 |
outerWidth() |
包括內邊距和邊框 |
【格式】
$("selecter").height();
$("selecter").innerHeight();
$("selecter").outerHeight();
瞭解更多
jQuery 遍歷
什麼是遍歷？
- 就是移動
- 【解釋】用於根據其相對於其他元素的關係來"查詢"（或選取）HTML 元素。以某項選擇開始，並沿著這個選擇移動，直到抵達您期望的元素為止。
對DOM 進行遍歷
- 從被選（當前的）元素開始，輕鬆地在家族樹中向上移動（祖先），向下移動（子孫），水平移動（同胞）
祖先【向上遍歷 DOM 樹】
| 方法名 | 功能描述 | 方法返回 |
|---|---|---|
parent() |
只會向上一級對 DOM 樹進行遍歷 | 被選元素的直接父元素 |
parents() |
一路向上直到文件的根元素 (<html>) |
被選元素的所有祖先元素 |
parentsUntil() |
介於兩個給定元素之間的所有祖先元素 |
【格式】
/* parent方法 */
//返回"selecter"的直接父元素
$("selecter").parent();
/* parents方法 */
//返回"selecter"的所有祖先元素
$("selecter").parents();
//返回"selecter"的所有祖先元素中的被選中元素
$("selecter").parents("selecterChosen");
/* parentsUntill方法 */
//返回"selecterStart"到"selecterEnd"中所有祖先元素
$("selecterStart").parentsUntill("selecterEnd");
後代【向下遍歷 DOM 樹】
| 方法名 | 功能描述 | 方法返回 |
|---|---|---|
children() |
只會向下一級對 DOM 樹進行遍歷 | 被選元素的所有直接子元素 |
find() |
一路向下直到最後一個後代 | 被選元素的後代元素 |
【格式】
/* children方法 */
//返回被選元素的所有直接子元素
$("selecter").children();
//使用可選引數來過濾對子元素的搜尋
$("selecter").children("selecterChosen");
/* find方法 */
//返回屬於"selecter"後代的所有"selecterChosen"元素
$("selecter").find("selecterChosen");
//返回"selecter"的所有後代
$("selecter").find("*");
同胞【在 DOM 樹中水平遍歷】
| 方法名 | 方法返回 | 方向相反方法 |
|---|---|---|
siblings() |
被選元素的所有同胞元素 | |
next() |
只返回一個元素，被選元素的下一個同胞元素 | prev() |
nextAll() |
被選元素的所有跟隨的同胞元素 | prevAll() |
nextUntil() |
介於兩個給定引數之間的所有跟隨的同胞元素 | prevUntil() |
【格式】
/* siblings() 方法 */
//返回 "selecter" 的所有同胞元素
$("selecter").siblings();
//返回屬於 "selecter" 的同胞元素中的所有 "selecterChosen" 元素
$("selecter").siblings("selecterChosen");
/* next() 方法 */
//返回 "selecter" 的下一個同胞元素
$("selecter").next();
/* nextAll() 方法 */
//返回 "selecter" 的所有跟隨的同胞元素
$("selecter").nextAll();
/* nextUntil() 方法 */
//返回介於 "selecterStart" 與 "selecterEnd" 元素之間的所有同胞元素
$("selecterStart").nextUntil("selecterEnd");
過濾【縮小搜尋元素的範圍】
基本過濾方法
- 允許您基於其在一組元素中的位置來選擇一個特定的元素。
| 方法名 | 方法返回 |
|---|---|
first() |
被選元素的首個元素 |
last() |
被選元素的最後一個元素 |
eq() |
被選元素中帶有指定索引號的元素 |
【格式】
/* first() 方法 */
//選取首個 "selecterFather" 元素內部的第一個 "selecterSon" 元素
$("selecterFather selecterSon").first();
/* last() 方法 */
//選擇最後一個 "selecterFather" 元素中的最後一個 "selecterSon" 元素
$("selecterFather selecterSon").last();
/* eq() 方法 */
//選取第 index+1 個 "selecter" 元素 (索引號從 0 開始)
$("selecter").eq(index);
其他過濾方法
- 允許您選取匹配或不匹配某項指定標準的元素。
filter() 方法
- 允許您規定一個標準。
- 匹配這個標準的元素：會被從集合中刪除
- 匹配的元素：會被返回
【格式】
//返回帶有 "selecterChosen" 的所有 "selecter" 元素
$("selecter").filter("selecterChosen");
not() 方法
-
not() 方法與 filter() 相反
-
允許您規定一個標準。
- 匹配這個標準的元素：會被返回
- 匹配的元素：會被從集合中刪除
【格式】
//返回不帶有 "selecterChosen" 的所有 "selecter" 元素
$("selecter").not("selecterChosen");
瞭解更多
jQuery AJAX
啥是AJAX？
- 與伺服器交換資料的技術，它在不過載全部頁面的情況下，實現了對部分網頁的更新。
- AJAX = 非同步 JavaScript 和 XML
jQuery與AJAX有啥關係？
- jQuery 提供多個與 AJAX 有關的方法。
- 通過 jQuery AJAX 方法，您能夠使用 HTTP Get 和 HTTP Post 從遠端伺服器上請求文字、HTML、XML 或 JSON - 同時您能夠把這些外部資料直接載入網頁的被選元素中。
AJAX load()方法
- 從伺服器載入資料，並把返回的資料放入被選元素中。
【格式】
$(selector).load(URL,data,callback);
URL（希望載入的 URL）：必需
data（與請求一同傳送的查詢字串鍵/值對集合）：可選
callback（ load() 方法完成後所執行的函式名稱）：可選
- 可以設定不同的引數：
-
responseTxt：包含呼叫成功時的結果內容 -
statusTXT：包含呼叫的狀態 -
xhr：包含 XMLHttpRequest 物件
-
AJAX get()/post()方法
- 通過 HTTP GET 或 POST 請求從伺服器請求資料。
HTTP 請求：GET 與 POST 的區別
| GET | POST | |
|---|---|---|
| 對指定的資源操作 | 請求資料 | 提交要處理的資料 |
| 資料能否快取 | 可快取 | 無法快取 |
| 傳送的資料數量 | 只能傳送有限數量的資料 | 可以傳送大量的資料 |
| 資料傳送位置 | 在 URL 中傳送 | 在正文主體中傳送 |
| 安全性 | 傳送的資料不受保護 | 傳送的資料是安全的 |
| 資料在 URL 欄中是否公開 | 公開 | 不公開 |
| 可變大小 | 2000 個字元 | 最多允許 8 Mb |
| 主要作用 | 獲取資訊 | 更新資料 |
| 表單提交時編碼 | 只接受 ASCII 字元 | 不繫結表單資料型別，並允許二進位制和 ASCII 字元 |
jQuery $.get() 方法
- 通過 HTTP GET 請求從伺服器上請求資料。
【格式】
$.get(URL,callback);
URL（希望請求的 URL）：必需
callback（請求成功後所執行的函式名）：可選
jQuery $.post() 方法
- 通過 HTTP POST 請求向伺服器提交資料。
【格式】
$.post(URL,data,callback);
URL（希望請求的 URL）：必需
data（連同請求傳送的資料）：可選
callback（請求成功後所執行的函式名）：可選
瞭解更多
結語
【感謝】
感謝菜鳥程式設計提供學習的平臺!!!
感謝各位讀者能看到最後!!!