jQuery
今天我們繼續(xù)來聊 jQuery
發(fā)送 ajax 請(qǐng)求
發(fā)送 get 請(qǐng)求
// 直接使用 $.get 方法來發(fā)送一個(gè)請(qǐng)求
/*
? ? 參數(shù)一： 請(qǐng)求地址
? ? 參數(shù)二： 請(qǐng)求時(shí)攜帶的參數(shù)
? ? 參數(shù)三： 請(qǐng)求成功的回調(diào)
? ? 參數(shù)四： 返回的數(shù)據(jù)類型
*/
$.get('./ajax.php', {id:10},function(res) {console.log(res) },'json')
發(fā)送 post 請(qǐng)求
// 直接使用 $.post 方法來發(fā)送一個(gè)請(qǐng)求
/*
? ? 參數(shù)一： 請(qǐng)求地址
? ? 參數(shù)二： 請(qǐng)求時(shí)攜帶的參數(shù)
? ? 參數(shù)三： 請(qǐng)求成功的回調(diào)
? ? 參數(shù)四： 返回的數(shù)據(jù)類型
*/
$.post('./ajax.php', {id:10},function(res) {console.log(res) },'json')
綜合發(fā)送 ajax 請(qǐng)求
// 使用 $.ajax 方法
// 只接受一個(gè)參數(shù)，是一個(gè)對(duì)象，這個(gè)對(duì)象對(duì)當(dāng)前的請(qǐng)求進(jìn)行所有的配置
$.ajax({
url:'./ajax',// 必填，請(qǐng)求的地址
type:'GET',// 選填，請(qǐng)求方式，默認(rèn)是 GET（忽略大小寫）
data: {},// 選填，發(fā)送請(qǐng)求是攜帶的參數(shù)
dataType:'json',// 選填，期望返回值的數(shù)據(jù)類型，默認(rèn)是 string
async:true,// 選填，是否異步，默認(rèn)是 true
success() {},// 選填，成功的回調(diào)函數(shù)
error() {},// 選填，失敗的回調(diào)函數(shù)
cache:true,// 選填，是否緩存，默認(rèn)是 true
context:div,// 選填，回調(diào)函數(shù)中的 this 指向，默認(rèn)是 ajax 對(duì)象
status: {},// 選填，根據(jù)對(duì)應(yīng)的狀態(tài)碼進(jìn)行函數(shù)執(zhí)行
timeout:1000,// 選填，超時(shí)事件
})
發(fā)送一個(gè) jsonp 請(qǐng)求
// 使用 $.ajax 方法也可以發(fā)送 jsonp 請(qǐng)求
// 只不過 dataType 要寫成 jsonp
$.ajax({
url:'./jsonp.php',
dataType:'jsonp',
data: {name:'Jack',age:18},
success(res) {
console.log(res)
?? },
jsonp:'cb',// jsonp 請(qǐng)求的時(shí)候回調(diào)函數(shù)的 key
jsonpCallback:'fn'// jsonp 請(qǐng)求的時(shí)候回調(diào)函數(shù)的名稱
})
全局 ajax 函數(shù)
全局的 ajax 函數(shù)我們也叫做 ajax 的鉤子函數(shù)
也就是在一個(gè) ajax 的整個(gè)過程中的某一個(gè)階段執(zhí)行的函數(shù)
而且每一個(gè) ajax 請(qǐng)求都會(huì)觸發(fā)
ajaxStart
網(wǎng)頁(yè)中的第一個(gè)請(qǐng)求在 開始 的時(shí)候就會(huì)觸發(fā)這個(gè)函數(shù)
$(window).ajaxStart(function() {
console.log('有一個(gè)請(qǐng)求開始了')
})
ajaxSend
任意一個(gè)請(qǐng)求在 準(zhǔn)備 send 之前 會(huì)觸發(fā)這個(gè)函數(shù)
$(window).ajaxSend(function() {
console.log('有一個(gè)要發(fā)送出去了')
})
ajaxSuccess
任意一個(gè)請(qǐng)求在 成功 的時(shí)候就會(huì)觸發(fā)這個(gè)函數(shù)
$(window).ajaxSuccess(function() {
console.log('有一個(gè)請(qǐng)求成功了')
})
ajaxError
任意一個(gè)請(qǐng)求在 失敗 的時(shí)候就會(huì)觸發(fā)這個(gè)函數(shù)
$(window).ajaxError(function() {
console.log('有一個(gè)請(qǐng)求失敗了')
})
ajaxComplete
任意一個(gè)請(qǐng)求在 完成 的時(shí)候就會(huì)觸發(fā)這個(gè)函數(shù)
$(window).ajaxComplete(function() {
console.log('有一個(gè)請(qǐng)求完成了')
})
ajaxStop
任意一個(gè)請(qǐng)求在 結(jié)束 的時(shí)候就會(huì)觸發(fā)這個(gè)函數(shù)
$(window).ajaxStop(function() {
console.log('有一個(gè)請(qǐng)求結(jié)束了')
})
jQuery 的多庫(kù)共存
我們一直在使用 jQuery，都沒有什么問題
但是如果有一天，我們需要引入一個(gè)別的插件或者庫(kù)的時(shí)候
人家也向外暴露的是 $ 獲取 jQuery
那么，我們的 jQuery 就不能用了
那么這個(gè)時(shí)候，jQuery 為我們提供了一個(gè)多庫(kù)并存的方法
// 這個(gè)方法可以交還 jQuery 命名的控制權(quán)
jQuery.noConflict()
// 上面代碼執(zhí)行完畢以后 $ 這個(gè)變量就不能用了
// 但是 jQuery 可以使用
console.log($)// undefined
console.log(jQuery)// 可以使用
完全交出控制權(quán)
// 這個(gè)方法可以交并且傳遞一個(gè) true 的時(shí)候，會(huì)完全交出控制權(quán)
jQuery.noConflict(true)
// 上面代碼執(zhí)行完畢以后 $ 這個(gè)變量就不能用了
// jQuery 這個(gè)變量也不能用了
console.log($)// undefined
console.log(jQuery)// undefined
更換控制權(quán)
// 可以用一個(gè)變量來接受返回值，這個(gè)變量就是新的控制權(quán)
varaa=jQuery.noConflict(true)
// 接下來就可以把 aa 當(dāng)作 jQuery 向外暴露的接口使用了
aa('div').click(function() {console.log('我被點(diǎn)擊了') })
JQuery 的插件擴(kuò)展
jQuery 確實(shí)很好很強(qiáng)大
但是也有一些方法是他沒有的，我們的業(yè)務(wù)需求中有的時(shí)候會(huì)遇到一些它里面沒有的方法
那么我們就可以給他擴(kuò)展一些方法
擴(kuò)展給他自己本身
擴(kuò)展給自己本身使用 jQuery.extend 這個(gè)方法
擴(kuò)展完后的內(nèi)容只能用 $ 或者 jQuery 來調(diào)用
// jQuery.extend 接受一個(gè)參數(shù)，是一個(gè)對(duì)象，對(duì)象里面是我們擴(kuò)展的方法
jQuery.extend({
max:function(...n) {returnMath.max.apply(null,n) },
min:function(...n) {returnMath.min.apply(null,n) }
})
擴(kuò)展完畢我們就可以使用了
constmax=$.max(4,5,3,2,6,1)
console.log(max)// 6
constmin=$.min(4,5,3,2,6,1)
console.log(min)// 1
擴(kuò)展給元素集
擴(kuò)展完畢以后給元素的集合使用
也就是我們用 $('li') 這樣的選擇器獲取到的元素集合來使用
使用 jQuery.fn.extend() 方法來擴(kuò)展
// jQuery.fn.extend() 接受一個(gè)參數(shù)，是一個(gè)對(duì)象，對(duì)象里面是我們擴(kuò)展的方法
jQuery.fn.extend({
checked:function() {
// return 關(guān)鍵字是為了保證鏈?zhǔn)骄幊?/p>
// 后面的代碼才是業(yè)務(wù)邏輯
returnthis.each(function() {this.checked=true})
?? }
})
擴(kuò)展完畢我們就可以使用了
// 靠元素集合來調(diào)用
$('input[type=checkbox]').checked()
// 執(zhí)行完畢之后，所有的 復(fù)選框 就都是選中狀態(tài)了
