2020-3-7 前端達人
jQuery超詳細總結
文章目錄
jQuery超詳細總結
一 選擇器
特殊選擇器
二 篩選器
用在 jQuery 選擇的元素后面
都是方法,對選擇出來的元素進行二次篩選
三 文本操作
總結
四 元素類名操作
五 元素屬性操作
在 H5 的標準下, 給了一個定義, 當你需要寫自定義屬性的時候，最好寫成 data-xxx="值"，當大家看到 data-xxx 的時候, 就知道這是一個自定義屬性
六 元素樣式操作
七 綁定事件
on()方法是專門用來綁定事件one() 方法是專門用來綁定一個只能執行一次的方法off() 方法是專門用來解綁一個元素的事件的trigger() 方法是專門用來觸發事件的方法hover()常用事件offset()position()scrollTop()scrollLeft()ready() 事件each() 方法jQuery 發送一個 GET 請求jQuery 發送一個 POST 請求jQuery 的 $.ajax 方法position()
postition: 定位
只讀的方法
讀取:
元素相對于定位父級的位置關系
得到的也是一個對象 { left: xxx, top: xxx }
如果你寫的是 right 或者 bottom, 會自動計算成 left 和 top 值給你
十一 獲取卷去的尺寸（頁面滾動條）
scrollTop()
原生 js 里面 document.documentElement.scrollTop
讀寫的方法
不傳遞參數的時候就是獲取卷去的高度
傳遞一個參數就是設置卷去的高度
scrollLeft()
原生 js 里面 document.documentElement.scrollLeft
讀寫的方法
不傳遞參數的時候就是獲取卷去的寬度
傳遞一個參數的時候就是設置卷去的寬度
十二 jQuery中的函數
ready() 事件
類似于 window.onload 事件,但是有所不同
window.onload 會在頁面所有資源加載行
ready() 會在頁面 html 結構加載完畢后執行
也叫做 jQuery 的入口函數
有一個簡寫的形式 $(function () {})
each() 方法
類似于 forEach(), 遍歷數組的
jQuery 的元素集合, 是一個 jQuery 數組, 不是一個數組, 不能使用 forEach()
forEach語法： forEach(function (item, index) {})
each語法：each(function (index, item) {})
比較少用到, 因為 jQuery 隱式迭代 自動遍歷
十三 jQuery中的動畫
讓元素出現不同的移動, 改變
transition -> 過渡動畫
animation -> 幀動畫
標準動畫
show() 顯示元素
語法: show(時間, 運動曲線, 運動結束的函數)
hide() 隱藏元素
語法: hide(時間, 運動曲線, 運動結束的函數)
toggle() 改變元素顯示或隱藏（如果顯示就隱藏，如果隱藏就顯示）
語法: toggle(時間, 運動曲線, 運動結束的函數)
三個方法的參數都可以選填，不需要每個都填寫
折疊動畫
slideDown() 下滑顯示
語法: slideDown(時間, 運動曲線, 運動結束的函數)
slideUp() 上滑隱藏
語法: slideUp(時間, 運動曲線, 運動結束的函數)
slideToggle() 切換滑動和隱藏
語法: slideToggle(時間, 運動曲線, 運動結束的函數)
漸隱漸顯動畫
實質是透明的opacity的變化
fadeIn() 逐漸顯示
fadeIn(時間, 運動曲線, 運動結束的函數)
fadeOut() 逐漸消失
fadeOut(時間, 運動曲線, 運動結束的函數)
fadeToggle() 切換顯示和消失
fadeToggle(時間, 運動曲線, 運動結束的函數)
以上三個方法的參數，均有默認值
fadeTo() 設置元素透明度變為你指定的數字
fadeTo(時間, 你指定的透明度, 運動曲線, 運動結束的函數)
綜合動畫
animate()
基本上大部分的 css 樣式都可以動畫
transform 不行, 顏色不行
語法: animate({}, 時間, 運動曲線, 運動結束的函數)
{ }里面就寫你要運動的 css 屬性,默認單位為px
停止動畫
讓當前的動畫結束
因為 jQuery 的動畫你一直點擊，就會一直觸發。即使不再點擊讓事件發生，還是會把沒執行完的動畫執行完畢。
你點擊 10 次, 他就會觸發 10 次, 直到 10 次全都完畢才結束
stop()
當這個函數觸發的時候, 就會讓運動立刻停下來
你運動到哪一個位置了就停止在哪一個位置
finish()
當這個函數觸發的時候, 就會讓運動立刻停下來
不管你運動到了哪一個位置, 瞬間到達運動完成位置
十四 jQuery發送ajax請求
jQuery 里面幫我們封裝好了幾個方法
專門用來發送 ajax 請求的
$.get() -> 專門用來發送 get 請求的
$.post() -> 專門用來發送 post 請求的
$.ajax() ->
發送什么請求都可以(get, post, put, delete)
并且還可以發送一個 jsonp 請求
jQuery 發送一個 GET 請求
語法: $.get(請求地址, 需要攜帶到后端的參數, 成功的回調函數, 期望后端返回的數據類型)
請求地址: 你要請求的后端接口地址(必填)
攜帶參數: 你需要給后端傳遞的參數
可以是一個固定格式的字符串 ‘key=value&key=value’
也可以是一個對象 { a: 100, b: 200 }
成功回調: 當請求成功的時候會執行的函數
期望數據類型: 就是你是不是需要 jQuery 幫你解析響應體
$.ajax({
url: '', // => 請求地址(必填)
type: '', // => 請求方式(GET, POST, ...) 默認是 GET
data: '', // => 攜帶到后端的參數
dataType: '', // => 期望后端返回的數據類型, 默認不解析
async: true, // => 是否異步, 默認是 true
success: function () {}, // => 成功的回調
error: function () {}, // => 失敗的回調
timeout: 數字, // 單位是 ms, 超時時間(超過你寫的時間沒有響應, 那么就算失敗)
cache: true, // 是否緩存, 默認是 true
context: 上下文, // 改變回調函數里面的 this 指向
...
})
$.ajax 里面失敗的回調
不光是請求失敗的時候會觸發
jQuery 認定失敗就是失敗
當 dataType 寫成 json 的時候, jQuery 會幫我們執行 JSON.parse()
當后端返回一個不是 json 格式的字符串的時候
執行 JSON.parse() 就會報錯
也會執行失敗的回調, 請求雖然成功, 但是解析失敗了, 也是失敗
JSON.parse(‘你好 世界’) -> 就會報錯了
$.ajax 里面是否緩存的問題
這個請求要不要緩存
當兩次請求地址一樣的時候, 就會緩存
如果你寫成 false, 表示不要緩存
jQuery 就會自動再你的請求后面加一個參數 =時間戳
第一次請求 ./server/get.php?=11:10:01.325的時間戳
第二次請求 ./server/get.php?_=11:10:02.326的時間戳
$.ajax 里面的回調 this 指向問題
ajax 的回調里面默認 this 指向被 jQuery 加工過的 ajax 對象
context 的值你寫的是誰, 回調函數里面的 this 就時誰
$.ajax 里面的請求方式的問題
$.ajax 這個方法里面, type 表示請求方式
jQuery 還給了我們一個參數叫做 method，也表示請求方式
當你寫請求方式的時候
可以寫成 type: ‘POST’
也可以寫成 method: ‘POST’
$.ajax 里面的接收響應的問題(2015年以后的版本才有 promise 的形式)
jQuery 默認把 ajax 封裝成了 promsie 的形式
你可以用 success 選項接收成功的回調
也可以用 .then() 的方式接收響應
jQuery 的 ajax 全局鉤子函數
鉤子: 掛在你的身上, 你的所有動作都和它有關系
這些全局函數都是掛在 ajax 身上的, 這個 ajax 的每一個動作都和全局函數有關系
全局的鉤子函數
1.ajaxStart()
會在同一個作用域下多個 ajax 的時候, 第一個 ajax 之前開始的時候觸發
如果有多個 ajax 他只觸發一次
2.ajaxSend()
每一個 ajax 再發送出去之前, 都會觸發一下
xhr.send() 之前觸發
ajaxSuccess()
每一個 ajax 再成功的時候觸發
只要有一個 ajax 成功了就會觸發
ajaxError()
每一個 ajax 再失敗的時候觸發
只要有一個 ajax 失敗了就會觸發
ajaxComplete()
每一個 ajax 完成的時候觸發
只要有一個 ajax 完成了, 不管成功還是失敗, 都會觸發
ajaxStop()
會在同一個作用域內多個 ajax 的時候, 最后一個 ajax 完成以后觸發
如果有多個 ajax 它只觸發一次
作用: 通常用來做 loading 效果
<img src="./loading.gif" alt="">
// 利用ajax鉤子函數 做一個lading效果 等待頁面
// 提前利用鉤子函數準備 loading 效果
// 每一次發送出去的時候都要顯示圖片
$(window).ajaxSend(() => {
$('img').show()
})
// 每一次完成的時候都要圖片再隱藏起來
$(window).ajaxComplete(() => {
$('img').hide()
})
// 每次點擊按鈕的時候都會發送一個 ajax 請求
$('button').click(() => {
// 發送一個 ajax 請求
$.ajax({
url: './server/get.php',
data: { a: 100, b: 200 },
dataType: 'json',
success: function (res) {
console.log('請求成功了')
console.log(res)
}
})
})
十五 jQuery 發送一個 jsonp 請求
jQuery 也提供給我們發送 jsonp 請求的方式
jsonp: 利用 script 標簽的 src 屬性來請求
返回值: 是一個字符串, 字符串里面寫了一個 函數名(后端傳遞給前端的參數)
使用 $.ajax() 這個方法
必須寫的:dataType: 'jsonp'
發送 jsonp 請求
jQuery 幫我們準備好了一個函數名, 并且以參數的形式帶到了后端
jQuery 幫我們帶過去的 callback 參數, 就是它準備好的函數名
后端就應該返回一個 jQuery 準備好的函數名()
其他參數
jsonp: '', 你帶到后端表示你函數名的那個 key, 默認值是 callback
cache: false, 當 dataType === ‘jsonp’ 的時候, 默認 cache 就是 false
// 發送一個 jsonp 請求
$.ajax({
url: '
dataType: 'jsonp', // 表示我要發送一個 jsonp 請求
jsonp: 'cb', // 表示參數里面的 cb 屬性時我準備好的函數名
cache: true, // 表示緩存本次請求
success: function (res) {
console.log(res)
}
})
// jQuery 準備好的函數名
// + jQuery34108160883644340862_1582255906750
// + 變量名包含 數字 字母 下劃線 $
// + function jQuery34108160883644340862_1582255906750() {}
十六 jQuery 的多庫并存機制
因為 jQuery 引入頁面以后, 向全局添加了兩個名字
一個叫做 $
一個叫做 jQuery
萬一有別的類庫也起名叫做 jQuery 或者$ 怎么辦
當我兩個庫都需要使用的時候
因為向全局暴露的名字一樣, 就會發生沖突了
誰的文件引再后面, 誰的名字就占主要位置了
兩個只能選擇一個使用
jQuery 提供了一個方法
我可以不占用$ 或者 jQuery 這個名字
noConflict()
語法: $.noConflict() 或者jQuery.noConflict()
當你執行了 noConflict() 以后, jQuery 就交出了$的控制權。
jQuery向全局暴露的不在有$ 這個名字了。當你執行了noConflict(true) 以后, jQuery就交出了 $ 和jQuery 的控制權。
交出去以后, 我的 jQuery 就用不了
noConflict() 的返回值: 就是一個新的控制權
你只要接收一個返回值, 你定好的變量是什么,jQuery 的控制權就是什么
// 交出 $ 的控制權
// $.noConflict()
// 交出 $ 和 jQuery 的控制權
// $.noConflict(true)
// 改變 jQuery 的控制權
var $$ = $.noConflict(true)
十七 jQuery 的插件擴展機制
jQuery 還提供給我們了一個機制, 就是你可以向 jQuery 里面擴展一些方法
兩個方法
$.extend()
擴展給 jQuery本身使用的
語法:
$.extend({ 你要擴展的方法名: function () {}, 你要擴展的方法名: function () {}, ... })
使用的時候就是 $.你擴展的方法名()
$.fn.extend() => $.extend($.fn, { 你擴展的方面名 })
擴展給 jQuery 元素集合使用的
語法 $.fn.extend({ 你要擴展的方法名: function () {}, 你要擴展的方法名: function () {}, ... })
使用的時候就是 $(選擇器).你擴展的方法名()
$('div').html()
// 1. 擴展給 jQuery 本身
// jQuery 本身沒有操作 cookie 的方法
// $.extend({
// setCookie: function (key, value, expires) {
// // 寫上設置 cookie 的方法
// if (expires) {
// var time = new Date()
// time.setTime(time.getTime() - 1000 60 60 8 + 1000 expires)
// document.cookie = ${key}=${value};expires=${time}
// } else {
// document.cookie = ${key}=${value}
// }
// },
// getCookie: function (key) {
// // ...
// }
// })
// 使用我們擴展的方法去設置 cookie
// $.setCookie('a', 100)
// $.setCookie('b', 200, 10)
// 2. 擴展給元素集合
// 擴展一個全選的方法
// 方法以執行, 就能讓 input checkbox 變成選中狀態或者不選中狀態
$.fn.extend({
selectAll: function (type = true) {
// type 就是你傳遞進來的選中或者不選中一個標志
// 你不傳遞的時候, 我默認是 true, 你傳遞了就用你傳遞的
// console.log(this) // 就是你調用的時候前面的哪個元素集合
this.each(function (index, item) {
// 讓元素集合中的每一個 input 的 checked 屬性為 true
item.checked = type
})
// return 這個元素集合, 達到一個鏈式編程的效果
return this
}
})
$('button').click(() => {
// 讓所有 input 框變成選中狀態
console.log($('input').selectAll().attr('hello', 'world'))
})
十八 jQuery 的拷貝對象問題
$.extend() 深拷貝 與 淺拷貝
傳遞一個對象的時候, 可以做到插件擴展機制
傳遞多個對象的時候, 可以將后面幾個對象的內容復制到第一個對象里面
語法:
$.extend(是否深拷貝, 對象1, 對象2, 對象3, ...)
是否深拷貝: 默認是 false, 可以不寫
從 對象2 開始, 后面所有對象的內容都會被拷貝到 對象1 里面
再拷貝的時候, 如果有重復的 key, 那么以寫在后面的為準(后來者居上)
十九 jQuery 的插件
基于 jQuery 使用的, 別人封裝好的插件
我們拿來使用就可以了, 前提就是要有 jQuery
例子 一個叫做 jquery-validate 的插件
專門用來做表單驗證的
你輸入的內容是不是符合規則
下載
引入文件
去復制粘貼
<!-- 引入文件 --> <!-- 注意: 先引入 jQuery, 后引入 jquery-validate --> <script src="./jquery/jquery.min.js"></script> <!-- jquery-validate 這個文件依賴的 jquery --> <script src="./jquery-validate/jquery.validate.min.js"></script> <!-- 引入中文信息提示包, 必須在 jquery-validate 的后面 --> <script src="./jquery-validate/localization/messages_zh.min.js"></script> <script>
// 選擇到你要驗證的表單的 form 標簽
// 執行 validate 方法
// {} 里面就寫我們的驗證規則
$('#login').validate({
// 你需要的驗證規則
rules: {
// key 就是你要驗證的哪個 input 框的 name 屬性
username: 'required', // 用戶名必填
password: { // 一個字段可以寫多個驗證方式
required: true,
minlength: 6, // 最少是六個
maxlength: 12, // 最多十二個
}
},
// 你自定義提示的文本內容
messages: {
// key 就是你驗證的哪個 input 框的 name 屬性
username: '請輸入用戶名! ^_^',
password: {
required: '請輸入密碼!',
minlength: '最少要輸入 6 個字符噢!'
}
},
// 表單的提交事件
// 這個函數會在表單驗證通過以后執行
submitHandler: function (form) {
// form 接收的就是你的 form 標簽
// console.log(form)
// console.log('表單驗證通過了, 我需要使用 ajax 去提交數據了')
// 有一個 jQuery 的方法
// serialize() 快速獲取表單輸入的數據
// $(form).serialize() 就能拿到這個 form 標簽里面的表單數據
// console.log($(form).serialize()) // username=admin&password=123456
// 發送請求到后端
$.post('./server/login.php', $(form).serialize(), res => {
console.log(res)
}, 'json')
}
})
————————————————