jQuery高级

jquery发送ajax请求

get请求

语法：

$.get('请求地址', 参数, 成功的回调函数, 'json');
参数1：请求地址
参数2：请求携带的数据，可以是拼接的字符串形式，也可以是对象形式
参数3：成功的回调函数，参数为响应回来的的数据
参数4：希望返回的数据格式

$.get("get.php",{id:1},function(res){console.log(res);},"json");

post请求

语法：

$.post('请求地址', 参数, 成功的回调函数, 'json');
参数1：请求地址
参数2：请求携带的数据，可以是拼接的字符串形式，也可以是对象形式
参数3：成功的回调函数，参数为响应回来的的数据
参数4：希望返回的数据格式

$.post("post.php",{id:1},function(res){console.log(res);},"json");

ajax请求

语法：

$.ajax({
url: 请求地址, // 必填，请求的地址
type: 请求方式, // 选填，请求方式，默认是 GET（忽略大小写）
data: {}, // 选填，发送请求是携带的参数
dataType: 'json', // 选填，期望返回值的数据类型，默认是 string
async: true, // 选填，是否异步，默认是 true
success () {}, // 选填，成功的回调函数
error () {}, // 选填，失败的回调函数，参数有xhr，是ajax对象，status状态，err错误信息
cache: true, // 选填，是否缓存，默认是 true
timeout: 1000, // 选填，超时时间，单位毫秒
context: div, // 选填，回调函数中的 this 指向，默认是 ajax 对象
})

$.ajax({
    type:"post",
    url:"ajax.php",
    dataType:"json",
    success:function(res){
        console.log(res);
    }
});

jsonp请求

语法：

$.ajax({
url: 请求地址,
dataType: 'jsonp',
data: { name: 'Jack', age: 18 },
success (res) {
console.log(res)
},
jsonp: 'cb', // jsonp 请求的时候回调函数的 key
jsonpCallback: 'fn' // jsonp 请求的时候回调函数的名称
})

全局ajax函数

全局ajax函数指的ajax的钩子函数。钩子函数指的是一件事情执行到某个阶段的时候自动调用的函数。

第一个请求在开始的时候就会触发这个函数：

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

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

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

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

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

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

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

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

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

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

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

jquery的标识符

jquery的开头都是$获取时jQuery。如果在页面引入别人的插件，别人的插件写的也是要用$或jQuery开头的，那么会和引入的jquery产生冲突。jquery早已预料到了这种情况，所以jquery可以将$或jQuery的使用权交出，或换成其他的操作符。

jQuery.noConflict()； // 交出了$使用权，$符号不能使用了，只能使用jQuery
jQuery.noConflict(true)； // 交出了$和jQuery的使用权，$符号和jQuery都不能使用了
var 变量 = jQuery.noConflict(true); // 使用自定义的变量代替$和jQuery

jquery扩展

jquery总共提供了两类方法，一类是元素集合调用，一类是自己调用：

$("div").css();
$.get();

jquery提供的方法在情况下，会写的很复杂，所以提供了一个插件机制，可以向jquery中扩展自己的方法。

向元素集合扩展方法：

jQuery.fn.extend({
    fn:function(){
        console.log(123);
    }
})
// 参数是一个对象，对象中的方法是对每个元素集合扩展的方法

这样写好以后，就可以使用元素集合调用这个方法了：

$("div").fn(); // 123

向jquery自身扩展方法：

jQuery.extend({
    fn:function(){
        console.log(456);
    }
});
// 参数是一个对象，对象中的方法是对自身扩展的方法

调用：

$.fn();