本节书摘来自异步社区《jQuery Cookbook中文版》一书中的第1章,第1.0节,作者:【美】jQuery社区专家组 译者:姚军 , 孙博更多章节内容可以访问云栖社区“异步社区”公众号查看。
第1章 jQuery基础
1.0 导言
既然你已经选择了一本有关jQuery的“食谱”,本书作者基本就可以假定你对jQuery的定义和功能有了大致的认识。坦白说,“食谱”通常是为寻求加强已有知识基础的读者所编写的。因此,本书使用了问题-解决方案-讨论的编排方式,快速地介绍常见问题的解决方案。但是,如果你是一位jQuery新手,不要把本书抛诸脑后,认为第1章是老生常谈,这一章就是专为新手所写的。
如果你需要复习,或者只有很少或者完全没有jQuery的知识,第1章将帮助你学习jQuery的概要知识(其他章节假定你已经了解了这些基础知识)。现在,从实际出发,如果你对JavaScript和DOM完全没有了解,可能应该退后一步,问问自己:在对JavaScript核心语言及其与DOM之间的关系没有基本理解的情况下,学习jQuery是否可行。我的建议是在接触jQuery之前,先认真学习DOM和JavaScript的核心知识。我强烈建议将David Flanagan编著的《JavaScript: The Definitive Guide》一书作为阅读本书之前的入门读物。但是,如果你试图在学习DOM和JavaScript之前就开始jQuery的学习,也不要让我的一家之言阻挡了脚步。许多人都通过jQuery学到了这些技术的有用知识。虽然这样做不理想,但是只要我们勇敢面对,仍然可以实现学习的目的。
说了这么多,现在我们来看看jQuery的正式定义和功能的简单描述:
jQuery是一个开放源码的JavaScript程序库,简化了HTML文档(更准确地说是文档对象模型(Document Object Model,DOM))与JavaScript之间的交互。
用通俗的话说,也为了让守旧的JavaScript黑客明白,jQuery将动态HTML(DHTML)变得极其简单。具体地说,jQuery简化了HTML文档遍历和操纵、浏览器事件处理、DOM动画、Ajax交互和跨浏览器JavaScript开发。
理解了jQuery的正式含义之后,我们接下来研究选择使用jQuery的原因。
1.0.1 为什么使用jQuery
在“食谱”中谈论jQuery的优点似乎有点傻,尤其是在你已选择阅读这本“食谱”,很可能已经意识到这些优点的情况下。
所以,虽然这么做就像在唱诗班面前传道,但是我们仍然要简单地看看开发人员选择使用jQuery的原因。通过在研究“怎么做”之前先解释“为什么”,能够促进你对jQuery基础知识的掌握。
在jQuery案例的构造中,我不打算将jQuery与其竞争者作比较来提高jQuery的重要性。这是因为,我相信这方面还没有真正的直接竞争者。而且,我相信jQuery是当今唯一同时满足设计师和程序员需求的程序库。从这一方面说,jQuery是独一无二的。
市场上充斥着声名狼藉的JavaScript程序库和框架,但是我绝对相信,每个产品都有自己合适的用途和价值。进行广泛的比较很愚蠢,但是人们总是这么做,连我自己也不能免俗。所有的程序库都有价值,哪一个更胜一筹取决于谁使用它以及如何使用它,而不是它实际上能做什么。而且,根据我的观察,考虑到JavaScript开发的目标广泛,各种JavaScript程序库之间的微小差别根本不值一提。所以,我们不再进一步进行哲学方面的探讨了,而是列出能够支持选择jQuery的一组特性:
- jQuery是开放源码的程序库,该项目在MIT和GNU通用公共授权(General Public License,GPL)下授权使用。在很多方面,它都是免费的!
jQuery很小(精简后只有18KB),用GZIP压缩(解压后为114KB)。
jQuery的流行程度令人难以置信,也就是说,有着大规模的用户社区,许多贡献者以开发者和传道者的身份参与该项目。
jQuery规范了Web浏览器之间的差异,这样你就不需要为此费心。
jQuery有意地设计为轻量级的程序库,具有简单而又智能的插件架构。
jQuery的插件库规模很大,而且从jQuery发布之后就稳步增长。
jQuery的API有完整的文档,包括内联的代码示例,这在JavaScript程序库中可以称得上豪华了。多年以来,任何的文档都是奢侈品。
jQuery很友好,提供了一些方法帮助用户避免与其他JavaScript程序库的冲突。
jQuery的社区支持相当实用,包括了多个邮件列表、IRC频道和来自jQuery社区的大量教程、文章、博客文章。
jQuery的开发是开放式的,任何人都可以提交缺陷修复、改进和开发帮助。
jQuery的开发是稳定一致的,也就是说,开发团队并不担忧更新的发布。
大型机构(如Microsoft、Dell、Bank of America、Digg、CBS、Netflix)的采用已经并将持续地提高jQuery的生命力和稳定性。
jQuery先于浏览器吸收了来自W3C的规范。例如,jQuery支持大部分CSS3选择器。
jQuery目前已经为流行浏览器(Chrome 1、Chrome Nightly、IE 6、IE 7、IE 8、Opera 9.6、Safari 3.2、WebKit Nightly、Firefox 2、Firefox 3、Firefox Nightly)上的开发进行了测试和优化。
jQuery在设计师的手里和程序员手里一样强大,对两类用户一视同仁。
jQuery优雅、讲求方法以及改变JavaScript书写方式的观念正在成为标准。只要想想有多少其他解决方案借用了选择器和链接(chainning)模式就能明白这一点。
jQuery无法解释的副作用——良好的编程感觉具有感染力,令人无法抗拒;甚至连批评家都深深地为jQuery的特性所着迷。
jQuery的文档有许多使用路径(例如,API浏览器、仪表板应用、“小抄”),包括一个离线API浏览器(AIR应用程序)。
jQuery旨在倾向于简化无干扰JavaScript方法。
jQuery的核心仍然是一个JavaScript程序库(与框架相反),同时又提供用于用户界面部件和应用程序开发的姐妹项目(jQuery UI)。
由于jQuery建立在大部分开发人员和设计师已经理解的概念(例如,CSS和HTML)之上,因此它的学习曲线很平滑。
我认为,使jQuery不同于其他解决方案的是上述特性的结合,而不是单一特性。作为JavaScript工具,整个jQuery程序包是无以匹敌的。
1.0.2 jQuery原则
jQuery的原则是“用更少的代码做更多的事”。这一原则可以进一步分为三个概念:
(通过CSS选择器)寻找一些元素,(通过jQuery方法)对其进行某些处理。
链接一组元素上的多个jQuery方法。
使用jQuery包装器和隐式迭代。
详细了解这三个概念是编写你自己的jQuery代码和扩展本书中学到的秘诀的基础。下面详细地解释这些概念。
1.寻找一些元素并对其进行某些处理
更具体地讲,这条原则是指在DOM中找到一组元素,然后对这组元素进行某种处理。例如,研究一下这样的场景:你想要对用户隐藏一个
上面的最后一句话转换成的jQuery代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/JavaScript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
<div>old content</div>
<script>
//隐藏页面上的所有div
jQuery('div').hide();
//更新所有div中包含的文本
jQuery('div').text('new content');
//为所有div添加值为updatedContent的class属性
jQuery('div').addClass("updatedContent");
//显示页面上的所有div
jQuery('div').show();
</script>
</body>
</html>
我们逐条查看这4条jQuery语句:
隐藏页面上的
用新的文本(new content)替换隐藏
用新的属性(class)和值(updatedContent)更新
在页面上显示
如果现在这些jQuery代码还让你觉得深奥,也没有关系。我们将在本章的第一个秘诀中介绍这些基础知识。另外,从这个代码示例中,你需要了解的是jQuery“找到一些元素并对其进行某些处理”的概念。在读例子中,用jQuery函数(jQuery())找出HTML页面中所有的
2.链
jQuery的构造方式允许jQuery方法链。例如,为什么不在找到元素之后,将该元素上的操作链接起来呢?上一个代码示例阐述了“找到一些元素并对其进行某些处理”的概念,它可以用链改写为一条JavaScript命令。
利用链,下面的代码原来如下:
//隐藏页面上的所有div
jQuery('div').hide();
//更新所有div中包含的文本
jQuery('div').text('new content');
//为所有div添加值为updatedContent的class属性
jQuery('div').addClass("updatedContent");
//显示页面上的所有div
jQuery('div').show();
更改后的代码如下:
jQuery('div').hide().text('new content').addClass("updatedContent").show();
或者加上缩进和换行,如下所示:
jQuery('div')
.hide()
.text('new content')
.addClass("updatedContent")
.show();
简而言之,链允许你在目前用jQuery函数选择(当前用jQuery功能包装起来)的元素上应用无限的jQuery方法链。在后台,每当应用jQuery方法之前,总是返回以前选择的元素,使链能够继续下去。在未来的秘诀中你将会看到,因为插件也以这种方式构造(返回包装的元素),所以使用插件也不会破坏这一链条。
虽然并非显而易见,但是根据对代码的研究,通过一次性选择一组DOM元素,由jQuery方法以链的方式进行多次操作,能够减少处理开销。避免不必要的DOM遍历是网页性能改进的关键部分,一定要尽可能重用或者缓存选中的DOM元素集。
3.jQuery包装器集
大部分时候,如果jQuery很复杂,你会使用所谓的“包装器”。换句话说,你会从一个HTML页面上选择一组用jQuery功能包装的DOM元素。我个人常常将其称为“包装器集”或者“包装集”,因为它是一组由jQuery功能包装的元素。有时候这种包装器集包含单个DOM元素,其他时候则包含多个元素,甚至还有包装器集没有包含任何元素的情况。在这种情况下,jQuery提供的方法/属性在空包装器集中将会“无提示”地失败,这就可以避免不必要的if语句。
现在,以我们用于解释“寻找一些元素并对其进行某些处理”的代码为基础,如果在网页上添加几个
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html>
<head>
<script type="text/JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script> </head>
<body>
<div>old content</div>
<div>old content</div>
<div>old content</div>
<div>old content</div>
<script>
//隐藏页面上的所有div
jQuery('div').hide().text('new content').addClass("updatedContent").show();
</script>
</body>
</html>
你在这里没有显式编写任何循环代码,但是猜猜看会怎么样?jQuery扫描网页,将所有
对包装器集和默认的循环系统(隐式迭代)的理解对于围绕循环的高级概念是至关重要的。你只要记住,在真正进行更多的循环(例如,jQuery('div').each(function(){})之前,已经发生了简单的循环。你也可以这样看:包装器中的每个元素一般都会被所调用的jQuery方法所改变。
还要记住一点,在以后的章节中你将会学习到,某些情况下只有第一个元素(而不是包装器集中的所有元素)受到jQuery方法(例如,attr())的影响。
1.0.3 jQuery API的组织方式
毫无疑问,在我开始接触jQuery时,选择它作为我的JavaSript程序库的主要原因只是因为它的文档很好(以及大量的插件)。后来,我意识到自己爱上jQuery的另一个原因是:它的API按照合乎逻辑的分类进行组织。只要查看API的组织方式,我就能缩小所需功能的范围。
在你真正开始使用jQuery之前,我建议你访问在线文档,简单地了解一下API的组织方式。理解了API的组织方式,你就能更快地在文档中找到你所需要的信息,考虑到编写一个jQuery解决方案有许多不同的方法,这实在是一个巨大的优势。由于一个问题有许多解决方案,因此健全的API组织方式能帮助你更全心全意地投入实现之中。这里将重申API的组织方式,建议你记住API的大纲,至少记住第一级分类。
. jQuery核心
- jQuery函数
jQuery对象访问器
数据
插件
互操作性
. 选择器
- 基础
层次结构
基本过滤器
内容过滤器
可见性过滤器
属性过滤器
子元素过滤器
表单
表单过滤器
. 属性
- 属性
类
HTML
文本
值
. 遍历
- 过滤
查找
链
. 操纵
- 修改内容
内部插入
外部插入
周围插入
替换
删除
复制
. CSS
- CSS
定位
高度和宽度
. 事件
- 页面加载
事件处理
Live事件
交互助手
事件助手
. 特效
- 基础
滑行
淡入/淡出
自定义
设置
. Ajax
- Ajax请求
Ajax事件
杂项
. 工具
- 浏览器和特性检测
数组和对象操作
测试操作
字符串操作
URL
在我们开始学习一系列基本的jQuery秘诀之前,我想提醒一下:本章介绍的秘诀是相互依赖的。也就是说,从第一个秘诀到最后一个的顺序遵循合乎逻辑的知识结构,对于首次接触这些秘诀的读者,我建议从1.1节到1.17节顺序阅读。