-
ajaxStart (Global Event) This event is broadcast if an Ajax request is started and no other Ajax requests are currently running.
-
beforeSend (Local Event) This event, which is triggered before an Ajax request is started, allows you to modify the XMLHttpRequest object (setting additional headers, if need be.)
-
ajaxSend (Global Event) This global event is also triggered before the request is run.
-
success (Local Event) This event is only called if the request was successful (no errors from the server, no errors with the data).
-
ajaxSuccess (Global Event) This event is also only called if the request was successful.
-
error (Local Event) This event is only called if an error occurred with the request (you can never have both an error and a success callback with a request).
-
ajaxError (Global Event) This global event behaves the same as the local error event.
-
complete (Local Event) This event is called regardless of if the request was successful, or not. You will always receive a complete callback, even for synchronous requests.
-
ajaxComplete (Global Event) This event behaves the same as the complete event and will be triggered every time an Ajax request finishes.
-
-
ajaxStop (Global Event) This global event is triggered if there are no more Ajax requests being processed.
具体的全局事件请参考API文档。 好了，下面开始说jQuery里面功能最强的Ajax请求方法 $.ajax();
jQuery.ajax ( options ) : 通过 HTTP 请求加载远程数据
这个是jQuery 的底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。
$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该对象，但特殊情况下可用于手动终止请求。
注意： 如果你指定了 dataType 选项，请确保服务器返回正确的 MIME 信息，(如 xml 返回 "text/xml")。错误的 MIME 类型可能导致不可预知的错误。见 Specifying the Data Type for AJAX Requests 。 当设置 datatype 类型为 'script' 的时候，所有的远程(不在同一个域中)POST请求都回转换为GET方式。
$.ajax() 只有一个参数：参数 key/value 对象，包含各配置及回调函数信息。详细参数选项见下。
jQuery 1.2 中，您可以跨域加载 JSON 数据，使用时需将数据类型设置为 JSONP。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。数据类型设置为 "jsonp" 时，jQuery 将自动调用回调函数。(这个我不是很懂)
参数列表：
参数名
类型
描述
url
String
(默认: 当前页地址) 发送请求的地址。
type
String
(默认: "GET") 请求方式 ("POST" 或 "GET")， 默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。timeout
Number
设置请求超时时间（毫秒）。此设置将覆盖全局设置。
async
Boolean
(默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
beforeSend
Function
发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。
function (XMLHttpRequest) { this ; // the options for this ajax request }cache
Boolean
(默认: true) jQuery 1.2 新功能，设置为 false 将不会从浏览器缓存中加载请求信息。
complete
Function
请求完成后回调函数 (请求成功或失败时均调用)。参数： XMLHttpRequest 对象，成功信息字符串。
function (XMLHttpRequest, textStatus) { this ; // the options for this ajax request }contentType
String
(默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型。默认值适合大多数应用场合。
data
Object, String
发 送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。dataType
String
预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息返回 responseXML 或 responseText，并作为回调函数参数传递，可用值:
"xml": 返回 XML 文档，可用 jQuery 处理。
"html": 返回纯文本 HTML 信息；包含 script 元素。
"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。
"json": 返回 JSON 数据 。
"jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
error
Function
(默认: 自动判断 (xml 或 html)) 请求失败时将调用此方法。这个方法有三个参数：XMLHttpRequest 对象，错误信息，（可能）捕获的错误对象。
function (XMLHttpRequest, textStatus, errorThrown) { // 通常情况下textStatus和errorThown只有其中一个有值 this ; // the options for this ajax request }global
Boolean
(默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件，如 ajaxStart 或 ajaxStop 。可用于控制不同的Ajax事件
ifModified
Boolean
(默认: false) 仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断。
processData
Boolean
(默认: true) 默认情况下，发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。
success
Function
请求成功后回调函数。这个方法有两个参数：服务器返回数据，返回状态
function (data, textStatus) { // data could be xmlDoc, jsonObj, html, text, etc... this ; // the options for this ajax request }这里有几个Ajax事件参数：beforeSend ，success ，complete ，error 。 我们可以定义这些事件来很好的处理我们的每一次的Ajax请求。注意一下，这些Ajax事件里面的 this 都是指向Ajax请求的选项信息的(请参考说 get() 方法时的this的图片)。 请认真阅读上面的参数列表，如果你要用jQuery来进行Ajax开发，那么这些参数你都必需熟知的。
示例代码，获取博客园首页的文章题目：$.ajax({ type: "get ", url: "http://www.cnblogs.com/rss ", beforeSend: function (XMLHttpRequest){ //ShowLoading(); }, success: function (data, textStatus){ $(".ajax.ajaxResult ").html(""); $("item ",data).each(function (i, domEle){ $(".ajax.ajaxResult ").append("<li> "+$(domEle).children("title ").text()+"</li> "); }); }, complete: function (XMLHttpRequest, textStatus){ //HideLoading(); }, error: function (){ //请求出错处理 } });其他
jQuery.ajaxSetup ( options ) : 设置全局 AJAX 默认选项。
设置 AJAX 请求默认地址为 "/xmlhttp/"，禁止触发全局 AJAX 事件，用 POST 代替默认 GET 方法。其后的 AJAX 请求不再设置任何选项参数。
jQuery 代码:
$.ajaxSetup({ url: "/xmlhttp/ ", global: false , type: "POST " }); $.ajax({ data: myData });serialize() 与 serializeArray()
serialize() : 序列表表格内容为字符串。
serializeArray() : 序列化表格元素 (类似 '.serialize()' 方法) 返回 JSON 数据结构数据。
示例：
HTML代码：
英文原版：http://jquery.bassistance.de/jquery-getting-started.html ，感谢原文作者Jörn Zaefferer
jQuery入门指南教程
这个指南是一个对jQuery库的说明，要求读者了解HTML(DOM)和CSS的一些常识。它包括了一个简单的Hello World的例子，选择器和事件基础，AJAX、FX的用法，以及如何制作jQuery的插件。 这个指南包括了很多代码，你可以copy它们，并试着修改它们，看看产生的效果。
内容提要
- 安装
- Hello jQuery
- Find me:使用选择器和事件
- Rate me:使用AJAX
- Animate me(让我生动起来):使用FX
- Sort me(将我有序化):使用tablesorter插件(表格排序)
- Plug me:制作您自己的插件
- Next steps(下一步)
安装
一开始,我们需要一个jQuery的库,最新的下载可以到这里找到。这个指南提供一个基本包含实例的包供下载.
(译者Keel注:一定要下载这个包，光看文章不实践肯定是不行的。)
下载后解压缩，然后用你最喜欢的文本编辑器打开starterkit.html和custom.js这两个文件。(译者Keel注:这两个就是例子文件,所有的例子都用这两个例子作出,custom.js写jQuery代码,starterkit.html观察效果.建议用editPlus打开)
现在,我们就已经做好了一切准备来进行这个著名的"Hello world"例子.
本章的相关链接:
Hello jQuery
在做所有事情之前,我们要让jQuery读取和处理文档的DOM,必须尽可能快地在DOM载入后开始执行事件,所以,我们用一个ready事件作为处理HTML文档的开始.看看我们打开的custom.js这个文件,里面已经准备好了:
$(document).ready(function() { // do stuff when DOM is ready});
放一个简单的alert事件在需要等DOM完成载入,所以我们把任务稍稍变复杂一点:在点击任何一个链接时显示一个alert.
$(document).ready(function() { $("a").click(function() {alert("Hello world!"); });});
这样在你点击页面的一个链接时都会触发这个"Hello world"的提示。
(译者Keel注:请照此代码修改custom.js并保存,然后用浏览器打开starterkit.html观察效果。)
让我们看一下这些修改是什么含义。$("a") 是一个jQuery选择器(selector),在这里，它选择所有的a标签（译者Keel注：即<a></a>），$号是 jQuery “类”(jQuery "class")的一个别称，因此$()构造了一个新的jQuery 对象(jQuery object)。函数 click() 是这个jQuery对象的一个方法，它绑定了一个单击事件到所有选中的标签(这里是所有的a标签),并在事件触发时执行了它所提供的alert方法.
这里有一个拟行相似功能的代码:
<a href="#" οnclick="alert('Hello world')">Link</a>
不同之处很明显,用jQuery不需要在每个a标签上写onclick事件,所以我们拥有了一个整洁的结构文档(HTML)和一个行为文档(JS),达到了将结构与行为分开的目的,就像我们使用CSS追求的一样.
下面我们会更多地了解到选择器与事件.
本章的相关链接:
Find me:使用选择器和事件
jQuery提供两种方式来选择html的elements，第一种是用CSS和Xpath选择器联合起来形成一个字符串来传送到jQuery的构造器（如：$("div > ul a")）；第二种是用jQuery对象的几个methods(方法)。这两种方式还可以联合起来混合使用。
为了测试一下这些选择器，我们来试着在我们starterkit.html中选择并修改第一个ordered list.
一开始，我们需要选择这个list本身，这个list有一个ID叫“orderedlist”，通常的javascript写法是document.getElementById("orderedlist").在jQuery中，我们这样做：
$(document).ready(function() { $("#orderedlist").addClass("red");});
这里将starterkit中的一个CSS样式red附加到了orderedlist上(译者Keel注：参考测试包中的css目录下的core.css，其中定义了red样式)。因此，在你刷新了starterkit.html后，你将会看到第一个有序列表(ordered list )背景色变成了红色，而第二个有序列表没有变化.
现在，让我们添加一些新的样式到list的子节点.
$(document).ready(function() { $("#orderedlist > li").addClass("blue");});
这样，所有orderedlist中的li都附加了样式"blue"。
现在我们再做个复杂一点的，当把鼠标放在li对象上面和移开时进行样式切换，但只在list的最后一个element上生效。
$(document).ready(function() { $("#orderedlist li:last").hover(function() {$(this).addClass("green"); }, function() { $(this).removeClass("green"); });});
还有大量的类似的CSS和XPath例子，更多的例子和列表可以在这里找到。（译者Keel注：入门看此文，修行在个人，要想在入门之后懂更多，所以这段话的几个链接迟早是要必看的！不会又要翻译吧...^_^!）
每一个onXXX事件都有效，如onclick,onchange,onsubmit等，都有jQuery等价表示方法（译者Keel注：jQuery不喜欢onXXX，所以都改成了XXX，去掉了on）。其他的一些事件，如ready和hover,也提供了相应的方法。
你可以在Visual jQuery找到全部的事件列表，在Events栏目下.
用这些选择器和事件你已经可以做很多的事情了，但这里有一个更强的好东东！
$(document).ready(function() {$("#orderedlist").find("li").each(function(i) {$(this).html( $(this).html() + " BAM! " + i ); });});
find() 让你在已经选择的element中作条件查找,因此 $("#orderedlist).find("li") 就像 $("#orderedlist li"). each()一样迭代了所有的li，并可以在此基础上作更多的处理。 大部分的方法,如addClass(), 都可以用它们自己的 each() 。在这个例子中, html()用来获取每个li的html文本, 追加一些文字，并将之设置为li的html文本。（译者Keel注：从这个例子可以看到.html()方法是获取对象的html代码，而.html('xxx')是设置'xxx'为对象的html代码）
另一个经常碰到的任务是在没有被jQuery覆盖的DOM元素上call一些方法，想像一个在你用AJAX方式成功提交后的reset：
$(document).ready(function() { // use this to reset a single form$("#reset").click(function() { $("#form")[0].reset(); });});
（译者Keel注：这里作者将form的id也写成了form，源文件有<form id="form">，这是非常不好的写法，你可以将这个ID改成form1或者testForm，然后用$("#form1")或者$("#testForm")来表示它，再进行测试。）
这个代码选择了所有ID为"form"的元素，并在其第一个上call了一个reset()。如果你有一个以上的form，你可以这样做：
$(document).ready(function() { // use this to reset several forms at once$("#reset").click(function() { $("form").each(function() { this.reset();}); });});
（译者Keel注：请注意一定要亲自将这些代码写在custom.js中并在starterkit.html上测试效果才能有所体会！必要时要观察starterkit.html的html代码）
这样你在点击Reset链接后，就选择了文档中所有的form元素，并对它们都执行了一次reset()。
还有一个你可能要面对的问题是不希望某些特定的元素被选择。jQuery 提供了filter() 和not() 方法来解决这个问题。 filter()以过滤表达式来减少不符合的被选择项, not()则用来取消所有符合过滤表达式的被选择项. 考虑一个无序的list，你想要选择所有的没有ul子元素的li元素。
$(document).ready(function() {$("li").not("[ul]").css("border", "1px solid black");});
这个代码选择了所有的li元素，然后去除了没有ul子元素的li元素。刷新浏览器后，所有的li元素都有了一个边框，只有ul子元素的那个li元素例外。
（译者Keel注：请注意体会方便之极的css()方法，并再次提醒请务必实际测试观察效果，比方说换个CSS样式呢？再加一个CSS样式呢？像这样：$("li").not("[ul]").css("border", "1px solid black").css("color","red");）
上面代码中的[expression] 语法是从XPath而来，可以在子元素和属性(elements and attributes)上用作过滤器，比如你可能想选择所有的带有name属性的链接:
$(document).ready(function() { $("a[@name]").background("#eee");});
这个代码给所有带有name属性的链接加了一个背景色。（译者Keel注：这个颜色太不明显了，建议写成$("a[@name]").background("red");）
更常见的情况是以name来选择链接，你可能需要选择一个有特点href属性的链接，这在不同的浏览器下对href的理解可能会不一致，所以我们的部分匹配("*=")的方式来代替完全匹配("=")：
$(document).ready(function() {$("a[@href*=/content/gallery]").click(function() {// do something with all links that point somewhere to /content/gallery });});
到现在为止，选择器都用来选择子元素或者是过滤元素。另外还有一种情况是选择上一个或者下一个元素，比如一个FAQ的页面，答案首先会隐藏，当问题点击时，答案显示出来，jQuery代码如下：
$(document).ready(function() {$('#faq').find('dd').hide().end().find('dt').click(function() { var answer = $(this).next(); if (answer.is(':visible')) { answer.slideUp(); } else { answer.slideDown(); } });});
这里我们用了一些链式表达法来减少代码量，而且看上去更直观更容易理解。像'#faq' 只选择了一次，利用end()方法，第一次find()方法会结束(undone)，所以我们可以接着在后面继续find('dt')，而不需要再写$('#faq').find('dt')。
在点击事件中的，我们用 $(this).next() 来找到dt下面紧接的一个dd元素，这让我们可以快速地选择在被点击问题下面的答案。
（译者Keel注：这个例子真是太酷了，FAQ中的答案可以收缩！从利用next()的思路到实现这些效果都有很多地方需要我们消化，注意 if (answer.is(':visible'))用法，注意answer.slideUp();不懂的地方赶紧查我在最开始提到的两个必看API文档）
除了选择同级别的元素外，你也可以选择父级的元素。可能你想在用户鼠标移到文章某段的某个链接时，它的父级元素--也就是文章的这一段突出显示，试试这个：
$(document).ready(function() { $("a").hover(function() {$(this).parents("p").addClass("highlight"); }, function() {$(this).parents("p").removeClass("highlight"); });});
测试效果可以看到，移到文章某段的链接时，它所在的段全用上highlight样式，移走之后又恢复原样。
（译者Keel注：highlight是core.css中定义的样式，你也可以改变它，注意这里有第二个function()这是hover方法的特点，请在API文档中查阅hover，上面也有例子说明）
在我们继续之前我们先来看看这一步： jQuery会让代码变得更短从而更容易理解和维护，下面是$(document).ready(callback)的缩写法：
$(function() { // code to execute when the DOM is ready});
应用到我们的Hello world例子中，可以这样:
$(function() { $("a").click(function() { alert("Hello world!"); });});
现在，我们手上有了这些基础的知识，我们可以更进一步的探索其它方面的东西，就从AJAX开始！
本章的相关链接:
- jQuery API documentation
- Visual jQuery - A categorized browsable API documentation
- jQuery Expressions: CSS
- jQuery Expressions: XPath
- jQuery Expressions: Custom
- jQuery Special Events
- jQuery DOM Traversing
Rate me:使用AJAX
在这一部分我们写了一个小小的AJAX应用，它能够rate一些东西（译Keel注：就是对某些东西投票），就像在youtube.com上面看到的一样。
首先我们需要一些服务器端代码，这个例子中用到了一个PHP文件，读取rating参数然后返回rating总数和平均数。看一下rate.php代码.
虽然这些例子也可以不使用AJAX来实现，但显示我们不会那么做，我们用jQuery生成一个DIV容器，ID是"rating".
$(document).ready(function() { // generate markupvar ratingMarkup = ["Please rate: "]; for(var i=1; i <= 5; i++) {ratingMarkup[ratingMarkup.length] = "<a href='#'>" + i + "</a> ";} // add markup to container and applier click handlers to anchors$("#rating").append( ratingMarkup.join('') ).find("a").click(function(e) {e.preventDefault(); // send requests$.post("rate.php", {rating: $(this).html()}, function(xml) {// format result var result = [ "Thanks for rating, current average: ",$("average", xml).text(), ", number of votes: ",$("count", xml).text() ]; // output result$("#rating").html(result.join('')); } ); });});
这段代码生成了5个链接，并将它们追加到id为"rating"容器中，当其中一个链接被点击时，该链接标明的分数就会以rating参数形式发送到rate.php，然后，结果将以XML形式会从服务器端传回来，添加到容器中，替代这些链接。
如果你没有一个安装过PHP的webserver，你可以看看这个在线的例子.
不使用javascript实现的例子可以访问 softonic.de 点击 "Kurz bewerten!"
更多的AJAX方法可以从这里 找到，或者看看API文档 下面的AJAX filed under AJAX.
（译者Keel注：这个在线实例从国内访问还是比较慢的，点击后要等一会儿才能看到结果，可以考虑对它进行修改，比如加上loading，投票后加上再投票的返回链接等。此外，这个例子中还是有很多需要进一步消化的地方，看不懂的地方请参考API文档。）
一个在使用AJAX载入内容时经常发生的问题是：当载入一个事件句柄到一个HTML文档时，还需要在载入内容上应用这些事件，你不得不在内容加载完成后应用这些事件句柄，为了防止代码重复执行，你可能用到如下一个function:
// lets use the shortcut$(function() { var addClickHandlers = function() {$("a.clickMeToLoadContent").click(function() {$("#target").load(this.href, addClickHandlers); }); }; addClickHandlers();});
现在，addClickHandlers只在DOM载入完成后执行一次，这是在用户每次点击具有clickMeToLoadContent 这个样式的链接并且内容加载完成后.
请注意addClickHandlers函数是作为一个局部变量定义的，而不是全局变量(如：function addClickHandlers() {...})，这样做是为了防止与其他的全局变量或者函数相冲突.
另一个常见的问题是关于回调(callback)的参数。你可以通过一个额外的参数指定回调的方法，简单的办法是将这个回调方法包含在一个其它的function中:
// get some datavar foobar = ...;// specify handler, it needs data as a paramtervar handler = function(data) { ...};// add click handler and pass foobar!$('a').click( function(event) { handler(foobar); } );// if you need the context of the original handler, use apply:$('a').click( function(event) { handler.apply(this, [foobar]); } );
用到简单的AJAX后，我们可以认为已经非常之“web2.0”了，但是到现在为止，我们还缺少一些酷炫的效果。下一节将会谈到这些效果.
本章的相关链接:
- jQuery AJAX Module
- jQuery API: Contains description and examples for append and all other jQuery methods
- ThickBox: A jQuery plugin that uses jQuery to enhance the famous lightbox
Animate me(让我生动起来):使用FX
一些动态的效果可以使用 show() 和 hide()来表现:
$(document).ready(function() { $("a").toggle(function() {$(".stuff").hide('slow'); }, function() { $(".stuff").show('fast'); });});
你可以与 animate()联合起来创建一些效果,如一个带渐显的滑动效果:
$(document).ready(function() { $("a").toggle(function() {$(".stuff").animate({ height: 'hide', opacity: 'hide' }, 'slow');}, function() { $(".stuff").animate({ height: 'show', opacity: 'show'}, 'slow'); });});
很多不错的效果可以访问interface plugin collection. 这个站点提供了很多demos和文档
这些效果插件是位于jQuery插件列表的前面的，当然也有很多其他的插件，比如我们下一章讲到的表格排序插件。
本章的相关链接:
Sort me(将我有序化):使用tablesorter插件(表格排序)
这个表格排序插件能让我们在客户端按某一列进行排序，引入jQuery和这个插件的js文件，然后告诉插件你想要哪个表格拥有排序功能。
要测试这个例子，先在starterkit.html中加上像下面这一行的代码：
<script src="lib/jquery.tablesorter.js" type="text/javascript"></script>
然后可以这样调用不着:
$(document).ready(function() { $("#large").tableSorter();});
现在点击表格的第一行head区域，你可以看到排序的效果，再次点击会按倒过来的顺序进行排列。
这个表格还可以加一些突出显示的效果，我们可以做这样一个隔行背景色（斑马线）效果:
$(document).ready(function() { $("#large").tableSorter({stripingRowClass: ['odd','even'], // Class names for striping supplyed as a array.stripRowsOnStartUp: true // Strip rows on tableSorter init. });});
关于这个插件的更多例子和文档可以在 tablesorter首页找到.
几乎所有的特件都是这样用的:先include插件的js文件,然后在某些元素上使用插件定义的方法,当然也有一些参数选项是可以配置的
经常更新的插件列表可以从jQuery官方站 on the jQuery site找到.
当你更经常地使用jQuery时,你会发现将你自己的代码打包成插件是很有用处的,它能方便地让你的公司或者其他人进行重用.下一章我们将谈到如何构建一个自己的插件.
本章的相关链接:
Plug me:制作自己的插件
写一个自己的jQuery插件是非常容易的,如果你按照下面的原则来做,可以让其他人也容易地结合使用你的插件.
- 为你的插件取一个名字,在这个例子里面我们叫它"foobar".
- 创建一个像这样的文件:jquery.[yourpluginname].js,比如我们创建一个jquery.foobar.js
-
创建一个或更多的插件方法,使用继承jQuery对象的方式,如:
jQuery.fn.foobar = function() { // do something};
-
可选的:创建一个用于帮助说明的函数,如:
jQuery.fooBar = { height: 5, calculateBar = function() { ... },checkDependencies = function() { ... }};
你现在可以在你的插件中使用这些帮助函数了:
jQuery.fn.foobar = function() { // do somethingjQuery.foobar.checkDependencies(value); // do something else};
-
可选的l:创建一个默认的初始参数配置,这些配置也可以由用户自行设定,如:
jQuery.fn.foobar = function(options) { var settings = { value: 5,name: "pete", bar: 655 }; if(options) { jQuery.extend(settings, options); }};
现在可以无需做任何配置地使用插件了,默认的参数在此时生效:
$("...").foobar();
或者加入这些参数定义:
$("...").foobar({ value: 123, bar: 9});
如果你release你的插件, 你还应该提供一些例子和文档,大部分的插件都具备这些良好的参考文档.
现在你应该有了写一个插件的基础,让我们试着用这些知识写一个自己的插件.
很多人试着控制所有的radio或者checkbox是否被选中,比如:
$("input[@type='checkbox']").each(function() { this.checked = true;// or, to uncheck this.checked = false; // or, to togglethis.checked = !this.checked;});
无论何时候，当你的代码出现each时，你应该重写上面的代码来构造一个插件,很直接地:
$.fn.check = function() { return this.each(function() { this.checked = true;});};
这个插件现在可以这样用:
$("input[@type='checkbox']").check();
现在你应该还可以写出uncheck()和toggleCheck()了.但是先停一下,让我们的插件接收一些参数.
$.fn.check = function(mode) {var mode = mode || 'on'; // if mode is undefined, use 'on' as defaultreturn this.each(function() { switch(mode) { case 'on':this.checked = true; break; case 'off': this.checked = false; break;case 'toggle': this.checked = !this.checked; break; } });};
这里我们设置了默认的参数,所以将"on"参数省略也是可以的,当然也可以加上"on","off", 或 "toggle",如:
$("input[@type='checkbox']").check();$("input[@type='checkbox']").check('on');$("input[@type='checkbox']").check('off');$("input[@type='checkbox']").check('toggle');
如果有多于一个的参数设置会稍稍有点复杂,在使用时如果只想设置第二个参数,则要在第一个参数位置写入null.
从上一章的tablesorter插件用法我们可以看到,既可以省略所有参数来使用或者通过一个 key/value 对来重新设置每个参数.
作为一个练习,你可以试着将 第四章 的功能重写为一个插件.这个插件的骨架应该是像这样的:
$.fn.rateMe = function(options) {var container = this; // instead of selecting a static container with $("#rating"), we now use the jQuery contextvar settings = { url: "rate.php" // put more defaults here// remember to put a comma (",") after each pair, but not after the last one!}; if(options) { // check if options are present before extending the settings$.extend(settings, options); } // ... // rest of the code // ...return this; // if possible, return "this" to not break the chain});
Next steps(下一步)
如果你想做更好的javascript开发,建议你使用一个叫 FireBug的firefox插件. 它提供了断点调试(比alert强多了)、观察DOM变化等很多漂亮的功能
jQuery Ajax(load,post,get,ajax) 实例 全解析
我们先来看一些简单的方法，这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法，当然，如果要处理复杂的逻辑，还是需要用到jQuery.ajax()的(这个后面会说到).
1. load ( url, [data], [callback] ) ：载入远程 HTML 文件代码并插入至 DOM 中。
url (String) : 请求的HTML页的URL地址。
data (Map) : (可选参数) 发送至服务器的 key/value 数据。
callback (Callback) : (可选参数) 请求完成时(不需要是success的)的回调函数。
这个方法默认使用 GET 方式来传递的，如果[data]参数有传递数据进去，就会自动转换为POST方式的。jQuery 1.2 中，可以指定选择符，来筛选载入的 HTML 文档，DOM 中将仅插入筛选出的 HTML 代码。语法形如 "url #some > selector"。
这个方法可以很方便的动态加载一些HTML文件，例如表单。
示例代码：
$(".ajax.load
").load("http://www.cnblogs.com/yeer/archive/2009/06/10/1500682.html .post
",
function
(responseText, textStatus, XMLHttpRequest){
this
;//在这里this指向的是当前的DOM对象，即$(".ajax.load")[0]
//alert(responseText);//请求返回的内容
//alert(textStatus);//请求状态：success，error
//alert(XMLHttpRequest);//XMLHttpRequest对象
});
注： 不知道为什么URL写绝对路径在FF下会出错，知道的麻烦告诉下。下面的get()和post()示例使用的是绝对路径，所以在FF下你将会出错并不会看到返回结果。还有get()和post()示例都是跨域调用的，发现传上来后没办法获取结果，所以把运行按钮去掉了。
2. jQuery.get ( url, [data], [callback] )：使用GET方式来进行异步请求
参数：url (String) : 发送请求的URL地址.data (Map) : (可选) 要发送给服务器的数据，以 Key/value 的键值对形式表示，会做为QueryString附加到请求URL中。callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。
这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。示例代码：
$.get("./Ajax.aspx
", {Action:"get
",Name:"lulu
"}, function
(data, textStatus){
//返回的 data 可以是 xmlDoc, jsonObj, html, text, 等等.
this
; // 在这里this指向的是Ajax请求的选项配置信息，请参考下图
alert
(data);
//alert(textStatus);//请求状态：success，error等等。
当然这里捕捉不到error，因为error的时候根本不会运行该回调函数
//alert(this);
});
点击发送请求：
jQuery.get()回调函数里面的 this ，指向的是Ajax请求的选项配置信息：
3. jQuery.post ( url, [data], [callback], [type] ) ：使用POST方式来进行异步请求
参数：url (String) : 发送请求的URL地址.data (Map) : (可选) 要发送给服务器的数据，以 Key/value 的键值对形式表示。callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。type (String) : (可选)官方的说明是：Type of data to be sent。其实应该为客户端请求的类型(JSON,XML,等等)
这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。示例代码：
Ajax.aspx：
Response.ContentType = "application/json
";
Response.Write("{result: '
" + Request["Name
"] + ",你好！(这消息来自服务器)'}
");
jQuery 代码：
$.post("Ajax.aspx
", { Action: "post
", Name: "lulu
" },
function
(data, textStatus){
// data 可以是 xmlDoc, jsonObj, html, text, 等等.
//this; // 这个Ajax请求的选项配置信息，请参考jQuery.get()说到的this
alert
(data.result);
}, "json
");
点击提交：
这里设置了请求的格式为"json"：
如果你设置了请求的格式为"json"，此时你没有设置Response回来的ContentType 为：Response.ContentType = "application/json"; 那么你将无法捕捉到返回的数据。
注意一下，alert (data.result); 由于设置了Accept报头为“json”，这里返回的data就是一个对象，并不需要用eval()来转换为对象。
4. jQuery.getScript ( url, [callback] ) : 通过 GET 方式请求载入并执行一个 JavaScript 文件。
参数url (String) : 待载入 JS 文件地址。callback (Function) : (可选) 成功载入后回调函数。
jQuery 1.2 版本之前，getScript 只能调用同域 JS 文件。 1.2中，您可以跨域调用 JavaScript 文件。注意：Safari 2 或更早的版本不能在全局作用域中同步执行脚本。如果通过 getScript 加入脚本，请加入延时函数。
这个方法可以用在例如当只有编辑器focus()的时候才去加载编辑器需要的JS文件.下面看一些示例代码：
加载并执行 test.js。
jQuery 代码:
$.getScript("test.js");
加载并执行 AjaxEvent.js ，成功后显示信息。
jQuery 代码:
$.getScript("AjaxEvent.js
", function
(){
alert
("AjaxEvent.js 加载完成并执行完成.你再点击上面的Get或Post按钮看看有什么不同？
");
});
jQuery Ajax 事件
Ajax请求会产生若干不同的事件，我们可以订阅这些事件并在其中处理我们的逻辑。在jQuery这里有两种Ajax事件：局部事件 和 全局事件。
局部事件 就是在每次的Ajax请求时在方法内定义的，例如：
$.ajax({
beforeSend: function
(){
// Handle the beforeSend event
},
complete: function
(){
// Handle the complete event
}
// ...
});
全局事件 是每次的Ajax请求都会触发的，它会向DOM中的所有元素广播，在上面 getScript() 示例中加载的脚本就是全局Ajax事件。全局事件可以如下定义：
$("#loading
").bind("ajaxSend
", function
(){
$(this
).show();
}).bind("ajaxComplete
", function
(){
$(this
).hide();
});
或者：
$("#loading
").ajaxStart(function
(){
$(this
).show();
});
我们可以在特定的请求将全局事件禁用，只要设置下 global 选项就可以了：
$.ajax({
url: "test.html
",
global: false
,// 禁用全局Ajax事件.
// ...
});
下面是jQuery官方给出的完整的Ajax事件列表：
<p id="results">
<b>Results: </b>
</p>
<form>
<select name="single">
<option>Single</option>
<option>Single2</option>
</select>
<select name="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select>
<br/>
<input type="checkbox" name="check" value="check1"/>
check1
<input type="checkbox" name="check" value="check2"checked="checked"/>
check2
<input type="radio" name="radio" value="radio1"checked="checked"/>
radio1
<input type="radio" name="radio" value="radio2"/>
radio2
</form>
jQuery学习之:ajaxSetup值列表
$.ajaxSetup(settings)
Ajax请求全局设置，详细请$.ajax选项描述。
返回值：undefined
参数：settings (Map):用于Ajax请求的键／值对。
示例：
设置默认请求url为”/xmlhttp/”,无全局操作权限，用ＰＯＳＴ方法请求。下面用Ajax请求一些数据！
1. $.ajaxSetup( {
2. url: "/xmlhttp/",
3. global: false,
4. type: "POST"
5. } );
6. $.ajax({ data: myData });
| 参数名 | 类型 | 描述 |
| url | String | (默认: 当前页地址) 发送请求的地址。 |
| type | String | (默认: “GET”) 请求方式 (”POST” 或 “GET”)， 默认为 “GET”。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。 |
| timeout | Number | 设置请求超时时间（毫秒）。此设置将覆盖全局设置。 |
| async | Boolean | (默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。 |
| beforeSend | Function | 发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。 function(XMLHttpRequest) {this;// the options for thisajax request} |
| cache | Boolean | (默认: true) jQuery 1.2 新功能，设置为 false 将不会从浏览器缓存中加载请求信息。 |
| complete | Function | 请求完成后回调函数 (请求成功或失败时均调用)。参数： XMLHttpRequest 对象，成功信息字符串。 function(XMLHttpRequest, textStatus) {this;// the options for thisajax request} |
| contentType | String | (默认: “application/x-www-form-urlencoded”) 发送信息至服务器时内容编码类型。默认值适合大多数应用场合。 |
| data | Object, | 发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 ‘&foo=bar1&foo=bar2′。 |
| dataType | String | 预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息返回 responseXML 或 responseText，并作为回调函数参数传递，可用值: “xml”: 返回 XML 文档，可用 jQuery 处理。 “html”: 返回纯文本 HTML 信息；包含 script. 元素。 “script”: 返回纯文本 JavaScript. 代码。不会自动缓存结果。 “json”: 返回 JSON 数据 。 “jsonp”:JSONP格式。使用JSONP形式调用函数时，如 “myurl?callback=?” jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。 |
| error | Function | (默认: 自动判断 (xml 或 html)) 请求失败时将调用此方法。这个方法有三个参数：XMLHttpRequest 对象，错误信息，（可能）捕获的错误对象。 function(XMLHttpRequest, textStatus, errorThrown) {//通常情况下textStatus和errorThown只有其中一个有值this;// the options for thisajax request} |
| global | Boolean | (默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件，如 ajaxStart 或 ajaxStop 。可用于控制不同的Ajax事件 |
| ifModified | Boolean | (默认: false) 仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断。 |
| processData | Boolean | (默认: true) 默认情况下，发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 “application/x-www-form-urlencoded”。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。 |
| success | Function | 请求成功后回调函数。这个方法有两个参数：服务器返回数据，返回状态 function(data, textStatus) {// data could be xmlDoc, jsonObj, html, text, etc...this;// the options for thisajax request} |
jQuery.ajax()笔记
Example: 加载并执行一个 JS 文件。
$.ajax({ type: "GET", url: "test.js", dataType: "script" });
Example: 保存数据到服务器，成功时显示信息。
$.ajax({ type: "POST", url: "some.php", data: "name=John&location=Boston", success: function(msg){ alert( "Data Saved: " + msg ); } });
Example: 装入一个 HTML 网页最新版本。
$.ajax({ url: "test.html", cache: false, success: function(html){ $("#results").append(html); }});
Example: 同步加载数据。发送请求时锁住浏览器。需要锁定用户交互操作时使用同步方式。
var html = $.ajax({ url: "some.php", async: false }).responseText;
Example: 发送 XML 数据至服务器。设置 processData 选项为 false，防止自动转换数据格式。
var xmlDocument = [create xml document]; $.ajax({ url: "page.php", processData: false, data: xmlDocument, success: handleResponse });
Example: 作为发送数据到服务器的ID，保存一些数据到服务器，并通知用户一旦它的完成。请注意，此用法 - 返回到一个变量的调用的结果 - 需要同步（阻塞）的要求！ （异步：假）
bodyContent = $.ajax({ url: "script.php", global: false, type: "POST", data: ({id : this.getAttribute('id')}), dataType: "html", async:false, success: function(msg){ alert(msg); } }).responseText;
-
version added: 1.5jQuery.ajax( url, [ settings ] )url一个用来包含发送请求的URL字符串。
settings一个以"{键:值}"组成的AJAX 请求设置。所有选项都是可选的。可以使用$.ajaxSetup()设置任何默认参数。看jQuery.ajax( settings )下所有设置的完整列表。
-
version added: 1.0jQuery.ajax( settings )settings一个以"{键:值}"组成的AJAX 请求设置。所有选项都是可选的。可以使用$.ajaxSetup()设置任何默认参数。
acceptsMap默认： 取决于数据类型
asyncBoolean默认： true
beforeSend(jqXHR, settings)Function
cacheBoolean默认： true, dataType为"script"和"jsonp"时默认为false
complete(jqXHR, textStatus)Function, Array
contents(added 1.5)Map
contentTypeString默认: 'application/x-www-form-urlencoded'
contextObject
converters(1.5新增)Map默认： {"* text": window.String, "text html": true, "text json": jQuery.parseJSON, "text xml": jQuery.parseXML}
crossDomain(1.5新增)默认： 同域请求为false， 跨域请求为true
dataObject, String
dataFilter(data, type)Function
dataTypeString默认: Intelligent Guess (xml, json, script, or html)
error(jqXHR, textStatus, errorThrown)Function请求失败时调用此函数。有以下三个参数：jqXHR (在 jQuery 1.4.x中, XMLHttpRequest) 对象、描述发生的错误类型的一个字符串和捕获的异常对象。如果发生了错误，错误信息（第二个参数）除了得到
null之外，还可能是"timeout","error","abort"和"parsererror"。这是一个 Ajax Event。 在jQuery 1.5, 在error设置可以接受函数组成的数组。每个函数将被依次调用。注意：此处理程序不被跨域脚本和JSONP形式的请求调用。
globalBoolean默认: true
无论怎么样这个请求将触发全局AJAX事件处理程序。默认是
true。设置为 false 将不会触发全局 AJAX 事件，如 ajaxStart 或 ajaxStop 可用于控制不同的。这可以用来控制各种Ajax Events.
headers(1.5新增)MapDefault: {}
一个额外的"{键:值}"对映射到请求一起发送。此设置被设置之前
beforeSend函数被调用;因此，消息头中的值设置可以在覆盖beforeSend函数范围内的任何设置。
ifModifiedBoolean默认: false
仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断。在jQuery 1.4中，他也会检查服务器指定的'etag'来确定数据没有被修改过。
isLocal(added 1.5.1)Boolean默认: 取决于当前的位置协议
允许当前环境被认定为“本地”，（如文件系统），即使jQuery默认情况下不会承认它。以下协议目前公认为本地：
file,*-extension, andwidget。如果isLocal设置需要修改，建议在$.ajaxSetup()方法中这样做一次。
jsonpString在一个jsonp请求中重写回调函数的名字。这个值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，比如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。在jQuery 1.5，，设置
jsonp选项为false阻止了jQuery从加入"?callback"字符串的URL或试图使用"=?"转换。在这种情况下，你也应该明确设置jsonpCallback设置。例如,{ jsonp: false, jsonpCallback: "callbackName" }
jsonpCallbackString, Function为jsonp请求指定一个回调函数名。这个值将用来取代jQuery自动生成的随机函数名。这主要用来让jQuery生成度独特的函数名，这样管理请求更容易，也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存GET请求的时候，指定这个回调函数名。在jQuery 1.5，你也可以使用一个函数值该设置，在这种情况下
jsonpCallback的值设置到该函数的返回值。
mimeType(added 1.5.1)String一个mime类型用来覆盖XHR的 MIME类型。
passwordString用于响应HTTP访问认证请求的密码
processDataBoolean默认: true
默认情况下，通过data选项传递进来的数据，如果是一个对象(技术上讲只要不是字符串)，都会处理转化成一个查询字符串，以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为
false。
scriptCharsetString只有当请求时dataType为"jsonp"或"script"，并且type是"GET"才会用于强制修改charset。通常只在本地和远程的内容编码不同时使用。
statusCode(1.5新增)Map默认: {}
一组数值的HTTP代码和函数对象，当响应时调用了相应的代码。例如，如果响应状态是404，将触发以下警报：
$.ajax({ statusCode: {404: function() { alert('page not found'); }});
如果请求成功，状态代码函数作为回调的成功相同的参数;如果在一个错误的结果，他们采取了相同的参数
error回调。
success(data, textStatus, jqXHR)Function, Array请求成功后的回调函数。这个函数传递3个参数：从服务器返回的数据，并根据dataType参数进行处理后的数据，一个描述状态的字符串;还有 jqXHR（在jQuery 1.4.x的中，XMLHttpRequest） 对象 。在jQuery 1.5，成功设置可以接受一个函数数组。每个函数将被依次调用。这是一个Ajax Event.
timeoutNumber设置请求超时时间（毫秒）。如果一个设置有$.ajaxSetup()，此设置将覆盖全局设置。例如，你可以使用这个属性来提供一个单一的请求比所有你所设置时间在一秒钟内的其他要求更长的超时。见
$.ajaxSetup()全局超时。
traditionalBoolean如果你想要用传统的方式来序列化数据，那么就设置为true。请参考工具分类下面的jQuery.param方法.
typeString默认: 'GET'
请求方式 ("POST" 或 "GET")， 默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。
urlString默认: 当前地址
发送请求的地址。
usernameString于响应HTTP访问认证请求的用户名
xhrFunction默认 当可用的ActiveXObject（IE）中，否则为XMLHttpRequest
回调创建XMLHttpRequest对象。当可用时默认为ActiveXObject（IE）中，否则为XMLHttpRequest。提供覆盖你自己的执行的XMLHttpRequest或增强工厂。
xhrFields(added 1.5.1)Map一对“文件名-文件值”在本机设置
XHR对象。例如，如果需要的话，你可以用它来设置withCredentials为true的跨域请求。
$.ajax()函数所有的基础jQuery的Ajax请求发送。它往往不是必须的，直接调用这个函数，几个高层次的替代品如$.get()和.load()可用，更容易使用，如果不常见的选项是必需的，不过，$.ajax()可以使用更灵活。
在简单地说， $.ajax()函数可以不带参数调用：
$.ajax();
注意: 所有的选项都可以通过$.ajaxSetup() 函数来全局设置
这个例子中，不使用选项，加载当前页面的内容，但其结果没有。若要使用结果，我们可以实现的回调功能之一。
jqXHR 对象
该jQuery的XMLHttpRequest（jqXHR）对象返回$.ajax() 在jQuery 1.5是一个对象的超集浏览器的原生的XMLHttpRequest。例如，它包含responseText和responseXML性能，以及一个getResponseHeader()方法。当传输机制是XMLHttpRequest以外的东西（例如，一个一个JSONP请求脚本标签）的jqXHR对象尽可能的模拟原生的XHR功能。
在jQuery 1.5.1， 在jqXHR对象还包含了overrideMimeType方法。
$.ajax()返回的jqXHR对象 实现约定的接口，给他们的所有属性，方法，和约定的行为（见Deferred object获取更多信息）。为了方便和一致性$.ajax()回调函数名称中使用。jqXHR也提供.error().success()和.complete()方法。这些方法当$.ajax()请求终止时需要一个函数参数调用，这个函数接收$.ajax()回调函数名相同的参数。在jQuery 1.5这允许你指定一个请求的多个回调，甚至可能分配请求后已完成回调。（如果请求已经完成，回调立即触发。）
// Assign handlers immediately after making the request,
// and remember the jqxhr object for this request
var jqxhr = $.ajax({ url: "example.php" })
.success(function() { alert("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"); });
为了向后兼容XMLHttpRequest ，一jqXHR对象将公开下列属性和方法：
readyStatestatusstatusTextresponseXMLand/orresponseText当底层的请求分别作出XML和/或文本响应setRequestHeader(name, value)这背离了换上了新一旧的价值，而不是串联的新值与旧标准getAllResponseHeaders()getResponseHeader()abort()
假如没有onreadystatechange机制，不管怎样 由于success ， error ，complete和statusCode覆盖所有可能的要求。
回调函数
如果要处理$.ajax()得到的数据，则需要使用回调函数。beforeSend、error、dataFilter、success、complete。
在jQuery 1.5， error ， success ，和complete回调钩子先入先出队列管理。这意味着你可以为每个挂钩分配多个回调。见Deferred object methods ，这是实现内部的$.ajax()回调挂钩。
在this回调是在所有参考对象在context选项传递给$.ajax在设置;如果context没有指定，this是他们自己的Ajax设置参考。
某些类型Ajax的请求，如JSONP形式和跨域的GET请求，请不要使用XHR;在这些情况下XMLHttpRequest和textStatus参数传递给回调是undefined 。
这里有$.ajax()提供的钩子回调 ：
- beforeSend 在发送请求之前调用，它接收
jqXHR对象和settings作为参数对象。 - error 在请求出错时调用。如果请求失败，在它们的顺序依次登记。他们收到
jqXHR，字符串表示的错误类型，如果适用的异常对象。一些内置的错误，将提供作为例外对象的字符串： "abort", "timeout", "No Transport"。 dataFilter在请求成功之后调用。传入返回的数据以及dataType参数的值。并且必须返回新的数据（可能是处理过的）传递给success回调函数。success当请求之后调用。传入返回后的数据，以及包含成功代码的字符串。他们收到返回的数据，一个包含成功的代码和jqXHR对象。complete它们的顺序依次登记回调，请求完成时，无论是在失败或成功。他们收到jqXHR对象，以及一个包含成功或错误代码。
For example, 通过使用返回的HTML，我们可以实现一个success事件处理器：
$.ajax({ url: 'ajax/test.html', success: function(data) { $('.result').html(data); alert('Load was performed.'); }});
数据类型
$.ajax()函数依赖服务器提供的信息来处理返回的数据。如果服务器报告说返回的数据是XML，那么返回的结果就可以用普通的XML方法或者jQuery的选择器来遍历。如果见得到其他类型，比如HTML，则数据就以文本形式来对待。
通过dataType选项还可以指定其他不同数据处理方式。除了单纯的XML，还可以指定 html、json、jsonp、script或者text。
其中，text和xml类型返回的数据不会经过处理。这些数据仅仅是传递给处理程序的成功，无论是通过responseText或responseXML所有的jqXHR对象。
注意:我们必须确保网页服务器报告的MIME类型与我们选择的dataType所匹配。比如说，XML的话，服务器端就必须声明 text/xml 或者 application/xml 来获得一致的结果。
如果指定为 html类型，任何内嵌的JavaScript都会在HTML作为一个字符串返回之前执行。类似的，指定script类型的话，也会先执行服务器端生成JavaScript，然后再把脚本作为一个文本数据返回。
如果指定为json类型，则会把获取到的数据作为一个JavaScript对象来解析，并且把构建好的对象作为结果返回。为了实现这个目的，他首先尝试使用jQuery.parseJSON()。如果浏览器不支持，则使用一个Function来构建。JSON数据是一种能很方便通过JavaScript解析的结构化数据。如果获取的数据文件存放在远程服务器上（域名不同，也就是跨域获取数据），则需要使用jsonp类型。使用这种类型的话，会创建一个查询字符串参数callback=? ，这个参数会加在请求的URL后面。服务器端应当在JSON数据前加上回调函数名，以便完成一个有效的JSONP请求。如果要指定回调函数的参数名来取代默认的callback，可以通过设置$.ajax()的jsonp参数。
注意:JSONP是JSON格式的扩展。他要求一些服务器端的代码来检测并处理查询字符串参数。更多信息可以参阅original post detailing its use.
如果指定了script或者jsonp类型，那么当从服务器接收到数据时，实际上是用了<script>标签而不是XMLHttpRequest对象。这种情况下，$.ajax()不再返回一个XMLHttpRequest对象，并且也不会传递事件处理函数，比如beforeSend。
发送数据到服务器
默认情况下，Ajax请求使用GET方法。如果要使用POST方法，可以设定type参数值。这个选项也会影响data选项中的内容如何发送到服务器。
data选项既可以包含一个查询字符串，比如 key1=value1&key2=value2 ，也可以是一个映射，比如 {key1: 'value1', key2: 'value2'} 。如果使用了后者的形式，则数据再发送器会被转换成查询字符串。这个处理过程也可以通过设置processData选项为false来回避。如果我们希望发送一个XML对象给服务器时，这种处理可能并不合适。并且在这种情况下，我们也应当改变contentType选项的值，用其他合适的MIME类型来取代默认的 application/x-www-form-urlencoded 。
高级选项
global选项用于阻止响应注册的回调函数，比如.ajaxSend，或者ajaxError，以及类似的方法。这在有些时候很有用，比如发送的请求非常频繁且简短的时候，就可以在ajaxSend里禁用这个。更多关于这些方法的详细信息，请参阅下面的内容。
如果服务器需要HTTP认证，可以使用用户名和密码可以通过username和password选项来设置。
Ajax请求是限时的，所以错误警告被捕获并处理后，可以用来提升用户体验。请求超时这个参数通常就保留其默认值，要不就通过jQuery.ajaxSetup来全局设定，很少为特定的请求重新设置timeout选项。
默认情况下，请求总会被发出去，但浏览器有可能从他的缓存中调取数据。要禁止使用缓存的结果，可以设置cache参数为false。如果希望判断数据自从上次请求后没有更改过就报告出错的话，可以设置ifModified为true。
scriptCharset允许给<script>标签的请求设定一个特定的字符集，用于script或者jsonp类似的数据。当脚本和页面字符集不同时，这特别好用。
Ajax的第一个字母是asynchronous的开头字母，这意味着所有的操作都是并行的，完成的顺序没有前后关系。$.ajax()的async参数总是设置成true，这标志着在请求开始后，其他代码依然能够执行。强烈不建议把这个选项设置成false，这意味着所有的请求都不再是异步的了，这也会导致浏览器被锁死。
$.ajax函数返回他创建的XMLHttpRequest对象。通常jQuery只在内部处理并创建这个对象，但用户也可以通过xhr选项来传递一个自己创建的xhr对象。返回的对象通常已经被丢弃了，但依然提供一个底层接口来观察和操控请求。比如说，调用对象上的.abort()可以在请求完成前挂起请求。
扩展的Ajax
在jQuery 1.5，，jQuery的Ajax实现包括预过滤器，转换器和传输，让您扩展了很大的灵活性Ajax。如需有关这些先进功能的信息，请参阅Extending Ajax
其他注意事项：
- 由于浏览器的安全限制，大多数“Ajax”的要求，均采用同一起源的政策 ;该请求不能成功地检索来自不同的域，子域或协议的数据。
- Script和JSONP形式请求不受同源策略的限制。
jquery之利用ajax与服务器交谈(完全控制ajax请求之全局函数)
jquery之利用ajax与服务器交谈(完全控制ajax请求之全局函数)
----------
jquery还允许我们把函数附加到特定的DOM元素。这些函数在Ajax请求处理的不同阶段或在请求最终成功或失败时将被触发。
例如，为了把函数附加到用来显示错误消息的,id为errorConsole的元素上，编写：
- $("#errorConsole").ajaxError(reportError);
在任何Ajax请求失败的事件中，函数reportError都将被调用。
当这个或任何其他全局函数被调用时，传递给回调函数的第一个参数由javascript的Object实例构成，该实例带有以下两个属性：
1.type : 包含全局函数的类型的字符串，如ajaxError;
2.target : DOM元素(被附加了全局函数)的引用。在前面示例中，那就是id为errorConsole的元素。
我们把这个构造称为全局回调信息对象。一些全局函数类型被传递附加参数，这个共同的第一个参数可以用来标识什么全局函数类型触发了回调函数以及全局函数被附加到哪一个元素上。
用来附加全局函数的命令为: ajaxStart()，ajaxSend(),ajaxSuccess(),ajaxError(),ajaxComplete()和ajaxStop().因为用来附加这些函数类型的任何一个命令的语法都是一致的，所以在一个语法描述框内一起加以说明。
===
Ajax全局函数语法：
ajaxStart(callback)
ajaxSend(callback)
ajaxSuccess(callback)
ajaxError(callback)
ajaxComplete(callback)
ajaxStop(callback)
把传入的回调函数附加到所有匹配元素上，一旦到达Ajax请求处理的指定时刻就触发回调函数。
参数
callback (函数)将被附加的回调函数。
返回
包装集
===
这些全局回调函数的每个都在ajax请求的处理期间的特定时刻被触发，或者根据响应状态有条件地触发，假定全局函数已经为ajax请求而启用。那么下表每一个全局回调函数类型何时被触发以及什么参数被传递给全局回调函数。
ajaxStart ：
触发时间 ： 在jquery Ajax函数或命令发起时，但在XHR实例被创建之前
参数 ： 类型被设置为ajaxStart的全局回调信息对象
ajaxSend :
触发时间 ：在XHR实例被创建之后，但在XHR实例被发送给服务器之前
参数 ：类型被设置为ajaxSend的全局回调信息对象；XHR实例；$.ajax()函数使用的属性
ajaxSuccess :
触发时间 ：在请求已从服务器返回之后，并且响应包含成功状态码
叁数 ： 类型被设置为ajaxSuccess的全局回调信息对象；XHR实例；$.ajax()函数使用的属性
ajaxError :
触发时间 ：在请求已从服务器返回之后，并且响应包含失败状态码
参数 ： 类型被设置为ajaxError的全局回调信息对象；XHR实例；$.ajax()函数使用的属性；被XHR实例返回的异常对象
ajaxComplete :
触发时间 ：在请求已从服务器返回之后，并且在任何已声明的ajaxSuccess或ajaxError回调函数已被调用之后
参数 ：类型被设置为ajaxComplete的全局回调信息对象；XHR实例；$.ajax()函数使用的属性
ajaxStop :
触发时间 ：在所有其他ajax处理完成以及任何其他适用的全局回调函数已被调用之后
参数 ：类型被设置为ajaxStop的全局回调信息对象
jQuery的.live()和.die()
live方法类似于.bind()，除此之外，它允许你将事件绑定到DOM元素上，可以将事件绑定到DOM中还不存在的元素上，看看下面的例子：
比方说当用户在点击链接时及想提示他们正在离开站点。
|
1
2
3
4
5
6
|
$(document).ready(
function
() {
$(
'a'
).click(
function
() {
alert(
"You are now leaving this site"
);
return
true
;
});
});
|
注意，.click()仅仅是个实现更一般.bind()的简单方法，下面和上面的代码相当于上面的实现。
|
1
2
3
4
5
6
|
$(document).ready(
function
() {
$(
'a'
).bind(
'click'
,
function
() {
alert(
"You are now leaving this site"
);
return
true
;
});
});
|
但是现在通过javascript添加一个链接到页面。
|
1
|
$(
'body'
).append(
'<div><a href="...">Check it out!</a></div>'
);
|
然而当用户点击那个链接是，方法将不会被调用，因为那个链接当你将click事件绑定到页面的所有<a>节点时还并不存在，所以我们就用.live()替换.bind()：
|
1
2
3
4
5
6
|
$(document).ready(
function
() {
$(
'a'
).live(
'click'
,
function
() {
alert(
"You are now leaving this site"
);
return
true
;
});
});
|
现在如果你添加一个新的链接到页面上，绑定就也可以运行了。
live()背后神奇的地方就在于它并不将事件绑定到你选定的elements上，而实际上是绑定到了DOM树的跟节点（例子中是$(document)）,而是在element中就像一个参数一样进行传递。
那么当你点击一个元素时，click事件就会在DOM树上往上传递，直至到达根节点。这个.click()事件的触发器已经在根节点被.live()创建。这个触发方法将首先检测被点击的目标看是否和.live()调用的选择器相匹配。所以上面的例子中，会检查点击的元素是否和$('a').live()中的$('a')相匹配，如果匹配，那么绑定的方法就会执行了。
因为不管你在根节点内点击了什么，根节点的.click()事件都会被触发，当你点击加入到根节点的任何元素时这个检查都会发生。
如果你知道.bind()，那么你肯定知道.unbind()。那么，.die()和.live()就是类似的关系了。为了接触上面的绑定（不希望用户点击链接时弹出对话框），我们这么做：
|
1
|
$(
'a'
).die();
|
更具体点，如果还有其他的事件被绑定且需要保留，例如hover或其他，可以只解除click事件绑定。
|
1
|
$(
'a'
).die(
'click'
);
|
再具体些，如果已经定义了方法名，可以解除绑定指定的方法。
|
1
2
3
4
5
6
7
8
9
10
11
12
|
specialAlert =
function
() {
alert(
"You are now leaving this site"
);
return
true
;
}
$(document).ready(
function
() {
$(
'a'
).live(
'click'
, specialAlert );
$(
'a'
).live(
'click'
, someOtherFunction );
});
// then somewhere else, we could unbind only the first binding
$(
'a'
).die(
'click'
, specialAlert );
|
使用这些函数时，.die()方法会有一个缺点。只可以使用.live()方法中用到的元素选择器，例如，不可以像下面这样写：
|
1
2
3
4
5
6
7
8
9
10
|
$(document).ready(
function
() {
$(
'a'
).live(
'click'
,
function
() {
alert(
"You are now leaving this site"
);
return
true
;
});
});
// it would be nice if we could then choose specific elements
// to unbind, but this will do nothing
$(
'a.no-alert'
).die();
|
.die()事件看起来好像是匹配到了目标选择权并解除了.live()的绑定，但事实上，$('a.no-alert')并不存在绑定，所以jquery找不到任何绑定去去掉，就不会起作用了。
更糟的是下面这个:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
$(document).ready(
function
() {
$(
'a,form'
).live(
'click'
,
function
() {
alert(
"You are going to a different page"
);
return
true
;
});
});
// NEITHER of these will work
$(
'a'
).die();
$(
'form'
).die();
// ONLY this will work
$(
'a,form'
).die();
|
jquery关于bind和live具有父子关系的混合使用测试（控制事件的传播）
需要使用到了live和bind两种事件绑定功能，而使用这
两种事件绑定的标签存在
父子关系，然后，在测试的过程中控制事件传播的时候出现了些状况，使用
event.stopPropagation()在
子标签事件处还是在
父标签事件处是根据该事件传播是
冒泡还是
捕捉（
冒泡：如单击子标签，那么
先触发
子标签的
click事件，再
依次触发
父标签的
click事件。
捕捉：相反。）。所以浪费了大量的事件才调试好，最后还是不明白是什么情况，于是就做出了如下的测试。
-----------------------------------总结
-----------------------------------代码
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <title></title>
- </head>
- <script type="text/javascript" src="jquery-1.8.2.js"></script>
- <script type="text/javascript">
- $(function() {
- //使用live添加事件时，不能使用父子关系进行绑定
- // $("#child").live("click", function(event) {
- // alert("child");
- // });
- // $("#child").parents("div").live("click", function(event) {
- // alert("parent");
- // });
- //使用bind添加事件时，可以使用父子关系进行绑定
- $("#parent").bind("click", function(event) {
- alert("parent");
- });
- $("#parent").children().bind("click", function(event) {
- // event.stopPropagation();//冒泡在child处停止事件传播
- alert("child");
- });
- //两bind
- $("#one-p").bind("click", function(event) {
- alert("parent");
- });
- $("#one-c").bind("click", function(event) {
- // event.stopPropagation();//冒泡在child处停止事件传播
- alert("child");
- });
- //两live
- $("#two-p").live("click", function(event) {
- alert("parent");
- });
- $("#two-c").live("click", function(event) {
- // event.stopPropagation();//冒泡在child处停止事件传播
- alert("child");
- });
- //父live子bind
- $("#three-p").live("click", function(event) {
- alert("parent");
- });
- $("#three-c").bind("click", function(event) {
- // event.stopPropagation();//冒泡在child处停止事件传播
- alert("child");
- });
- //父bind子live
- $("#four-p").bind("click", function(event) {
- // event.stopPropagation();//捕获在parent处停止事件传播
- alert("parent");
- });
- $("#four-c").live("click", function(event) {
- alert("child");
- });
- });
- </script>
- <body>
- <div id="parent">
- <input id="child" type="button" value="click" />
- </div>
- <div id="one-p">
- <input id="one-c" type="button" value="click" />
- <span>parent -> bind & child -> bind ==> 冒泡</span>
- </div>
- <div id="two-p">
- <input id="two-c" type="button" value="click" />
- <span>parent -> live & child -> live ==> 冒泡</span>
- </div>
- <div id="three-p">
- <input id="three-c" type="button" value="click" />
- <span>parent -> live & child -> bind ==> 冒泡</span>
- </div>
- <div id="four-p">
- <input id="four-c" type="button" value="click" />
- <span>parent -> bind & child -> live ==> 捕获</span>
- </div>
- </body></html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script type="text/javascript" src="jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function() {
//使用live添加事件时，不能使用父子关系进行绑定
// $("#child").live("click", function(event) {
// alert("child");
// });
// $("#child").parents("div").live("click", function(event) {
// alert("parent");
// });
//使用bind添加事件时，可以使用父子关系进行绑定
$("#parent").bind("click", function(event) {
alert("parent");
});
$("#parent").children().bind("click", function(event) {
// event.stopPropagation();//冒泡在child处停止事件传播
alert("child");
});
//两bind
$("#one-p").bind("click", function(event) {
alert("parent");
});
$("#one-c").bind("click", function(event) {
// event.stopPropagation();//冒泡在child处停止事件传播
alert("child");
});
//两live
$("#two-p").live("click", function(event) {
alert("parent");
});
$("#two-c").live("click", function(event) {
// event.stopPropagation();//冒泡在child处停止事件传播
alert("child");
});
//父live子bind
$("#three-p").live("click", function(event) {
alert("parent");
});
$("#three-c").bind("click", function(event) {
// event.stopPropagation();//冒泡在child处停止事件传播
alert("child");
});
//父bind子live
$("#four-p").bind("click", function(event) {
// event.stopPropagation();//捕获在parent处停止事件传播
alert("parent");
});
$("#four-c").live("click", function(event) {
alert("child");
});
});
</script>
<body>
<div id="parent">
<input id="child" type="button" value="click" />
</div>
<div id="one-p">
<input id="one-c" type="button" value="click" />
<span>parent -> bind & child -> bind ==> 冒泡</span>
</div>
<div id="two-p">
<input id="two-c" type="button" value="click" />
<span>parent -> live & child -> live ==> 冒泡</span>
</div>
<div id="three-p">
<input id="three-c" type="button" value="click" />
<span>parent -> live & child -> bind ==> 冒泡</span>
</div>
<div id="four-p">
<input id="four-c" type="button" value="click" />
<span>parent -> bind & child -> live ==> 捕获</span>
</div>
</body></html>-----------------------------------总结
1.使用live绑定事件的时候，不能利用操作父子关系来绑定标签的事件。
2.标签存在父子关系的时候：只有再父标签为bind，子标签为live的时候事件传播为捕获。那么在事件传播为捕获的话只能在父标签绑定的事件处停止事件的传播，相反为冒泡的话，则在子标签绑定的事件处停止事件的传播。
jquery 事件委托
随着DOM结构的复杂化和Ajax等动态脚本技术的运用，事件委托自然浮出了水面。jQuery为绑定和委托事件提供了.bind()、.live()和.delegate()方法。本文在讨论这几个方法内部实现的基础上，展示它们的优劣势及适用场合。
事件委托
事件委托的事例在现实当中比比皆是。我们知道，DOM在为页面中的每个元素分派事件时，相应的元素一般都在事件冒泡阶段处理事件。在类似 body > div > a 这样的结构中，如果单击a元素，click事件会从a一直冒泡到div和body（即document对象）。因此，发生在a上面的单击事件，div和body元素同样可以处理。而利用事件传播（这里是冒泡）这个机制，就可以实现事件委托。具体来说，事件委托就是事件目标自身不处理事件，而是把处理任务委托给其父元素或者祖先元素，甚至根元素（document,JQuery经常这样做）。
.bind() （没有使用事件委托）
假设有一个多行多列的表格，我们想让用户单击每个单元格都能看到与其中内容相关的更多信息（比如，通过提示条）。为此，可以为每个单元格都绑定click事件：
$("info_table td").bind("click", function(){/*显示更多信息*/}); 问题是，如果表格中要绑定单击事件的有10列500行，那么查找和遍历5000个单元格会导致脚本执行速度明显变慢，而保存5000个td元素和相应的事件处理程序也会占用大量内存。在前面这个例子的基础上，如果我们想实现一个简单的相册应用，每页只显示50张照片的缩略图（50个单元格），用户点击“第x页”（或“下一页”）链接可以通过Ajax从服务器动态加载另外50张照片。在这种情况下，似乎使用.bind()方法为50个单元格绑定事件又可以接受了。事实却不然。使用.bind()方法只会给第一页中的50个单元格绑定单击事件，动态加载的后续页面中的单元格都不会有这个单击事件。换句话说，.bind()只能给调用它的时候已经存在的元素绑定事件，不能给未来新增的元素绑定事件。
事件委托可以解决上述两个问题。具体到代码上，只要用jQuery 1.3新增的.live()方法代替.bind()方法即可：
$("#info_table td").live("click",function(){/*显示更多信息*/});这里的.live()方法会把click事件绑定到$(document)对象（但这一点从代码中体现不出来，这也是.live()方法饱受诟病的一个重要原因，稍后再详细讨论），而且只需要给$(document)绑定一次（不是50次，更不是5000次），然后就能够处理后续动态加载的照片单元格的单击事件。在接收到任何事件时，$(document)对象都会检查事件类型和事件目标，如果是click事件且事件目标是td，那么就执行委托给它的处理程序。
.live()
到目前为止，一切似乎很完美。可惜，事实并非如此。因为.live()方法并不完美，它有如下几个主要缺点：
$()函数会找到当前页面中的所有td元素并创建jQuery对象（很奇怪为什么这么做，其实完全没有必要），但在确认事件目标时却不用这个td元素集合，而是使用选择符表达式与event.target或其祖先元素进行比较，因而生成这个jQuery对象会造成不必要的开销；
默认把事件绑定到$(document)元素，如果DOM嵌套结构很深，事件冒泡通过大量祖先元素会导致性能损失；
只能放在直接选择的元素后面，不能在连缀的DOM遍历方法后面使用，即$("#info_table td").live...可以，但$("#info_table").find("td").live...不行；
收集td元素并创建jQuery对象，但实际操作的却是$(document)对象，令人费解。
解决之道
为了避免生成不必要的jQuery对象，可以使用一种叫做“早委托”的hack，即在$(document).ready()方法外部调用.live()：
(function($){
$("#info_table td").live("click",function(){/*显示更多信息*/});
})(jQuery);在此，(function($){...})(jQuery)是一个“立即执行的匿名函数”，构成了一个闭包，可以防止命名冲突。在匿名函数内部，$参数引用jQuery对象。这个匿名函数不会等到DOM就绪就会执行。注意，使用这个hack时，脚本必须是在页面的head元素中链接和(或)执行的。之所以选择这个时机，因为这时候刚好document元素可用，而整个DOM还远未生成；如果把脚本放在结束的body标签前面，就没有意义了，因为那时候DOM已经完全可用了。
为了避免事件冒泡造成的性能损失，jQuery从1.4开始支持在使用.live()方法时配合使用一个上下文参数：
$("td",$("#info_table")[0]).live("click",function(){/*显示更多信息*/}); 这样，“受托方”就从默认的$(document)变成了$("#info_table")[0]，节省了冒泡的旅程。不过，与.live()共同使用的上下文参数必须是一个单独的DOM元素，所以这里指定上下文对象时使用的是$("#info_table")[0]，即使用数组的索引操作符来取得的一个DOM元素。
.delegate()
如前所述，为了突破单一.bind()方法的局限性，实现事件委托，jQuery 1.3引入了.live()方法。后来，为解决“事件传播链”过长的问题，jQuery 1.4又支持为.live()方法指定上下文对象。而为了解决无谓生成元素集合的问题，jQuery 1.4.2干脆直接引入了一个新方法.delegate()。
使用.delegate()，前面的例子可以这样写：
$("#info_table").delegate("td","click",function(){/*显示更多信息*/});使用.delegate()有如下优点（或者说解决了.live()方法的如下问题）：
直接将目标元素选择符（"td"）、事件（"click"）及处理程序与“受拖方”$("#info_table")绑定，不额外收集元素、事件传播路径缩短、语义明确；
支持在连缀的DOM遍历方法后面调用，即支持$("table").find("#info").delegate...，支持精确控制；
可见，.delegate()方法是一个相对完美的解决方案。但在DOM结构简单的情况下，也可以使用.live()。
提示：使用事件委托时，如果注册到目标元素上的其他事件处理程序使用.stopPropagation()阻止了事件传播，那么事件委托就会失效。
结论
在下列情况下，应该使用.live()或.delegate()，而不能使用.bind()：
为DOM中的很多元素绑定相同事件；
为DOM中尚不存在的元素绑定事件；
613
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
