|
Writing the jQuery Code 书写jQuery代码 我们自己的代码将会是在第二步，通常是空的 JavaScript 代码，我们从 HTML 用<script src="alice.js" type="text/javascript"></script>来包含它。这个实例中，我们只需要三行代码： $(document).ready(function() { $('.poem-stanza').addClass('emphasized'); }); 查找Poem文本 jQuery 基本的操作是选择文档的一部分，这个工作使用 $() 结构来完成。通常，它把一个可包含任何 CSS 选择器表达式的字符串作为参数。既然这样，我们希望查找包含 poem-stanza 类的文档的所有部分，所以这个选择器是很简单的，但通过本书的课程我们会涵盖更为顶尖的选择。在第2章我们会透过定位一个文档的部分的不同方法来继续学习。 $() 函数其实是一个 jQuery 的一个工厂，它是一个基本的创建块，从现在开始我们会使用它来工作。jQuery 对象封装了0个以上的 DOM 元素，并允许我们用很多不用的方法来与它们交互。既然这样，我们希望修改页面的这些部分的外观，并且我们通过应用到 poem 文本的类来完成。 .addClass() 方法是不说自明的，它应用一个 CSS 类到我们选择的页面部分。它唯一的参数是加入的类的名称。这个方法和它类似的方法，.removeClass()，当我们研究不同而有用的选择器表达式时允许我们在运行中观察 jQuery。现在我们的实例简单地加入定义了斜体和边框样式的 emphasized 类。 注意，不必循环给所有的 poem 类加上这个类，我们讨论过，jQuery 在如 .addClass()这样的方法里使用隐含循环，所以调用单独的函数是修改了文档所有选择的部分。 $() 和 .addClass() 一起使用足够完成改变 poem 文本外观的目的。然而，如果这行代码被单独地插入到文档的头部，将会看不到任何效果。一般地，只要在浏览器中遇到 JavaScript，那么 JavaScript 代码就会运行，同时头部信息（header）被处理，（no变成相反了，这里根据我们的理解翻译）HTML 被样式后显示。我们要延迟代码的执行直到 DOM 有效后。 JavaScript 代码运行的传统控制机制是在事件句柄里调用代码。对用户驱动的事件许多句柄都是有效的，例如鼠标单击和按下键盘。如果没有 jQuery 可以使用，我们就需要依赖 onLoad 句柄，页面（与它里面的所有图像）被渲染后激发。为了从 onload 触发我们的代码，我们把代码放进一个函数里面： function emphasizePoemStanzas() { $('.poem-stanza').addClass('emphasized'); } 然而，我们修改 HTML <body> 标签，附加一个函数给这个事件来参考它。 <body onload="emphasizePoemStanzas();"> 这个页面完全被加载后才我们的代码才会被执行。 可是这个方法有一些缺点，我们修改 HTML 本身来改变这个行为。这个紧密的结构和函数混乱了代码，可以在许多不同的页面重复调用这个相同的函数，或者在其它事件如在页面上每个元素的实例进行鼠标单击。在两个不同的地方加入一个新的行为会需要进行循环，增加了产生错误的机会，并且使得设计师和程序员并行工作复杂化了。 为了避免这个缺陷，jQuery 允许我们确定函数调用的时间，DOM 被加载后才调用。使用$(document).ready() 结构，不需要等图像加载。用我们上面定义的函数，我们可以这样写： $(document).ready(emphasizePoemStanzas); 这个技术并没有要求任何的 HTML 修改。反而，这个行为从 JavaScript 文件里完全地附加。在第3章，我们会学习如何响应其它类型的用户动作，从 HTML 结构中脱离他们的效果。 可是这个化身仍然有点浪费，因为这个被定义的函数 emphasizePoemStanzas() 被马上使用并只用一次。这意味着我们在这个全局的函数命名空间中使用过一个标识了，我们不得不记住不要再次使用它。JavaScript 像其它的编程语言一样，有一个围绕无效的方法称为匿名函数（有时也被称为 lambda 函数）。我们回到最初展现的代码： $(document).ready(function() { $('.poem-stanza').addClass('emphasized'); }); 用 function 这个关键词而不是用一个函数名，我们详细地定义了一个我们需要的函数，不是像之前那样。这就去除了混乱并带回来三行 JavaScript 代码。这个用法在 jQuery 代码中是非常方便的，因此很多方法把一个函数作为参数用并且这些函数是几乎不被重复的。s 当这种语法被用来在其它函数主体里定义一个匿名函数，一个闭包可被创建。这是一个高级且强大的概念，但应该被理解为当扩展嵌套函数定义时，在内存使用上会有一个意想不到的结果和分流。 既然我们的 JavaScript 在适当的位置，这个页面看起来像这样：  现在这节诗 (poem) 被设为斜体并被包在盒里，是由 JavaScript 代码插入 emphasized 类实现的。 现在我们已经知道了为什么一个开发者会选择用一个 JavaScript 框架而不从头开始写所有的代码，甚至是为最基本的任务。我们也看到 jQuery 作为一个框架，其里面的一些方法的优秀之处，并且我们为什么抛弃其它而选择它。通常我们也知道 jQuery 使得任务更加简单。 在这一章里，我们已经学习了在我们的 web 页面上，如何使 jQuery 对 JavaSript 代码有效，使用 $() 工厂函数来定位已经加上类的页面的一部分，调用 .addClass() 来对页面的部分加上另外的样式，调用 $(document).ready() 来引发页面加载上执行代码。 我们已经用这个简单的例子来说明 jQuery 如何工作，但在实际情况不是很有用。在下一章里，我们会详述代码，据此研究 jQuery 优秀的选择器语言，为这个技术寻找实际的用法。 |
《Learning jQuery 中文版》第一章(完)
浙公网安备 33010602011771号
