【jQuery從入門到精通】01-jQuery簡介
阿新 • • 發佈：2021-08-29
jQuery簡介
2. 使用
區別
目錄
jQuery 簡介
1、jQuery 初識
What?
jQuery官網：http://jquery.com/- 一個優秀的 JS 函式庫
- 使用了
jQuery的網站超過 90% - 中大型 WEB 專案開發首選
Write Less，Do More！！！
Why?
- HTML 元素選取（選擇器）
- HTML 元素操作
- CSS 操作
- HTML 事件處理
- JS 動畫效果
- 鏈式呼叫 a().b().c()...
- 讀寫合一
- 瀏覽器相容
- 易擴充套件外掛
- ajax 封裝
How?
1. 引入 jQuery 庫
<!-- 引入jQuery --> <!--伺服器本地庫--> <script src="js/jquery-3.6.0.js"></script> <!--CDN遠端庫--> <!--<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>-->
2. 使用jQuery
jQuery核心函式：$/jQueryjQuery核心物件：執行$()返回的物件
// 繫結文件載入完成的監聽
$(function () {
// 繫結監聽事件
var $btn02 = $("#btn02");
$btn02.click(function () {
var username = $("#username").val();
username && alert(username);
});
})
區別 2 種 JS 庫檔案
- 開發版（測試版）
- 生產版（壓縮版）
區別 2 種引用 JS 庫的方式
- 伺服器本地庫
- CDN遠端庫
- 專案上線時，一般使用比較靠譜的CDN資源庫，減輕伺服器負擔
- https://www.bootcdn.cn/：搜尋
jQuery，複製<script>標籤到專案中即可使用
區別jQuery的不同版本
- 1.x
- 相容老版本 IE
- 檔案更大
- 2.x
- 部分 IE8 及以下支援
- 檔案小，執行效率更高
- 3.x
- 完全不再支援 IE8 及以下版本
- 提供了一些新的 API
- 提供不包含 ajax / 動畫 API 的版本
2、jQuery 的 2 把利器
// jQuery核心程式碼
(function(window){
var jQuery = function(){
return new jQuery.fn.init();
}
window.$ = window.jQuery = jQuery
})(window)
jQuery 核心函式
簡稱：jQuery函式（$/jQuery），jQuery庫向外直接暴露的就是$/jQuery
引入jQuery庫後，直接使用即可
-
當函式用：
$(xxx) -
當物件用：
$.xxx()
// jQuery函式：直接可用
console.log($, typeof $); // ƒ ( selector, context ) {} function
console.log(jQuery === $); // true
jQuery 核心物件
簡稱：jQuery物件
得到jQuery物件：執行jQuery函式返回的就是jQuery物件
使用jQuery物件：$obj.xxx()
// jQuery物件：執行jQuery函式得到它
console.log($(), typeof $(), $() instanceof Object); // jQuery.fn.init{} "object" true
3、jQuery 函式的使用
作為一般函式呼叫：$(param)
- 引數為函式：當 DOM 載入完成後，執行此回撥函式
- 引數為選擇器字元：查詢所有匹配的標籤並將它們封裝成
jQuery物件 - 引數為 DOM 物件：將 dom 物件封裝成
jQuery物件 - 引數為 html 標籤字串（用得少）：建立標籤物件並封裝成
jQuery物件
作為物件使用：$.xxx()
$.each()：隱式遍歷陣列$.trim()：去除兩端的空格
// 需求1.點選按鈕：顯示按鈕的文字，顯示一個新的輸入框
// 1、引數為函式：當 DOM 載入完成後，執行此回撥函式
$(function () { // 繫結文件加藏完成的監聽
// 2、引數為選擇器字元：查詢所有匹配的標籤並將它們封裝成`jQuery`物件
$("#btn").click(function () {
// alert(this.innerHTML); // this是什麼？發生事件的dom元素（<button>）
// 3、引數為 DOM 物件：將 dom 物件封裝成`jQuery`物件
alert($(this).html());
// 4、引數為 html 標籤字串（用得少）：建立標籤物件並封裝成`jQuery`物件
$('<input type="text" name="msg3"><br/>').appendTo("div");
});
// 需求2.遍歷輸出陣列中所有元素值
var arr = [3, 7, 4];
$.each(arr, function (index, item) {
console.log(index, item); // 0 3 1 7 2 4
});
// 需求3.去掉“my atguigu”兩端的空格
var str = " my atguigu ";
console.log('===' + str + '==='); // === my atguigu ===
console.log('===' + str.trim() + '==='); // ===my atguigu===
console.log('===' + $.trim(str) + '==='); // ===my atguigu===
})
4、jQuery 物件的使用
理解
即執行jQuery核心函式返回的物件
jQuery物件內部包含的是 dom 元素物件的偽陣列（可能只有一個元素）
jQuery物件擁有很多有用的屬性和方法，讓程式設計師能方便的操作 dom
屬性和方法
-
基本行為：操作標籤的基本方法
-
屬性：操作內部標籤的屬性或值
-
CSS：操作標籤的樣式
-
文件：對標籤進行增刪改操作
-
篩選：根據指定的規則過濾內部的標籤
-
事件：處理事件監聽相關
-
效果：實現一些動畫效果
這裡我們先學習jQuery物件的基本行為，其他的不放在當前章節中
基本行為
size()/length：包含的 DOM 元素個數[index]/get(index)：得到對應位置的 DOM 元素each()：遍歷包含的所有 DOM 元素index()：得到在所在兄弟元素中的下標
// 需求1.統計一共有多少個按鈕
// `size()`/`length`：包含的 DOM 元素個數
var $buttons = $('button');
console.log($buttons.length); // 4
// 需求2.取出第2個button的文字
console.log($('button:nth-child(2)').text()); // 測試二
// `[index]`/`get(index)`：得到對應位置的 DOM 元素
console.log($buttons[1].innerHTML, $buttons.get(1).innerHTML); // 測試二 測試二
// 需求3.輸出所有button標籤的文字
// `each()`：遍歷包含的所有 DOM 元素
// $buttons.each(function (index, domEle) {
// console.log(index, domEle.innerHTML); // 0 "測試一" 1 "測試二" 2 "測試三" 3 "測試四"
// });
$buttons.each(function () {
console.log(this.innerHTML); // 測試一 測試二 測試三 測試四
});
// 需求4.輸出’測試三’按鈕是所有按鈕中的第幾個
console.log($("#btn3").index()); // 2
偽陣列
Object物件length屬性- 數值下標屬性
- 沒有陣列特別的方法：
forEach()，push()，pop()，splice()
// 偽陣列
console.log($buttons instanceof Array); // false
//自定義一個偽陣列
var weiArr = {}
weiArr.length = 0;
weiArr[0] = 'atguigu';
weiArr.length = 1;
weiArr[1] = 123;
weiArr.length = 2;
for (var i = 0; i < weiArr.length; i++) {
var obj = weiArr[i];
console.log(i, obj); // 0 "atguigu" 1 123
}
console.log(weiArr.forEach, $buttons.forEach); //undefined undefined