1.2 jQuery基础知识
jQuery移动开发
如果你熟悉JavaScript和CSS的编写，那么编写第一个jQuery脚本将是很熟悉的工作，但是可能会有一些奇怪的地方。jQuery框架是一个JavaScript程序库，也就意味着它是用JavaScript构建的。由于本质上仍然是编写JavaScript，所以基础是相同的，只是将以jQuery框架的方式编写。换句话说，对某些基本功能进行了改进，但是JavaScript的核心——变量、函数、条件语句等——没有变化。所以，仍然使用var关键字、if和switch语句和函数，但是肯定会有许多改进和不同的编写方法，也就是HTML元素的访问。
jQuery为JavaScript语言提供了许多改进，如前所述，最好的部分是跨浏览器兼容性，所以再也不必编写同一个脚本的多个版本处理不同浏览器，这是一个很大的改进。在处理事件、Ajax（在本章后面讨论）和传统上需要某些条件语句以确定浏览器对代码解释方式的功能时，这一特性尤其实用。
选择HTML元素
你可以不再继续使用document.getElementById()访问网页中的HTML元素，而简单地使用jQuery选择器jquery()或者$()函数——这是我在本书中一直使用的简写版本。使用jQuery选择器不仅可以减少输入字符，还可以完成通过ID访问元素之外的更多功能。有了jQuery选择器，还可以按照名称访问一组HTML元素或者一个元素/对象。jQuery选择器在一个jQuery对象中包装一个或者一组元素，可以在对象上应用jQuery方法。这还不是所有的好处：甚至可以按照类名或者:first-child、:nth-child等CSS选择器访问元素。下面举几个例子。
使用jQuery的#id选择器，按照ID访问元素，就像为元素附加一个类，通过ID在CSS中访问元素一样：
$('#foo');```
使用.class选择器按照类名访问元素，就像创建一个CSS类一样。如果有多个元素具有相同类名，它们都会被选中。$('.foo');`在类名前添加元素名称，定位具有某个类名的特定元素。
$('div.foo');```
甚至可以用元素选择器定位特定元素或者元素集。$('div');`如果你熟悉CSS，就可能开始了解这一模式及其无限的可能性。构造CSS类的可用选项与用jQuery选择器访问HTML元素的所使用的选项相同。这就是jQuery对JavaScript和CSS的改进，将两者组合起来形成一种新语言，改进总体用户体验，当然这要求你正确地使用语法。
管理事件和函数
jQuery使用事件对网页上的用户交互（如鼠标单击）做出反应。用jQuery管理事件非常简单，在所有主要浏览器上都很可靠，这是一个很重要的因素，因为传统的JavaScript并不总能做到这一点。jQuery提供了拦截来自现有HTML元素上的许多不同事件的能力。一般来说，事件用于完成某种功能。在下面的例子中，click事件绑定到一个类名为foo的div元素。
$('div.foo').click(function(e) {
// Your custom code here
});```
通过将click事件绑定到div，一个函数与特定div上鼠标的点击操作关联。因此，任何时候点击div.foo，都会执行处理器函数中的自定义代码。
如果你熟悉传统的JavaScript，这种语法看上去可能会有些奇怪。不要担心——在我开始使用它时也是这种感觉，但是在我习惯了之后就喜欢上它了。一旦你熟悉了jQuery，就会发现这种代码语法内容丰富，容易理解和编写。我们对前一个例子进行分解。
1. jQuery选择器用于选中div.foo，然后它变成一个jQuery对象。
2. 接着，div.foo jQuery对象在div.foo被点击时使用click方法触发一个处理器函数。
3. 处理器函数用于执行自定义代码。处理器函数可以访问作为参数的eventObject。在这个例子中，它是处理器函数中的e参数。
如果使用jQuery选择器选择多个HTML元素使用的一个类名，并指定一个鼠标事件，这个事件会自动绑定到所有同类名元素。因此，在上面的例子中，如果有多个类名为foo的div元素，click事件将绑定到所有这类元素。使用绑定到多个元素的事件时，最重要的是要考虑作用域，确保所执行的任何自定义代码应用到所需的元素上。$('div.foo').click(function(e) {
alert($(this).html());});`在这个例子中，$(this)用来访问作用域中的当前元素。
注意：作用域是与值相关的包围上下文。在本例中，这个包围上下文是该函数，值是$(this)。
$(this)和JavaScript中使用的this关键字相同。在本例中，它应用到当前触发click事件的元素。考虑作用域时，this总是指与包围上下文相关的对象。在例子中，这个对象是div.foo，包围的上下文是click事件的处理器函数。jQuery在匿名处理器函数中将自动把点击的元素赋予$(this)。可以通过这个对象访问执行元素的事件，甚至在相同的代码适用于多个元素的时候。函数用于在发生事件或者简单而直接的函数调用时执行一个脚本或者一组脚本。
在本书后面将会学到，jQuery Mobile框架经常使用bind方法处理自定义事件。
jQuery Mobile提供的自定义事件建立了超出框架原生功能的实用开发钩子（Hook），意味着你可以拦截某些现有的事件，添加自己的自定义代码。这些事件包括touch、mouse和window事件，在本书后面将介绍所有这些事件的扩展方法。jQuery中bind方法的语法和前面的代码示例非常类似。
$('div.foo').bind('click', function(e) {
// Your custom code here
});```
差别在于，可以用同一个处理器响应多个事件。$('div.foo').bind('mouseenter mouseleave', function(e) {
// Your custom code here});`注意：函数和方法之间的不同是，函数是独立的，而方法与对象相关。在上述例子中，bind方法与jQuery对象相关。
你也可以处理自定义事件，例如jQuery Mobile框架实现的那些事件。
$('div.foo').bind('displayMyName', function(e, myName) {
alert('My name is: '+ myName);
});
$('button').click(function () {
$('div.foo').trigger('displayMyName', ['John Smith']);
});```
绑定事件将在我们讨论用自定义处理器函数绑定jQuery Mobile事件时更深入地介绍。
等待文档就绪
开发人员的常见做法是等待网页加载，然后再执行JavaScript。这样做的理由是在尝试访问和操纵网页元素之前确保它们可用。试图访问不可用的文档元素可能导致意外的表现，可能破坏所有后续的JavaScript。在传统的JavaScript中，最常见的等待页面加载方法是使用window. onload事件。但是，这种方法在文档加载之后发生，因为它实际上等待网页中的所有图片和横幅加载，这可能严重延迟你的脚本。幸运的是，jQuery提供了一个ready事件，使你的代码在文档可用时立即响应。$(document).ready(function() {
// Your custom code here});`首先，需要选择文档对象本身，然后应用ready事件。该事件触发时，它将执行一个包含了自定义代码的函数。继续前面的例子，需要为ready事件添加自定义代码，在应用click事件之前确保文档已经就绪。
$(document).ready(function() {
$('div.foo').click(function() {
alert($(this).html());
});
});```
也可以使用快捷版本，这个版本不需要访问document和设置 ready事件。$(function() {
$('div.foo').click(function() {
alert($(this).html());
});});`使用ready事件是jQuery开发的事实标准，这种方法不仅确保代码在合适的时间触发，还有助于创建完全非干扰式的代码，这意味着可以将所有jQuery写入一个单独的外部文件，从HTML网页上简单地引用。
应用特效
jQuery以不使用第三方插件（如Flash）创建特效而著称。该程序库提供许多在网页上加入动画的技术。动画能够创建视觉效果惊人的网页，它们还能提供其他更实际的作用，例如提供用户交互的视觉反馈，jQuery框架包含了许多预建的动画方法，如fadeIn、fadeOut、fadeTo、show、toggle、slideUp和slideDown等。
$(document).ready(function() {
$('div.foo').fadeIn();
});```
尽管这些预建的动画方法似乎是独立的，但是其中许多在内部由animate方法驱动。animate方法可以用于为HTML元素的任何数值型CSS属性（如height、opacity、left和right）提供动画。$(document).ready(function() {
$('div.foo').click(function() {
$(this).animate(function(){
height: '+=50'
}, 1000, function() {
// Your custom code, when the animation is complete
});
});});`在这个例子中，点击div.foo时，height属性每秒（1000ms）增加50个像素，当动画完成，一个回调函数将执行你的自定义代码。回调函数用于延迟代码的执行到其他某个事件发生。这是很强大的功能，不仅在事件触发时能够显示动画，还可以在动画完成时触发一个函数甚至另一个事件。前面介绍的例子仅仅是动画方法本身。jQuery包含创建队列提供其他动画相关功能的方法。表1.1列出jQuery中的队列方法。
queue方法提供了排队一串连续效果的方法，也就是说，可以无限地运行队列中的多种效果，或者使用clearQueue方法停止队列。queue方法主要用于FX（“效果”）队列，这是默认的队列，但是也可以通过jQuery API使用。你可以用它建立需要连续发生的任何功能队列，而不仅是动画。
queue和dequeue方法用于关联特定的元素或者对象。要使用queue方法，必须指定一个queueName参数，例如一个匿名函数。
$(document).ready(function() {
$('div.foo').fadeOut().queue(function(){
$('div.foo').fadeIn();
next();
});
});```
这种功能可以生成一个基于时间轴的动画，而无需使用setTimeout 或setInterval等JavaScript函数。
如前所述，尽管队列通常用于效果，并且在jQuery文档中列在效果之下，但是它们也可以用于排队任何功能，例如一系列异步方法调用——这把我们带到使用jQuery实现Ajax的话题中。
使用Ajax
Ajax是“异步JavaScript和XML”（asynchronous JavaScript and XML）的缩写。异步意味着可以通过超文本传输协议（HTTP）向服务器发出请求，在等待响应时继续处理其他数据。例如可以调用服务器端脚本从数据库读取XML数据，向服务器端脚本发送数据以保存到数据库中，或者简单地加载一个XML文件填充网站页面而不需要刷新网页。jQuery框架提供的功能使Ajax开发比传统的JavaScript更加容易，需要的代码更少，并提供覆盖各种情况的附加函数和事件处理器。与传统JavaScript相比，即使开发的是复杂的功能，jQuery用于处理Ajax的代码也更少，最终大大加快了开发速度。
在传统的JavaScript中，Ajax需要许多冗余代码来形成请求和处理响应，因为对不同的浏览器需要许多变种。为了发出请求和处理响应，必须编写类似下面这样的代码。if(window.XMLHttpRequest) {
request = new XMLHttpRequest();}
else if(window.ActiveXObject) {
request = new ActiveXObject('MSXML2.XMLHTTP');}
request.onreadystatechange = onResponse;
request.open('GET', 'url for request', true);
request.send(null);
function checkReadyState(obj) {
if(obj.readyState == 0) { // Sending Request }
if(obj.readyState == 1) { // Loading Response }
if(obj.readyState == 2) { // Response Loaded }
if(obj.readyState == 3) { // Response Ready }
if(obj.readyState == 4) {
if(obj.status == 200) {
return true;
}
else if(obj.status == 404) {
// File not found
}
else {
// There was a problem retrieving the XML
}
}}
function onResponse() {
if(checkReadyState(request)) {
// Handle the response with one of the following properties
//alert(request.responseXML);
//alert(request.responseText);
}}`jQuery也可以实现和传统JavaScript相同的功能，但是不必担心大部分内容的编写。JavaScript的编写并不难，只是需要写的内容太多，容易引起混乱，特别是与使用jQuery编写的请求和响应相比的情况下。下面是使用jQuery的Ajax请求样本，这与前面的JavaScript示例类似。
jQuery.ajax({
url: 'url for request',
success: function(xml){
// Parse the response
}
});```
上述代码使用jQuery对象的ajax方法，包含用于请求的一个url属性，并用一个匿名函数处理success回调。在jQuery对象的ajax方法中还可以使用许多其他属性，例如请求的type属性可以取POST或者GET（默认值），username和password以及crossDomain。但是，这个例子展示了ajax方法的最基本形式，说明jQuery Ajax调用的简洁性。
