# 一、核心 jQuery

## jQuery 背后的基地概念

虽然在 jQuery API 中存在一些概念上的变化(例如像`$.ajax`这样的函数)，但是 jQuery 背后的核心概念是“发现一些东西，做一些事情。”更具体地说，从一个 HTML 文档中选择 DOM 元素，然后使用 jQuery 方法对它们做一些事情。这是大局观念。

要深入理解这个概念，请思考下面的代码。

样本:sample1.html

```js
<!DOCTYPE html>
<html lang="en">

    <body>
        <!-- jQuery will change this -->
        <a href=""></a>
        <!-- to this <a href="http://www.jquery.com">jQuery.</a> -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script>
            jQuery('a').text('jQuery').attr('href', 'http://www.jquery.com');
        </script>
    </body>

</html>

```

请注意，在这个 HTML 文档中，我们使用 jQuery 来选择一个 DOM 元素(`<a>`)。选择了一些东西之后，我们通过调用 jQuery 方法`text()`、`attr()`和`appendTo()`来进行选择。

在包装的`<a>`元素上调用`text`方法，并将元素的显示文本设置为“jQuery”`attr`调用为 jQuery 网站设置了``href`` 属性。

摸索“发现一些东西，做一些事情”的基本概念对于作为一名 jQuery 开发人员的进步至关重要。

## 这个概念，背后的概念，背后的 jQuery

虽然选择和做一些事情是 jQuery 背后的核心概念，但我想扩展这个概念，也包括创建一些东西。因此，jQuery 背后的概念可以扩展到包括首先创建新的东西，选择它，然后用它做一些事情。我们可以称之为概念，概念的背后，jQuery 的背后。

我想表明的是，你不会只选择已经在 DOM 中的东西。另外，了解 jQuery 可以用来创建新的 DOM 元素，然后使用这些元素做一些事情也很重要。

在下面的代码示例中，我们创建了一个不在 DOM 中的新`<a>`元素。一旦创建，它就被选中，然后被操纵。

样本:sample2.html

```js
<!DOCTYPE html>
<html lang="en">

    <body>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script>
            jQuery('<a>jQuery</a>').attr('href', 'http://www.jquery.com').appendTo('body');
        </script>
    </body>

</html>

```

这里要提到的关键概念是，我们正在动态创建`<a>`元素，然后对其进行操作，就好像它已经在 DOM 中一样。

## jQuery 要求 HTML 以标准模式或近乎标准模式运行

当浏览器以怪癖模式呈现一个 HTML 页面时，jQuery 方法有一些已知的问题不能正常工作。当您使用 jQuery 时，确保浏览器使用有效的文档类型在标准模式或几乎标准模式下解释 HTML。

为了确保正确的功能，本书中的代码示例使用了 HTML 5 doctype。

`<!` `DOCTYPE` `html` `>`

## 在 DOM 上等待做好准备

当 DOM 被加载并可用于操作时，jQuery 会触发一个名为`ready`的自定义事件。操纵 DOM 的代码可以在这个事件的处理程序中运行。这是 jQuery 使用中常见的模式。

下面的示例展示了正在使用的这个自定义事件的三个编码示例。

样本:sample3.html

```js
<!DOCTYPE html>
<html lang="en">

    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script>
            // Standard.
            jQuery(document).ready(function () { alert('DOM is ready!'); });

            // Shortcut, but same thing as above. 
            jQuery(function () { alert('No really, the DOM is ready!'); });

            // Shortcut with fail-safe usage of $. Keep in mind that a reference 
            // to the jQuery function is passed into the anonymous function. 
            jQuery(function ($) {     
                    alert('Seriously it\'s ready!');
                    // Use $() without fear of conflicts. 
            });
        </script>
    </head>

    <body></body>

</html>

```

请记住，您可以将任意多的`ready()`事件附加到文档中。你不仅限于一个。它们按照添加的顺序执行。

## 浏览器窗口完全加载时执行 jQuery 代码

