（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类。