本节书摘来自异步社区《jQuery Cookbook中文版》一书中的第1章，第1.0节，作者:【美】jQuery社区专家组 译者：姚军 , 孙博更多章节内容可以访问云栖社区“异步社区”公众号查看。
既然你已经选择了一本有关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页面中所有的 元素，然后用jQuery方法对它们进行了一些处理（例如，hide()、text()、addClass()、show()）。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语句。
现在，以我们用于解释“寻找一些元素并对其进行某些处理”的代码为基础，如果在网页上添加几个
元素，你认为会发生什么情况呢？在下面这段更新过的代码示例中，添加了三个 元素，这样网页上一共有4个 元素： <!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方法在集合中的每个DOM元素上执行（亦称隐式迭代）。例如，.hide()方法实际上应用到集合中的每个元素。所以，如果再次查看代码，就会发现每个方法都应用到页面上的每个 元素，就像你编写了一个循环在每个DOM元素上调用各个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节顺序阅读。
相关资源：敏捷开发V1.0.pptx