前言
【內容】
- jQuery菜鳥編程學習筆記
- 具體詳情看目錄
【目的】
- 記錄本人在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="https://www.cnblogs.com/lao-jiaweijarvee/archive/2022/05/11/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="https://www.cnblogs.com/lao-jiaweijarvee/archive/2022/05/11/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 效果方法
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 / CSS 方法
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 遍歷方法
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(請求成功后所執行的函式名):可選
了解更多
jQuery AJAX 方法
結語
【感謝】
感謝菜鳥編程提供學習的平臺!!!
感謝各位讀者能看到最后!!!
轉載請註明出處,本文鏈接:https://www.uj5u.com/qiye/472384.html
標籤:其他
上一篇:vue - Vue路由
