英语原文共 15 页，剩余内容已隐藏，支付完成后下载完整资料
第一章 引荐jQuery
本章内容：
为什么应当使用jQuery
不唐突的JavaScript意味着什么
jQuery的基本原理和概念
结合其他JavaScript库使用jQuery
JavaScript曾经长期被严谨的Web开发者当作“玩具”语言，然而在过去数年间，随着人们对因特网应用和Ajax技术重新燃起兴趣，JavaScript重获威望。这门语言不得不快速成长，囚为客户端开发者已经抛弃剪切和粘贴JavaScript的方式，转而采用方便快捷、功能完备的JavaScript库。这些库一次性地彻底解决了跨浏览器的难题，并提供新颖的、改进了的Web开发方式。
作为JavaScript库世界的后来者，jQuery如暴风雪般扫过Web开发社区，很快赢得MSNBC等大网站，以及颇受关注的开源项目SourceForge、Trac和Drupal的支持。
和其他着重关注JavaScript灵活技巧的工具包相比，jquery力求改变Web开发者在创建页面的功能时的思维方式。与其他花时间杂耍JavaScript高级复杂的技巧，设计者不如充分利用自己的CSS（Cascading Style Sheet，层叠样式表）、XHTML（Extensible Hypertext Markup Language，可拓展超文本标记语言）及普通JavaScript的只是，去操作页面元素，实现更快的开发。
在本书中，我们将要深入考察jQuery。我们首先来看看jQuery究竟给页面开发的盛宴带来了什么吧。
-
- 为什么是jQuery
如果你曾将花过时间试着给页面增加动功能，就会发现经常要遵循这样一种模式：选择一个元素或一组元素，然后以某种方式对其进行操作，你可以隐藏或显示元素，给元素增加CSS类，是元素活动起来，或者修改元素的特性。
利用这些原始的JavaScript完成这些任务中的任何一个，都会需要数十行的代码。jQuery的创造者为了使这些常用任务变得简单而特意创造了该库。例如，设计者利用JavaScript给表格中添加“斑马条纹”（利用形成对比的两种颜色使表格隔行突出显示）需要十多行代码，下面请看如何利用jQuery来实现同样的功能：
如果现在对你来说，这些代码看起来有点神秘，也不用太担心。稍后你就会明白他的工作原理，并且简洁扼要却威力强大的jQuery语句会脱口而出，页面注入活力。下面简要探讨一下这个片段怎样工作。
我们标识页面中所有表格的偶数行（lt;trgt;元素），并且将CSS类striped添加到每一个偶数行。借助于CSS规则中的类striped，把选定的背景色应用到偶数行，仅仅一行JavaScript就增减了整个页面的美感。
将其应用于实例表格，效果如图1-1所示。
图1-1 给表格添加“斑马条纹”，用jQuery只需一个简单的语句就能实现
这条jQuery语句的真正威力来自选择器，也就是用于表示页面里的目标元素的表达式，我们可以借此轻而易举的表示和获取所需元素。本实例中，目标元素就是所有表格中的偶数lt;trgt;元素。在本书的可下载文件中，可以找到本页面的完整代码。
我们下面将要学习如何轻松地创建选择器。不过首先，让我们了解jQuery的发明者在对于页面中最有效的利用JavaScript，持有怎样的想法。
-
- 不唐突的JavaScript
记得在CSS出现之前糟糕的往日吗？那时候我们不得不在HTML页面中，把样式标记与文档结构标记混在一起使用。
从事页面设计的任何人，不管时间是长还是短，肯定都会记得，很可能还有些后怕。现在把CSS添加到Web开发工具包，就可以把样式信息从文档结构中分离，并且摒弃了lt;fontgt;标签之类的滑稽模仿。把样式从结构分离出来，不仅文档易于处理，并且我们拥有了切换整个页面样式的灵活性，仅仅是该换一下样式表就行。
几乎没有人愿意回到把样式混入HTML元素的日子，然而下面这种写法还是太普通：
不难看出，按钮元素的样式，包括标题的字体，并没有使用lt;fontgt;标签和其他被否定的面向样式的标记，而是通过CSS规则在页面表现出来。虽然声明并有把样式表标记混入结构里，但却把行为混入了结构里——作为按钮元素标记的一部分而嵌入JavaScript，当按钮被点击时将被执行。
就像在HTML文档中应该把样式从结构中分离出来一样，处于完全相同的理由，把行为从结构中分离出来，会带来同样甚至更多的好处。
行为与结构相分离被称为“不唐突的JavaScript”（Unobtrusive JavaScript），而jQuery的发明者努力让该库能够帮助页面作者易于在页面中实现这种分离。不唐突的JavaScript，联通大量的jQuery实践经验一起，认为任何嵌入在HTML页面lt;bodygt;里的JavaScript表达式或语句，不管是作为HTML元素的特性（比如onclick），还是嵌入在页面lt;bodygt;的脚本块里，那都是不正确的。
你也许会问：但是要是没有onclick特性的话，该如何设置按钮的行为呢？考虑下面按钮元素的变化：
简单多了。但是现在你却发现，按牛逼什么也干不了。
不是简单地把按钮行为嵌入到按钮的标记里，而是将它转移到页面lt;headgt;节的脚本块里，从而处于页面lt;bodygt;节的范围之外，如下图所示：
我们把脚本放在页面的onload处理程序中，给按钮元素的onclick特性指派makeItRed（）函数。之所以将此脚本添加到onload处理程序中（而不是内敛在结构标记中），是因为在试图操作按钮元素之前，必须先确认按钮元素的存在。
如果你觉得本题实例的代码很怪异，别担心！附录A提供了一些JavaScript概念，为了有效的利用jQuery，你必须理解这些概念。在本章的剩余部分里，将会探讨jQuery如何使我们能以更加轻松简短和通用的方式来编写前面的代码。
不唐突的JavaScript虽然促进Web应用里明确分工的强大技巧，但运用起来却不无代价。也许你已经注意到，比起将行为放入按钮的标记来，不唐突的JavaScript需要多出好几个行脚本去达到同样的木目的。不唐突的JavaScript不仅可能增加需要编写的脚本量，还要求客户端脚本遵守某些规则，并且运用好的编码模式。
这些并不坏，说服我们想对待服务端代码那样小心谨慎的去写客户端代码是件好事。但那要做很多额外的工作——如果没有jQuery的话。
如同前面提到的那样，jQurey团队特意使用jQuery关注以下任务：使得在页面编 程中使用不唐突的JavaScript技巧成为简单快乐的事，而无耗费大量的精力写大块的代码。我们将发现有效的使用jQuery，可以编写更少的代码在页面上实现更多的功能。
下面探讨jQuery怎么样使得页面增添功能如此容易，没有预想中的痛苦。
-
- jQuery基本原理
在其核心，jQuery重点放在HTML页面里获取元素并对其进行操作。如果你熟悉CSS，就会很清楚选择器的威力，通过元素的特性或元素在文档中的位置去描述元素组。有了jQuery，你就能够利用现有的只是去发挥选择器的威力，很大程度上简化JavaScript代码。
jQuery把确保代码能跨越所有主要浏览器以一致的方式工作，摆在了高优先级的位置。许多更为困难的JavaScript问题，比如在执行页面操作之前必须等待页面加载完毕之类的问题，已经被悄悄的解决了。
我们一旦发现该库需要添加什么东西，就有jQuery开发者已经内建了简单而有力的、用于拓展功能的方法。许多jQuery编程新手发现阀门第一天就通过扩展jQuery而将多功能性付诸实践。
不过首先，让我们来看看如何借用CSS只是去生成强大而又简洁的代码。
-
-
- jQuery包装器
-
为了实用设计和内容分离而把CSS引入Web技术的时候，需要以某种方式从外部样式表中引用页面元素组。开发出来的方法就是通过使用选择器——基于元素的特性或元素在HTML文档中的位置，简单的表现元素。
例如，选择器
引用所有嵌套于lt;pgt;元素之内的链接(lt;agt;元素)组。jQuery利用同样的选择器，不仅支持目前CSS中使用的常见选择器，还支持尚未被大多数浏览器完全实现的更强大的选择器。前面探讨的“斑马条纹”代码中的nth-child选择器，实在CSS3中定义的、更强大的选择器的例子。
收集一族元素，可以使用如下简单的语法：
或者
也许刚开始你会觉得$()符号有点奇怪，但是大部分jQuery用户很快就喜欢上它的简洁。
例如，为了获取嵌套在lt;pgt;元素内的一组链接，我们使用如下语句：
$()函数（jQuery（）函数的别名）返回特别的JavaScript对象，它包含着与选择器相匹配的DOM元素的数组。该对象拥有大量预定义的有用方法，能够作用于该族元素。
用编程语言来说，这种结构称为包装器（wrapper），因为它用拓展功能来对匹配元素进行包装。我们使用属于jQuery包装器或者包装机（wrapper set），来指能够在其上用jQuery定义的方法去操作的、匹配元素的集合。
假定我们想让带有CSS类notLongForWorld的所有lt;divgt;元素呈现淡出效果。jQuery语句如下所示：
经常作为jQuery命令引用的许多这类方法的显著特征是，当完成了一个操作（比如淡出操作）时，他们返回相同的一组元素，提供给下一个操作。例如，假定除了让元素呈现淡出效果之外，还想添加新的CSS类remove到每个元素。编写如下代码：
这些jQuery链可以无限延续。任由jQuery链无限延续的话，你发现包含长达几十个命令的例子并不罕见。因为每个函数都作用在与最初的选择器相匹配的全部元素上，所以没有必要循环便利元素数组。所有的这一切，jQuery已经在后台为我们完成。
技术选中的对象组被表现为非常复杂的JavaScript对象，如果有必要额可以假定它是典型的元素数组。因此一下两个语句产生相同的结果：
或者
因为使用了ID选择器，所以只有一个元素与选择器相匹配。第一个实例使用jQuery的html()方法，将DOM元素的内容用某些HTML标记去替换，第二个实例使用jQuery获取元素数组，用数组下表0去选择第一个元素，然后使用通常的JavaScript凡是来替换该元素的内容。
如果想用能匹配多个元素的选择器来获取同样的结果，那么以下两个片段产生一致的结果：
或者
随着事情变得瑜伽负责，利用jQuery的可链接性，可以持续减少为获得你所求结果的必须代码的行数。除此之外，jQuery不仅支持你所认识和喜爱的选择器，还支持更高级的选择区——作为CSS规范的一部分而定义——甚至支持某些自定义选择器。
一下是几个实例：
该选择器选择所有偶数的lt;pgt;元素
该选择器选择每个表格的第一行
该选择器选择作为lt;bodygt;直接子节点的lt;divgt;
该选择器选择只想PDF文件的链接
该选择器选择作为lt;bodygt;直接子节点的包含链接（lt;agt;）的lt;divgt;
你可以有利用CSS的现有知识起步和快跑，然后学习jQuery支持的更高级的选择区。2.1节将详述jQuery选择器，并且在可以查找选择器的完整列表。
选择DOM元素进行操作是页面中最常见的需求，但是还有些必须做的是并不涉及DOM元素，下面概览一下除了元素操作之外jQuery提供的更多功能。
-
-
- 实用工具函数
-
包装元素以便于操作是jQuery的$()函数最常见的用途之一，但那并不是分派给他的唯一职责。它的另外一个职责是作为几个通用的实用工具函数的命名空间前缀。因为以选择器作为参数去调用$()而创建的jQuery包装器，已经赋予了页面作者如此强大的威力，所以 对于大多数页面作者来说，很少需要实用工具函数提供的服务。为编写jQuery插件而做准备的第六章内容，将会仔细探讨大多数实用工具函数。因为在接下来的几节里，将会看到几个用到的实用工具函数，所以现在这介绍其概念。
实用工具函数的表示法乍看也许有些怪异。例如，删除字符串前后空格分实用工具名称，其调用方法如下所示：
如果你觉得前缀$.怪异，就记住$是JavaScript里的标识符，与其他标识符没有什么两样。利用表舒服jQuery（而不是别名$）去调用同样的函数，看起来会熟悉一些：
看到这里就变得清楚了，函数trim（）不过是存在于别名为$的命名空间jQuery里罢了。
1.3.5节会探讨帮助扩展jQuery的一个实用工具函数，而1.3.6节将会探讨协助jQuery与其他客户端库和平共处的另一个实用工具函数。不过首先看jQuery的$函数旅行另外一个重要职责。
剩余内容已隐藏，支付完成后下载完整资料
资料编号：[146369]，资料为PDF文档或Word文档，PDF文档可免费转换为Word
-
-
- 创建DOM元素
lt;
-
以上是毕业论文外文翻译，课题毕业论文、任务书、文献综述、开题报告、程序设计、图纸设计等资料可联系客服协助查找。
