概念

美元符号$是著名的jQuery符号。jQuery把所有功能全部封装在一个全局变量jQuery中，而$也是一个合法的变量名，它是变量jQuery的别名

$本质上就是一个函数，但是函数也是对象，于是$除了可以直接调用外，也可以有很多其他属性

选择器

层级选择器

查找和过滤

操作DOM

修改Text和Html：调用jQuery对象的 text( ) 和 html( ) 方法分别获取节点和原始Html文本
修改CSS：调用jQuery对象的 css('name', 'value')
显示和隐藏DOM：调用jQuery对象的 hide( ) 和 show( )
获取DOM信息：调用jQuery对象的 attr( ) removeAttr( ) prop( ) is( )
操作表单：调用jQuery对象的val( )

事件

用on方法来绑定一个事件，需要传入事件名称和应对的处理函数

var a = $('#test-link');
a.on('click', function () {
    alert('Hello!');
});

或者用简化的写法直接调用 click( )

a.click(function () {
    alert('Hello!');
});

初始化代码必须放到 document 对象的 ready 事件中，保证DOM已完成初始化：

<html>
<head>
    <script>
        $(document).on('ready', function () {

        });
    </script>
</head>
<body>
    <form id="testForm">
        ...
    </form>
</body>

由于 ready 事件使用非常普遍，所以可以简化：

$(document).ready(function () {

});

甚至可以再简化为：

$(function () {
    // init...
});

AJAX

jQuery在全局对象jQuery（也就是$）绑定了 ajax( ) 函数，可以处理AJAX请求

ajax(url, settings) 函数需要接收一个url和一个可选的 settings 对象，常用的选项如下：

async：是否异步，默认true，非特殊不要指定为false
method：发送的Methode，默认为'GET'，可指定为'POST'或'PUT'等
contentType：发送POST请求的格式，默认值为'application/x-www-form-urlencoded; charset=UTF-8'，也可以指定为'text/plain' 或 'application/json'
data：发送的数据，类型可以是字符串、数组或oject。如果是GET请求，data将被转换成query附加到URL上，如果是POST请求，根据contentType把data序列化成合适的格式
headers：发送额外的HTTP头，必须是一个object
dataType：接收的数据格式，可以指定为'html' 'xml' 'json' 'text'等，默认情况根据响应的content-Type猜测

下面是一个发送GET请求，并返回一个JSON格式的数据

var jqxhr = $.ajax('/api/categories', {
    dataType: 'json'
});

jQuery的jqXHR对象类似一个Promise对象，我们可以用链式写法来处理各种回调：

var jqxhr = $.ajax('/api/categories', {
    dataType: 'json'
}).done(function (data) {
    ajaxLog('成功, 收到的数据: ' + JSON.stringify(data));
}).fail(function (xhr, status) {
    ajaxLog('失败: ' + xhr.status + ', 原因: ' + status);
}).always(function () {
    ajaxLog('请求完成: 无论成功或失败都会调用');
});

最后可以写成这样

$.ajax('${base}/apply/save', {
    method: 'POST',
    data: {'type': type, 'expo': expo},
    dataType: 'json'
})
    .done(function (data) {
        // done
    })
    .fail(function (xhr, status) {
        console.log('fail: ' + xhr.status + ' reason:' + status);
    })
    .always(function () {
        // done
    });

（非原创侵删文章来源：https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000）