《jQuery实验教程》由会员分享，可在线阅读，更多相关《jQuery实验教程（23页珍藏版）》请在金锄头文库上搜索。
1、jQuery实验教程第1章jQuery简介、语法及事件处理Date: May 16, 2013Type of Submission: Title: jQuery实验教程Subtitle: 第1章jQuery简介、语法及事件处理Keywords: jQuery教程,jQuery实例,Javascript编程Prefix: 无需填写Given: 黄文海Middle: 无需填写Family: 无需填写Suffix: 无需填写Job Title: 您的职务Email: (可以公开)Bio: 您的个人简介。请用 100 字以内描述。Company: 您所在的公司Photo filename: 照片文件名
2、Abstract: jQuery以其特有的简练的代码风格，极大得改变了Javascript代码编写的方式。本教程以实例代码为基础，讲解jQuery的使用方法，并适度剖析jQuery的实现原理。并且，本教程提供在线代码编辑器，使读者可以在线练习jQuery代码的编写。jQuery简介、语法及事件处理使用jQuery进行DOM、CSS操作使用jQuery进行AJAX开发使用jQuery进行异步编程使用jQuery实现动画效果开发jQuery插件jQuery简介：为什么使用jQuery用 jQuery是一个跨浏览器的免费开源Javascript库。其核心设计思想是“写更少的代码，做更多的事情”(Wr
3、ite Less Do More)。jQuery提供了一套易于使用的API。这些API极大地简化了客户端(浏览器)编程过程中的许多方面，包括： HTML DOM的遍历与操作 浏览器事件处理 AJAX（Asynchronous Javascript And XML）编程 特效（如动画效果）在直接使用Javascipt+DHTML的传统客户端编程方式下，开发人员不得不编写冗长的代码。并且，为了使这些代码能够兼容不同的浏览器，我们还得编写额外的代码来处理这些跨浏览器问题。jQuery的设计目标正是在于简化客户端编程。让我们能够编写简练的代码，节约开发时间，而这些代码却一样可以功能强大，并且兼容多种浏
4、览器。获取jQuery：开始使用jQueryjQuery网站上提供了两种方式的发布文件。一种是内容经过压缩的文件；另一种是原始文件。前者文件中不包含代码注释以及代码运行过程中不需要的空白字符，它适合于生产环境(正式使用的环境)中使用，可以减少文件加载所需时间。后者文件中包含详细的代码注释，适合于开发和测试环境中使用。jQuery的下载地址：http:/ 1. 从本地站点引用jQuery使用jQuery我们还可以通过Google、Microsoft等公司提供的CDN服务直接获取jQuery。其方法是在需要使用jQuery的网页中直接引用CDN服务的URL。比如，使用Google的CDN的一个网页
5、清单2所示：清单 2. 从CDN引用jQuery使用jQuery Microsoft提供的CDN的URL为： http:/ World：jQuery第一个实例下面的例子中，我们使用jQuery实现在页面上显示当前时间的功能。清单 3. Hello Worldfunction initPage()/jQuery代码：调用jQuery的核心函数$函数$(#message).html(Hello World, it is now:+new Date().toLocaleString();从上面例子(在线例子：http:/blog.viscenthuang.info/jQuery/page/CodeD
6、emo.htm?code=HelloWorld.htm）的代码中我们可以看到，initPage这个函数会在页面加载完毕后被调用。而该函数在执行后会在ID为message的HTML结点内添加表示客户端当前时间的字符串。读者可以不必急着去理解上面代码的具体意思。下一节将介绍jQuery的语法。另外，这个例子中我们使用body元素的onload属性来绑定事件处理器（initPage）只是为了方便讨论。在本章的后面内容中会介绍jQuery中用于处理页面load事件绑定的简便API。jQuery语法:温故而知新虽然jQuery本身并非一门新的语言。但是，学习其语法有助于我们熟练、灵活地使用它。回顾下我们
7、熟悉的CSS语法，不难发现jQuery的语法与CSS有相似之处。jQuery语法的设计思想是选择元素，对其操作。这和CSS规则的语法非常类似。比如，要将页面中一个ID为message的元素的字体颜色设置为蓝色、字体大小设置为17px，则可以定义如清单4所示CSS规则：清单 4. CSS规则例子#messagecolor:blue;font-size:17px;从上述CSS规则中可见，我们期望的对元素外观的操作（字体颜色设置为蓝色、字体大小设置为17px）是通过” color:blue”和”font-size:17px”这2个属性声明指定的。而这些操作要作用于哪些元素，则是通过CSS的选择器”#
8、message”指定为ID等于“message”的元素。总结来说，CSS规则中属性声明描述了外观属性操作，而选择器则指定了将相应的属性操作应用于哪些元素。如图1所示：图 1. CSS规则示意图jQuery的语法其实正是模仿了CSS规则的语法。其语法如下：$(selector).action(actionParameter);这是个链式语法。因此，上述的语法等效于：var objTargetElements;/要施加操作的目标元素objTargetElements=$(selector);/指定目标元素/调用objTargetElements的相关方法，对目标元素进行操作objTargetEle
9、ments.action(actionParameter);上述语法中，$：美元符是jQuery核心函数jQuery的一个别名。当然，在Javascript中“$”是一个合法的函数名。Selector参数指定了一个jQuery选择器。jQuery选择器类似于CSS中的选择器，它告诉jQuery我们准备对哪些元素进行操作(action)。并且，CSS中的各种选择器jQuery中都有等同的选择器。action：该方法指定了要对selector所指定的元素进行什么具体操作。actionParameter参数是个可选参数，是根据具体所指定的方法来定的，它会随具体方法的变化而变化。因此，清单3中的jQu
10、ery语句相当于：清单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().toL
11、ocaleString();$函数的返回值是一个jQuery自定义的类似数组的对象。该对象的各个数字下标表示的属性对应的值为选择器所匹配的各个元素。比如，清单3中的$函数调用，它为$函数指定了一个基于元素ID的选择器表达式：$(#message)其返回值将满足下列条件表达式。因为选择器表达式”#message”匹配了唯一一个ID为message的元素：document.getElementById(message)=$(#message)0$函数返回的对象还提供了一些方法，通过调用该对象的相关方法可以对选择器所匹配的元素进行相应的操作。比如，清单3所示代码中，我们通过调用$函数返回对象的htm
12、l方法设置选择器表达式”#message”所匹配的元素的HTML内容。为了更加直观得了解$函数的返回值，建议读者通过Chrome浏览器中的开发者工具的表达式监视功能（ Watch Expressions），观察一个具体的$函数调用的返回值。如图2所示：图 2. $函数返回值示意图jQuery的语法和清单3中的jQuery语句的对应关系如图3所示:图 3. jQuery语法实例$函数返回的对象提供了一个名为each的常用方法。each方法接受一个参数，该参数是一个回调函数。each方法会针对选择器表达式所匹配的元素中的每个元素逐次调用这个回调函数，并将单个元素及其对应的索引号作为参数传入该函数。下面看一个实例。假设在页面中有多个链接，现在要将这个页面中所有链接的URL显示在浏览器的控制台中。页面代码如下所示：清单6.$函数返回值实例IBM developerWorks中文站IBM developerWorks首页(在线例子：http:/blog.v
