前言
主要内容:在学习jQuery过程中,除了jQuery本身提供的api以外,还有很多内容需要我们学习
文章目录
一、发送ajax请求问题
可以使用$.get()或者$.post()发送ajax请求,在请求接口时需要传递参数- 参数一:请求地址,
- 参数二:请求时携带的参数
- 参数三:请求成功的回调
- 参数四:返回的数据类型
1.发送get请求
$.get('./ajax.php', { id: 10 }, function (res) { console.log(res) }, 'json')
2.发送post请求
$.post('./ajax.php', { id: 10 }, function (res) { console.log(res) }, 'json')
3.综合发送ajax请求
$.ajax({
url: './ajax', // 必填,请求的地址
type: 'GET', // 选填,请求方式,默认是 GET(忽略大小写)
data: {}, // 选填,发送请求是携带的参数
dataType: 'json', // 选填,期望返回值的数据类型,默认是 string
async: true, // 选填,是否异步,默认是 true
success () {}, // 选填,成功的回调函数
error () {}, // 选填,失败的回调函数
cache: true, // 选填,是否缓存,默认是 true
context: div, // 选填,回调函数中的 this 指向,默认是 ajax 对象
status: {}, // 选填,根据对应的状态码进行函数执行
timeout: 1000, // 选填,超时事件
})
4.发送jsonp请求
$.ajax({
url: './jsonp.php',
dataType: 'jsonp',
data: { name: 'Jack', age: 18 },
success (res) {
console.log(res)
},
jsonp: 'cb', // jsonp 请求的时候回调函数的 key
jsonpCallback: 'fn' // jsonp 请求的时候回调函数的名称
})
二、ajax钩子函数问题
全局的ajax函数也被称为ajax钩子函数,主要有
- 请求开始 ajaxStart()
- 准备发送 ajaxSend()
- 请求成功 ajaxSuccess()
- 请求失败 ajaxError()
- 请求完成 ajaxComplete()
- 请求结束 ajaxStop()
$(window).ajaxStart(function () {
console.log('有一个请求开始了')
})
$(window).ajaxComplete(function () {
console.log('有一个请求完成了')
})
//其他钩子函数基本与此类似,在不同请求的不同时期,执行不同的钩子函数,就不一一列举了
三、jQuery多库共存问题
解释:在我们某天引入其他插件的时候,也会出现向外暴露 $ 或者jQuery的情况,此时我们的jQuery就不能正常使用了,其解决方法如下:
- jQuery.noConflict() //此时不能适用$ 可以正常使用jQuery
- jQuery.noConflict(true) //此时$和jQuery都不能正常使用
- let aa=jQuery.noConflict() // 接下来就可以把 aa 当作 jQuery 向外暴露的接口使用了
- aa('div').click(function () { console.log('我被点击了') })
四、jQuery插件扩展问题
解释:主要用于扩展,在业务需求中jQuery没有的功能
1.扩展本身–通过$或者jQuery调用
jQuery.extend({
sort: function (arr) {
return arr.sort(function (a, b) {
return a - b
})
},
})
console.log($.sort([6, 8, 2, 4, 7]))
2.扩展元素集–用于元素的集合
//实现全选功能
jQuery.fn.extend({
check: function () {
return this.each((index, value) => {
value.checked = !value.checked
})
},
})
$('button').click(function () {
$('input[type="checkbox"]').check()
})
五、总结
完结撒花…