由于看的是锋利的jQuery(第二版)部分内容可能没更新, 推荐看jquery API中文文档
第一个jquery程序
// 网页中所有DOM结构绘制完成后就执行, 可能DOM元素关联的东西并没有加载完
// 能同时编写多个
$(document).ready(function(){
})
$(document).ready(function(){
})
// 可以简写 ==>
$(function(){
})
jquery对象和DOM对象
- jquery对象就是通过 jquery 包装 DOM 对象后产生的对象
- jquery对象是jquery独有的. 如果一个对象是jquery独有的, 就可以使用jquery方法
$('#foo').html()
==>
document.getElementByid('foo').innerHTML
- jquery对象无法使用DOM对象的任何方法
// jquery对象和DOM对象的相互转换
// 先约定好定义变量的风格. 获取的对象是jquery对象,变量前面加上$
var $variable = jquery对象
var variable = DOM对象
1. jquery对象转DOM对象
- jquery提供两种方法将一个jquery对象转换为DOM对象 [index] 和 get (index)
(1) jquery对象是一个类似数组的方法,可以通过[index]转换
var $cr = $('#cr') // jquery对象
var cr = $cr[0] // DOM对象
(2) 通过get(index)来转换
var $cr = $('#cr') // jquery对象
var cr = $cr.get(0) // DOM对象
2. DOM转换为jquery对象
- 对于一个DOM对象, 只需要$() 把DOM对象包起来可以获得jquery对象
var cr = document.getElementById('cr') // DOM对象
var $cr = $(cr) // jquery对象
解决jquery与其他库的冲突
- 默认情况下, jquery 用$作为自身的快捷方式
- 在jquery库和其他库都被加载完毕后,可以再任何时候调用
jquery.noConflict()函数将$控制权移交给其他库
jquery.noConflict() // 移交$控制权
jquery(function(){ // 使用jquery
})
var $j = jquery.noConflict() // 自定义快捷方式
jquery.noConflict() // 移交$控制权
jquery(function($){ // 加参数
$('.p').click()
})
- jquery库在其他库之前调用, 直接使用
jquery来工作, 无需调用jquery.noConflict()
jquery选择器
// 基本选择器
$('#id') // 通过给定的id选取单个元素
$('.class') // 通过给定的类名匹配元素 (返回集合元素)
$('element') // 给定的元素名匹配元素 (返回集合元素)
$('*') // 匹配所有元素 (返回集合元素)
$('selector1, selector2... , selectorN') // 每一个选择器匹配到的元素合并后一起返回 (返回集合元素)
// 层次选择器
$('ancestor descentant') // 选取ancestor元素里所有des(后代)元素 例: $('div span')
$('parent > child') // 选取parent下的child(子)元素 例: $('div > span') 选取div元素下元素名是span的子元素
$('prev + next') // 选择紧接在prev后面的next元素 例: $('.one + div') 选取class为one的下一个div同辈元素
==> 使用 next() 代替 例: $('.one').next('div')
$('prev ~ sblings') // 选取prev元素之后的所有sblings元素 例: $('#two ~ div') 选取id为two的元素后面所有的div同辈元素
==> 使用 nextAll()代替 例: $('#two').nextAll('div')
// 过滤选择器
1.1 基本过滤选择器
:first $('div:first') // 获取第一个元素 选取所有div元素中第一个div元素
:last $('div:last') // 和上面相反
:not(selector) $('input:not(.myClass)') // 选取class不是myClass的input元素
:even $('input:even') // 选取索引是偶数的元素
:odd $('input:odd') // 选取索引是奇数的元素
:eq(index) $('input:eq(1)') // 选取索引等于index的元素
:gt(index) // 选取索引大于index的元素
:lt(index) // 选取索引小于index的元素
:header $(':header') // 选取所有的标题元素,例 h1 h2
:animated $('div:animated') // 选取当前正在执行动画的所有元素
:focus $(':focus') // 选取当前获取焦点的元素
1.2 内容过滤选择器
:contains(text) $('div:contains('我')') // 选取含有内容文本为 'text' 的元素
:empty $('div:empty') // 选取不包含子元素或者文本的空元素
:has(selector) $('div:has(p)') // 选取含有选择器所匹配元素的元素
:parent $('div:parent') // 选取含有子元素或者文本的元素 集合元素
1.3 可见性过滤选择器
:hidden // 选取所有不可见的元素 display:none input type=hidden visivility:hidden等
$('input:hidden') // 只选取input元素
:visible // 选取所有可见的元素
$('div:visible') // 选取所有可见的div元素
未完...
jquery中的DOM 操作
1. 查找节点
- 1.1 查找元素节点
var $li = $('ul li:eq(1)')
var li_text = $li.text()
console.log(li_text)
- 1.2 查找属性节点
var $para = $('p')
var p_text = $para.attr(''title'')
alert(p_text)
2. 创建节点
- 2.1 创建元素节点
// $(html)方法会根据传入的HTML标记字符串, 创建一个DOM对象, 并将这个DOM对象包装成一个jQuery对象返回
var $li_1 = $('<li></li>')
var $li_2 = $('<li></li>')
$('ul').append($li_1)
- 2.2 创建文本节点
var $li_1 = $('<li>香蕉</li>')
var $li_2 = $('<li>苹果</li>')
$('ul').append($li_1)
- 2.3 创建属性节点
var $li_1 = $('<li title="香蕉">香蕉</li>')
$('ul').append($li_1)
3. 插入节点
| 方法 | 描述 |
|---|---|
append() |
向每个匹配的元素内追加内容 |
appendTo() |
将所有匹配的元素追加到制定的元素中 |
prepend() |
向每个匹配的元素内部前置内容 |
prependTo() |
将所有匹配的元素前置到指定的元素中 |
after() |
在每个匹配的元素之后插入内容 |
insertAfter() |
将所有匹配的元素插入到指定元素的后面 |
before() |
在每个匹配的元素之前插入内容 |
insertbefore() |
将所有匹配的元素插入到指定元素的前面 |
4. 删除节点
如果文档中某一个元素多余, 应将其删除
- 4.1
remove()方法
// 从DOM中删除所有匹配的元素
$('ul li:eq(1)').remove()
$('ul li').remove('li[title != 苹果]') // title 不等于 苹果的 li 元素删除
- 4.2
detach()方法
// 和remove()一样, 也是从DOM中删除元素. 但需要注意: 这个方法不会把匹配的元素从jquery对象中删除
// 因而可以将来在使用这些匹配的元素, 与remove() 不同的是, 所有绑定的事件, 附加数据会保留下来
// 当需要移走一个元素，不久又将该元素插入DOM时，这种方法很有用。
$('ul li:eq(1)').detach()
- 4.3
empty()方法
// 严格来说: empty()并不是删除节点, 而是清空节点, 它能清空元素中的所有后代节点
$('ul li:eq(1)').empty() // 清楚的是li元素里的文本
5. 复制节点
// 如果单击<li>元素后需要在复制一个<li>元素, 可以使用clone() 方法来完成
$('ul li').click(function(){
$(this).clone().append('ul')
})
$(this).clone(true).appendTo('body') // 在clone中加个true, 含义是复制元素的同时复制元素中所绑定的事件,因此该元素的副本也同样具有复制功能
6. 替换节点
replaceWith() replaceAll()
replaceWith() 是将所有匹配的元素都替换成指定的HTML 或者 DOM 元素
replaceAll() 和replaceWith() 颠倒
$('p').replaceWith('<strong>你最不喜欢的水果是?</strong>')
7. 包裹节点
// wrap() 所有的元素单独包裹
$('strong').wrap("<b></b>") // 用 b 把 strong 包裹起来
// wrapAll() 所有匹配的元素用一个元素来包裹
$('strong').wrapAll("<b></b>")
// wrapInner() 每一个匹配元素的子内容用其他结构化的标记包裹起来
$('strong').wrapInner("<b></b>") // <strong><b>你最喜欢的水果</b><strong>
8. 属性操作
- 8.1 获取属性和设置属性
.attr()
var p_txt = $('p').attr('title') // 获取p的属性title
$('p').attr('title', 'your title') // 设置title属性
- 8.2 删除属性
.removeAttr() // $('p').removeAttr('title')
9. 样式操作
- 9.1 获取样式和设置样式
$('p').attr('class')
$('p').attr('class', 'high')
- 9.2 追加样式
.addClass()
$('p').addClass('another')
- 9.3 移除样式
.removeClass()
- 9.4 切换样式
// toggle() 控制行为的重复切换
// toggleClass() 控制样式上重复切换
$('p').toggleClass('another') // 重复切换类名 another
- 9.5 判断是否含有class
.hasClass() Boolean
$('p').hasClass('another')
10. 设置和获取HTML 文本 和值
.html() ==> innerHTML
.text() ==> innerText
.val() ==> value
11. 遍历节点
- 11.1
children()方法
children
// 用于匹配元素的子元素集合
var $body = $('body').children() // 2个子元素
var $p = $('p').children() // 0个子元素
var $ul = $('ul').children() // 3个子元素
- 11.2
next()方法
// 该方法用于匹配元素后面紧邻的同辈元素
var $pl = $('p').next() // <ul><li></li></ul>
- 11.3
prev()方法
// 该方法用于匹配元素前面紧邻的同辈元素
var $ul = $('ul').prev() // <p></p>
- 11.4
siblings()方法
// 获取匹配元素的兄弟节点
var $p2 = $('p').siblings()
- 11.5
closest()方法
父元素选取
// 从元素本身开始，在DOM 树上逐级向上级元素匹配，并返回最先匹配的祖先元素。
12. css-dom操作
css-dom
// 直接利用.css() 方法获取元素的样式属性
$('p').css('color') // 获取p元素的样式颜色
// 设置样式
$('p').css('color', 'red') // 设置p元素的样式为红色
// 设置半透明
$('p').css('opacity', '.5')
// 获取某个元素的height值
$('p').css('height') ==> $('p').height()
$('p').height(100) // 数字默认px
$('p').height('100em') // 其他单位传一个字符串
// 元素定位的几个方法
1. offset()方法 // 获取元素在当前视窗的相对位移, 返回对象有两个属性 top left, 只对可见元素有效
var offset = $('p').offset()
var left = offset.left
var top = offset.top
2. position()方法 // 获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移
也包括两个对象 top left
var position= $('p').position() // 获取p元素的position()
var left = position.left
var top = position.top
3. scrollTop() 和 scrollLeft() // 获取元素的滚动条距顶端的距离和距左侧的距离
var $p = $('p')
var scrollTop = $p.scrollTop() // 元素滚动条距顶端的距离
var scrollLeft = $scrollLeft() // 元素滚动条距左侧的距离
jquery事件和动画
-
事件绑定
在文档装载完成后, 如果打算为元素绑定事件来完成某些操作, 可以使用bind()方法来对匹配元素进行特定事件的绑定
bind[type [,data], fn]
第1个参数是事件类型 blur focus load resize scroll click dbclick mousedown ...等
第2个参数为可选参数 作为event.data属性值传递给事件对象的额外数据对象
第3个参数用来绑定的处理函数
- 基本效果
$(function(){
$('#head').bind('click', function(){
$(this).next().show()
})
})
- 加强效果
$(function(){
$('#head').bind('click', function(){
var $content = $(this).next()
if($content.is(':visible')){
$content.show()
}else {
$content.hide()
}
})
})
- 改变绑定事件的类型
$(function(){
$('#head').bind('mouseover', function(){
$(this).next().show()
}).bind('mouseout', function(){
$(this).next().hide()
})
})
- 简写绑定事件
$(function(){
$('#head').mouseover,(function(){
$(this).next().show()
}).mouseout(function(){
$(this).next().hide()
})
})
4.1 合成事件
jQuery有两个合成事件--- hover()方法和toggle() 方法, 属于jQuery 自定义的方法
4.1.1 hover()方法
hover(enter, leave) // 模拟鼠标悬停事件
光标移到元素上, 触发第一个函数(enter), 移出元素, 触发第二个函数(leave)
$(function(){
$('#head').hover(function(){
$(this).next().show()
}), function(){
$(this).next().hide()
})
})
4.1.2 toggle()方法
toggle(fn1, fn2, fn3...fnN) // 模拟鼠标连续点击事件
第一次单击,出发第一个函数, 再次单击同一元素时, 触发第二个函数, 如果有第二个函数, 依次触发
$(function(){
$('#head').toggle(function(){
$(this).next().show()
}), function(){
$(this).next().hide()
})
})
// 切换元素的可见状态
$(function(){
$('#head').toggle(function(){
$(this).next().toggle()
}), function(){
$(this).next().toggle()
})
})
- 事件冒泡
- 什么是冒泡?
在页面上可以有多个事件, 也可以多个元素响应一个事件. 假设网页有两个元素, 其中一个元素嵌套在另一个元素中, 并且都被绑定了click事件,同时<body>也绑定了click事件
// html
<body>
<div id="content">
外层div元素
<span>内层span元素</span>
外层div元素
</div>
<div id="msg"></div>
</body>
// js
$(function(){
// span元素绑定click事件
$('span').bind('click', function(){ // 点击span会输出3条记录
var txt = $('#msg').html() + '<p>内层span元素被单击</p>'
$('#msg').html(txt)
})
// div绑定事件
$('#content').bind('click',function(){ // 输出两条记录
var txt = $('#msg').html() + '<p>外层div元素被单击</p>'
$('#msg').html(txt)
})
// body绑定事件
$('body').bind('click',function(){ // 输出一条记录
var txt = $('#msg').html() + '<p>body元素被单击</p>'
$('#msg').html(txt)
})
})
1.1 事件冒泡引发的问题
jquery对表单和表格的操作
1.1 表单应用
一个表单有三个基本组成部分:
- 表单标签: 包含处理表单数据所用的服务端程序
URL, 以及数据提交到服务器的方法 - 表单域: 包含文本框 密码框 隐藏域 多行文本框等
- 表单按钮: 提交按钮 复位按钮和一般按钮等, 用于将数据传送到服务器上或者取消传送
1.1.1 单行文本框的应用
- 获取焦点和失去焦点改变样式
$(function(){
$(':input').focus(function(){
$(this).addClass('focus')
}).blur(function(){
$(this).removeClass('focus')
})
})
- 复选框全选 全不选 反选
// 全选
$('#checkAll').click(function(){
$('[name=item]:checkbox').attr('checked', true)
})
// 全不选
$('#checkNo').click(function(){
$('[name=item]:checkbox').attr('checked', false)
})
// 反选 需要循环每一个值,取反值
$('#checkRev').click(function(){
$('[name-item]:checkbox').each(function(){
$(this).attr('checked', !$(this).attr('checked')) // ==> 原生: this.checked = !this.checked
})
})
点击全选全不选控制checkbox
// 设置变量 flag
$('[name-item]:checkbox').click(function(){
var flag = true
$('[name-item]:checkbox').each(function(){
if(!this.checked){
flag = false
}
})
$('#checkAll').attr('checked', flag)
})
// 判断点击数量
$('[name=item]:checkbox').click(function(){
// 定义一个临时变量,提高效率
var $tmp = $('[name=item]:checkbox')
// filter() 筛选选出的复选框
$('#checkAll').attr('checked', $tmp.length == $tmp.filter(':checked').length)
})
- 下拉框应用
下拉框应用
// 左边选项添加到右边
$('#add').click(function(){
var $options = $('#select1 option:selected') // 获取选中的项
var $remove = $options.remove() // 删除下拉列表中选中的选项
$remove.appendTo('#select2') // 追加给对方
})
// 全部选项添加给对方
$('#add_all').click(function(){
var $options = $('#select1 option') // 获取全部选项
$options.appendTo('#select2')
})
// 双击选项添加给对方
$('#select1').dbclick(function(){
var $options = $('option:selected'.this) // 获取选中的项
$options.appendTo('#select2')
})
- 表单验证
// required 必填字段, 失去焦点行为
$('form input').each(function(){
var $required = $("<strong class='high'>*</strong>") // 创建元素
$(this).parent().append($required)
})
$('form input').blur(function(){
var $parent = $(this).parent()
// 验证用户名
if($(this).is('#userName')){
if(this.value = '' || this.value.length < 6) {
var errorMsg = "请输入正确的6位的用户名"
$parent.append('<span class="onError">'+errorMsg+'</span>')
}else {
alert('输入正确')
}
}
})
// 输入时就可以提醒
keyup事件 focus事件
1.2 表格应用
- 隔行变色
$(function(){
$('tr:odd').addClass('odd') // 给奇数行添加样式
$('tr:even').addClass('even') // 给偶数行添加样式
$('tr:contains("王五")').addClass('selected') // 给某行添加高亮
})
- 单选框控制表格行高亮
$('tbody > tr').click(function(){
$(this).addClass('selected')
.siblings().removeClass('selected')
.end() // 重新回到 $(this)对象
.find(':radio').attr('checked', true)
})
- 复选框控制表格行高亮
// 复选框没有限制个数, 当点击某行, 如果已经高亮,则移除高亮并去掉当前选中框的状态
// 判断是否高亮, 可以使用 hasClass()
$('tbody > tr').click(function(){
if($(this).hasClass('selected')){
$(this).removeClass('selected')
.find(':checkbox').attr('checked', false)
}else {
$(this).addClass('selected')
.find(':checkbox').attr('checked', true)
}
})
-
表格展开关闭
表格展开关闭
$(function(){
$('tr.parent').click(function(){ // 获取所谓的父行
$(this)
.toggleClass('selected') // 添加删除高亮
.siblings('.child_' + this.id).toggle() // 隐藏/显示所谓的子行
})
})
jquery与AJAX
1.1 AJAX优势
- 不需要插件支持
- 优秀的用户体验 // 不刷新整个页面更新数据
- 提高web程序的性能
- 减轻服务器和带宽的压力
1.2 Ajax 的 XMLHttpRequest 对象
- Ajax的核心是
XMLHttpRequest对象,它是Ajax实现的关键--异步请求
1.3 第一个Ajax实例
function ajax(){
var xmlHttpReq = null
if(window.ActiveXObject){ // IE5 IE6
xmlHttpReq = new Active XObject("Microsoft XMLHTTP")
} else if(window.XMLHttpRequest){
xmlHttpReq = new XMLHttpRequest()
}
xmlHttpReq.open('GET', 'test.php', true) // 调用open并采用异步
....
}
2 jquery中的Ajax
jquery对ajax进行了封装, 在jquery 中
$.ajax()方法属于最底层的方法, 第二层是load() $.get() $.post(), 第三层是$.getScript() 和 $.getJSON()
2.1 load()
- 2.1.1 载入HTML文档
load() 方法是jquery中最简单和常用的Ajax方法, 能载入远程HTML代码并插入DOM中
// .load( url [, data ] [, complete(responseText, textStatus, XMLHttpRequest) ] )
load(url [,data] [,callback])
url: String 请求HTML的URL地址
data(可选) : Object 发送至服务器的 key/value 数据
callback(可选): Function 请求完成时的回调函数
load
$('#send').click(function(){
$('#resText').load('test.html')
})
- 2.1.2 筛选载入的HTML文档
- 如果只需加载HTML的部分元素, 使用URL参数来达到目的, URL参数结构
"url selector"
- 如果只需加载HTML的部分元素, 使用URL参数来达到目的, URL参数结构
$('#resText').load('test.html .para')
- 2.1.3 传递方式
load()方法的传递方式是根据参数data来制定, 如果没有参数传递,采用GET方式传递;反之, 则自动用post方式
// 无参数传递, 则是GET方式
$('#test').load('test.php', function(){
// ...
})
// 有参数传递, 则是POST方式
$('#test').load('test.php', {name: "rain", age: "22"}, function(){
// ...
})
- 2.1.4 回调参数
对于必须在加载完成后才能继续的操作,load()方法提供了回调函数
$('#test').load('test.html', function(responseText, textStatus, XMLHttpRequest)){
responseText: // 请求返回的内容
textStatus: // 请求状态: success error notmodified timeout 4种
XMLHttpRequest: // XMLHttpRequest对象
}
2.2 $.get() 和 $.post()
load()方法通常用来从web服务器上获取静态的数据文件, 然而这并不能体现 Ajax的全部价值, 在项目中,如果需要传递一些参数给服务器中的页面, 可以使用另外两种方法
- 2.2.1 $.get()
$.get()方法使用 GET 方式进行异步请求
// 语法为
$.get(url [,data] [,callback] [,type])
url : // 请求地址 String
data: // 发送到服务器的数据 可选 Object
callback: // 载入成功时回调函数 可选 Function
type: // 服务端返回内容的格式xml html json text sctipt等 可选 String
$.get(), 在一个单独的请求中关联到 .done(), .fail(), 和 .always() 回调函数，
甚至允许你在请求已经结束后，指派回调函数。如果该请求已经完成，则回调函数会被立刻调用。
// Assign handlers immediately after making the request,
// and remember the jqxhr object for this request
var jqxhr = $.get("example.php", function() {
alert("success");
})
.success(function() { alert("second success"); })
.error(function() { alert("error"); })
.complete(function() { alert("complete"); });
// perform other work here ...
// Set another completion function for the request above
jqxhr.complete(function(){ alert("second complete"); });
$.get
$(function(){
$('#send').click(function(){
$.get('get1.php', { // get
userName: $('#userName').val(),
content: $('#content').val()
}, function(data, textStatus){
$('#resText').html(data) // 返回的数据添加到页面
})
})
})
- 2.2.2 $.post()
它与 $.get()方法的结构和使用方式都相同, 不过仍有一些区别
- GET请求会将参数跟在 URL 后传递参数, 而POST请求则是作为 HTTP消息的实体内容发送给web服务器
- GET方式对传输的数据大小有限制, 而POST则大的多, 理论上不受限制
- GET方式请求的数据会被浏览器缓存起来, 在某种情况下, GET会带来安全问题, 而POST相对来说可以避免这些问题
- GET方式和POST方式传递的数据在服务器端获取不相同
$(function(){
$('#send').click(function(){
$.post('get1.php', { // post方法
userName: $('#userName').val(),
content: $('#content').val()
}, function(data, textStatus){
$('#resText').html(data) // 返回的数据添加到页面
})
})
})
2.3 $.getScript() 和 $.getJson()
- 2.3.1 $.getScript()
有时候,在页面初次加载时就取得全部的js是没有必要的,虽然可以动态创建<script>标签,但并不理想
$(document.createElement('script')).attr('src', 'test.js').appendTo('head')
$('<script src="test.js"/>').appendTo('head')
$('#send').click(function(){
$.getScript('test.js')
})
// $.getScript()也有自己的回调函数
$.getScript('jquery.color.js', function(){
$('#go').click(function(){
$('.block').animate({backgroundColor: 'pink'}, 1000)
})
})
- 2.3.2 $.getJSON()
$.getJSON()用于加载 JSON 文件, 与 $.getScript()用法相同
$('#send').click(function(){
$.getJSON('test.json', function(data){
// data: 返回的数据
$('#resText').empty()
...
})
})
2.4 $.ajax
$.ajax()是jQuery最底层的Ajax实现
jQuery.ajax( url [, settings ] )
url: String 一个用来包含发送请求的URL字符串。
type: String 请求方式 ("POST" 或 "GET")， 默认为 "GET"
data: Object String 发送到服务器的数据。将自动转换为请求字符串格式。
dataType: String 预期服务器返回的数据类型。
# xml: 返回 XML 文档，可用 jQuery 处理
# html: 返回纯文本 HTML 信息；包含的script标签会在插入dom时执行
# script: 把响应的结果当作 JavaScript 执行。并将其当作纯文本返回
# json: 把响应的结果当作 JSON 执行，并返回一个JavaScript对象
# jsonp: 以 JSONP的方式载入 JSON 数据块。会自动在所请求的URL最后添加 "?callback=?"
# text: 返回纯文本字符串
complete: Function 请求完成后回调函数 (请求success 和 error之后均调用)。这个回调函数得到2个参数： jqXHR (在 jQuery 1.4.x中是 XMLHTTPRequest) 对象和一个描述请求状态的字符串("success", "notmodified", "error", "timeout", "abort", 或者 "parsererror") 。
cache: Boolean (默认: true, dataType为"script"和"jsonp"时默认为false) 如果设置为 false ，浏览器将不缓存此页面
async: (默认: true) Boolean 默认设置下，所有请求均为异步请求（也就是说这是默认设置为 true ）。如果需要发送同步请求，请将此选项设置为 false 。跨域请求和 dataType: "jsonp" 请求不支持同步操作。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
contentType: (默认: 'application/x-www-form-urlencoded; charset=UTF-8') 发送信息至服务器时内容编码类型。
success: Function 请求成功后的回调函数。这个函数传递3个参数：从服务器返回的数据，并根据dataType参数进行处理后的数据，一个描述状态的字符串;还有 jqXHR（在jQuery 1.4.x前为XMLHttpRequest） 对象
error: Function 请求失败时调用此函数
global: Boolean 无论怎么样这个请求将触发全局AJAX事件处理程序。默认是true
beforeSend: Function 请求发送前的回调函数，用来修改请求发送前jqXHR（在jQuery 1.4.x的中，XMLHttpRequest）对象，此功能用来设置自定义 HTTP 头信息，等等。
timeout: Number 设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup() 里的全局设置。 超时周期开始于$.ajax访问成功的那个时间点；如果几个其他请求都在进步并且浏览器有没有可用的连接，它有可能在被发送前就超时了
xhrFields: 一对“文件名-文件值”组成的映射，用于设定原生的 XHR对象。例如，如果需要的话，在进行跨域请求时，你可以用它来设置withCredentials为true。
$.ajax({
url: a_cross_domain_url,
xhrFields: {
withCredentials: true
}
});
推荐使用的注意事项:
jqXHR.success(), jqXHR.error(), 和 jqXHR.complete()回调从 jQuery 1.8开始 被弃用。他们将最终被取消
您的代码应做好准备，使用jqXHR.done(), jqXHR.fail(), 和 jqXHR.always() 代替。
var jqxhr = $.ajax( "example.php" )
.done(function() { alert("success"); })
.fail(function() { alert("error"); })
.always(function() { alert("complete"); });
// Example
$.ajax({
type: "POST",
url: "some.php",
data: { name: "John", location: "Boston" }
}).done(function( msg ) {
alert( "Data Saved: " + msg );
});
var menuId = $("ul.nav").first().attr("id");
var request = $.ajax({
url: "script.php",
type: "POST",
data: {id : menuId},
dataType: "html"
});
request.done(function(msg) {
$("#log").html( msg );
});
request.fail(function(jqXHR, textStatus) {
alert( "Request failed: " + textStatus );
});
$.ajaxSetup()
jQuery.ajaxSetup( options )
描述: 为以后要用到的Ajax请求设置默认的值
用于设置`$.ajaxSetup()`的详细参数, 参见 $.ajax()]
注意： 此处指定的设置会影响所有 $.ajax或基于AJAX的衍生方法，如$.get()的调用。
这可能会导致不良的行为因为其他调用（例如，插件）可能希望正常的默认设置。
出于这个原因，我们强烈建议您不要使用此API。
相反我们建议，在调用时明确设置选项或定义一个简单的插件。
举个例子,我们可以事先设置服务器重复响应的默认URL参数：
$.ajaxSetup({
url: 'ping.php'
});
现在每次Ajax请求将自动使用这个"ping.php" URL：
$.ajax({
// url not set here; uses ping.php
data: {'name': 'Dan'}
});
`注意`: 全局回调函数应使用他们各自的全局Ajax事件处理方法`[.ajaxStart()], [.ajaxStop()], [.ajaxComplete()], [.ajaxError()], [.ajaxSuccess()], [.ajaxSend()]`，
而不是为 `$.ajaxSetup()` 设置 `options` 对象。
2.5 Ajax全局事件
这些方法用于注册事件处理器，用来处理页面上的任何 Ajax 请求，当某些事件触发后，这些事件处理器被调用。如何
jQuery.ajaxSetup()中的global属性被设置为true（这也是默认设置），那么，每个 Ajax 请求都会触发全局事件。
.ajaxComplete() 当Ajax请求完成后注册一个回调函数。这是一个 AjaxEvent。
.ajaxError() Ajax请求出错时注册一个回调处理函数，这是一个 Ajax Event。
.ajaxSend() 在Ajax请求发送之前绑定一个要执行的函数，这是一个 Ajax Event.
.ajaxStart() 在AJAX 请求刚开始时执行一个处理函数。 这是一个 Ajax Event.
.ajaxStop() 在AJAX 请求完成时执行一个处理函数。 这是一个 Ajax Event。
.ajaxSuccess() 绑定一个函数当 Ajax 请求成功完成时执行。 这是一个Ajax Event.
global: false
