（2）入門指南——（7）添加jquery代碼（Adding our jQuery code）

Our custom code will go in the second, currently empty, JavaScript file which we included from the HTML using <script src="01.js"></script>. For this example, we only need three lines of code, as follows:$(document).ready(function() {$('div.poem-stanza').addClass('highlight');});我們的普通的代碼將書寫在後面的現在還是空的js的檔案中，我們在html中使用<script src="01.js"></script>把檔案包含進去。比如我們只需要下面這樣的三行代碼：$(document).ready(function() {$('div.poem-stanza').addClass('highlight');});Finding the poem text尋找元素The fundamental operation in jQuery is selecting a part of the document. This is done with the $()function. Typically, it takes a string as a parameter, which can contain any CSS selector expression. In this case, we wish to find all of the <div>elements in the document that have the poem-stanzaclass applied to them, so the selector is very simple. However, we will cover much more sophisticated options through the course of the book. We will step through many ways of locating parts of a document in Chapter 2, Selecting Elements.jquery最根本的操作是尋找文檔的一部分，這一點使用$()方法來做到。一般來說，它使用一個字串作為參數，其中可以包含css選擇運算式。在這種情境下，我們希望尋找到文檔中所有有著poem-stanza類的div元素，所以選取器將會很簡單。然而，我們希望通過這本書的教程，我們可以學會更加複雜的操作。我們將在第二章"尋找元素"中逐步使用多種方法定位文檔的部分。When called, the $()function returns a new jQuery object instance, which is the basic building block we will be working with from now on. This object encapsulates zero or more DOM elements, and allows us to interact with them in many different ways. In this case, we wish to modify the appearance of these parts of the page, and we will accomplish this by changing the classes applied to the poem text.當＄()被調用的時候，會返回一個新的jquery對象執行個體，從現在開始這將是我們將要處理的基本的構建內容。這個對象封裝了零個或者更多的dom元素，同時允許我們使用多種方法去影響他們。在這種情況下，我們希望修改網頁中這些部分的表現形式，我們將修改附加到網頁中的類的方法實現這一目標。 Injecting the new class注入新的類The .addClass()method, like most jQuery methods, is named self-descriptively; it applies a CSS class to the part of the page that we have selected. Its only parameter is the name of the class to add. This method, and its counterpart, .removeClass(), will allow us to easily observe jQuery in action as we explore the different selector expressions available to us. For now, our example simply adds the highlightclass, which our stylesheet has defined as italicized text with a gray background and a border. .addClass()方法和大多數的jquery方法一樣，是使用自己的功能描述來為自己命名的。他將為我們選中的網頁中的那一部分添加新的類，他唯一的參數是需要被添加的類的名稱。只要我們找到對我們有效不同的選取器，這個方法和他相應的方法.removeClass()讓我們可以很容易的使用jquery。現在，我們的例子只是簡單的添加了一個highlight類，我們在css檔案中把他定義為有著灰色背景和邊框的斜體文本。Note that no iteration is necessary to add the class to all the poem stanzas. As we discussed, jQuery uses implicit iterationwithin methods such as .addClass(), so a single function call is all it takes to alter all of the selected parts of the document.注意，我們不需要迭代為所有的尋找到的元素添加類，正如我們討論的那樣，jquery在諸如.addClass()方法中使用隱式迭代，因此單獨調用一個方法就是我們去修改被選中的文檔中所有內容所做的事情。 Executing the code執行代碼Taken together, $()and .addClass()are enough for us to accomplish our goal of changing the appearance of the poem text. However, if this line of code is inserted alone in the document header, it will have no effect. JavaScript code is generally run as soon as it is encountered in the browser, and at the time the header is being processed, no HTML is yet present to style. We need to delay the execution of the code until after the DOM is available for our use. 使用$()和.addClass()對我們來說足夠完成我們修改文檔表現這一目標。然而，如果這行代碼僅僅被插入到文檔的頭部，他將不起作用。js代碼當他遇到瀏覽器的時候就會執行，在這時頭部檔案正在被處理，可是還沒有html文檔被展示出來。我們需要順延強制這些代碼，直到dom結構對我們來說可以用了。With the $(document).ready()construct, jQuery allows us to schedule function calls for firing once the DOM is loaded—without necessarily waiting for images to fully render. While this event scheduling is possible without the aid of jQuery, $(document).ready()provides an especially elegant cross-browser solution that:使用$(document).ready()結構，jquery允許我們在DOM結構被載入後去執行函數，而不必等待到所有的圖片被完全渲染後。雖然不使用jquery的協助，事件安排也是能做到的，但是$(document).ready()提供額一個想到優雅的跨瀏覽器解決方案，如下：•  Uses the browser's native DOM ready implementations when available and adds a window.onloadevent handler as a safety net • Allows for multiple calls to $(document).ready()and executes them in the order in which they are called•  Executes functions passed to $(document).ready()even if they are added after the browser event has already occurred•  Handles the event scheduling asynchronously to allow scripts to delay it if necessary•  Simulates a DOM ready event in some older browsers by repeatedly checking for the existence of a DOM method that typically becomes available at the same time as the DOM    當有效時候使用瀏覽器本地的DOM介面，同時添加window.onload()事件處理作為安全網。    允許多次調用$(document).ready()，同時按照他們被調用的順序執行代碼。    執行傳遞給$(document).readu()中的函數，甚至他們是在瀏覽器事件已經發生後被添加的。    非同步處理事件調用，允許指令碼在必須的時候延遲調用。    通過不斷的重複檢查在DOM存在時同時存在的方法，在舊的瀏覽器中模仿DOM載入完成的事件。 The .ready()method's parameter can accept a reference to an already defined function, as shown in the following code snippet:function addHighlightClass() {$('div.poem-stanza').addClass('highlight');}$(document).ready(addHighlightClass);.ready()方法的番薯可以接受一個已經定義了的函數的引用，正如在下面的程式碼片段中展示的那樣：function addHighlightClass() {$('div.poem-stanza').addClass('highlight');}$(document).ready(addHighlightClass); However, as demonstrated in the original version of the script, and repeated in Listing 1.2, as follows, the method can also accept an anonymous function(sometimes also called a lambda function), as follows:$(document).ready(function() { $('div.poem-stanza').addClass('highlight'); });然而，正如在這個指令碼原始代碼中展示的，在1.2小結重複的那樣，就像下面那樣，這個方法同樣可以接受一個匿名函數（有時候被稱之為lambda函數），如下：$(document).ready(function() { $('div.poem-stanza').addClass('highlight'); });This anonymous function idiom is convenient in jQuery code for methods that take a function as an argument when that function isn't reusable. Moreover, the closureit creates can be an advanced and powerful tool. However, it may also have unintended consequences and ramifications on memory use, if not dealt with carefully. The topic of closures is discussed fully in Appendix A, JavaScript Closures.當函數作為參數同時不需要複用的時候，匿名函數對jquery代碼來說是很方便的。而且，他建立的閉包可以成為一個進階有力的工具。然而，如果不小心處理的話，可能會在記憶體使用量中產生非計劃中的結果和分值。閉包主題將在Appendix A JavaScript Closures章節中仔細討論。 The finished product完成的產品Now that our JavaScript is in place, the page looks similar to the following screenshot:現在我們的js代碼已經放置好了，網頁看起來就像下面這個一樣The poem stanzas are now italicized and enclosed in boxes, as specified by the 01.cssstylesheet, due to the insertion of the highlightclass by the JavaScript code.顯示的內容現在是斜體的並被邊框包圍著，正如01.css中定義的那樣，由於通過js代碼插入的highlight類。