通常，我们不想等待`window.onload`事件。这就是使用像`ready()`这样的自定义事件的意义，它将在窗口加载之前执行代码，但是在 DOM 准备好被遍历和操作之后。

然而，有时我们确实想等待。虽然自定义`ready()`事件非常适合在 DOM 可用时执行代码，但是我们也可以在整个网页(包括所有资产)完全加载后使用 jQuery 执行代码。

这可以通过将加载事件处理程序附加到`window`对象来实现。jQuery 提供了`load()`事件方法，一旦窗口完全加载，就可以使用该方法调用函数。下面，我提供一个使用中的`load()`事件方法的例子。

样本:sample4.html

```js
<!DOCTYPE html>
<html lang="en">

    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script>
            // Pass window to the jQuery function and attach
            // event handler using the load() method shortcut. 
            jQuery(window).load(function(){     alert('The page and all its assets are loaded!'); });
        </script>
    </head>

    <body></body>

</html>

```

## 在包含 jQuery 之前包含所有 CSS 文件

从 jQuery 1.3 开始，库不再保证在触发自定义`ready()`事件之前加载所有 CSS 文件。由于 jQuery 1.3 中的这一变化，您应该始终在任何 jQuery 代码之前包含所有 CSS 文件。这将确保浏览器在转到稍后包含在 HTML 文档中的 JavaScript 之前已经解析了 CSS。当然，当浏览器解析 JavaScript 时，通过 CSS 引用的图像可能会下载，也可能不会下载。

## 使用托管版本的 jQuery

