jQuery今天我们继续来聊 jQuery发送 ajax 请求发送 get 请求

// 直接使用 $.get 方法来发送一个请求/* 参数一： 请求地址 参数二： 请求时携带的参数 参数三： 请求成功的回调 参数四： 返回的数据类型*/$.get('./ajax.php', { id: 10 }, function (res) { console.log(res) }, 'json')

发送 post 请求

// 直接使用 $.post 方法来发送一个请求/* 参数一： 请求地址 参数二： 请求时携带的参数 参数三： 请求成功的回调 参数四： 返回的数据类型*/$.post('./ajax.php', { id: 10 }, function (res) { console.log(res) }, 'json')

综合发送 ajax 请求

// 使用 $.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,   // 选填，超时事件})

发送一个 jsonp 请求

// 使用 $.ajax 方法也可以发送 jsonp 请求// 只不过 dataType 要写成 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 的钩子函数也就是在一个 ajax 的整个过程中的某一个阶段执行的函数而且每一个 ajax 请求都会触发ajaxStart任意一个请求在 开始 的时候就会触发这个函数

$(window).ajaxStart(function () { console.log('有一个请求开始了')})

ajaxSend任意一个请求在 准备 send 之前 会触发这个函数

$(window).ajaxSend(function () { console.log('有一个要发送出去了')})

ajaxSuccess任意一个请求在 成功 的时候就会触发这个函数

$(window).ajaxSuccess(function () { console.log('有一个请求成功了')})

ajaxError任意一个请求在 失败 的时候就会触发这个函数

$(window).ajaxError(function () { console.log('有一个请求失败了')})

ajaxComplete任意一个请求在 完成 的时候就会触发这个函数

$(window).ajaxComplete(function () { console.log('有一个请求完成了')})

ajaxStop任意一个请求在 结束 的时候就会触发这个函数

$(window).ajaxStop(function () { console.log('有一个请求结束了')})

jQuery 的多库共存我们一直在使用 jQuery，都没有什么问题但是如果有一天，我们需要引入一个别的插件或者库的时候人家也向外暴露的是 $ 获取 jQuery那么，我们的 jQuery 就不能用了那么这个时候，jQuery 为我们提供了一个多库并存的方法

// 这个方法可以交还 jQuery 命名的控制权jQuery.noConflict()// 上面代码执行完毕以后 $ 这个变量就不能用了// 但是 jQuery 可以使用console.log($) // undefinedconsole.log(jQuery) // 可以使用

完全交出控制权

// 这个方法可以交并且传递一个 true 的时候，会完全交出控制权jQuery.noConflict(true)​// 上面代码执行完毕以后 $ 这个变量就不能用了// jQuery 这个变量也不能用了console.log($) // undefinedconsole.log(jQuery) // undefined

更换控制权

// 可以用一个变量来接受返回值，这个变量就是新的控制权var aa = jQuery.noConflict(true)​// 接下来就可以把 aa 当作 jQuery 向外暴露的接口使用了aa('div').click(function () { console.log('我被点击了') })

JQuery 的插件扩展jQuery 确实很好很强大但是也有一些方法是他没有的，我们的业务需求中有的时候会遇到一些它里面没有的方法那么我们就可以给他扩展一些方法

扩展给他自己本身扩展给自己本身使用 jQuery.extend 这个方法扩展完后的内容只能用 $ 或者 jQuery 来调用

// jQuery.extend 接受一个参数，是一个对象，对象里面是我们扩展的方法jQuery.extend({ max: function (...n) { return Math.max.apply(null, n) }, min: function (...n) { return Math.min.apply(null, n) }})

扩展完毕我们就可以使用了

const max = $.max(4, 5, 3, 2, 6, 1)console.log(max) // 6const min = $.min(4, 5, 3, 2, 6, 1)console.log(min) // 1

扩展给元素集扩展完毕以后给元素的集合使用也就是我们用 $('li') 这样的选择器获取到的元素集合来使用使用 jQuery.fn.extend() 方法来扩展

// jQuery.fn.extend() 接受一个参数，是一个对象，对象里面是我们扩展的方法jQuery.fn.extend({ checked: function () { // return 关键字是为了保证链式编程 // 后面的代码才是业务逻辑 return this.each(function() { this.checked = true })    }})

扩展完毕我们就可以使用了

// 靠元素集合来调用$('input[type=checkbox]').checked()// 执行完毕之后，所有的 复选框 就都是选中状态了