目錄
1. jQuery 發送 ajax 請求 :
1. $.get( ) - 專門發送 get 請求的方法
2. $.post( ) - 專門發送 post 請求的方法
2. jQuery 發送 jsonp 請求 :
3. jQuery 內的全域 ajax 生命周期函式 :
4. jQuery 的入口函式 :
5. jQuery 的多庫并存 :
6. jQuery 實作深淺拷貝 :
1. 深淺拷貝
7. jQuery 的插件擴展機制 :
jQuery 簡圖 : ( 下 )
1. jQuery 發送 ajax 請求 :
+ jQuery 內的 ajax 封裝模式就是按照 回呼函式 和 promise 兩種形式進行封裝的
+ 你使用的時候, 可以按照 回呼函式 的形式使用, 也可以按照 promise 的形式使用
1. ajax( )
+ 專門用來發送 ajax 請求的方法
+ 使用不需要選擇到元素
+ 語法: $.ajax({ 對本次請求的配置資訊 })
=> url : 必填 , 表示 請求地址
=> method : 選填, 表示 請求方式 (默認是 GET)
~> method 可以寫成 type 也可以寫成 method
=> data : 選填, 表示攜帶給后端的 引數 (默認是 空字串)
~> 在 jquery 內, 不光可以寫查詢字串格式
~> 也可以直接書寫 物件 資料型別
=> async : 選填, 表示是否 異步 (默認是 true , 表示異步)
=> dataType : 選填, 表示是否 決議 后端回傳的資料,
默認是 'string' 不決議, 選填 ' json ' 表示決議
=> success : 選填, 表示 成功 的回呼函式
=> error : 選填, 表示 失敗 的回呼函式 ( jquery 認為失敗就是失敗 )
~> 失敗可以不光是請求失敗
~> 如果決議失敗也會走失敗 error 的回呼函式
=> timeout : 選填, 默認是 true( 表示永久 ), 可以選填一個數字, 表示 超時時間 , 單位是 ms
=> cache : 選填, 表示是否 快取 , 在發送 ajax 請求的時候默認是 true, 表示快取
~> 選填為 false 的時候, 表示不快取
~> 額外給你添加一個引數叫做 _ , 值是 時間戳
=> context : 選填, 表示 ajax 回呼函式的 背景關系 , 回呼函式內的 this 指向
~> 默認是 jquery 自己封裝的 ajax 物件
~> 可以自己調整, 填寫任意內容
=> headers : 選填, 默認是沒有, 當你需要額外設定 請求頭 資訊的時候
~> 可以在這個 headers 內書寫
~> 注意: headers 的值是一個 物件資料型別,
把你要設定的請求頭直接書寫在物件內就可以了
// ( 1 ) $.ajax({ url: './ajax', // 必填 , 請求的地址 method: 'POST', // 選填 , 請求的方式(默認是'GET') data: { name: 'Jack', age: 18 },// 選填, 發送請求時攜帶的引數 dataType: 'json', // 選填, 默認是 string ,不決議, 'json'表示決議 success: function (res) { console.log(res) } // 選填, 成功的回呼函式 }) // ( 2 )按照 promise 的形式書寫 $.ajax({ url: './ajax', // 必填 , 請求的地址 method: 'POST', // 選填 , 請求的方式(默認是'GET') data: { name: 'Jack', age: 18 },// 選填, 發送請求時攜帶的引數 dataType: 'json' // 選填, 默認是 string ,不決議, 'json'表示決議 }).then(res => console.log(res)) // 選填, 成功的回呼函式 // ( 3 ) async function fn() { const res = await $.ajax({ url: './ajax', // 必填 , 請求的地址 method: 'POST', // 選填 , 請求的方式(默認是'GET') data: { name: 'Jack', age: 18 },// 選填, 發送請求時攜帶的引數 dataType: 'json' // 選填, 默認是 string ,不決議, 'json'表示決議 }) console.log(res) } fn()const obj = { name: '我是自己創建的一個 obj 物件' } $.ajax({ url: './ajax', method: 'GET', data: { name: 'Jack', age: 18 }, dataType: 'json', success: function (res) { console.log('成功', this) }, error: function (xhr, err, info) { // xhr: jquery 封裝的 ajax 物件 // err: 錯誤資訊 // info: 錯誤資訊的描述 console.log('請求失敗了') console.log(xhr) console.log(err) console.log(info) }, // 表示超過 1000ms 服務器還沒有給出回應, 那么直接取消請求, 認定請求失敗 timeout: 1000, // 會在請求發送的時候, 額外添加一個引數 // 表示不快取, 會給你添加一個引數, 叫做時間戳 cache: false, // 表示把 success 回呼函式內的 this 指向 obj 這個物件 context: obj, // 表示你所有需要額外設定的請求頭資訊 headers: { authorization: 'abcdef', abc: 100 } })
1. $.get( ) - 專門發送 get 請求的方法
+ 語法: $.get(請求地址, 攜帶的引數, 回呼函式, 是否決議)
=> 攜帶的引數: 可以選填, 可以是查詢字串, 也可以是 物件
+ 按照 promise 和 回呼函式 兩種方式封裝的// 1. 發送一個 get 請求 $.get('./ajax.php', 'a=100&b=200', res => console.log(res), 'json')
2. $.post( ) - 專門發送 post 請求的方法
+ 語法: $.post(請求地址, 攜帶的引數, 回呼函式, 是否決議)
=> 攜帶的引數: 可以選填, 可以是查詢字串, 也可以是 物件
+ 按照 promise 和 回呼函式 兩種方式封裝的// 2. 發送一個 post 請求 $.post('./ajax.php', { username: 'zhangsan', password: '123456' }).then(res => console.log(res))
2. jQuery 發送 jsonp 請求 :
回顧 + jsonp 原理 :
+ 利用 script 標簽能把請求回來的內容當做 js 代碼執行
+ 利用 src 不受同源策略的影響
+ 要求:
=> 后端回傳的是一個可以執行的合法的 js 代碼
=> 后端回傳的內容是一個 '函式名(資料)' 這樣的字串
=> 前端在發送請求的時候, 把準備好的函式名給到后端
使用的方法是 $.ajax( )
+ 要求: dataType 必須寫成 'jsonp'
=> dataType 你寫成 json 或者 string 的時候, 都是發送 ajax 請求
=> dataType 你寫成 jsonp 的時候, 就不會發送 ajax 請求了,
而是 創建 script 標簽 發送 jsonp 請求
+ 注意: 在配置項內有兩個專門為 jsonp 請求設定的配置項
1. 會自動幫你添加一個引數叫做 callback, 表示我準備好的回呼函式
=> 名字是 jquery 隨機組成的
=> 名字可以修改
=> 使用 jsonpCallback 欄位 : 表示函式名
2. jquery 默認添加的欄位名字叫做 callback
=> 表示給后端傳遞回呼函式名的欄位
=> 可以修改的
=> 使用 jsonp 欄位修改
3. cache 快取機制
=> 當你發送 ajax 請求的時候, cache 默認值是 true, 表示快取,
不會添加一個時間戳作為引數
=> 當你發送 jsonp 請求的時候, cache 默認值是 false, 表示不快取,
會添加一個時間戳作為引數$.ajax({ url: './jsonp.php', // 表示發送一個 jsonp 請求 dataType: 'jsonp', // success: function (res) { console.log(res) }, jsonpCallback: 'fn', // jsonp 請求的時候回呼函式的名稱 jsonp: 'cb' // 表示在引數中把 回到函式的 欄位名改成 cb }) function fn(res) { console.log('我是 fn 函式') console.log(res) }
// 百度搜索引擎
$.ajax({
url: 'https://www.baidu.com/sugrec',
data: {
pre: 1,
p: 3,
ie: 'utf-8',
json: 1,
prod: 'pc',
from: 'pc_web',
sugsid: '34099,33970,34004,33855,33607,26350,22159',
wd: 'a',
req: 2,
csor: 1
},
// 表示發送一個 jsonp 請求
dataType: 'jsonp',
// 表示我準備好的函式叫做 fn 函式
jsonpCallback: 'fn',
// 表示在引數中把 回到函式的 欄位名改成 cb
jsonp: 'cb',
cache: true,
success (res) {
console.log(res)
}
})
3. jQuery 內的全域 ajax 生命周期函式 :
+ 也叫作 ajax 的 鉤子函式
1. ajaxStart( ) - 請求開始
+ 語法: $(window).ajaxStart(function () {})
+ 時機: 同一個作用域下的第一個 ajax 發送的時候, 會觸發執行
2. ajaxSend( ) - 發送之前
+ 語法: $(window).ajaxSend(function () {})
+ 時機: 會在每一個請求發送出去之前 觸發執行
3. ajaxSuccess( ) - 成功之后
+ 語法: $(window).ajaxSuccess(function () {})
+ 時機: 會在每一個請求成功了之后 觸發執行
4. ajaxError( ) - 失敗之后
+ 語法: $(window).ajaxError(function () {})
+ 時機: 會在每一個請求失敗了之后 觸發執行
5. ajaxComplete( ) - 完成之后
+ 語法: $(window).ajaxComplete(function () {})
+ 時機: 會在每一個請求完成之后 觸發執行, 不管成功還是失敗, 都是完成
6. ajaxStop( ) - 請求結束
+ 語法: $(window).ajaxStop(function () {})
+ 時機: 同一個作用域下的最后一個 ajax 完成以后, 觸發執行
// 1. ajaxStart() - 請求開始 $(window).ajaxStart(function () { console.log('第一個請求發送之前, ajax 開始') }) // 2. ajaxSend() - 發送之前 $(window).ajaxSend(function () { console.log('有一個請求發送出去了') }) // 3. ajaxSuccess() - 成功之后 $(window).ajaxSuccess(function () { console.log('有一個請求成功了^_^') }) // 4. ajaxError() - 失敗之后 $(window).ajaxError(function () { console.log('有一個請求失敗了') }) // 5. ajaxComplete() - 完成之后 $(window).ajaxComplete(function () { console.log('有一個請求完成') }) // 6. ajaxStop() - 請求結束 $(window).ajaxStop(function () { console.log('最后一個請求完成了') })
案例 : 利用鉤子函式完成一個 loading 效果
button {
padding: 20px;
font-size: 20px;
}
div {
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
background-color: rgba(255, 255, 255, .5);
display: flex;
justify-content: center;
align-items: center;
display: none;
}<button>發送請求</button>
<div class="loading">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F16f7121aedf9990f3ddd8725e99fe4d8369e06692d18-J0TUcl_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1630134491&t=e1a2d516e36c3b9be945e4faebf565da" alt="">
</div>
<script src="./jquery/jquery.min.js"></script>// 1. 什么時候開始顯示 loading 效果
// 只要有一個請求發送出去, 就要顯示
$(window).ajaxSend(() => $('.loading').css('display', 'flex'))
// 2. 什么時候小時 loading 效果
// 只要有一個請求完成了, 就要消失
$(window).ajaxComplete(() => $('.loading').hide())
// 3. 點擊按鈕發送請求
//(可自己配置一個 ajax.php 檔案, 需要在本地打開)
$('button').click(() => {
$.get('./ajax.php')
})可將網路切換到弱的 3G 狀態下, 查看效果更佳 :
4. jQuery 的入口函式 :
+ 語法: $(window).ready(function () { ... })
+ 注意: 會在頁面 DOM 結構加載完畢后執行
+ 類似于: window.onload = function () {}
+ 區別:
=> window.onload 是所有 資源 加載完畢后觸發
=> jQuery 入口函式是只要 html 結構加載完畢就觸發了
+ 簡寫:
=> jQuery 的入口函式有一個簡寫形式
=> $(function () { ... })<img src="https://img2.baidu.com/it/u=3228549874,2173006364&fm=26&fmt=auto&gp=0.jpg" alt=""> <script src="./jquery/jquery.js"></script>// 1. 入口函式 // 1-1. onl oad window.onload = function () { console.log('頁面所有資源加載完畢') } // 1-2. 入口函式 $(window).ready(function () { console.log('jQuery 的入口函式') console.log('DOM 結構加載完畢了') }) // 入口函式簡寫 : $(function () { console.log('入口函式') console.log('DOM 結構加載完畢了') })
5. jQuery 的多庫并存 :
+ 如果你引入了別的框架插件等第三方檔案內容也是使用 $ 和 jQuery 這個名字
+ 那么你把 jQuery 引入在最后面
+ 通過 jQuery 的 語法來還原 $ 和 jQuery
+ jQuery 可以交出 $ 和 jQuery 的控制權給別人
1. 還原 $
+ 語法: $.noConflict( )
+ 這個代碼一旦執行,就會讓出 $ 這個變數的控制權
+ jQuery 不再占用 $ 這個名字了
$.noConflict( )
2. 還原 $ 和 jQuery
+ 語法: $.noConflict(true)
+ 這個代碼一旦執行, 就會讓出 $ 和 jQuery 的控制權
+ jQuery 不再占用 $ 和 jQuery 這兩個名字了
$.noConflict(true)
3. 直接定義行的控制權
+ 直接接受 $.noConflict( ) 的 回傳值 , 就是新的控制權
+ 你自己定義一個新的名字當做 jQuery 的名字
const love = $.noConflict(true)
6. jQuery 實作深淺拷貝 :
1. 深淺拷貝
+ 在復制一個資料型別的時候(特指復雜資料型別, 陣列或者物件)
+ 在 JS 內, 對于 "復制" 有三個級別 :
1. 賦值
2. 淺拷貝
3. 深拷貝
1. 賦值 :
+ 簡單的地址復制
+ 使用 賦值符號( = ) 進行的操作
+ 對于基本資料型別, 賦值之后兩個變數之間沒有任何關系
+ 對于復雜資料型別, 賦值之后兩個變數操作同一個資料存盤空間
// 1. 賦值 let n1 = 5 // 把 n1 的值賦值給了 n2 let n2 = n1 console.log(n1, n2) // 5 5 n2 = 10 console.log(n1, n2) // 5 10 const o1 = { name: 'Jack' } // 進行賦值操作, 把 o1 的值賦值給了 o2 // 因為 o1 這個變數記憶體儲的是指向一個 物件資料型別 的空間地址 // 賦值的程序中, 就是把 o1 存盤的地址賦值給了 o2 // 所以給到 o2 的依舊是一個 地址 // 從此以后 o1 和 o2 操作一個物件存盤空間 const o2 = o1 console.log(o1, o2) // 使用任意一個變數名修改物件空間內的成員 o2.name = 'Rose' console.log(o1, o2)
2. 淺拷貝 :
=> 創建一個和原先資料結構一模一樣的資料結構
+ 假如原先是個陣列資料型別, 那么就新創建一個陣列
+ 假如原先是個物件資料型別, 那么就新創建一個物件
=> 通過 for in 回圈去遍歷原先資料結構
+ 把里面的每一個資料分別在新的資料結構中復制一份
+ 對于一維資料結構有效
+ 如果是多維資料結構,沒有意義 , 那么從第二維度開始, 依舊是操作同一個存盤空間
// 2. 淺拷貝 const o1 = { name: 'Jack', age: 18, info: { height: 180 } } // 2-1. 創建一個和原先資料結構一模一樣的結構 const o2 = {} // 2-2. 回圈遍歷原始資料結構 for (const key in o1) { // 2-3. 分別在新的資料結構中進行賦值 // 在進行 for in 遍歷的時候 // 在這里, 當 key === info 的時候 // o1[key] 存盤的也是一個地址 // o2[key] 就是把 o1[key] 存盤的地址復制了一份過去 // 從此以后, o1 和 o2 雖然是兩個資料空間 // 但是 o1.info 和 o2.info 操作的是一個資料空間 // o2.info = o1.info // 因為 info 記憶體儲的是一個 地址 // 賦值以后, o2.info 和 o1.info 存盤的是同一個地址 o2[key] = o1[key] } // 此時 o1 和 o2 不是一個物件存盤空間 // 只是長得一模一樣的兩個物件存盤空間 // 用任意一個區操作的時候, 另外一個不會改變 console.log(o1, o2)
// 修改 o2.name = 'Rose' o2.age = 20 console.log(o1, o2)
// 修改第二維度 info 內的資料 o2.info.height = 200 console.log(o1, o2)
知識點擴展 :
// 準確的判斷所有資料型別 // 語法: Object.prototype.toString.call(你要判斷的資料型別) // 回傳值: 該資料型別的 型別字串 '[object 型別]' console.log(Object.prototype.toString.call({})) // Object console.log(Object.prototype.toString.call([])) // Array console.log(Object.prototype.toString.call(123)) // Number console.log(Object.prototype.toString.call('123')) // String console.log(Object.prototype.toString.call(true)) // Boolean console.log(Object.prototype.toString.call(null)) // Null console.log(Object.prototype.toString.call(undefined))// Undefined console.log(Object.prototype.toString.call(/^$/)) // RegExp console.log(Object.prototype.toString.call(new Date()))// Date console.log(Object.prototype.toString.call(function () {}))//Function
// 如果一個資料是陣列資料型別
// 那么當你訪問他的 constructor 的時候, 自己沒有, 就要去自己的 __proto__ 上查找
// 陣列的 __proto__ 就是 Array.prototype
// Array.prototype 上面的 constructor 就是 Array// 如果一個資料是物件資料型別
// 那么當你訪問他的 constructor 的時候, 自己沒有, 就要去自己的 __proto__ 上查找
// 物件的 __proto__ 就是 Object.prototype
// Object.prototype 上面的 constructor 就是 Object
3. 深拷貝 :
=> 不停地重復淺拷貝的作業
=> 復制出一份完全一模一樣的資料結構
=> 不管多少維度的資料結構, 都能完整獨立的復制過來
=> 實作方式:
+ 使用 遞回 的方式進行逐層資料結構的 遍歷資料并賦值
+ 當我回圈遍歷的時候, 如果碰到的還是復雜資料型別
+ 那么就遞回進行遍歷
// 3. 深拷貝 const o1 = { name: 'Jack', age: 18, info: { weight: 180, height: 180, desc: { msg: '這個人很懶, 什么都沒有留下!' } }, hobby: ['吃飯', '睡覺', ['籃球', '足球']] } const o2 = {} // 3-1. 書寫函式來完成(遞回函式) // 使用遞回的方式進行深拷貝 function deepCopy(o2, o1) { // 做: 把 o1 內的所有資料全部拷貝到 o2 內部 // console.log(o1, o2) //3-2. 直接回圈遍歷 o1 資料 for (let key in o1) { // console.log(key); // 判斷, 如果是 物件資料型別 或者 陣列資料型別, 不進行賦值 // 否則, 才進行賦值 // 如果 o1[key] 是一個物件資料型別 // o2[key] 也要創建為一個物件資料型別 // 如果 o1[key] 是一個陣列資料型別 // o2[key] 也要創建為一個陣列資料型別 // 如果 o1[key] 是一個基本資料型別 // o2[key] 直接賦值 if (Object.prototype.toString.call(o1[key]) === '[object Object]') { // 是物件 // console.log('o1[key] 是一個物件資料型別 : ', key) o2[key] = {} // 在這個位置, o1[key] 是一個物件資料型別 // o2[key] 也是一個資料型別 // o1[key] 里面的每一個資料復制一份到 o2[key] deepCopy(o2[key], o1[key]) } else if (o1[key].constructor === Array) { // 是陣列 // console.log('o1[key] 是一個陣列資料型別 : ', key) o2[key] = [] // 把 o1[key] 內部的所有資料放在 o2[key] 內 deepCopy(o2[key], o1[key]) } else { // console.log('o1[key] 是一個基本資料型別 : ', key) // 直接復制 o2[key] = o1[key] } } } // 將來使用的時候 deepCopy(o2, o1) console.log(o1, o2) // 修改資料 o2.info.desc.msg = 'hello world'
4. 深拷貝 - 方案2
+ 只能是在 物件 和 陣列 資料結構中使用
+ 不能有函式
+ 利用 json 格式字串
4-1. 把源資料轉換成 json 格式字串
4-2. 把 json 格式字串轉換回 js 資料型別
// 4. 深拷貝 - 方案2 const o1 = { name: 'Jack', age: 18, info: { weight: 180, height: 180, desc: { msg: '你好 世界' } }, hobby: [ '吃飯', '睡覺' ] } console.log(o1) // 把 o1 轉換成 json 格式字串 // 現在的 jsonStr 就是基本資料型別 const jsonStr = JSON.stringify(o1) console.log(jsonStr) // 把 s 轉換成一個 JS 的物件格式 const o2 = JSON.parse(jsonStr) console.log(o2) // 修改 o2.info.desc.msg = 'hello world' console.log(o1, o2)
jQuery 內有實作深淺拷貝的方法 :
+ $.extend( )const o1 = { name: 'Jack', age: 18, info: { weight: 180, height: 180, desc: { msg: '這個人很懶, 什么都沒有留下!', title: '你好 世界' } }, hobby: [ '吃飯', '睡覺', [ '籃球', '羽毛球', '足球' ] ] }+ 淺拷貝 :
=> 語法: $.extend(物件1, 物件2, 物件3, ...)
=> 作用: 把從 物件2 開始的所有物件內的資料進行淺拷貝到 物件1 內
=> 實作的是淺拷貝// 1. 實作淺拷貝 // 把 o1 內的所有資料進行淺拷貝到 o2 身上 let o2 = {} $.extend(o2, o1) console.log(o1, o2) // 修改一下資料 o2.name = 'Rose' // 第二維度修改 o2.info.height = 200 console.log(o1, o2)
+ 深拷貝:
=> 語法: $.extend(true, 物件1, 物件2, 物件3, ...)
=> 作用: 把從 物件2 開始的所有物件內的資料進行深拷貝到 物件1 內
=> 實作的是深拷貝// 2. 實作深拷貝 let o2 = {} $.extend(true, o2, o1) // console.log(o1, o2) // 修改 o2.name = 'Tom' o2.info.height = 250 o2.info.desc.msg = '這個人更懶' console.log(o1, o2)
7. jQuery 的插件擴展機制 :
+ jQuery 提供的一些擴展內容
+ 當你認為 jQuery 內的方法不夠用的時候
+ jQuery 的方法分成兩類
1. 擴展給 jQuery 自己本身的方法 :
+ 語法: $.extend({
方法名: 函式 ,
...
})
+ 擴展以后是給 jQuery 本身使用的
+ 使用: $.方法名( )
=> 不需要依賴 DOM 來執行的方法
// 1. 給 jQuery 本身擴展方法 $.extend({ a: function () { console.log('我是一個 a 方法') }, // 我是一個 a 方法 setCookie: function (key, value, expires) { if (!expires) { document.cookie = key + '=' + value return } const time = new Date() time.setTime(time.getTime() - 1000 * 60 * 60 * 8 + 1000 * expires) document.cookie = key + '=' + value + ';expires=' + time }, getCookie: function (key) { // ... } }) $.a() // 可以使用 給 jQuery 擴展的方法 $.setCookie('a', 100, 30)
2. 擴展給原型上的方法 :
+ 語法: $.fn.extend({
方法名: 函式 ,
...
})
+ 擴展以后是給所有元素集合使用的
+ 使用: $().方法名( )
+ 第二種書寫方式:
$.extend($.fn, { 方法名: 函式, ... })
=> 需要依賴 DOM 來執行的方法
<input type="checkbox"> <input type="checkbox"> <input type="checkbox">// 2. 擴展給 jQuery 的原型上的方法 $.fn.extend({ // 我向 jquery 的原型上擴展了一個叫做 a 的方法 a: function () { console.log('你好 世界') }, checked: function (type = true) { // type 是 true 就設定為 true, type 是 false 就設定為 false // console.log('我能讓元素集合內的所有內容選中') // 問題: 這里的 this 是誰 ? // 這個 checked 函式呼叫方式, xxx.checked() // 這個 checked 函式內的 this 是 點前面的內容 // 這里的 this 就是 jQuery 獲取到的元素集合 => input 的元素集合 // 只要我遍歷 this, 讓內部的每一個都選中 // 在方法內回圈, 就是為了 隱式迭代 this.each((index, item) => { item.checked = type }) // 只要這個函式內回傳一個 jQuery 的元素集合 // 就可以達到鏈式編程的效果了 return this // 在方法內回傳 this, 就是為了使用鏈式編程 } }) $('input').checked(false)$('input').checked( ).css('width',60)
報錯 :
Cannot read property 'css' of undefined
// 使用的時候
// 問題: 為什么我們書寫的方法沒有辦法實作鏈式編程 ?
// 因為必須是元素集合, 才可以呼叫 css 這個方法
// .css( ) 這個方法需要依賴 jQuery 的元素集合使用
// 元素集合.css( )
// .css() 的前面是 $( ).checked( )
// 說明這一坨不是 jQuery 的元素集合
// 問題3: $( ).checked( ) 是什么東西 ?
// 依舊是 undefined
// $('input').checked( )擴展知識=>便與你理解一下 :
function fun() { const n = 10 + 20 } // res 是 const res = fun() console.log(res) // undefinedconst obj = { fn: function () { const n = 1 + 2 } } // res 是什么 ? // undefined const res = obj.fn() console.log(res) // undefined// 定義了一個函式 function fun() { return 123 } // fun 函式名, 存盤的是該函式的地址 // 你使用 fun 的時候, 就是在使用這個函式的地址, 其實就是函式體本身 console.log(fun) // ? fun() { return 123 } // 把 fun 存盤的函式地址賦值給 r1 變數 // 從此以后 r1 就是 fun 函式 const r1 = fun console.log(r1) // ? fun() { return 123 } console.log(r1 === fun) // true // fun() 是把函式呼叫 // r2 就是把函式呼叫完畢, 函式內給出的回傳值 const r2 = fun() console.log(r2) // 123 // 函式名() === 函式體內的 return
jQuery 簡圖 : ( 下 )
總結一下 : $( )
1. $('選擇器') => 獲取頁面元素
2. $(DOM節點) => 把 DOM 節點轉換成 jquery 的元素集合
3. $('html 結構字串') => 創建節點
4. $(函式)
=> jQuery 的入口函式, 會在 DOM 結構加載完畢后執行
前端 _ jQuery 之 小白版 ( 上 ) : https://blog.csdn.net/weixin_58099903/article/details/119208398
整理不易 , 望大家點點贊多多支持一下 (#^_^#)
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/291496.html
標籤：其他
上一篇：JS的介紹