本文主要总结jQuery中一些知识点
概念
美元符号$是著名的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）