jQuery补充内容

前言

主要内容:在学习jQuery过程中,除了jQuery本身提供的api以外,还有很多内容需要我们学习

---

---

一、发送ajax请求问题

可以使用$.get()或者$.post()发送ajax请求,在请求接口时需要传递参数

1. 参数一:请求地址,
2. 参数二:请求时携带的参数
3. 参数三:请求成功的回调
4. 参数四:返回的数据类型
   

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钩子函数,主要有

1. 请求开始 ajaxStart()
2. 准备发送 ajaxSend()
3. 请求成功 ajaxSuccess()
4. 请求失败 ajaxError()
5. 请求完成 ajaxComplete()
6. 请求结束 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()
})

五、总结

完结撒花…