下面让我们开始 jQuery 之旅. 三.什么是 jQuery jQuery 是一套 Javascript 脚本库. 在我的博客中可以找到"Javascript 轻量级脚本库"系 列文章. Javascript 脚本库类似于.NET 的类库, 我们将一些工具方法或对象方法封装在类 库中, 方便用户使用. 注意 jQuery 是脚本库, 而不是脚本框架. "库"不等于"框架", 比如"System 程序集"是类 库,而"ASP.NET MVC"是框架. jQuery 并不能帮助我们解决脚本的引用管理和功能管理, 这些都是脚本框架要做的事. 脚本库能够帮助我们完成编码逻辑,实现业务功能. 使用 jQuery 将极大的提高编写 javascript 代码的效率, 让写出来的代码更加优雅, 更加健壮. 同时网络上丰富的 jQuery 插件也让我们的工作变成了"有了 jQuery,天天喝茶水"--因为我们已经站在巨人的肩膀上 了. 创建一个 ASP.NET MVC 项目时, 会发现已经自动引入了 jQuery 类库. jQuery 几乎是微 软的御用脚本库了!完美的集成度和智能感知的支持,让.NET 和 jQuery 天衣无缝结合在一 起!所以用.NET 就要选用 jQuery 而非 Dojo,ExtJS 等. jQuery 有如下特点: 1.提供了强大的功能函数 使用这些功能函数, 能够帮助我们快速完成各种功能, 而且会让我们的代码异常简洁. 2.解决浏览器兼容性问题 javascript 脚本在不同浏览器的兼容性一直是 Web 开发人员的噩梦, 常常一个页面在 IE7,Firefox 下运行正常, 在 IE6下就出现莫名其妙的问题. 针对不同的浏览器编写不同的 脚本是一件痛苦的事情. 有了 jQuery 我们将从这个噩梦中醒来, 比如在 jQuery 中的 Event 事件对象已经被格式化成所有浏览器通用的, 从前要根据 event 获取事件触发者, 在 ie 下是 event.srcElements 而 ff 等标准浏览器下下是 event.target. jQuery 则通过 统一 event 对象,让我们可以在所有浏览器中使用 event.target 获取事件对象. 3.实现丰富的 UI jQuery 可以实现比如渐变弹出, 图层移动等动画效果, 让我们获得更好的用户体验. 单以 渐变效果为例, 从前我自己写了一个可以兼容 ie 和 ff 的渐变动画, 使用大量 javascript 代 码实现, 费心费力不说, 写完后没有太多帮助过一段时间就忘记了. 再开发类似的功能还 要再次费心费力. 如今使用 jQuery 就可以帮助我们快速完成此类应用. 4.纠正错误的脚本知识 这一条是我提出的, 原因就是大部分开发人员对于 javascript 存在错误的认识. 比如在页 面中编写加载时即执行的操作 DOM 的语句, 在 HTML 元素或者 document 对象上直接添 加"onclick"属性, 不知道 onclick 其实是一个匿名函数等等. 拥有这些错误脚本知识的 技术人员也能完成所有的开发工作, 但是这样的程序是不健壮的. 比如"在页面中编写加载 时即执行的操作 DOM 的语句", 当页面代码很小用户加载很快时没有问题, 当页面加载稍 慢时就会出现浏览器"终止操作"的错误.jQuery 提供了很多简便的方法帮助我们解决这些 问题, 一旦使用 jQuery 你就将纠正这些错误的知识--因为我们都是用标准的正确的 jQuery 脚本编写方法! 5.太多了! 等待我们一一去发现. 四.Hello World jQuery 按照惯例, 我们来编写 jQuery 的 Hello World 程序, 来迈出使用 jQuery 的第一步. 在本文最后可以下本章的完整源代码. 1.下载 jQuery 类库 jQuery 的项目下载放在了 Google Code 上, 下载地址: http://code.google.com/p/jqueryjs/downloads/list 上面的地址是总下载列表, 里面有很多版本和类型的 jQuery 库, 主要分为如下几类: min: 压缩后的 jQuery 类库, 在正式环境上使用.如:jquery-1.3.2.min.js vsdoc: 在 Visual Studio 中需要引入此版本的 jquery 类库才能启用智能感知.如: jquery-1.3.2-vsdoc2.js release 包: 里面有没有压缩的 jquery 代码, 以及文档和示例程序. 如:jquery-1.3.2-release.zip 2.编写程序 创建一个 HTML 页面, 引入 jQuery 类库并且编写如下代码: Hello World jQuery! Hello World! $("#btnShow").bind("click",function(event) { $("#divMsg").show(); }); $("#btnHide").bind("click",function(event) { $("#divMsg").hide(); }); $("#btnChange").bind("click",function(event) { $("#divMsg").html("Hello World, too!"); });