jQuery实验教程
- 格式：doc
- 大小：112.50 KB
- 文档页数：23
jQuery实验教程第1章－－－jQuery简介、语法及事件处理
Date: May 16, 2013
Type of Submission:
Title: jQuery实验教程
Subtitle: 第1章－－－jQuery简介、语法及事件处理
Keywords: jQuery教程,jQuery实例,Javascript编程
Prefix: 无需填写
Given: 黄文海
Middle: 无需填写
Family: 无需填写
Suffix: 无需填写
Job Title: 您的职务
Email: viscent.huang@(可以公开)
Bio: 您的个人简介。请用 100 字以内描述。
Company: 您所在的公司
Photo filename: 照片文件名
Abstract: jQuery以其特有的简练的代码风格，极大得改变了Javascript代码编写的方式。
本教程以实例代码为基础，讲解jQuery的使用方法，并适度剖析jQuery的实现原理。
并且，本教程提供在线代码编辑器，使读者可以在线练习jQuery代码的编写。
jQuery简介、语法及事件处理
使用jQuery进行DOM、CSS操作
使用jQuery进行AJAX开发
使用jQuery进行异步编程
使用jQuery实现动画效果 jQuery简介：为什么使用jQuery用
jQuery是一个跨浏览器的免费开源Javascript库。其核心设计思想是“写更少的代码，做更多的事情”(Write Less Do More)。jQuery提供了一套易于使用的API。这些API极大地简化了客户端(浏览器)编程过程中的许多方面，包括：
HTML DOM的遍历与操作
浏览器事件处理
AJAX（Asynchronous Javascript And XML）编程
特效（如动画效果）
在直接使用Javascipt+DHTML的传统客户端编程方式下，开发人员不得不编写冗长的代码。并且，为了使这些代码能够兼容不同的浏览器，我们还得编写额外的代码来处理这些跨浏览器问题。jQuery的设计目标正是在于简化客户端编程。让我们能够编写简练的代码，节约开发时间，而这些代码却一样可以功能强大，并且兼容多种浏览器。
获取jQuery：开始使用jQuery
jQuery网站上提供了两种方式的发布文件。一种是内容经过压缩的文件；另一种是原始文件。前者文件中不包含代码注释以及代码运行过程中不需要的空白字符，它适合于生产环境(正式使用的环境)中使用，可以减少文件加载所需时间。后者文件中包含详细的代码注释，适合于开发和测试环境中使用。
jQuery的下载地址：/download/
下载jQuery之后，在相应的网页中通过script元素引用jQuery代码即可使用它。如清单1所示：
清单 1. 从本地站点引用jQuery
使用jQuery
我们还可以通过Google、Microsoft等公司提供的CDN服务直接获取jQuery。其方法是在需要使用jQuery的网页中直接引用CDN服务的URL。比如，使用Google的CDN的一个网页清单2所示：
清单 2. 从CDN引用jQuery
使用jQuery
src='///ajax/libs/jQuery/1.9.1/jQuery.min.js'>
Microsoft提供的CDN的URL为：
/ajax/jQuery/jQuery-1.9.1.js
Hello World：jQuery第一个实例
下面的例子中，我们使用jQuery实现在页面上显示当前时间的功能。
清单 3. Hello World
从上面例子(在线例子：/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]
