- 第2版前言
- 本书结构
- 读者对象
- 本书约定
- 读者反馈＆示例下载
- 疑难解答＆本书勘误
- 第1章 认识 jQuery
- 第2章 jQuery 选择器
- 第3章 jQuery 中的 DOM 操作
- 第4章 jQuery 中的事件和动画
- 第5章 jQuery 对表单、表格的操作及更多应用
- 第6章 jQuery 与 Ajax 的应用
- 第7章 jQuery 插件的使用和写法
- 第8章 用 jQuery 打造个性网站
- 第9章 jQuery Mobile
- 第10章 jQuery 各个版本的变化
- 第11章 jQuery 性能优化和技巧
- 附录A 关于 $(document).ready() 函数
- 附录B Firebug
- 附录C Ajax 的 XMLHttpRequest 对象的属性和方法
- 附录D jQuery $.ajax() 方法的参数详解
- 附录E jQuery 加载并解析 XML
- 附录F 插件 API
- 附录G jQuery 速查表
1.3 jQuery代码的编写
1.3.1 配置jQuery环境
1．获取jQuery最新版本
进入jQuery的官方网站http://jquery.com/。图1-8所示的右边的GRAB THE LATEST VERSION区域，下载最新的jQuery库文件。
图1-8 jQuery官方网站截图
2．jQuery库类型说明
jQuery库的类型分为两种，分别是生产版（最小化和压缩版）和开发版（未压缩版），它们的区别如表1-1所示。
表1-1 几种jQuery库类型对比
名 称 | 大 小 | 说 明 |
jquery.js（开发版） | 约229 KB | 完整无压缩版本，主要用于测试、学习和开发 |
jquery.min.js（生产版） | 约31 KB | 经过工具压缩或经过服务器开启Gzip压缩 主要应用于产品和项目 |
为统一本书的讲解，建议选择下载jQuery最新版本。
3．jQuery环境配置
jQuery不需要安装，把下载的jquery.js放到网站上的一个公共的位置，想要在某个页面上使用jQuery时，只需要在相关的HTML文档中引入该库文件的位置即可。
4．在页面中引入jQuery
本书将jquery.js放在目录scripts下，在所提供的jQuery例子中为了方便调试，引用时使用的是相对路径。在实际项目中，读者可以根据实际需要调整jQuery库的路径。
在编写的页面代码中<head>标签内引入jQuery库后，就可以使用jQuery库了，程序如下：
注意：在本书的所有章节中，如果没有特别说明，jQuery库都是默认导入的。
1.3.2 编写简单的jQuery代码
在开始编写第1个jQuery程序之前，首先应该明确一点，在jQuery库中，$就是jQuery的一个简写形式，例如$("#foo")和jQuery("#foo")是等价的，$.ajax和jQuery.ajax是等价的。如果没有特别说明，程序中的$符号都是jQuery的一个简写形式。
下面开始编写第1个jQuery程序。
运行结果如图1-9所示。
图1-9 输出Hello World!
在上面的代码中有一个陌生的代码片段，如下：
这段代码的作用类似于传统JavaScript中的window.onload方法，不过与window.onload还是有些区别。表格1-2对它们进行了简单对比。
表1-2 window.onload与$(document).ready()的对比
注意：关于$(document).ready()的详细说明可以参考附录A；关于$(document).ready()和window.onload的详细对比，可以参考第4章4.1.1小节。
1.3.3 jQuery代码风格
代码风格即程序开发人员所编写源代码的书写风格。良好代码风格的特点是使代码易读。如果能统一jQuery代码编码风格，对日后代码的维护是非常有利的。
1．链式操作风格
以一个实际项目中的代码为例，这是一个导航栏，HTML代码如下：
代码执行效果如图1-10所示。
图1-10 导航栏初始化
项目需求是做一个导航栏，单击不同的商品名称链接，显示相应的内容，同时高亮显示当前选择的商品。
选择jQuery来实现这个导航栏效果，编写的代码片段如下：
这段代码的作用是，当鼠标单击到a元素（它是class含有level1的子元素）的时候，给其添加一个名为current的class，然后将紧邻其后面的元素显示出来，同时将它的父辈的同辈元素内部的子元素<a>都去掉一个名为current的class，并且将紧邻它们后面的元素都隐藏。
单击导航栏，效果如图1-11和图1-12所示。
图1-11 效果1
图1-12 效果2
这就是jQuery强大的链式操作，一行代码就完成了导航栏的功能。
虽然jQuery做到了行为和内容的分离，但jQuery代码本身也应该拥有良好的层次结构及规范，这样才能进一步改善代码的可读性和可维护性。因此，推荐一种带有适当的格式的代码风格。上面的代码改成如下格式：
代码格式调整后，易读性好了很多。
也许读者看了上面的代码还是不明白其中的要领，这里总结3种情况。
（1）对于同一个对象不超过3个操作的，可以直接写成一行。代码如下：
（2）对于同一个对象的较多操作，建议每行写一个操作。代码如下：
（3）对于多个对象的少量操作，可以每个对象写一行，如果涉及子元素，可以考虑适当地缩进。例如上面提到的代码：
注意：程序块严格采用缩进风格书写，能保证代码清晰易读，风格一致。
2．为代码添加注释
jQuery以其强大的选择器著称，有时候很复杂的问题用一行选择器就可以轻松解决。但是使用jQuery进行代码编写时应该注意一个问题，就是必要的注释。请看下面的例子，代码如下：
这行代码即使是经验丰富的jQuery开发者也不能立刻看懂。
这行代码的作用是，在一个id为table的表格的tbody元素中，如果每行的一列中的checkbox没有被禁用，则把这一行的背景色设为红色。
jQuery的选择器很强大，能够省去使用普通的JavaScript必须编写的很多行代码。但是，在编写一个优秀的选择器的时候，千万不要忘记给这一段代码加上注释，这很重要。无论是自己日后阅读还是与他人分享、合作开发，注释都能起到良好的效果。在上段代码片段中加上注释就能提高其易读性，如下所示：
通过类似有意义的注释，能够培养良好的编码习惯和风格，提高开发效率。
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论