jQuery 简介：为何使用 jQuery 用
jQuery 是一个跨浏览器的免费开源 JavaScript 库。其核心设计思想是“写更少的代码，作更多的事情”(Write Less Do More)。jQuery 提供了一套易于使用的 API。这些 API 极大地简化了客户端(浏览器)编程过程当中的许多方面，包括：jquery
- HTML DOM 的遍历与操做
- 浏览器事件处理
- AJAX（Asynchronous JavaScript And XML）编程
- 特效（如动画效果）
在直接使用 JavaScropt+DHTML 的传统客户端编程方式下，开发人员不得不编写冗长的代码。而且，为了使这些代码可以兼容不一样的浏览器，咱们还得编写额外的代码来处理这些跨浏览器问题。jQuery 的设计目标正是在于简化客户端编程。让咱们可以编写简练的代码，节约开发时间，而这些代码却同样能够功能强大，而且兼容多种浏览器。web
回页首ajax
获取 jQuery：开始使用 jQuery
jQuery 网站上提供了两种方式的发布文件。一种是内容通过压缩的文件；另外一种是原始文件。前者文件中不包含代码注释以及代码运行过程当中不须要的空白字符，它适合于生产环境(正式使用的环境)中使用，能够减小文件加载所需时间。后者文件中包含详细的代码注释，适合于开发和测试环境中使用。chrome
jQuery 的下载地址：http://jquery.com/download/编程
下载 jQuery 以后，在相应的网页中经过 script 元素引用 jQuery 代码便可使用它。如清单 1 所示：api
清单 1. 从本地站点引用 jQuery
<html> <head> <title>使用 jQuery</title> <script src="../js/lib/jQuery/1.9.1/jQuery.js"></script> </head> <body> </body> </html>
咱们还能够经过 Google、Microsoft 等公司提供的 CDN 服务直接获取 jQuery。其方法是在须要使用 jQuery 的网页中直接引用 CDN 服务的 URL。好比，使用 Google 的 CDN 的一个网页清单 2 所示：数组
清单 2. 从 CDN 引用 jQuery
<html> <head> <title>使用 jQuery</title> <script src='//ajax.googleapis.com/ajax/libs/jQuery/1.9.1/jQuery.min.js'> </script> </head> <body> </body> </html>
Microsoft 提供的 CDN 的 URL 为： http://ajax.aspnetcdn.com/ajax/jQuery/jQuery-1.9.1.js
Hello World：jQuery 第一个实例
下面的例子中，咱们使用 jQuery 实如今页面上显示当前时间的功能。
清单 3. Hello World
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script src="../js/lib/jQuery/1.9.1/jQuery.js"></script>
<script>
function initPage(){
//jQuery 代码：调用 jQuery 的核心函数－－－$函数
$("#message").html("Hello World, it is now:"+new Date().toLocaleString());
}
</script>
</head>
<body onload="initPage()">
<span id="message"></span>
</body>
</html>
从上面例子（在线例子：http://blog.viscenthuang.info/jQuery/page/CodeDemo.htm?code=HelloWorld.htm）
的代码中咱们能够看到， initPage 这个函数会在页面加载完毕后被调用。而该函数在执行后会在 ID 为 message 的 HTML 结点内添加表示客户端当前时间的字符串。您能够没必要急着去理解上面代码的具体意思。下一节将介绍 jQuery 的语法。另外，这个例子中咱们使用 body 元素的 onload 属性来绑定事件处理器（initPage）只是为了方便讨论。在本章的后面内容中会介绍 jQuery 中用于处理页面 load 事件绑定的简便 API。
jQuery 语法:温故而知新
虽然 jQuery 自己并不是一门新的语言。可是，学习其语法有助于咱们熟练、灵活地使用它。回顾下咱们熟悉的 CSS 语法，不难发现 jQuery 的语法与 CSS 有类似之处。
jQuery 语法的设计思想是"选择元素，对其操做"。这和 CSS 规则的语法很是相似。好比，要将页面中一个 ID 为 message 的元素的字体颜色设置为蓝色、字体大小设置为 17px，则能够定义如清单 4 所示 CSS 规则：
清单 4. CSS 规则例子
#message{
color:blue;
font-size:17px;
}
从上述 CSS 规则中可见，咱们指望的对元素外观的操做（字体颜色设置为蓝色、字体大小设置为 17px）是经过” color:blue”和”font-size:17px”这 2 个属性声明指定的。而这些操做要做用于哪些元素，则是经过 CSS 的选择器”#message”指定为 ID 等于“message”的元素。
总结来讲，CSS 规则中属性声明描述了外观属性操做，而选择器则指定了将相应的属性操做应用于哪些元素。如图 1 所示：
图 1. CSS 规则示意图
jQuery 的语法其实正是模仿了 CSS 规则的语法。其语法以下：
$(selector).action(actionParameter);
这是个链式语法。所以，上述的语法等效于：
var objTargetElements;//要施加操做的目标元素 objTargetElements=$(selector);//指定目标元素 //调用 objTargetElements 的相关方法，对目标元素进行操做 objTargetElements.action(actionParameter);
上述语法中，
$ ：美圆符是 jQuery 核心函数 jQuery 的一个别名。固然，在 JavaScript 中“$”是一个合法的函数名。 Selector 参数指定了一个 jQuery 选择器。jQuery 选择器相似于 CSS 中的选择器，它告诉 jQuery 咱们准备对哪些元素进行操做(action)。而且，CSS 中的各类选择器 jQuery 中都有等同的选择器。
action ：该方法指定了要对 selector 所指定的元素进行什么具体操做。actionParameter 参数是个可选参数，是根据具体所指定的方法来定的，它会随具体方法的变化而变化。
所以，清单 3 中的 jQuery 语句至关于：
清单 5.Query 非链式语法示例
/*
$("#message").html("Hello World, it is now:"
+new Date().toLocaleString());
至关于：
*/
var objTargetElements;//要施加操做的目标元素
//指定目标元素为 ID 等于 message 的元素，使用基于 ID 的选择器
objTargetElements=$("#message");
//调用 objTargetElements 的 html 方法，设置目标元素的 HTML 内容
objTargetElements.html ("Hello World, it is now:"
+new Date().toLocaleString());
$ 函数的返回值是一个 jQuery 自定义的相似数组的对象。该对象的各个数字下标表示的属性对应的值为选择器所匹配的各个元素。
好比，清单 3 中的 $ 函数调用，它为 $ 函数指定了一个基于元素 ID 的选择器表达式：
$("#message")
其返回值将知足下列条件表达式。由于选择器表达式”#message”匹配了惟一一个 ID 为 message 的元素：
document.getElementById("message")==$("#message")[0]
$ 函数返回的对象还提供了一些方法，经过调用该对象的相关方法能够对选择器所匹配的元素进行相应的操做。好比，清单 3 所示代码中，咱们经过调用$函数返回对象的 html 方法设置选择器表达式”#message”所匹配的元素的 HTML 内容。
为了更加直观得了解 $ 函数的返回值，建议您经过 Chrome 浏览器中的开发者工具的表达式监视功能（ Watch Expressions），观察一个具体的$函数调用的返回值。如图 2 所示：
图 2.$ 函数返回值示意图
jQuery 的语法和清单 3 中的 jQuery 语句的对应关系如图 3 所示：
图 3. jQuery 语法实例
$ 函数返回的对象提供了一个名为 each 的经常使用方法。 each 方法接受一个参数，该参数是一个回调函数。 each 方法会针对选择器表达式所匹配的元素中的每一个元素逐次调用这个回调函数，并将单个元素及其对应的索引号做为参数传入该函数。下面看一个实例。
假设在页面中有多个连接，如今要将这个页面中全部连接的 URL 显示在浏览器的控制台中。
页面代码以下所示：
清单 6.$ 函数返回值实例
<a href="https://www.ibm.com/developerworks/cn/" target="_blank"> IBM developerWorks 中文站</a><br/> <a href="https://www.ibm.com/developerworks" target="_blank"> IBM developerWorks</a><br/> <a href="/" target="_blank">首页</a><br/>
(在线例子：http://blog.viscenthuang.info/jQuery/page/CodeDemo.htm?code=$FuncReturn.htm）
此时，能够用基于元素名称的选择器来匹配多个元素（页面中全部的连接元素），并调用$函数返回值的 each 方法。这里，咱们定义一个回调函数（ 这个回调函数一般是一个匿名函数，方便代码编写），把它做为 each 函数的参数。在这个回调函数中，咱们往浏览器控制台中打印每一个连接的 URL，如清单 7 代码所示：
清单 7.jQuery 的 each 方法－－－遍历集合型对象的简便方法
//用基于元素名称的选择器去匹配页面中的全部连接元素
$("a").each(function(index,ele){//匿名函数做为 each 方法的参数，供其调用
console.log("连接"+index+":"+ele.href);//往控制台中打印连接 URL
});
如今，您不妨作一个练习，来改变 ID 为 tip 的元素使其可以以粗体显示。咱们知道，要让一个元素粗体显示，只要指定其 CSS 属性 font-weight 为 bold 便可。也就是说，实现这样一个功能，咱们须要的选择器是“#tip”，对应的操做是修改 CSS 属性。所以，jQuery 的代码是：
$("#tip").css("font-weight","bold");
您可使用本教程配套的在线代码编辑器直接编写代码练习上面的代码：
http://blog.viscenthuang.info/jQuery/page/CodeDemo.htm?code=HelloWorld.htm
在线代码编辑器效果以下图所示：
图 4. 在线代码编辑器
jQuery 选择器:jQuery 利器
了解 jQuery 的语法后，咱们明白选择器是 jQuery 中的核心概念。下面介绍 jQuery 几种常见的选择器。这些选择器咱们大均可以从 CSS 中找到它们的影子。
前文讲到 Chrome 浏览器中的开发者工具表达式监视功能可让咱们直观地看到$函数返回值的各个属性和方法。所以，在咱们学习 jQuery 甚至实际工做过程当中均可以经过 Chrome 浏览器的表达式监控工具直接观察指定的选择器表达式所匹配的元素，以便实时地肯定所要使用的选择器表达式是否正确。
基于元素 ID 的选择器
这种选择器能够指定惟一的一个元素。清单 3 的代码就是使用这种选择器。其语法是：
"#元素 ID"
若是要对一个特定的元素进行操做，那么就能够设置该元素的 ID 属性值，而后使用基于 ID 的选择器指定要进行操做的元素。好比，以下 HTML 片断中的 ID 为 btnTest 的元素，就能够用基于元素 ID 的选择器”#btnTest”来指定。
<input type="button" id="btnTest" value="Test"></input>
如图 5 所示：
图 5. 基于元素 ID 的选择器
（在线例子http://blog.viscenthuang.info/jQuery/page/CodeDemo.htm?code=IDSelector.htm）
基于元素标签名的选择器
若是要对标签名相同的元素（如都是用标签"A"表示的超连接元素）进行操做，则可使用基于标签名的选择器。其语法以下：
"元素名"
在 CSS 中，咱们能够用元素标签名作选择器。好比，下面的 CSS 规则表示将全部连接的字体尺寸设置为 25 像素。
a{
font-size:25px;
}
经过 jQuery 代码实现上述 CSS 规则的功能，咱们可使用元素标签名做为选择器。代码如清单 8 所示：
清单 8.使用元素标签名做为选择器
$("a").each(function(){//选择器表达式是"a"
$(this).css("fontSize","25px");
});
在线例子：http://blog.viscenthuang.info/jQuery/page/CodeDemo.htm?code=EleNameSelector.htm
基于 CSS 类名选择器
jQuery 也支持 CSS 所支持的类名选择器。其语法是：
".类名"
假设咱们要把页面中全部表示金额的输入框的值都在其前面加一个货币符号前缀。这样的功能实现的时候就能够用基于类名的选择器了：在页面中将全部表示金额的输入框元素的 class 属性值设为"amount"。再经过以下代码实现添加货币符号的功能。
清单 9.使用 CSS 类名做为选择器
/*
选择全部类为 amount 的元素
each 方法会针对选择器所匹配的每一个元素
调用该方法的参数中所指定的函数。并将该
元素做为函数调用的第二个实际参数。
*/
$(".amount").each(function(i,ele){
//设置元素的值为其当前值加上货币符号前缀
$(ele).val('￥'+$(ele).val());
});
在线例子：http://blog.viscenthuang.info/jQuery/page/CodeDemo.htm?code=ClsNameSelector.htm
基于元素属性的选择器
jQuery 也支持基于元素属性的选择器。其语法是：
“元素名[属性名=属性指]”
好比下面的 CSS 规则描述了将全部的文本框的背景色设为黄色。
input[type="text"]{
background-color:yellow;
}
如上面的页面效果用 jQuery 代码实现，则可使用属性选择器来编写相应的代码：
清单 10.使用元素属性做为选择器
$("input[type=text]").css('background-color','yellow');
在线例子：http://blog.viscenthuang.info/jQuery/page/CodeDemo.htm?code=AttrSelctor.htm
基于 DOM 对象的选择器
jQuery 也支持使用 DOM 对象做为选择器。这种选择器在一些特定状况下会显得很是有用和方便。
好比清单 3 所示的例子中，监听页面加载（load）事件的监听器 initPage 是经过 body 元素的 onload 属性来指定的。jQuery 提供了一种简便的方法来处理页面的 load 事件绑定。其方法就是使用 document 对象做为选择器传递给$函数。而后调用给函数返回值的 ready 方法。调用时将事件监听器函数做为 ready 方法的参数传入。所以，清单 3 所示例子中的页面 load 事件绑定能够用 jQuery 代码的方式实现，以下代码所示：
清单 11.使用 ready 方法处理页面 load 事件
$(document).ready(initPage);//页面加载完毕后，jQuery 会回调 initPage
页面 load 事件的绑定也能够直接将事件监听器函数做为 $ 函数的参数直接对该函数进行调用。此时，$ 函数会在页面加载完毕（即 HTML 文档及相关资源文件，如 CSS、图片和 JavaScript 文件，加载完毕后触发）后，回调这个事件监听器。所以，上述代码也能够写做：
清单 12.直接将函数传递给$函数处理页面 load 事件
$(initPage);
一般，这样的事件监听器能够写成匿名函数。以下代码所示：
清单 13.使用匿名函数
$(function(){//该函数在页面加载完毕会被 jQuery 调用
//事件处理代码
});
其它选择器
jQuery 还支持其它类型的选择器，如基于伪类的选择器、基于元素层次关系的选择器等。有关选择器的进一步信息，您能够参考 jQuery 的 API 文档：http://api.juery.com/category/selectors。
jQuery 的架构：支持插件机制
jQuery 支持提供插件的方式扩展其功能。从这个角度来将，当咱们提到 jQuery 时，默认就是指 jQuery 内核(Core)，它是由 jQuery 官方组织所开发和维护的。而使用者则能够根据须要开发一些插件。本教程后面会介绍一些经常使用 jQuery UI 插件，以及如何自定义一个插件。
jQuery 事件:轻松实现跨浏览器的事件处理
bind 方法能够实现事件监听器的绑定。下面看一个具体的例子。这个例子实现这样一个功能：
按钮被单击后，其下方会显示或者隐藏一段文本。
清单 14.使用 bind 方法绑定事件监听器
//当 ID 为 btnDetails 的按钮被单击时，下面的匿名函数会被 jQuery 调用
$("#btnDetails").bind("click",function(){
$("#divDetails").toggle();//显示或者隐藏 ID 为 divDetails 的元素
});
从上述的例子（在线例子：http://blog.viscenthuang.info/jQuery/page/CodeDemo.htm?code=EvtBinding.htm）中能够看出。当选择器所匹配的元素被单击时， bind 方法的第二个参数所指定的函数会被 jQuery 调用。而负责显示/隐藏 divDetails 块的代码就会随着其所在的函数被调用而被执行，从而实现了预期的页面效果。
bind 方法的语法是：
event ：要处理的事件的名称。该名称不须要加前缀 on。
handler ：事件监听器，即对浏览器事件进行处理的函数。这一般是一个匿名函数。在 event 参数所表示的事件被触发后，jQuery 会调用这个函数（即回调），并向该函数传入一个 jQuery 自定义的事件对象。该事件对象是 jQuery 根据原始的浏览器事件对象建立的。jQuery 这么作是经过一个"中立"的事件对象来规避不一样的浏览器所提供的同一个事件的事件对象的属性不一样的问题。这使得咱们能够用一样的代码处理事件，而没必要关心不一样浏览器所提供的原始事件对象的差别。
data ：表示须要在事件触发后传递给事件监听器的额外数据。它是做为 jQuery 事件对象的 data 属性传递给事件监听器的。
下面看具体的例子。
使用 jQuery 事件对象
对某些事件的处理，咱们可能须要从事件对象中获取当前事件的进一步信息。
假设页面上有个输入框只容许输入数字。当用户输入的字符为非数字字符时，页面可以自动将其"过滤"掉，即在输入框中不显示这些无效的字符。实现这样的功能就须要从表示用户输入的 keypress 事件对象中获取用户当前所按的键的键盘编码值，以便找出相应的字符。代码如清单 15 所示：
清单 15.使用 jQuery 事件对象
$("#txtVerifyCode").bind("keypress",function(evt){
var keyCode=evt.which;//从事件对象中获取当前按键的编码值
var char=String.fromCharCode(keyCode) ;//将按键的编码转换为相应的字符
if(!/\d/.test(char)){//当前输入的字符不是数字字符
//调用事件对象的 preventDefault 方法，取消事件的默认行为，此处即取消输入。
evt.preventDefault();
}
});
从上面的例子（在线例子：http://blog.viscenthuang.info/jQuery/page/CodeDemo.htm?code=JqEvtObj.htm）能够看出，具体是什么按键触发了 keypress 事件的信息能够从 jQuery 封装的 jQuery 对象的相应属性 keyCode 中获取。而 jQuery 在调用咱们的事件监听器时会将其封装的事件对象做为惟一参数传递给事件监听器。
向事件监听器传递额外参数
下面看一个向监听器传递额外参数的例子。
假设如今有个可以在页面中显示提示信息的函数，其定义以下：
function showTip(msg){
$('#divTips').html(msg);//显示具体的提示内容
}
页面上有两个按钮，它们被单击的时候页面上分别会显示不一样的提示信息。那么，咱们能够编写以下的事件监听器：
清单 16.从事件对象中获取额外数据
function showTipHandler(evt){
var data=evt.data;//获取额外参数
/*额外参数是一个咱们根据须要的自定义对象。这里，咱们假设这个对象有个 msg 属性。
它表示但愿要显示的提示信息。
*/
var msg=data.msg;
showTip(msg);
}
那么，咱们就能够在事件绑定的时候，使用上面定义的事件监听器。并定义其额外参数。代码以下：
清单 17.向事件监听器传递额外数据
$('#tip1').bind('click',{msg:'中文提示'},showTipHandler);
$('#tip2').bind('click',{msg:'English tip'},showTipHandler);
从上面的例子（在线例子：http://blog.viscenthuang.info/jQuery/page/CodeDemo.htm?code=EvtObjExtraData.htm）能够看出，在调用 bind 方法绑定事件监听器时指定的额外数据（即 bind 方法的第 2 个参数）能够被事件监听器经过访问事件对象的 data 属性来获取。这个特性在使用统一个事件监听器出来多个元素的事件时显得颇有用。
事件绑定的简便方法
经过 bind 方法实现事件绑定，须要咱们在 bind 方法的第一个参数中指定具体的事件名。
jQuery 也提供一些简便的事件绑定方法。这些方法就以所要处理的事件名命名。
好比，清单 15 中的代码能够写成：
$("#txtVerifyCode").keypress(function(evt){
//这里是事件处理代码
});
取消事件绑定
若是要取消某个事件监听器。则可使用 unbind 方法。
下面的例子演示了取消 ID 为 btnTest 的按钮上的事件监听器 handleClick 。代码以下:
清单 18.取消事件绑定
$("#btnEvtBind").click(handleClick);
//按钮 btnTest 被单击后，btnEvtBind 按钮再也不可以响应 click 事件
$("#btnTest").click(function(){
//使得 handleClick 监听器再也不起做用
$("#btnEvtBind").unbind("click",handleClick);
});
调用 unbind 方法时，若是不指定第二个参数，则 jQuery 会取消监听第一个参数所指定的事件的全部监听器。若没有指定任何参数，则 jQuery 会取消选择器表达式匹配的全部元素上全部监听器。
总结
本文讲解了 jQuery 的语法、选择器及其事件处理 API。这些是 jQuery 的核心，也是使用 jQuery 及学习本系列教程后续内容的基础。虽然这些内容不是很难掌握，但编程毕竟是一种技能，而非知识，技能是须要经过练习才能得到的。所以，建议您利用本教程提供的在线例子，本身动手试着去作一下练习，并在练习过程当中体会教程所讲解的内容。
参考资料
学习
- jQuery 网站：http://jquery.com/
- Google Chrome 开发者工具官方文档：https://developers.google.com/chrome-developer-tools/
- 链式语法：http://book.51cto.com/art/201211/367093.htm
- developerWorks Web development 专区：经过专门关于 Web 技术的文章和教程，扩展您在网站开发方面的技能。
- developerWorks Ajax 资源中心：这是有关 Ajax 编程模型信息的一站式中心，包括不少文档、教程、论坛、blog、wiki 和新闻。任何 Ajax 的新信息都能在这里找到。
- developerWorks Web 2.0 资源中心，这是有关 Web 2.0 相关信息的一站式中心，包括大量 Web 2.0 技术文章、教程、下载和相关技术资源。您还能够经过 Web 2.0 新手入门 栏目，迅速了解 Web 2.0 的相关概念。
- 查看 HTML5 专题，了解更多和 HTML5 相关的知识和动向。