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