jQuery实验教程.docVIP

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 script src ../js/lib/jQuery/1.9.1/jQuery.js 我们还可以通过Google、Microsoft等公司提供的CDN服务直接获取jQuery。其方法是在需要使用jQuery的网页中直接引用CDN服务的URL。比如，使用Google的CDN的一个网页清单2所示： 清单 2. 从CDN引用jQuery 使用jQuery script 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 meta http-equiv content-type content text/html;charset utf-8 script src ../js/lib/jQuery/1.9.1/jQuery.js function initPage //jQuery代码：调用jQuery的核心函数－－－$函数 $ #message .html Hello World, it is now:+new Date .toLocaleString ; body onload initPage span id message 从上面例子 在线例子：/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所示： 图