JQ常用方法汇总

特点

• jquery中不用考虑兼容
• jquery有强大的选择器机制
• 优质的隐式迭代
• 无所不能的链式编程

核心

选择器

筛选器

表单元素选择器

表单对象选择器

筛选器方法

事件方法

$(function(){})：页面资源全部加载完毕才执行，和原生的onload事件一样

属性、样式和类名操作

元素内容操作

元素节点操作

$("标签和内容")：创建一个标签并给里面放内容

元素尺寸

元素位置

动画

jQuery高级

jquery发送ajax请求

get请求语法

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

post请求语法

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

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 对象
})
复制代码

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.noConflict()； // 交出了$使用权，$符号不能使用了，只能使用jQuery
jQuery.noConflict(true)； // 交出了$和jQuery的使用权，$符号和jQuery都不能使用了
var 变量 = jQuery.noConflict(true); // 使用自定义的变量代替$和jQuery
复制代码

向jquery扩展自定义方法

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

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

// 向jquery自身扩展方法
jQuery.extend({
    // 参数是一个对象，对象中的方法是对自身扩展的方法
    fn:function(){
        console.log(456);
    }
});
// 调用
$.fn(); // 456
复制代码