1.jQuery簡介
阿新 • • 發佈:2022-03-27
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
核心函式:$
/jQuery
jQuery
核心物件:執行$()
返回的物件
// 繫結文件載入完成的監聽
$(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