jQuery 基礎語法
一、 jQuery 概述
1、 JS 庫
倉庫：可以把很多東西放到這個倉庫裡面，找東西只需要到倉庫裡面查詢到就可以了
JS 庫：即 library，是一個封裝好的特定的集合（方法和函式）。從封裝一大堆函式的角度理解庫，就是在這個庫中，封裝了很多預先定義好的函式裡面，比如動畫 animate、hide、show，比如獲取元素等
簡單理解：就是 JS 檔案，裡面對我們原生 JS 程式碼進行了儲存，存放到裡面。這樣我們可以快速高效的使用這些封裝好的函式
比如 jQuery，就是為了快速方便的操作 DOM，裡面基本都是函式（方法）
2、 jQuery 概念
jQuery 是一個快速、簡潔的 JS 庫，其設計的宗旨是 "writeLessDoMore" ，即倡導寫更少的程式碼，做更少的程式碼
j 就是 JS；Query 查詢；意思就是查詢 JS，把 JS 中的 DOM 操作做了封裝，我們可以快速的查詢使用裡面的功能
jQuery 封裝了 JS 常用的功能程式碼，優化了 DOM 操作、事件處理、動畫設計和 Ajax 互動
學習 jQuery 本質就是學習呼叫這些函式（方法）
jQuery 出現的目的是加快前端人員的開發速度，我們可以非常方便的呼叫和使用它，從而提高開發效率
3、 jQuery 優點
- 輕量級，核心檔案才 幾十kb，不會影響頁面載入速度
- 跨瀏覽器相容，基本相容了現在主流的瀏覽器
- 鏈式程式設計，隱式迭代
- 對事件、樣式、動畫支援，大大簡化了 DOM 操作
- 支援外掛擴充套件開發，有著豐富的第三方外掛，例如：樹形選單、日期控制元件、輪播圖等
- 免費、開源
二、 jQuery 基本使用
1、 jQuery 使用步驟
-
引入 jQuery檔案
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> -
然後直接使用即可
2、 jQuery 入口函式
$ (function () {
··· // 此處是頁面 DOM 元素載入完成的入口
})
$ (document).ready(function () {
··· // 此處是頁面 DOM 載入完成的入口
})
3、 jQuery 頂級物件
- $ 是 jQuery 的別稱，在程式碼中可以使用 jQuery 代替 $，但一般為了方便，通常都直接使用 $
- $ 是 jQuery 的頂級物件，相當於原生 JS 中的 window。把元素利用 $ 包裝成 jQuery 物件，就可以呼叫 jQuery 的方法
4、 jQuery 物件和 DOM 物件
- 用原生 JS 獲取來的物件就是 DOM 物件
- 用 jQuery 方法獲取的元素就是 jQuery 物件
- jQuery 物件的本質是：利用 $ 對 DOM 物件包裝後產生的物件（偽陣列形式儲存）
- jQuery 物件只能使用 jQuery 方法，DOM 物件則使用原生的 JS 屬性和方法
這兩個物件是可以相互轉換的
因為原生 JS 比 jQuery 更大，原生一些屬性和方法 jQuery 沒有給我們封裝，要像是用這些屬性和方法需要把 jQuery 物件轉換為 DOM 物件才能使用
-
DOM 物件轉換為 jQuery 物件
$(DOM 物件); -
jQuery 物件轉換為 DOM 物件
$("div")[index]; // index 是索引號 $("div").get(index); // index 是索引號 // 該物件以偽陣列的形式儲存
<div></div>
<script>
// DOM 物件
var div = document.querySelector("div");
$(div); // 轉換成 jQuery 物件
// jQuery 物件
$("div");
$("div")[0]; // 轉換成 DOM 物件
</script>
三、 jQuery 常用 API
1、 jQuery 選擇器
原生 JS 獲取元素方式很多、很雜，而且相容性情況不一致，因此 jQuery 給我們提供了封裝，是獲取元素同一標準
$("選擇器") // 裡面選擇器直接寫成 CSS 選擇器即可，但是要加引號
| 名稱 | 用法 | 描述 |
|---|---|---|
| ID 選擇器 | $("#id"); | 獲取指定 ID 的元素 |
| 全選選擇器 | $("*"); | 匹配所有元素 |
| 類選擇器 | $(".class"); | 獲取同一類 class 的元素 |
| 標籤選擇器 | $("div"); | 獲取同一標籤所有元素 |
| 並集選擇器 | $("div, p, li"); | 選取多個元素 |
| 交集選擇器 | $("li.current"); | 交集選擇器 |
| 子代選擇器 | $("ul>li"); | 使用 > 號，獲取親兒子層級的元素 |
| 後代選擇器 | $("ul li"); | 使用空格，代表後代選擇器，包括孫子等 |
2、 隱式迭代
遍歷內部 DOM 元素（偽陣列形式儲存）的過程就叫做隱式迭代
簡單理解：給匹配到的所有元素進行迴圈遍歷，執行相應的方法，而不用我們在進行迴圈，簡化我們的操作，方便我們呼叫
3、 jQuery 篩選選擇器
| 語法 | 用法 | 描述 |
|---|---|---|
| :first | $("li:first"); | 獲取第一個 li 元素 |
| :last | $("li:last"); | 獲取最後一個 li 元素 |
| :eq(index) | $("li:eq(2)"); | 獲取到的 li 元素中，選擇索引號為 2 的元素，索引號從 0 開始 |
| :odd | $("li:odd"); | 獲取到的 li 元素中，選擇索引號為奇數的元素 |
| :even | $("li:even"); | 獲取到的 li 元素中，選擇索引號為偶數的元素 |
4、 jQuery 篩選方法
| 語法 | 用法 | 說明 |
|---|---|---|
| parent() | $("li").parent(); | 查詢父級 |
| children(selector) | $("ul").children("li"); | 查詢最近一級（親兒子）子代選擇器 |
| find(selector) | $("ol").find("li"); | 相當於後代選擇器 |
| siblings(selector) | $(".first").siblings("li"); | 查詢兄弟節點，不包括自己本身 |
| nextAll([expr]) | $(".first").nextAll(); | 查詢當前元素之後所有的同輩元素 |
| prevtAll([expr]) | $(".last").prevtAll(); | 查詢當前元素之前所有的同級元素 |
| hasClass(class) | $("div").hasClass("protected"); | 檢查當前元素是否有某個特定的類 |
| eq(index) | $("li").eq(2); | 獲取到的 li 元素中，選擇索引號為 2 的元素，索引號從 0 開始 |
index(): 獲取索引號
parents("選擇器")：選擇符合條件的祖先元素
5、 jQuery 裡面的排他思想
想要多選一的效果，排他思想：當前元素設定樣式，其餘的兄弟元素清除樣式
$(function () {
// 隱式迭代，給所有的按鈕都繫結了點選事件
$("li").click(function () {
// 當前的元素樣式改變
$(this).css("background", "pink");
// 其餘兄弟去掉背景顏色
$(this).siblings("li").css("background", "");
});
});
6、 鏈式程式設計
鏈式程式設計是為了節省程式碼量，看起來更優雅
$(function () {
$("li").click(function () {
$(this).css("background", "pink").siblings().css("background", "");
});
});
即重複的程式碼可以省略，直接寫在第一行程式碼後面
四、 jQuery 樣式操作
1、 操作 CSS 方法
jQuery 可以使用 CSS 方法來修改簡單元素樣式；也可以操作類，修改多個樣式
-
引數只寫屬性名，則是返回屬性值
$(this).css("color"); -
引數是 (屬性名, 屬性值) 中間用逗號分割，是設定一組樣式，屬性必須加引號，值如果是數字可以不用加單位和引號
$("div").css("width", "300px"); -
引數可以是物件形式，方便設定多組樣式，屬性名和屬性值用冒號隔開，屬性名可以不用加引號
$(this).css({"width": "20px", "background-color": "red"});如果是符合屬性則必須採用駝峰命名法，如果屬性值不是數字，則必須加引號
2、 設定類樣式方法
作用等同於 classList，可以操作樣式，注意操作類裡面的引數不要加點
-
新增類
$("div").addClass("current"); // 注意不要新增 . -
刪除類
$("div").removeClass("current"); // 注意不要新增 . -
切換類
$("div").toggleClass("current"); // 如果沒有這個類就新增，有就刪除這個類
3、 JQuery 類操作和 className 區別
原生 JS 中 className 會覆蓋元素原先裡面的類名
jQuery 裡面類操作只是對指定類進行操作，不影響原先的類名
五、 jQuery 效果
jQuery 給我們封裝了很多動畫效果，最為常見的如下：
1、 顯示和隱藏
show(); // 顯示
hide(); // 隱藏
toggle(); // 反轉
1.1 語法規範
show([speed, [easing], [fn]]);
引數：
- 引數都可以省略，無動畫直接顯示
- speed：三種預定速度之一的字串（slow，normal，fast）或表示動畫時長的毫秒數值
- easing：用來指定切換效果，預設是 swing，可用引數 linear
- fn：回撥函式，在動畫完成時執行的函式，每個元素執行一次
2、 滑動
slideDown(); // 下拉
slideUp(); // 上拉
slideToggle(); // 反轉
2.1 語法規範
slideDown([speed, [easing], [fn]]);
引數：
- 引數都可以省略，無動畫直接顯示
- speed：三種預定速度之一的字串（slow，normal，fast）或表示動畫時長的毫秒數值
- easing：用來指定切換效果，預設是 swing，可用引數 linear
- fn：回撥函式，在動畫完成時執行的函式，每個元素執行一次
3、 淡入淡出
fadeIn(); // 淡入以隱藏的元素
fadeOut();
fadeToggle();
fadeTo();
3.1 語法規範
fadeIn([speed, [easing], [fn]]);
// 引數和滑動的引數類似，注意fadeTo
fadeTo([speed], opacity, [easing], [fn]); // opacity：修改不透明度
4、 自定義動畫
animate(params, [speed], [easing], [fn]);
引數：
- params：想要修改的樣式屬性，以物件形式傳遞，必須寫。屬性名可以不帶引號，如果是複合屬性，則需要採取駝峰命名法。其餘引數可以省略
- speed：三種預定速度之一的字串（slow，normal，fast）或表示動畫時長的毫秒數值
- easing：用來指定切換效果，預設是 swing，可用引數 linear
- fn：回撥函式，在動畫完成時執行的函式，每個元素執行一次
<div></div>
<script>
$(function () {
$("div").click(function(){
$("div").animate({
left: 500,
top: 200,
opacity: 0.6,
}, 500, 'linear', function () {
alert("移動完成")
});
});
});
</script>
5、 事件切換
hover([over, ], out)
如果只寫一個函式，那麼滑鼠經過和滑鼠離開都會觸發這個函式
引數：
- over：滑鼠移動到元素上要觸發的函式（相當於 mouseenter）
- out：滑鼠移出元素要觸發的函式（相當於 mouseleave）
$(".nav>li").hover(function () {
// 滑鼠經過
$(this).children("ul").slideDown(200);
}, function () {
// 滑鼠離開
$(this).children("ul").slideUp(200);
});
// 也可以寫成
$(".nav>li").hover(function () {
$(this).children("ul").slideToggle(200);
});
6、 動畫佇列及其停止排隊方法
6.1 動畫或效果佇列
動畫或者效果佇列一旦觸發執行，如果多次觸發，就造成對個動畫或者效果排隊執行
6.2 停止排隊
stop();
- stop 方法用於停止動畫或效果
- 注意：stop 寫到動畫或者效果的前面，相當於停止結束上一次動畫
$(".nav>li").hover(function () {
$(this).children("ul").stop().slideToggle(200);
}); // 寫在動畫前面，相當於停止結束上一次動畫
六、 jQuery 屬性操作
1、 元素固有的屬性
所謂元素固有屬性就是元素本身自帶的屬性，比如 a 標籤裡面的 href
1.1 獲取屬性值
element.prop("attr");
1.2 設定屬性值
element.prop("attr", "val");
<input type="checkbox" name="" id="">
<script>
$(
function () {
$("input").change(function () { // 當核取方塊裡面的值改變的時候
console.log($("input").prop("checked"));
$("input").prop("checked", "true");
})
}
)
</script>
2、 元素自定義屬性
2.1 獲取屬性值
element.attr("attrName");
2.2 設定屬性值
element.attr("attrName", "val");
其也可以修改 h5 自定義屬性
3、 資料快取
elemen
t.data();
data 方法可以在指定的元素上存取資料，並不會修改 DOM 元素結構；一旦頁面重新整理，之前存放的資料都將被移除
<span></span>
<script>
$(function() {
$("span").data("uname", "andy");
console.log($("span").data("uname"));
})
</script>
獲取 h5 自定義屬性 data-index 時，第一個屬性不需要寫 data-，其餘返回的是數字型
<span data-index = "1"></span> <script> $(function() { console.log($("span").data("index")); }) </script>
七、 jQuery 元素內容
主要針對元素的內容還有表單的值操作
1、 普通元素內容
html(); // 獲取元素的內容，相當於原生的 innerHTML;
html("content"); // 設定元素內容
2、 元素文字內容
text(); // 相當於原生的 innerText;
text("content"); // 修改文字內容
3、 設定表單值
val(); // 獲取表單的值，相當於原生的 value;
val("content"); // 設定表單值
var num = 1.35555; console.log(num.toFixed(2)); // 保留兩位小數
八、 jQuery 元素操作
主要是遍歷、建立、新增、刪除元素操作
1、 遍歷元素
jQuery 隱式迭代是對同一類元素做了同樣的操作，如果想要給同一類元素做不同操作，就需要用到遍歷
語法1
$("div").each(function (index, demoEle) { });
var arr = ["red", "green", 'pink'];
$("div").each(function (index, demoEle) {
// 第一個引數一定是索引號，名稱可以是 i
// 第二個引數是 DOM 物件，其沒有 jQuery 方法
$(demoEle).css("color", arr[index]);
});
each()方法遍歷匹配每一個元素，主要用 DOM 處理
引數：
index：每個元素的索引號
demEle：每個 DOM 元素物件，不是 jQuery 物件
所以，想要使用 jQuery 方法，需要給這個 DOM 元素轉換為 jQuery 物件 $(demoEle)
語法2
$.each($("div"), function(index, demoEle) {});
// 遍歷元素，主要用於遍歷資料，處理資料
第一個引數，可以傳入物件、陣列和元素等
2、 建立元素
語法
var li = $("<li>我是建立的元素</li>"); // 動態建立一個 li 標籤
3、 新增元素
3.1 內部新增
語法
$("ul").append(li); // 將建立的 li 標籤放入 ul 裡面
$("ul").prepend(li); // 內部新增並且放到內容的最前面
append 方法，把內容放入匹配元素內部最後面，類似於原生的 appendChild
3.2 外部新增
語法
element.after("content"); // 把內容放到目標元素的後面
element.before("content"); // 把內容放入目標元素前面
外部新增元素是兄弟關係；內部新增關係是父子關係
4、 刪除元素
element.remove(); // 刪除匹配元素（本身）
element.empty(); // 刪除匹配元素集合中所有的節點，不刪除本身
element.html(""); // 清空匹配的元素裡面的位元組點，不刪除本身
九、 jQuery 尺寸、位置操作
1、 jQuery 尺寸
| 語法 | 用法 |
|---|---|
| windth() / height() | 取得匹配元素寬度和高度值，只算 width / height |
| innerWidth() / innerHeight() | 取得匹配元素寬度和高度值，包含 padding |
| outerWidth() / outerHeight() | 取得匹配元素寬度和高度值，包含 padding、border |
| outerWidth(true) / outerHeight(true) | 取得匹配元素寬度和高度值，包含 padding、border、margin |
以上寬度為空，則是獲取相應值，返回數字型別
如果引數為數字，則是修改相應值
引數不用寫單位
2、 jQuery 位置
位置主要有三個：offset() / position() / scrollTop() / scrollLeft()
2.1 offset
設定偏移量或獲取元素偏移
- offset 方法設定或返回被選元素相對於文件的偏移座標，跟父級沒有關係
- 該方法有兩個屬性：left 和 top 用於獲取距離文件頂部的距離
- 可以設定元素的偏移：
offset({top: 20, left: 30})
2.2 position
獲取元素位移
- position 方法用於返回被選元素相對於帶有定位的父級偏移座標，如果父級都沒有定位，則以文件為準
- 其只能獲取距離，不能設定偏移量
2.3 scroll
設定或獲取元素被捲去的頭部和左側
-
scrollTop 方法設定或返回被選定元素被捲去的頭部
$(function () { $(window).scroll(function () { console.log($(document).scrollTop()); // 得到被捲去頭部的距離，如果裡面傳值，就可以設定位置 }); }); // 返回頂部 $("body, html").stop().animate({ // 注意不能使用文件做動畫，而是元素做動畫 scrollTop: 0, }); -
scroll 物件的到元素距離頭部的距離
十、 jQuery 事件
1、 jQuery 事件註冊
1.1 單個事件
element.條件(function () {事件處理程式});
1.2 事件處理
on() 方法在匹配元素上繫結一個或多個事件的事件處理函式
element.on(events, [sleector], fn);
引數：
- events：一個或多個事件，如果事件函式相同用空格分開的事件型別
- selector：元素的子元素選擇器
- fn：回撥函式，即繫結在元素身上的監聽函式
$("div").on({
mouseenter: function () {
$(this).css("backgroundColor", "red");
},
click: function() {
$(this).css("backgroundColor", "pink");
}
}); // 事件函式不相同
$("div").on("mouseenter mouseleave", function () {
$(this).toggleClass(".nav");
}) // 事件函式一樣
on() 方法優勢
-
可以繫結多個事件
-
可以事件委派事件，事件委派的定義就是，把原來加給子元素身上的事件繫結在父元素身上，就是把事件委派給元素
$("div").on("click", "li", function () { alert(11); }); // click 是繫結在 ul 身上的，但是觸發的物件是 ul 裡面的小 li -
動態建立元素，click 沒有辦法繫結事件，on 可以給未來生成的元素繫結事件
2、 jQuery 事件解綁
利用 off 解綁事件
$("div").off(); // 解除 div 裡面繫結的所有事件
$("div").off("click", function () {}); // 解除點選事件，後面還可以新增監聽函式
$("ul").off("click", "li"); // 解除事件委託
如果有的事情只想發生一次，可以使用 one() 來繫結事件
3、 jQuery 自動觸發事件
trigger();
有些事情希望自動觸發，比如輪播圖自動播放功能跟點選右側按鈕一致，可以利用定時器自動觸發右側按鈕點選事件，不必滑鼠觸發
$("div").on("click", function () {
alert(11);
});
// 自動觸發事件
// 1. 元素.事件();該事件會觸發元素的預設行為
$("div").click();
// 2. 元素.trigger("事件");該事件會觸發元素的預設行為
$("div").trigger("click");
// 3. triggerHandler("事件");，該事件不會觸發元素的預設行為
$("div").triggerHandler("click");
3、 jQuery 事件物件
事件被觸發，就會有事件物件產生
element.on(events, [selector], function (event) {});
十一、 jQuery 其他方法
1、 jQuery 拷貝物件
如果想要把某個物件拷貝（合併）給另外一個物件使用，此時可以使用 $.extend() 方法
語法
$.extend([deep], target, object1, [object2]);
引數：
- deep：如果為 true 為深拷貝，預設為淺拷貝
- target：要拷貝的目標物件
- 淺拷貝是把拷貝的物件複雜資料型別中的地址拷貝給目標物件，修改目標物件會影響被拷貝物件
- 深拷貝，前面加 true，完全克隆（拷貝的物件，而不是地址），修改目標物件不會影響被拷貝物件
- 把裡面的資料完全複製一份給目標物件，如果裡面有不衝突的屬性，會合併到一起
- object1：待拷貝到第一個物件的物件
$(function () {
var to = {
id: 0,
name: "Make",
};
var obj = {
id: 1,
name: "Andy",
}; // 會覆蓋 to 原來的資料
$.extend(to, obj);
});
2、 jQuery 多庫共存
問題概述：
jQuery 使用 $ 作為識別符號，隨著 jQuery 的流行，其他 JS 庫也會用這 $ 作為識別符號，這樣一起使用會引起衝突
客觀需求：
需要一個解決方案，讓 jQuery 和其他庫 JS 庫不存在衝突，可以同時存在，這就叫做多庫共存
jQuery 解決方案：
-
把裡面的 $ 符號統一改為 jQuery，比如：
jQuery("div"); -
jQuery 變數規定新的名稱：
$.noConflict()var otherName = $.noConflict(); // 讓 jQuery 釋放對 $ 的控制權，讓使用者自己決定
3、 jQuery 外掛
jQuery 功能比較有限，想要更復雜的特效效果，可以藉助於 jQuery 外掛完成
注意：這些外掛也是依賴於 jQuery 來完成的，所以必須要先引入 jQuery 檔案，因此也稱為 jQuery 外掛
jQuery 外掛常用的網站：
jQuery 外掛使用步驟：
- 引入相關檔案（jQuery 和 外掛檔案）
- 複製相關 HTML、CSS、JS （呼叫外掛）
4、 圖片懶載入
圖片懶載入（圖片使用延遲載入，可提高網頁下載速度，它也能幫助減輕伺服器負載）
當我們頁面滑動到可視區域，再顯示圖片
我們使用 jQuery 外掛庫 EasyLazyload