在网页中嵌入 jQuery 时，大多数人选择下载 [源代码](http://docs.jquery.com/Downloading_jQuery)，并从个人域/主机链接到该源代码。然而，还有其他选项需要其他人为您托管 jQuery 代码。

[谷歌托管了](http://code.google.com/apis/ajaxlibs/documentation/#jquery)多个版本的 jQuery 源代码，目的是供任何人使用。这个其实很得心应手。在下面的代码示例中，我使用了一个`<script>`元素来包含由谷歌托管的 jQuery 的缩小版本。

```js
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

```

谷歌还托管了 jQuery 源代码的几个早期版本，每个版本都提供了缩小和非缩小的变体。我建议在开发过程中使用非简化变量，因为当您处理非简化代码时，调试错误总是更容易。

使用谷歌托管版本的 jQuery 的一个好处是，它可靠、快速，并且有可能被缓存。

## 在解析 DOM 时不使用`ready()`执行 jQuery 代码

`ready()` 事件的定制并不是完全需要的。如果你的 JavaScript 代码不影响 DOM，你可以把它包含在 HTML 文档的任何地方。这意味着如果您的 JavaScript 代码不依赖于完整的 DOM，您可以完全避免`ready()`事件。

现在大多数的 JavaScript，尤其是 jQuery 代码，都会涉及到对 DOM 的操作。这意味着浏览器必须完全解析 DOM，以便您对其进行操作。这个事实就是为什么开发人员已经被困在`window.onload`过山车上好几年了。

为了避免对在 DOM 上运行的代码使用`ready()`事件，您可以简单地在关闭`</body>`元素之前将代码放在一个 HTML 文档中。这样做可以确保 DOM 被完全加载，因为浏览器会从上到下解析文档。如果您将 JavaScript 代码放在文档中它所操作的 DOM 元素之后，就不需要使用`ready()`事件。

在下面的例子中，我已经放弃使用`ready()`，只需在文档主体关闭之前放置我的脚本。这是我在整本书和我建立的大多数网站上使用的技术。

样本:sample5.html

```js
<!DOCTYPE html>
<html lang="en">
<body>
    <p>
        Hi, I'm the DOM! Script away!</p>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>        alert(jQuery('p').text()); </script>
</body>
</html>

```

如果我将`<script>`放在`<p>`元素之前，它将在浏览器加载`<p>`元素之前执行。这将导致 jQuery 假设文档不包含任何`<p>`元素。然而，如果我使用 jQuery 自定义`ready()`事件，那么 jQuery 将不会执行代码，直到 DOM 准备好。但是，当我们可以控制文档中`<script>`元素的位置时，为什么要这样做呢？将 jQuery 代码放在页面底部避免了使用`ready()`事件。事实上，将所有 JavaScript 代码放在页面底部是一种行之有效的 [性能策略](http://developer.yahoo.com/blogs/ydn/posts/2007/07/high_performanc_5/)。

## Grokking jQuery 连锁

一旦您使用 jQuery 函数选择了一些东西并创建了一个包装器集，您实际上可以将 jQuery 方法链接到该集中包含的 DOM 元素。从概念上来说，jQuery 方法通过总是返回 jQuery 包装器集来延续链，然后链中的下一个 jQuery 方法可以使用该包装器集。注意:大多数 jQuery 方法是可链接的，但不是全部。

您应该总是尝试通过利用链接来重用包装好的集合。在下面的代码中，`text()`、`attr()`和`addClass()`方法被链接。

样本:sample6.html

```js
<!DOCTYPE html>
<html lang="en">
<body>
    <a></a>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script> (function ($) {
     $('a').text('jQuery') //
Sets text to jQuery, and then returns $('a').     
      .attr('href', 'http://www.jquery.com/') //
Sets the href attribute and then returns $('a').     
      .addClass('jQuery'); //
Sets class and then returns $('a'). 
 })(jQuery) </script>
</body>
</html>

```

## 用破坏性方法断链

如前所述，并不是所有的 jQuery 方法都维护这个链。像 **`text()`** 这样的方法，在设置一个元素的文本节点时是可以链式的。然而， **`text()`** 在用于获取元素中包含的文本节点时，实际上是断链的。

在下面的例子中， **`text()`** 用于设置然后获取包含在 **`<p>`** 元素内的文本。

样本:sample7.html

```js
<!DOCTYPE html>
<html lang="en">
<body>
    <p></p>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script> (function ($) {
    var theText = $('p').text('jQuery').text(); //
Returns the string "jQuery".  
     alert(theText); 
     // Cannot chain after
text(). The chain is broken. 
     // A string is returned, not
the jQuery object. 
 })(jQuery) </script>
</body>
</html>

```

使用 **`text()`** 获取元素中包含的文本是断链的一个主要例子，因为该方法将返回包含文本节点的字符串，而不是 jQuery 包装集。

毫不奇怪，如果一个 jQuery 方法没有返回 jQuery 包装器集，那么这个链就被破坏了。这种方法被认为是破坏性的。

## 使用破坏性 jQuery 方法并使用`end()`退出销毁

更改选定的原始 jQuery 包装集的 jQuery 方法被认为是破坏性的。原因是它们不维护包装器集的原始状态。不用担心；没有任何东西被真正摧毁或移除。相反，以前的包装器集被附加到新的包装器集。

然而，链接的乐趣并不一定会因为原始包装的集合被改变而停止。使用 **`end()`** 方法，您可以退出对原始包装器集所做的任何破坏性更改。检查下例中 **`end()`** 方法的用法，了解如何操作 DOM 元素。

样本:sample8.html

```js
<!DOCTYPE html>
<html lang="en">
<body>
    <style>
        .last
        {
            background: #900;
        }
    </style>
    <ul id="list">
        <li></li>
        <li>
            <ul>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </li>
        <li></li>
        <li></li>
    </ul>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>  (function ($) {
      $('#list') //
Original wrapper set.     
        .find('>
li')
// Destructive method.         
            .filter(':last') //
Destructive method.             
                .addClass('last')         
            .end() //
End .filter(':last').         
            .find('ul') //
Destructive method.             
                 .css('background', '#ccc')                
                .find('li:last') //
Destructive method.                     
                    .addClass('last')                
                .end() //
End .find('li:last')         
            .end() //
End .find('ul')     
        .end() //
End .find('> li') 
        .find('li') //
Back to the orginal $('#list')     
            .append('I
am an &lt;li&gt;');
  })(jQuery); </script>
</body>
</html>

```

## 方面的 jQuery 功能

jQuery 函数是多方面的。我们可以传递给它不同的值和字符串形式，然后它可以用来执行独特的功能。以下是 jQuery 函数的几种用法:

*   使用 CSS 表达式和自定义 jQuery 表达式从 DOM 中选择元素，以及使用 DOM 引用选择元素:**`jQuery('p > a')`** 或**`jQuery(':first')`** 和**`jQuery(document.body)`**
*   通过传递创建 DOM 元素的 HTML 字符串结构或 DOM 方法来动态创建 HTML:**`jQuery('<div id="nav"></div>')`**或**`jQuery(document.createElement('div')`**
*   **`ready()`** 事件的快捷方式是通过将一个函数传递给 jQuery 函数:**`jQuery(function($){`**`/* Shortcut for ready() */`**`})`**

 **下面的代码示例详细介绍了这些用法。

样本:sample9.html

```js
<!DOCTYPE html>
<html lang="en">
<body>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>  jQuery(function($){ //
Pass jQuery a function.   
      // Pass jQuery a
string of HTML. 
      $('<p></p>').appendTo('body');  
      // Pass jQuery an
element reference. 
      $(document.createElement('a')).text('jQuery').appendTo('p');  
      // Pass jQuery a CSS
expression. 
      $('a:first').attr('href', 'http://www.jquery.com');
      // Pass jQuery a DOM
reference. 
      $(document.anchors[0]).attr('jQuery');
  }); </script>
</body>
</html>

```

## Grokking 时的关键词`this`指 DOM 元素

将事件附加到包装器集中包含的 DOM 元素时，可以使用关键字**`this`** 来引用调用事件的当前 DOM 元素。以下示例包含 jQuery 代码，该代码将为页面中的每个 **`<a>`** 元素附加一个自定义 **`mouseenter`** 事件。当光标进入或退出子元素时，本地 JavaScript **`mouseover`** 事件会触发，而 jQuery 的 **`mouseenter`** 则不会。

样本:sample10.html

```js
<!DOCTYPE html>
<html lang="en">
<body>
    <a id="link1">jQuery.com</a> 
    <a id="link2">jQuery.com</a> 
    <a id="link3">jQuery.com</a>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>  (function ($)
    { 
      $('a').mouseenter(
          function () { alert(this.id); });
    })(jQuery);
    </script>
</body>
</html>

```

在传递给 **`mouseenter()`** 方法的匿名函数内部，我们使用关键字 **`this`** 来引用当前的 **`<a>`** 元素。每次鼠标触碰到“jQuery.com”文本，浏览器都会通过识别其 **`id`** 属性值来提醒哪个元素被鼠标滑过。

在前面的例子中，也可以采用 **`this`** 引用，并将其传递给 jQuery 函数，以便用 jQuery 功能包装 DOM 元素。

所以与其这样:

```js
// Access the ID attribute
of the DOM element.  
alert(this.id);

```

我们可以这样做:

```js
// Wrap the DOM element with
a jQuery object, 
// and then use attr() to access
ID value. 
alert($(this).attr('id'));

```

这是可能的，因为 jQuery 函数不仅接受选择器表达式，还会接受对 DOM 元素的引用。在代码中， **`this`** 是对 DOM 元素的引用。

您可能想要将 jQuery 功能包装在 DOM 元素周围的原因应该是显而易见的。这样做可以让您在需要时使用 jQuery 链接。

迭代 jQuery 包装器集中包含的一组元素有点类似于我们刚才讨论的概念。通过使用 jQuery **`each()`** 方法，我们可以迭代包装器集中包含的每个 DOM 元素。这允许通过使用 **`this`** 关键字单独访问每个 DOM 元素。

基于前面示例中的标记，我们可以选择页面中的所有 **`<a>`** 元素，并使用 **`each()`** 方法迭代包装器集中的每个 **`<a>`** 元素，访问其 **`id`** 属性。这里有一个例子。

样本:sample11.html

```js
<!DOCTYPE html>
<html lang="en">
<body><a id="link1">jQuery.com</a> <a id="link2">jQuery.com</a> <a id="link3">jQuery.com</a>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>  (function ($) {
      $('a').each(function(){ 
          // Loop that alerts
the id value for every <a> in the page.         
          alert($(this).attr('id')); //
"this" refers to the current element in the loop.     
      });
  })(jQuery); </script>
</body>
</html>

```

如果你在浏览器中加载 HTML，浏览器会提醒页面中每个`<a>`元素的 **`id`** 值。由于页面中有三个 **`<a>`** 元素，您可以通过 **`each()`** 方法和三个警报窗口获得三次迭代。

## 从包装器集中提取元素，直接使用它们，无需 jQuery

仅仅因为您将 jQuery 功能包装在一个 HTML 元素周围，并不意味着您失去了对实际 DOM 元素本身的访问。您总是可以从包装器集中提取一个元素，并通过本机 JavaScript 对该元素进行操作。例如，在下面的代码中，我通过操作 **`<a>`** DOM 元素的原生标题属性来设置 HTML 页面中 **`<a>`** 元素的标题属性。

样本:sample12.html

```js
<!DOCTYPE html>
<html lang="en">
<body>
    <a>jQuery.com</a>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>   (function ($) {
       // Using DOM node
properties to set the title attribute.      
       $('a').get(0).title = 'jQuery.com';
       // Manipulation of DOM
element using jQuery methods.      
       $('a').attr('href', 'http://www.jquery.com');
   })(jQuery);
    </script>
</body>
</html>

```

如所示，jQuery 提供了便捷的 **`get()`** 方法来访问包装器集中特定索引处的 DOM 元素。

但这里还有另一个选择。只需在 jQuery 对象本身上使用方括号数组符号，就可以避免使用 **`get()`** 方法。在我们前面的代码示例中:

该代码:

```js
$('a').get(0).title = 'jQuery.com';

```

可能变成这样:

```js
$('a')[0].title = 'jQuery.com';

```

两者都允许访问实际的 DOM 元素。就我个人而言，我更喜欢方括号符号。它更快，因为它使用本机 JavaScript 从数组中检索元素，而不是将其传递给方法。

然而， **`get()`** 方法提供了一个巧妙的解决方案，将所有的 DOM 元素放入一个原生数组中。只需调用 **`get()`** 方法，不传递索引参数，该方法将返回原生 JavaScript 数组中包装器集中的所有 DOM 元素。

为了演示，让我们以`get()`为例进行试驾。在下面的代码中，我将所有 **`<a>`** 元素放入一个数组中。然后我使用数组访问页面上第三个 **`<a>`** DOM 对象的标题属性。

样本:sample13.html

```js
<!DOCTYPE html>
<html lang="en">
<body>
    <a href="http://www.jquery.com" title="anchor1">jQuery.com</a>
    <a href="http://www.jquery.com" title="anchor2">jQuery.com</a>
    <a href="http://www.jquery.com" title="anchor3">jQuery.com</a>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>  (function ($) {
      var arrayOfAnchors =
$('a').get(); // Create native array from wrapper
set.     
      alert(arrayOfAnchors[2].title); //
Alerts the third link. 
        })
      (jQuery);
    </script>
</body>
</html>

```

注意事项:

使用`get()`将结束 jQuery 的链接。它将获取包装器集，并将其更改为不再用 jQuery 功能包装的 DOM 元素的简单数组。因此，使用`.end()`方法无法在`.get()`后恢复链接。

## 检查包装套是否为空

在您开始对包装器集进行操作之前，检查您实际上已经选择了什么是合乎逻辑的。最简单的解决方案是使用`if`语句来检查包装器集是否包含任何 DOM 元素。

样本:sample14.html

```js
<!DOCTYPE html>
<html lang="en">
<body>
    <a>jQuery</a>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>
        if (jQuery('a').get(0)) { // Is
there an element in the set?     
            jQuery('a').attr('href', 'http://www.jquery.com');
        }
        if (jQuery('a').length) { //
Check the length of the set. Can also use .size()     
            jQuery('a').attr('title', 'jQuery');
        }  </script>
</body>
</html>

```

事情的真相是上面的`if`语句并不是完全必要的，因为如果没有找到元素，jQuery 会默默失败。但是，链接到任何空包装集的每个方法仍然会被调用。因此，虽然我们实际上可以放弃使用`if`语句，但使用它们可能是一个很好的经验法则。在空包装器集上调用方法可能会导致不必要的处理，如果方法返回包装器集以外的值，并且对这些值进行了操作，也会导致不希望的结果。

## 通过重命名 jQuery 对象本身来创建别名

jQuery 提供了`noConflict()`方法，它有几个用途——即能够用另一个别名替换`$`。这可以在三个方面有所帮助:它可以将`$`符号的使用放弃给另一个库，帮助避免潜在的冲突，并提供为 jQuery 对象定制名称空间/别名的能力。

例如，假设您正在为 XYZ 公司构建一个网络应用。定制 jQuery 可能会很好，这样您就可以使用`XYZ('div').show()`来代替使用`jQuery('div').show()`或`$('div').show()`了。

样本:sample15.html

```js
<!DOCTYPE html>
<html lang="en">
<body>
    <div>Syncfusion., Inc.</div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>
        var Syncfusion =
jQuery.noConflict();
        // Do something with
jQuery methods. 
        alert(Syncfusion("div").text());
    </script>
</body>
</html>

```

注意事项:

通过给 **`noConflict()`** 函数传递一个布尔值 true，您可以完全撤销 jQuery 引入到网页中的内容。这应该只在极端情况下使用，因为它很可能会导致 jQuery 插件出现问题。

## 使用`.each()`时隐式迭代不够

希望很明显，如果你有一个 HTML 页面(下面的例子)有三个空的 **`<div>`** 元素，下面的 jQuery 语句将选择页面上的所有三个元素，迭代这三个元素(隐式迭代)，并将在所有三个 **`<div>`** 元素中插入文本“我是 div”。

样本:sample16.html

```js
<!DOCTYPE html>
<html lang="en">
<body>
    <div></div>
    <div></div>
    <div></div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>  (function ($) {
      $('div').text('I
am a div');
  })(jQuery);
    </script>
</body>
</html>

```

这被认为是隐式迭代，因为 jQuery 代码假设您想要操作所有三个元素，这需要迭代选定的元素，并用文本“我是 div”设置每个`<div>`的文本节点值默认情况下，这被称为隐式迭代。

这很方便。大多数情况下，大多数 jQuery 方法将应用隐式迭代。但是，其他方法将只应用于包装器集中的第一个元素。例如，jQuery 方法`attr()`在用于获取属性值时，只会访问包装器集中的第一个元素。

注释:

当使用 **`attr()`** 方法设置属性时，jQuery 实际上会应用隐式迭代将属性及其值设置到包装器集中的所有元素。

在下面的代码中，包装器集合包含页面中的所有`<div>` 元素，但是`attr()`方法只返回包装器集合中包含的第一个元素的`id`值。

样本:sample17.html

```js
<!DOCTYPE html>
<html lang="en">
<body>
    <div id="div1">I am a div</div>
    <div id="div2">I am a div</div>
    <div id="div3">I am a div</div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>  (function($){     
      // Alerts attribute
value for first element in wrapper set.     
      alert($('div').attr('id')); //
Alerts "div1". 
  })(jQuery); </script>
</body>
</html>

```

为了演示，假设您的目标实际上是获取页面上每个元素的`id`属性值。您可以编写三个单独的 jQuery 语句来访问每个`<div>`元素的`id`属性值。如果我们这样做，它可能看起来像这样:

```js
$('#div1').attr('id'); 
$('#div2').attr('id'); 
$('#div3').attr('id');  
// or  
var $divs = $('div'); //
Cached query. 
$divs.eq(0).attr('id'); //
Start with 0 instead of 1\. 
$divs.eq(1).attr('id'); 
$divs.eq(2).attr('id');

```

这似乎有点罗嗦，不是吗？如果我们可以循环包装器集，从每个`<div>`元素中提取`id`属性值，不是很好吗？通过使用`$().each()`方法，当我们的包装器集需要显式迭代来处理多个元素时，我们调用另一轮迭代。

在下面的代码示例中，我使用`$().each()`方法循环遍历包装器集合，访问集合中的每个元素，然后提取其`id`属性值。

样本:sample18.html

```js
<!DOCTYPE html>
<html lang="en">
<body>
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div id="div3">div3</div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>  (function($){     
      // 3 alerts, one for
each div.     
      $('div').each(function(){         
          // "this" is
each element in the wrapper set.         
          alert($(this).attr('id'));         
          // Could also be
written: alert(this.id);     
        });
      })(jQuery); 

    </script>
</body>
</html>

```

想象一下你面前的可能性，你可以随时强制迭代。

注释:

jQuery 还提供了 **`$.each`** 函数，不要与 **`$().each`** 方法混淆，后者专门用于迭代 jQuery 包装器集。 **`$.each`** 方法实际上可以用来迭代任何旧的 JavaScript 数组或对象。它本质上是本机 JavaScript 循环的替代品。

## jQuery 包装器集中的元素以文档顺序返回

选择器引擎将按照文档顺序返回结果，而不是按照选择器传入的顺序。包装集将根据每个元素在文档中出现的顺序(从上到下)填充选定的元素。

样本:sample19.html

```js
<!DOCTYPE html>
<html lang="en">
<body>
    <h1>h1</h1>
    <h2>h2</h2>
    <h3>h3</h3>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>  (function ($) {
      // We pass in h3
first, but h1 appears earlier in     
      // the document, so it
is first in the wrapper set.     
      alert($('h3,
h2, h1').get(0).nodeName);
      // Alerts
"H1". 
  })(jQuery);
    </script>
</body>
</html>

```

## 确定 jQuery 函数使用的上下文

jQuery 函数在选择 DOM 元素时使用的默认上下文是文档元素(例如`$('a', document)`)。这意味着，如果您没有为 jQuery 函数(例如`jQuery()`)提供第二个参数作为 DOM 查询的上下文，则使用的默认上下文是文档元素，通常称为`<body>`。

通过使用`context`属性，可以确定 jQuery 函数执行 DOM 查询的上下文。下面我展示了两个检索上下文属性值的编码示例。

样本:sample20.html

```js
<!DOCTYPE html>
<html lang="en">
<body>
    <div>
        <div>
            <div id="context"><a href="#">jQuery</a>         </div>
        </div>
    </div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>  (function ($) {
      // Alerts "object
HTMLDocument" in Firefox.     
      // Same as $('a',
document).context;     
      alert($('a').context);
      // Alerts "object
HTMLDivElement" in Firefox.     
      alert($('a', $('#context')[0]).context);
  })(jQuery); </script>
</body>
</html>

```

## 在单个链中创建整个 DOM 结构，包括 DOM 事件

通过利用链接和 jQuery 方法，您不仅可以创建单个 DOM 元素，还可以创建整个 DOM 结构。下面，我创建了一个 jQuery 链接的无序列表，然后将其添加到 DOM 中。

样本:sample21.html

```js
<!DOCTYPE html>
<html lang="en">
<body>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>  (function ($) {
      jQuery('<ul></ul>')
          .append('<li><a>jQuery.com</a></li><li><a>jQuery
Documentation</a></li>')
          .find('a:first')
          .attr('href', 'http://www.jquery.com')
          .end()
          .find('a:eq(1)')
          .attr('href', 'http://docs.jquery.com')
          .end()
          .find('a')
          .click(function () { return confirm('Leave
this page?'); })
          .end()
          .appendTo('body');
  })(jQuery); </script>
</body>
</html>

```

你需要从前面的例子中带走的概念是，jQuery 可以用来创建和操作复杂的 DOM 结构。仅使用 jQuery 方法，您就可以创建您可能需要的任何 DOM 结构。**