jQuery-参考指南-全-

jQuery 参考指南（全）

原文：zh.annas-archive.org/md5/0AC785FD3E3AB038A029EF6BA3FEE889

译者：飞龙

协议：CC BY-NC-SA 4.0

序言

jQuery 是一个强大但易于使用的 JavaScript 库，它帮助 Web 开发人员和设计师向他们的网站添加动态、交互式元素，消除浏览器不一致性，并大大减少开发时间。在jQuery 参考指南中，您可以以全面、易于访问的格式调查此库的特性。

本书提供了每个 jQuery 方法、函数和选择器的有序菜单。每个条目都附有详细描述和有用的示例，这些示例将帮助您充分利用 jQuery，并避免与 JavaScript 和其他客户端语言常见的陷阱。如果您仍然渴望更多，本书还会向您展示如何利用 jQuery 的优雅插件架构来编写自己的扩展。

当你一次又一次地返回到这个指南时，你会发现 jQuery 提供了未被发掘的可能性，并且会磨练你的技能。

本书示例的演示可以在以下网址找到：http:\book.learningjquery.com。

本书涵盖内容

在第一章中，我们将开始解剖一个可用的 jQuery 示例。此脚本将作为本书的路线图，指导您查找包含有关特定 jQuery 功能更多信息的章节。

本书的核心是一系列参考章节，让您可以快速查找任何 jQuery 方法的详细信息。第二章列出了用于查找页面元素的每个可用选择器。

第三章在前一章的基础上，列举了一系列用于查找页面元素的 jQuery 方法。

第四章描述了检查和修改页面 HTML 结构的每一个机会。

第五章详细介绍了 jQuery 可以触发和响应的每个事件。

第六章定义了 jQuery 中内置的动画范围，以及用于构建自己动画的工具包。

第七章列出了 jQuery 可以启动和响应服务器通信而无需刷新页面的方式。

第八章涵盖了 jQuery 库中剩余的不容易归类到其他类别的功能。

在最后三章中，您将深入探讨 jQuery 提供的扩展机制。第九章揭示了使用插件增强 jQuery 已经强大功能的四种主要方式。

第十章介绍了流行的尺寸插件中可用的高级测量工具。

第十一章赋予您将 AJAX 技术和 HTML 表单结合在一起的能力，这个过程由表单插件轻松实现。

附录 A 提供了一些关于 jQuery、JavaScript 和 Web 开发的各种主题的信息性网站。

附录 B 推荐了一些有用的第三方程序和工具，用于在您的个人开发环境中编辑和调试 jQuery 代码。

这本书是为谁准备的？

本书适用于希望为其设计创建交互元素的网页设计师，以及希望为其 Web 应用程序创建最佳用户界面的开发人员。

读者需要了解 HTML 和 CSS 的基础，并且应该熟悉 JavaScript 的语法。不假设对 jQuery 的了解，也不要求对其他任何 JavaScript 库有经验。

约定

在本书中，您会发现一些文本样式，用于区分不同类型的信息。以下是这些样式的一些示例，以及它们的含义解释。

代码有三种风格。文本中的代码词如下所示：“综合起来，$() 和 .addClass() 足以实现我们改变诗歌文本外观的目标。”

代码块将设置如下所示：

$(document).ready(function() {
  $('span:contains(language)').addClass('emphasized');
});

当我们希望引起您对代码块的特定部分的注意时，相关的行或项目将被加粗显示：

$(document).ready(function() {
 $('a[@href$=".pdf"]').addClass('pdflink');
});

新术语 和 重要单词 以粗体字体介绍。您在屏幕上看到的单词，例如菜单或对话框中的单词，会以我们的文本形式出现，如：“下一步是通过点击全部按钮来运行这些测试”。

注意

重要提示将显示在这样的框中。

提示

提示和技巧会像这样显示。

第一章：jQuery 脚本的结构

他有一个崭新的开始

现在他是一个快乐的人

—Devo，

"快乐的人"

典型的 jQuery 脚本使用库提供的各种方法。选择器，DOM 操作，事件处理等根据手头任务的需要而使用。为了最大程度地利用 jQuery，我们需要牢记它提供的广泛功能范围。

本书将列举 jQuery 库中的每种方法和函数。由于有许多方法和函数需要整理，因此了解方法的基本类别以及它们在 jQuery 脚本中的作用方式将非常有用。在这里，我们将看到一个完全可用的脚本，并查看 jQuery 的不同方面在脚本的每个部分中如何被利用。

一个动态目录

作为 jQuery 实践的例子，我们将构建一个小脚本，动态提取 HTML 文档中的标题，并将它们组装成该页面的目录。

我们的目录将位于页面的右上角：

一个动态目录

我们将其最初折叠如上所示，但点击将其展开至全高度：

一个动态目录

同时，我们将为主体文本添加一个功能。页面上文本的介绍不会最初加载，但当用户点击介绍一词时，将从另一个文件中插入介绍文本：

一个动态目录

在我们揭示执行这些任务的脚本之前，我们应该先了解脚本所在的环境。

获取 jQuery

官方的 jQuery 网站 (jquery.com/) 总是与该库相关的代码和新闻的最新资源。要开始，我们需要一份 jQuery 的副本，可以直接从网站的主页下载。在任何时候可能有几个版本的 jQuery 可用；最新的未压缩版本最适合我们。

jQuery 不需要安装。要使用 jQuery，我们只需将其放置在网站的公共位置即可。由于 JavaScript 是一种解释性语言，所以不需要担心编译或构建阶段。每当我们需要一个页面具有 jQuery 时，我们只需在 HTML 文档中引用文件的位置即可。

设置 HTML 文档

大多数 jQuery 使用示例分为三个部分— HTML 文档本身，用于样式的 CSS 文件，以及用于对其进行操作的 JavaScript 文件。在本例中，我们将使用包含书籍文本的页面：

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html  xml:lang="en" lang="en">
  <head>
  	<meta http-equiv="Content-Type" content="text/html;
                                                   charset=utf-8"/>
  	<title>Doctor Dolittle</title>
    <link rel="stylesheet" href="dolittle.css" type="text/css" />
  	<script src="img/jquery.js" type="text/javascript"></script>
  	<script src="img/dolittle.js" type="text/javascript"></script>
  </head>
  <body>
    <div id="container">
      <h1>Doctor Dolittle</h1>
      <div class="author">by Hugh Lofting</div>
      <div id="introduction">
        <h2><a href="introduction.html">Introduction</a></h2>
      </div>
      <div id="content">
        <h2>Puddleby</h2>
        <p>ONCE upon a time, many years ago when our grandfatherswere little children--there was a doctor; and his name wasDolittle-- John Dolittle, M.D.  &quot;M.D.&quot; means that he was a proper doctor and knew a whole lot.</p>

           <!-- More text follows... -->

      </div>
    </div>
  </body>
</html>

注意

服务器上文件的实际布局并不重要。从一个文件到另一个文件的引用只需要调整以匹配我们选择的组织结构即可。在本书的大多数示例中，我们将使用相对路径来引用文件（../images/foo.png），而不是绝对路径（/images/foo.png）。这样可以使代码在本地运行而无需 web 服务器。

样式表立即在标准的<head>元素之后加载。以下是影响我们动态元素的样式表部分：

/* -----------------------------------
   Page Table of Contents
-------------------------------------- */
#page-contents {
  position: absolute;
  text-align: left;
  top: 0;
  right: 0;
  width: 15em;
  border: 1px solid #ccc;
  border-top-width: 0;
  border-right-width: 0;
  background-color: #e3e3e3;
}
#page-contents h3 {
  margin: 0;
  padding: .25em .5em .25em 15px;
  background: url(arrow-right.gif) no-repeat 0 2px;
  font-size: 1.1em;
  cursor: pointer;
}
#page-contents h3.arrow-down {
  background-image: url(arrow-down.gif);
}
#page-contents a {
  display: block;
  font-size: 1em;
  margin: .4em 0;
  font-weight: normal;
}
#page-contents div {
  padding: .25em .5em .5em;  
  display: none;
  background-color: #efefef;
}

/* -----------------------------------
   Introduction
-------------------------------------- */
.dedication {
  margin: 1em;
  text-align: center;
  border: 1px solid #555;
  padding: .5em;
}

样式表被引用后，JavaScript 文件被包含。重要的是，jQuery 库的脚本标签必须在我们自定义脚本的标签之前放置之前；否则，当我们的代码尝试引用它时，jQuery 框架将不可用。

编写 jQuery 代码

我们的自定义代码将放在第二个当前为空的 JavaScript 文件中，我们将其包含在 HTML 中使用 <script src="img/dolittle.js" type="text/javascript"></script>。尽管它能够完成很多工作，但脚本相当简短：

jQuery.fn.toggleNext = function() {
  this.toggleClass('arrow-down')
    .next().slideToggle('fast');
};

$(document).ready(function() {
  $('<div id="page-contents"></div>')
    .prepend('<h3>Page Contents</h3>')
    .append('<div></div>')
    .prependTo('body'); 

  $('#content h2').each(function(index) {
    var $chapterTitle = $(this);
    var chapterId = 'chapter-' + (index + 1);
    $chapterTitle.attr('id', chapterId);
    $('<a></a>').text($chapterTitle.text())
      .attr({
        'title': 'Jump to ' + $chapterTitle.text(),
        'href': '#' + chapterId
      })
      .appendTo('#page-contents div');
  });

  $('#page-contents h3').click(function() {
    $(this).toggleNext();
  });

  $('#introduction > h2 a').click(function() {
    $('#introduction').load(this.href);
    return false;
  });
});

现在我们有了一个动态的目录，可以将用户带到文本的相关部分，并且可以按需加载介绍部分。

脚本解剖

选择此脚本是因为它展示了 jQuery 库的广泛功能。现在我们已经将代码作为一个整体看过了，我们可以确定其中使用的方法类别。

注意

我们不会在这里详细讨论此脚本的操作，但是类似的脚本作为 Learning jQuery 网志上的教程呈现：www.learningjquery.com/2007/06/ automatic-page-contents。

选择器表达式

在我们可以对 HTML 文档进行操作之前，我们需要找到相关部分。在我们的脚本中，有时我们会使用一种简单的方法来查找元素：

$('#introduction')

此表达式创建一个新的 jQuery 对象，该对象引用具有introduction ID 的元素。另一方面，有时我们需要一个更复杂的选择器：

$('#introduction > h2 a')

在这里，我们产生了一个可能引用许多元素的 jQuery 对象。如果它们是锚点标签，则包括这些元素，但仅在它们是introduction ID 元素的子元素的<h2>元素的后代时。

这些选择器表达式可以简单也可以复杂，取决于我们的需要。第二章将列举我们可用的所有选择器以及它们如何组合使用。

DOM 遍历方法

有时我们有一个 jQuery 对象，它已经引用了一组 DOM 元素，但我们需要对一个不同的相关元素执行操作。在这些情况下，DOM 遍历方法很有用。我们可以在我们的脚本的一部分中看到这一点：

this.toggleClass('arrow-down')
 .next()
  .slideToggle('fast');

由于代码片段的上下文，关键字this指的是一个 jQuery 对象（通常指的是 DOM 元素）。在我们的情况下，这个 jQuery 对象又指向目录的<h3>标题。.toggleClass方法调用操纵了这个标题元素。随后的.next()操作改变了我们正在处理的元素，因此接下来的.slideToggle方法调用作用于包含目录的<div>而不是其标题。允许我们自由移动 DOM 树的方法在第三章中列出。

DOM 操作方法

找到元素还不够；我们还希望能够修改它们。这些变化可以像更改单个属性一样简单：

$chapterTitle.attr('id', chapterId);

在这里，我们即时修改了匹配元素的 ID。

有时候，这些变化影响更深远：

$('<div id="page-contents"></div>')
  .prepend('<h3>Page Contents</h3>')
  .append('<div></div>')
  .prependTo('body');

脚本的这一部分说明了DOM 操作方法不仅可以就地更改元素，还可以删除、重排和插入它们。这些代码在<div id="page-contents">的开头添加了一个新的标题，将另一个<div>容器插入到其末尾，并将整个内容放在文档主体的开头。第四章将详细介绍这些以及修改 DOM 树的许多其他方法。

事件方法

即使我们可以随意修改页面，我们的页面仍然会静止不动，不响应。我们需要事件方法来对用户输入做出反应，以在适当的时候进行更改：

$('#introduction > h2 a').click(function() {
  $('#introduction').load(this.href);
  return false;
});

在这个片段中，我们注册了一个处理程序，每次选择的锚点标签被点击时都会执行。点击事件是最常见的事件之一，但还有许多其他事件；与它们交互的 jQuery 方法在第五章中讨论。

第五章还讨论了一个非常特殊的事件方法.ready：

$(document).ready(function() {
  // ...
});

这个方法允许我们注册行为，当 DOM 结构可用于我们的代码时立即发生——甚至在图片加载之前。

效果方法

事件方法使我们能够对用户输入做出反应；效果方法让我们以一种有型的方式做到这一点。我们可以通过动画来隐藏和显示元素，而不是立即执行：

this.toggleClass('arrow-down')
  .next()
 .slideToggle('fast');

这个方法在元素上执行快速的滑动过渡，每次调用时交替隐藏和显示它。内置效果方法在第六章中列出，创建新效果方法的方法也在其中。

AJAX 方法

许多现代网站采用技术在请求时加载内容，而不需要刷新页面；jQuery 可以轻松实现这一点。AJAX 方法启动这些内容请求，并允许我们监视其进度：

$('#introduction > h2 a').click(function() {
 $('#introduction').load(this.href);
  return false;
});

这里的.load方法允许我们从服务器获取另一个 HTML 文档，并将其插入到当前文档中，所有这些都可以通过一行代码完成。从服务器检索信息的更复杂机制以及其他信息列在第七章中。

其他方法

有些方法比其他方法更难分类。jQuery 库包含几种作为常见 JavaScript 习语的简写的其他方法。

即使是基本的迭代任务，通过 jQuery 也可以简化：

$('#content h2').each(function(index) {
  // ...
});

在这里看到的.each方法逐个遍历匹配的元素，对所有匹配的元素执行封闭的代码。在本例中，该方法帮助我们收集页面中的所有标题，以便我们可以编写完整的目录。类似的帮助函数可以在第八章中找到。

插件 API

我们不需要限制自己在内置功能中。jQuery 中的插件 API允许我们扩展已存在的功能，增加符合我们需求的新功能。即使在我们编写的小脚本中，我们也发现了插件的用处：

jQuery.fn.toggleNext = function() {
  this.toggleClass('arrow-down')
    .next().slideToggle('fast');
};

这段代码定义了一个新的.toggleNext jQuery 方法，可以展开或关闭后续元素。我们可以在需要时随时调用我们的新方法：

$('#page-contents h3').click(function() {
  $(this).toggleNext();
});

每当代码可以在当前脚本之外重复使用时，将其作为插件会更好。第九章将介绍用于构建这些扩展的插件 API。

摘要

我们现在已经看到了一个完整的、功能的 jQuery 脚本。尽管这个示例很小，但它为页面带来了相当多的交互性和可用性。这个脚本展示了 jQuery 提供的主要工具类型。我们观察了脚本如何在 DOM 中查找项目并根据需要更改它们。我们见证了对用户操作的响应以及为用户在操作后提供反馈的动画。我们甚至看到了如何在不刷新页面的情况下从服务器获取信息，以及如何教会 jQuery 通过插件学习全新的技巧。

我们将逐章逐节地讲解 jQuery 库中的每个函数、方法和选择器表达式。在许多情况下，一个自定义日志函数将有助于我们的示例。这个.log方法将文本打印到屏幕上，以便我们理解；在第九章的最后，我们将解析它作为插件的示例。

每个方法都将以其语法摘要、参数列表和返回值列表的总结介绍。然后我们将提供讨论，提供适用的示例。有关任何方法的更多信息，请参考附录 A 中列出的在线资源。

第二章：选择器表达式

你让我仰望高处

你让我搜索到最低处

—Devo，

"Jerkin' Back 'n' Forth"

借鉴了 CSS 1-3 和基本 XPath，然后添加了自己的内容，jQuery 提供了一组强大的选择器表达式，用于在文档中匹配一组元素。在本章中，我们将依次检查 jQuery 提供的每个选择器表达式。

CSS 选择器

以下选择器基于 W3C 制定的 CSS 1-3。有关规范的更多信息，请访问www.w3.org/Style/CSS/#specs。

元素：T

所有标签名为T的元素。

示例

$('div'): 选择文档中所有标签名为 div 的元素
$('em'): 选择文档中所有标签名为 em 的元素

描述

jQuery 使用 JavaScript 的 getElementsByTagName() 函数进行标签名选择器。

ID：#myid

具有 ID 等于 myid 的唯一元素。

示例

$('#myid'): 选择具有 id='myid' 的唯一元素，无论其标签名是什么
$('p#myid'): 选择具有 'myid' id 的单个段落；换句话说，选择唯一的元素 <p id='myid'>

描述

每个 id 值在文档中只能使用一次。如果有多个元素被分配了相同的 id，那些使用该 id 的查询将只选择 DOM 中匹配的第一个元素。

可能不会立即清楚为什么有人想要指定与特定 id 关联的标签名，因为该 id 本身必须是唯一的。然而，在某些用户生成 DOM 的情况下，可能需要更具体的表达式以避免误报。此外，当相同的脚本在多个页面上运行时，可能需要识别 id 的元素，因为页面可能将相同的 id 与不同的元素关联起来。例如，页面 A 可能具有 <h1 id='title'> 而页面 B 具有 <h2 id='title'>。

对于简单的 id 选择器，例如上面的示例 2，jQuery 使用 JavaScript 函数 getElementById()。如果脚本的执行速度至关重要，则应使用简单的 id 选择器。

类：.myclass

所有具有类名为 myclass 的元素。

示例

$('.myclass'): 选择所有具有类名为 myclass 的元素
$('p.myclass'): 选择所有具有类名为 myclass 的段落
$('.myclass.otherclass'): 选择所有具有类名为 myclass 和 otherclass 的元素

描述

就速度而言，示例 2 通常比示例 1 更可取（如果我们可以限制查询到给定的标签名称），因为它首先使用本机 JavaScript 函数 getElementsByTagName() 来过滤其搜索，然后在匹配的 DOM 元素子集中查找类。相反，目前没有本机的 getElementsByClassName() 供 jQuery 使用，因此使用裸类名会迫使 jQuery 将其与 DOM 中的每个元素匹配。然而，速度上的差异取决于页面的复杂性和 DOM 元素的数量。

一如既往，请记住开发时间通常是最宝贵的资源。除非明确需要改善性能，否则不要专注于选择器速度的优化。

作为 CSS 选择器，现代所有网络浏览器都支持示例 3 的多类语法，但不包括 Internet Explorer 6 及以下版本，这使得该语法特别适用于通过 jQuery 跨浏览器应用样式。

后代：E F

所有由 F 匹配的元素，这些元素是由 E 匹配的元素的后代。

举例

$('#container p'): 选择所有由<p>匹配的元素，这些元素是具有container id 的元素的后代。
$('a img'): 选择所有由 <a> 匹配的元素的后代 <img> 元素。

描述

元素的后代可以是该元素的子元素、孙子元素、曾孙元素等等。例如，在以下 HTML 中，<img> 元素是 <span>、<p>、<div id="inner"> 和 <div id="container"> 元素的后代：

<div id="container">
  <div id="inner">
    <p>
      <span><img src="img/example.jpg" alt="" /></span>
    </p>
  </div>
</div>

子级：E > F

所有由 F 匹配的元素，这些元素是由 E 匹配的元素的子级。

举例

$('li > ul'): 选择所有由<li>匹配的元素的子元素<ul>。
$('p > code'): 选择所有由<p>匹配的元素的子元素<code>。

描述

作为 CSS 选择器，子级组合器被所有现代网络浏览器支持，包括 Safari、Mozilla/Firefox 和 Internet Explorer 7，但显然不包括 Internet Explorer 6 及以下版本。示例 1 是选择所有嵌套无序列表（即除了顶层之外）的方便方法。

子级组合器可以被视为（单空格）后代组合器的更具体形式，因为它只选择第一级后代。因此，在以下 HTML 中，<img> 元素只是 <span> 元素的子元素。

<div id="container">
  <div id="inner">
    <p>
      <span><img src="img/example.jpg" alt="" /></span>
    </p>
  </div>
</div>

相邻兄弟：E + F

所有由F匹配且紧接着跟在与E匹配的元素相同父级的元素。

举例

$('ul + p'): 选择所有由 <ul>（无序列表）匹配的兄弟元素后立即跟随的元素<p>（段落）。
$('strong + em'): 选择所有由 <strong> 匹配的兄弟元素后立即跟随的元素<em>。

描述

要考虑的一个重要点是+组合器和~组合器（下面介绍）只选择兄弟元素。考虑以下 HTML：

<div id="container">
  <ul>
    <li></li>
    <li></li>
  </ul>
  <p>
    <img/>
  </p>
</div>

$('ul + p')选择<p>，因为它紧接在<ul>后面，并且这两个元素共享相同的父级，即<div id="container">。

$('ul + img')不选择任何东西，因为（除其他原因外）<ul>在 DOM 树中比<img>高一个级别。

$('li + img')不选择任何内容，因为即使<li>和<img>在 DOM 树中处于同一级别，它们也不共享相同的父级。

一般兄弟：E ~ F

所有由E匹配的元素，其后跟一个由E匹配的元素，并且具有相同的父级。

例子

$('p ~ ul')：选择所有由<p>匹配的元素，后跟由<ul>匹配的兄弟元素
$('code ~ code')：选择所有由<code>匹配的元素，后跟由<code>匹配的兄弟元素

描述

要考虑的一个重要点是+组合器和~组合器只选择兄弟元素。两者之间的显着区别在于它们各自的范围。虽然+组合器仅达到紧接着的下一个兄弟元素，但~组合器将该范围扩展到所有后续兄弟元素。

考虑以下 HTML：

<ul>
  <li class="first"></li>
  <li class="second"></li>
  <li class="third></li>
</ul>
<ul>
  <li class="fourth"></li>
  <li class="fifth"></li>
  <li class="sixth"></li>
</ul>

$('li.first ~ li')选择<li class="second">和<li class="third">。

$('li.first + li')选择<li class="second">。

多个元素：E,F,G

选择所有由选择器表达式E, F或G匹配的元素。

例子

$('code, em, strong')：选择所有由<code>或<em>或<strong>匹配的元素
$('p strong, .myclass')：选择所有由<p>匹配的元素的后代 <strong> 以及具有 myclass 类的所有元素

描述

这个逗号（,）组合器是选择不同元素的有效方式。这个组合器的另一个选择是在第三章中描述的.add()方法。

Nth Child（:nth-child(n)）

所有是其父级的第n个子元素的元素。

例子

$('li:nth-child(2)')：选择所有由<li>匹配的元素，它们是其父级的第二个子元素
$('p:nth-child(5)')：选择所有由<p>匹配的元素，它们是其父级的第五个子元素

描述

因为 jQuery 对 :nth-child(n) 的实现严格来自 CSS 规范，因此 n 的值是基于 1 的，这意味着计数从 1 开始。但是，对于所有其他选择器表达式，jQuery 遵循 JavaScript 的“基于 0 的”计数。因此，鉴于一个包含两个 <li> 的单个 <ul>，$('li:nth-child(1)')选择第一个 <li>，而$('li:nth(1)')选择第二个。

由于两者看起来非常相似，:nth-child(n) 伪类很容易与 :nth(n) 混淆，尽管正如我们刚刚看到的，它们可能会导致截然不同的匹配元素。使用 :nth-child(n)，所有子元素都被计数，无论它们是什么，只有当它们与附加到伪类的选择器匹配时才会选择指定的元素。使用 :nth(n) 仅计数附加到伪类的选择器，不限于任何其他元素的子元素，并选择第 n 个元素。为了证明这一区别，让我们来看看以下 HTML 给出的几个选择器表达式的结果：

<div>
  <h2></h2>
  <p></p>
  <h2></h2>
  <p></p>
  <p></p>
</div>

$('p:nth(1)') 选择第二个 <p>，因为 :nth(n) 的编号从 0 开始。

$('p:nth-child(1)') 选择不到任何内容，因为没有 <p> 元素是其父元素的第一个子元素。

$('p:nth(2)') 选择第三个 <p>。

$('p:nth-child(2)') 选择第一个 <p>，因为它是其父元素的第二个子元素。

除了接受整数外，:nth-child(n) 还可以接受 even 或 odd。当文档中出现多个表格时，这使得它特别适用于表行条纹解决方案。再次考虑上面的 HTML 片段：

$('p:nth-child(even)') 选择第一个和第三个 <p>，因为它们是其父元素的第二个和第四个子元素（都是偶数）。

第一个子元素 (:first-child)

所有是其父元素的第一个子元素的元素：

示例

$('li:first-child'): 选择所有与 <li> 匹配的元素，它们是其父元素的第一个子元素。
$(strong:first-child'): 选择所有与 <strong> 匹配的元素，它们是其父元素的第一个子元素。

描述

:first-child 伪类是 :nth-child(1) 的简写。关于 :X-child 伪类的更多信息，请参阅 :nth-child(n) 的讨论。

最后一个子元素 (:last-child)

所有是其父元素的最后一个子元素的元素。

示例

$('li:last-child'): 选择所有与 <li> 匹配的元素，它们是其父元素的最后一个子元素。
$('code:last-child'): 选择所有与 <code> 匹配的元素，它们是其父元素的最后一个子元素。

描述

关于 :X-child 伪类的更多信息，请参阅 :nth-child(n) 的讨论。

只有一个子元素 :only-child

所有只有一个子元素的元素。

示例

$(':only-child'): 选择所有只有一个子元素的元素。
$('code:only-child'): 选择所有只有一个子元素的 <code> 元素。

不是 :not(s)

所有不匹配选择器 s 的元素。

示例

$('li:not(.myclass)'): 选择所有与 <li> 匹配的元素，它们没有 class="myclass"。
$('li:not(:last-child)'): 选择所有与 <li> 匹配的元素，它们不是其父元素的最后一个子元素。

空 :empty

所有没有子元素（包括文本节点）的元素。

示例

$(':empty'): 选择所有没有子元素的元素。
$('p:empty'): 选择所有与 <p> 匹配的元素，它们没有子元素。

描述

W3C 建议<p>元素至少有一个子节点，即使该子节点只是文本（请参阅www.w3.org/TR/html401/struct/text.html#edef-P）。另一方面，一些其他元素是空的（即没有子元素）：例如<input>, <img>, <br>和<hr>。

注意使用:empty（和:parent）时的一件重要事情是子元素包括文本节点。

通用：*

所有元素。

例子

$('*')：选择文档中的所有元素
$('p > *')：选择所有作为段落元素的子元素的元素

描述

当与其他元素结合形成更具体的选择器表达式时，*选择器尤其有用。

XPath 选择器

仿照文件系统的目录树导航，XPath 选择器表达式提供了一种替代方式来访问 DOM 元素。尽管 XPath 是为 XML 文档开发的选择器语言，但 jQuery 提供了一组基本的选择器，可用于 XML 和 HTML 文档。

有关 XPath 1.0 的更多信息，请访问 W3C 的规范：www.w3.org/TR/xpath。

后代：E//F

所有由E匹配的元素的后代，这些元素是由F匹配的元素的后代。

例子

$('div//code')：选择所有由<div>匹配的元素的后代 <code>
$('//p//a')：选择所有由<p>匹配的元素的后代 <a>

描述

此 XPath 后代选择器与相应的 CSS 后代选择器($('E F'))的工作方式相同，只是 XPath 版本可以指定从文档根开始，这在查询 XML 文档时可能很有用。

在示例 2 中，初始的//p告诉 jQuery 从文档根开始匹配所有<p>元素及其后代。请注意，如果此选择器表达式跟随 DOM 遍历方法（如.find()），则此语法将不会选择任何内容，因为文档根不能是任何其他元素的子元素。由于 jQuery 允许自由混合 CSS 和 XPath 选择器，因此初始的//是多余的，因此可以省略。

子元素：E/F

所有由E匹配的元素的子元素，这些元素是由F匹配的元素的子元素。

例子

$('div/p')：选择所有由<div>匹配的元素的子元素 <p>
$('p/a')：选择所有由<p>匹配的元素的子元素 <a>
$('/docroot/el')：选择所有由<docroot>匹配的元素的子元素 <el>，只要<docroot>实际上位于文档根

描述

XPath 子选择器 $('E/F') 是 CSS 子选择器 $('E > F') 的替代方案。如果选择器表达式以单斜杠开头，例如示例 3 中的情况，则紧随斜杠之后的选择器必须位于文档根目录。在 HTML 文档中不推荐以单斜杠开头，因为它始终必须跟随 body 才能匹配页面上的任何元素。然而，在 XML 文档中，识别文档根中的特定元素或属性可能是有用的。

父元素：E/..

所有与 E 匹配的元素的父元素。

示例

$('.myclass/..'): 选择所有具有类名为 myclass 的元素的父元素。
$('.myclass/../'): 选择所有是具有类名为 myclass 的元素的父元素的子元素。换句话说，它选择所有具有类名为 myclass 的元素，以及它们的兄弟元素。
$('.myclass/../p'): 选择所有匹配 <p> 的元素，这些元素是具有类名为 myclass 的元素的父元素的子元素。

描述

让我们看一些示例 HTML 来帮助理解这个选择器：

<div>
  <p id="firstp"></p>
  <div id="subdiv"></div>
  <p id="secondp">
    <span class="myclass"></span>
  </p>
</div>
<div>
  <p></p>
</div>

$('span.myclass/..') 选择 <p id="secondp">，因为它是 <span class="myclass"> 的父元素。

$('#firstp/../') 选择 <p id="firstp">, <div id="subdiv"> 和 <p id="secondp">，因为选择器 (a) 以 <p id="firstp"> 开头， (b) 在 DOM 树中向上遍历一级（到第一个顶级 <div> 元素），以及 (c) 选择该 <div> 的所有子元素。

$('.myclass/../../p') 选择 <p id="firstp"> 和 <p id="secondp">，因为选择器 (a) 以 <span class="myclass"> 开头， (b) 在 DOM 树中向上遍历两级（到第一个顶级 <div> 元素），以及 (c) 选择所有 <p> 元素，这些元素是该 <div> 的子元素。

包含: [F]

包含由 F 匹配的所有元素。

示例

$('div[p]'): 选择所有匹配 <div> 的元素，这些元素包含匹配 <p> 的元素。
$('p[.myclass]'): 选择所有匹配 <p> 的元素，其中包含类名为 myclass 的元素。

描述

这个选择器类似于后代选择器的反向（E//F 或 E F），它选择所有具有匹配 F 的后代元素，而不是所有由其他元素的后代匹配 F 的元素。

XPath 的包含选择器不应与 CSS 的属性选择器混淆，后者共享此语法。jQuery 也使用 XPath 风格的表达式来表示属性选择器，如下文 属性选择器 部分所述。

属性选择器

因为 jQuery 支持 CSS 和 XPath 样式的表达式，并且两者在使用方括号时冲突，jQuery 采用 XPath 符号来表示属性选择器，以 @ 符号开头。

使用以下任何属性选择器时，我们应考虑具有多个、以空格分隔的值的属性。由于这些选择器将属性值视为单个字符串，因此，例如此选择器 $('[a@rel=nofollow]') 将选择 <a rel="nofollow" href="example.html">Some text</a>，但不会选择 <a rel="nofollow self" href="example.html">Some text</a>。

选择器表达式中的属性值可以写成裸字或用引号括起来。因此，以下变体同样正确：

裸字：$('[a@rel=nofollow self]')
单引号内部的双引号：$('[a@rel="nofollow self"]')
双引号内部的单引号：$("[a@rel='nofollow self']")
在单引号内部转义单引号：$('[a@rel=\'nofollow self\']')
在双引号内部转义双引号：$("[a@rel=\"nofollow self\"]")

我们选择的变体通常是风格或便利性的问题。

具有属性：[@foo]

所有具有 foo 属性的元素。

示例

$('a[@rel]')：选择所有具有 rel 属性的 <a> 元素
$('p[@class]')：选择所有具有 class 属性的 <p> 元素

描述

关于此属性选择器的更多信息，请参见上面的 属性选择器 介绍。

属性值等于：[@foo=bar]

具有值完全等于 bar 的 foo 属性的元素。

示例

$('a[@rel=nofollow]')：选择所有具有 rel 值完全等于 nofollow 的 <a> 元素
$('input[@name=myname]')：选择所有具有 name 值完全等于 myname 的 <input> 元素

描述

关于此属性选择器的更多信息，请参见上面的 属性选择器 介绍。

属性值不等于：[@foo!=bar]

所有不具有值完全等于 bar 的 foo 属性的元素。

示例

$('a[@rel!=nofollow]')：选择所有没有 rel 属性值完全等于 nofollow 的 <a> 元素
$('input[@name!=myname]')：选择所有不具有 name 值完全等于 myname 的 <input> 元素

描述

由于这些选择器将属性值视为单个字符串，因此 $('[a@rel!=nofollow]') 我们将选择 <a rel="nofollow self" href="example.htm">Some text</a>。

如果我们需要仅选择 <a> 元素，并且它们的 rel 属性中没有任何地方包含 nofollow，我们可以使用以下选择器表达式代替：$('a:not([@rel*=nofollow])')。

属性值开头：[@foo^=bar]

所有具有值以字符串 bar 开头的 foo 属性的元素。

示例

$('a[@rel^=no]')：选择所有具有 rel 属性值以 no 开头的 <a> 元素
$('input[@name^=my]')：选择所有具有 name 值以 my 开头的 <input> 元素

描述

由于这些选择器将属性值视为单个字符串，$('[a@rel^=no]') 将选择 <a rel="nofollow self" href="example.htm">Some text</a>，但不选择 <a rel="self nofollow" href="example.htm">Some text</a>。

属性值结尾: [@foo$=bar]

所有具有以字符串 bar 结尾的值的 foo 属性的元素。

示例

$('a[@href$=index.htm]')：选择所有 href 值以 index.htm 结尾的 <a> 元素
$('a[@rel$=self]')：选择所有 class 值以 bar 结尾的 <p> 元素

描述

由于这些选择器将属性值视为单个字符串，$('[a@rel$=self]') 将选择 <a rel="nofollow self" href="example.htm">Some text</a>，但不选择 <a rel="self nofollow" href="example.htm">Some text</a>。

属性值包含: [@foo*=bar]

所有具有包含子字符串 bar 的 foo 属性的元素。

示例

$('p[@class*=bar]')：选择所有 class 值包含 bar 的 <p> 元素
$('a[@href*=example.com]')：选择所有 href 值包含 example.com 的 <a> 元素

描述

这是 jQuery 属性选择器中最宽松的选择器。如果选择器的字符串出现在元素的属性值的任何位置，它都将选择该元素。因此，$('p[@class*=my]') 将选择 <p class="yourclass myclass">Some text</p>, <p class="myclass yourclass">Some text</p> 和 <p class="thisismyclass">Some text</p>。

表单选择器

以下选择器可用于访问各种状态下的表单元素。在使用除 :input 外的任何表单选择器时，建议同时提供标签名（例如，使用 input:text 而不是 :text）。

所有表单元素（<input>（所有类型），<select>, <textarea>, <button>）
所有文本字段（<input type="text">)
所有密码字段（<input type="password">)
所有单选按钮字段（<input type="radio">)
所有复选框字段（<input type="checkbox">)
所有提交输入和按钮元素（<input type="submit">, <button>）
所有图像输入（`）
所有重置按钮（<input type="reset">)
所有按钮元素和类型为 button 的输入元素（<button>,<input type="button">）
所有已启用的用户界面元素
所有已禁用的用户界面元素
所有已选中的用户界面元素—复选框和单选按钮
所有元素，包括 <input type="hidden" />，都处于隐藏状态

欲了解更多信息，请参阅下文的 自定义选择器 部分中关于 :hidden 的讨论。

自定义选择器

以下选择器被添加到 jQuery 库中，以满足 CSS 或基本 XPath 无法满足的常见 DOM 遍历需求。

偶数元素 (:even) 奇数元素 (:odd)

所有具有偶数索引的元素：

:even

所有具有奇数索引的元素：

:odd

示例

$('li:even'): 选择所有 <li> 元素匹配的元素，其 index 值为偶数
$('tr:odd'): 选择所有被 <tr> 匹配的元素，其 index 值为奇数

描述

因为自定义的 :even 和 :odd 伪类基于它们的 index 匹配元素，它们使用 JavaScript 的本机基于零的编号。

有些令人感到反直觉，因此，:even 选择第一、第三、第五（等等）个元素，而 :odd 选择第二、第四、第六（等等）个元素。

这条规则的唯一例外是 :nth-child(n) 选择器，它是基于一的。所以，:nth-child(even) 选择其父级的第二、第四、第六（等等）个子元素。还值得注意的是，在与 :nth-child() 一起使用 even 或 odd 时，没有冒号前缀。

第 N 个元素（:eq(n)，:nth(n)）

具有索引值等于 n 的元素。

举例

$('li:eq(2)'): 选择第三个 <li> 元素
$('p:nth(1)'): 选择第二个 <p> 元素

描述

由于 JavaScript 的 index 是基于零的，:eq(0) 和 :nth(0) 选择第一个匹配的元素，:eq(1) 和 :nth(1) 选择第二个，依此类推。

大于 :gt(n)

所有索引大于 N 的元素。

举例

$('li:gt(1)'): 选择所有被 <li> 元素匹配的元素，第二个之后的
$('a:gt(2)'): 选择所有被 <a> 匹配的元素，第三个之后的

描述

由于 JavaScript 的 index 是基于零的，:gt(1) 选择从第三个开始的所有匹配的元素，:gt(2) 选择从第四个开始的所有匹配的元素，依此类推。考虑以下 HTML：

<ul>
  <li id="first">index 0</li>
  <li id="second">index 1</li>
  <li id="third">index 2</li>
  <li id="fourth">index 3</li>
</ul>

$('li:gt(1)') 选择 <li id="third"> 和 <li id="fourth">，因为它们的 indexes 大于 1。

$(li:gt(2)') 选择 <li id="fourth">，因为它的 index 大于 2。

小于 : lt(n)

所有索引小于 N 的元素。

举例

$('li:lt(2)'): 选择所有被 <li> 元素匹配的元素，第三个之前的；换句话说，前两个 <li> 元素
$('p:lt(3)'): 选择所有被 <p> 元素匹配的元素，第四个之前的；换句话说，前三个 <p> 元素

描述

由于 JavaScript 的 index 是基于零的，:lt(2) 选择前两个匹配的元素，或者选择第三个之前的所有匹配的元素；:lt(3) 选择前三个匹配的元素，或者选择第四个之前的所有匹配的元素；依此类推。

第一个 :first

元素的第一个实例。

举例

$('li:first'): 选择第一个 <li> 元素
$('a:first'): 选择第一个 <a> 元素

讨论

:first 伪类是 :eq(0) 的简写。它也可以写为 :lt(1)。

最后 :last

元素的最后一个实例。

举例

$('li:last): 选择最后一个 <li> 元素
$('#container .myclass:last): 选择具有 class 为 myclass 的最后一个元素，并且是具有 id 为 container 的元素的后代

描述

虽然:first具有等效选择器（nth（0）和 eq（0）），但:last伪类在仅选择匹配元素集中的最后一个元素方面是独特的。

父元素：:parent

所有是另一个元素的父元素的元素，包括文本。

示例

$(':parent'): 选择所有是另一个元素的父元素的元素，包括文本
$(td:parent'): 选择所有是另一个元素的父元素的<td>匹配的元素，包括文本

描述

W3C 建议<p>元素至少有一个子节点，即使该子节点只是文本（参见www.w3.org/TR/html401/struct/text.html#edef P）。例如，另一方面，某些元素是空的（即没有子元素）：<input>, <img>, <br>和<hr>。

使用:parent（和:empty），一个重要的要注意的是子元素包括文本节点。

包含：:contains(text)

所有包含指定文本的元素。

示例

$('p:contains(nothing special)'): 选择所有包含文本nothing special的<p>匹配的元素
$('li:contains(second)'): 选择所有包含文本second的<li>匹配的元素

描述

匹配的文本可以出现在选择器元素中或该元素的任何后裔中。因此，示例 1 仍将选择以下段落：

<p>This paragraph is <span>nothing <strong>special</strong>
                                                          </span></p>

与属性值选择器一样，:contains()括号内的文本可以写为裸体词或用引号括起来。另外，要被选择，文本必须匹配大小写。

可见：:visible

所有可见的元素。

示例

$('li:visible'): 选择所有匹配<li>的可见元素
$('input:visible'): 选择所有匹配<input>的可见元素

讨论

:visible选择器包括具有block或inline（或任何其他值而不是none）的显示和visible的可见性的元素。排除具有type="hidden"的表单元素。

需要注意的是，即使元素的父元素（或其他祖先）的显示是none，只要它们自身的显示是block或inline（或任何其他值而不是none），它们将被:visible伪类选择。因此，元素可能被隐藏但仍然被:visible选择。

考虑以下 HTML：

<div id="parent" style="display:none">
  <div id="child" style="display:block">
  </div>
</div>

尽管由于其父元素的显示属性，<div id="child">在网页上看不见，但它仍然被$('div:visible')选择。

隐藏：:hidden

所有隐藏的元素

示例

$('li:hidden): 选择所有匹配<li>的隐藏元素
$('input:hidden): 选择所有匹配<input>的隐藏元素

描述

:hidden选择器包括具有display:none或visibility:hidden的 CSS 声明的元素，以及带有type="hidden"的表单元素。

如果一个元素之所以从视图中隐藏，是因为其父级（或其他祖先）元素具有 none 的显示或 hidden 的可见性，当其自身的 display 属性不是 none 且其 visibility 属性不是 hidden 时，它将不会被 :hidden 选择。

考虑以下 HTML：

<div id="parent" style="display:none">
  <div id="child" style="display:block">
  </div>
</div>

尽管子级 <div> 在网页上不可见是因为其父级 <div> 的显示属性，$('div:hidden') 只选择 <div id="parent">。

第三章：DOM 遍历方法

因为有火车驶入车站

但它正朝着新的目的地前进

—Devo，

“对我来说没有关系”

除了第二章中描述的选择器表达式之外，jQuery 还具有各种 DOM 遍历方法，帮助我们在文档中选择元素。这些方法提供了很大的灵活性，甚至允许我们在单个链中对多个元素集进行操作，如下所示：

$('div.section > p').addClass('lit').lt(1).addClass('profound');

有时，在选择器表达式和相应的 DOM 遍历方法之间的选择仅仅是品味的问题，但毫无疑问，结合在一起的表达式和方法集合构成了一个极为强大的工具集，可以获取我们想要的任何内容。

截至 jQuery 1.1 版本，DOM 遍历方法不会修改它们发送的 jQuery 对象。相反，会构造一个新的 jQuery 对象，其中包含对原始对象的引用。可以使用 .end 方法检索原始对象。

jQuery 工厂函数

以下函数支撑整个 jQuery 库，因为它允许我们创建所有其他方法附加到的 jQuery 对象。

$()

| 在 DOM 中创建匹配元素的新 jQuery 对象。

$(selector[, context])
$(element)
$(elementArray)
$(object)
$(html)

参数（第一个版本）

选择器：包含选择器表达式的字符串
上下文（可选）：要在其中搜索的 DOM 树的部分

参数（第二个版本）

元素：要包装在 jQuery 对象中的 DOM 元素

参数（第三个版本）

elementArray：包含要包装在 jQuery 对象中的一组 DOM 元素的数组

参数（第四个版本）

object：要克隆的现有 jQuery 对象

参数（第五个版本）

html：包含描述要创建的新 DOM 元素的 HTML 片段的字符串

返回值

新构造的 jQuery 对象。

描述

在上述列出的第一种公式中，$() 会在 DOM 中搜索与提供的选择器匹配的任何元素，并创建一个新的 jQuery 对象，该对象引用这些元素：

$('div.foo');

在第二章中，我们探讨了可在此字符串中使用的选择器表达式的范围。

选择器上下文

默认情况下，选择器会从文档根开始在 DOM 中执行搜索。但是，可以通过使用 $() 函数的可选第二个参数为搜索提供替代上下文。例如，如果在回调函数中我们希望搜索元素，则可以限制该搜索：

$('div.foo').click(function() {
  $('span', this).addClass('bar');
});

由于我们将 span 选择器限制为 this 的上下文，因此只有点击的元素内的 span 才会获得额外的类。

选择器上下文对于 XML 文档也很有用，因为它们不属于默认的 DOM 树的一部分。例如，如果 AJAX 调用返回了一个名为 data 的 XML 结构，则我们可以在该结构内执行搜索：

$('//foo/bar', data)

在内部，选择器上下文是使用 .find 方法实现的，因此 $(selector, context) 等效于 $(context).find(selector)。

注意

虽然 jQuery API 只指定 DOM 元素、DOM 元素数组和 jQuery 对象作为有效的上下文，但在实践中，选择器和 HTML 片段也可以在这里使用。

包装 DOM 元素

此函数的第二和第三种表达形式使我们能够使用其他方式已经找到的 DOM 元素或元素来创建一个 jQuery 对象。此功能的常见用法是对作为关键字this传递给回调函数的元素执行 jQuery 方法：

$('div.foo').click(function() {
  $(this).slideUp();
});

该示例导致元素在单击时使用滑动动画隐藏。在调用 jQuery 方法之前，必须将元素包装在 jQuery 对象中，因为处理程序将接收关键字this中的单击项目作为裸 DOM 元素。

克隆 jQuery 对象

当一个 jQuery 对象被传递给$()作为参数时，将创建一个引用相同 DOM 元素的新 jQuery 对象。然后可以修改初始对象而不影响新对象。

创建新元素

如果将字符串作为参数传递给$()，jQuery 会检查字符串是否看起来像 HTML。如果不是，则将字符串解释为选择器表达式，如上所述。但是如果该字符串看起来像 HTML 片段，jQuery 会尝试根据 HTML 描述创建新的 DOM 元素。然后将创建并返回一个引用这些元素的 jQuery 对象。我们可以对此对象执行任何通常的 jQuery 方法：

$('<p>My <em>new</em> paragraph</p>').appendTo('body');

实际创建元素的工作由浏览器的innerHTML机制处理。具体来说，jQuery 创建一个新的<div>元素，并将元素的 innerHTML 属性设置为传入的 HTML 片段。这意味着为了确保跨平台兼容性，片段必须是格式良好的。始终应将可以包含其他元素的标签与闭合标签配对：

$('<a></a>');

不能包含元素的标签应快速关闭：

$('<img />');

过滤方法

这些方法会从由 jQuery 对象匹配的集合中移除元素。

.filter()

| 将匹配选择器或通过函数测试的元素集减少到那些匹配的元素。

.filter(selector)
.filter(function)

参数（第一版本）

选择器：包含要与元素匹配的选择器表达式的字符串

参数（第二版本）

函数：用作集合中每个元素的测试的函数

返回值

新的 jQuery 对象。

描述

给定表示一组 DOM 元素的 jQuery 对象，.filter方法会根据匹配元素的子集构造一个新的 jQuery 对象。针对每个元素测试提供的选择器；所有匹配选择器的元素都将包括在结果中。

考虑一个带有简单列表的页面：

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
  <li>list item 6</li>
</ul>

我们可以将此方法应用于列表项集：

$('li').filter(':even')

此调用的结果是一个包装项1, 3和5的 jQuery 对象，因为它们匹配选择器（请记住，:even 和:odd 使用基于 0 的索引）。

使用过滤函数

此方法的第二种形式允许我们针对函数而不是选择器来过滤元素。假设我们有一个更复杂的 HTML 片段：

<ul>
  <li><strong>list</strong> item 1 - one strong</li>
  <li><strong>list</strong> item <strong>2</strong> - two <span>strongs</span></li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
  <li>list item 6</li>
</ul>

我们可以选择列表项，然后根据它们的内容进行过滤：

$('li').filter(function(index) {
  return $("strong", this).length == 1;
})

这个表达式的结果将只是第一个列表项，因为它只包含一个 <strong> 标签。在过滤函数中，this依次引用每个 DOM 元素。传递给函数的参数告诉我们该 DOM 元素在由 jQuery 对象匹配的集合中的索引。

我们还可以利用通过函数传递的index：

$('li').filter(function(index) {
  return index % 3 == 2;
})

这个表达式的结果将是第三和第六个列表项，因为它使用模运算符（%）来选择每个索引值除以 3 余数为 2 的项。

.not()

| 从匹配元素的集合中移除元素。

.not(selector) 
.not(elements)

参数（第一个版本）

selector: 包含要匹配元素的选择器表达式的字符串

参数（第二个版本）

elements: 一个或多个要从匹配集合中删除的 DOM 元素

返回值

新的 jQuery 对象。

描述

给定一个表示一组 DOM 元素的 jQuery 对象，.not 方法会从匹配元素的子集构造一个新的 jQuery 对象。提供的选择器会被测试以匹配每个元素；不匹配选择器的元素将包含在结果中。

考虑一个简单列表的页面：

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>

我们可以将此方法应用于列表项集合：

$('li').not(':even')

这个调用的结果是一个包含项2和4的 jQuery 对象，因为它们不匹配选择器（请回忆一下，:even 和 :odd 使用的是基于 0 的索引）。

移除特定元素

.not 方法的第二个版本允许我们从匹配集合中移除元素，假设我们以其他方式找到了这些元素。例如，假设我们的列表中的一个项目有一个标识符：

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li id="notli">list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>

我们可以使用原生 JavaScript 的 getElementById 函数获取第三个列表项，然后从 jQuery 对象中移除它：

$('li').not(document.getElementById('notli'))

此表达式产生一个匹配项 1, 2, 4 和 5 的 jQuery 对象。我们本可以用更简单的 jQuery 表达式来完成同样的事情，但是这种技术在其他库提供对普通 DOM 节点的引用时可能会有用。

.contains()

| 将匹配元素集合减少到包含指定文本的元素。

.contains(text)

参数

text: 要搜索的文本字符串

返回值

新的 jQuery 对象。

描述

给定一个表示一组 DOM 元素的 jQuery 对象，.contains 方法会从匹配元素的子集构造一个新的 jQuery 对象。提供的文本会在每个元素中进行搜索；包含文本的所有元素（即使在后代元素中）都将包含在结果中。

考虑一个简单列表的页面：

<ul>
  <li>list item 1</li>
  <li>list <strong>item</strong> 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>

我们可以将此方法应用于列表项集合：

$('li').contains('item 2')

此调用的结果是包含指定文本的item 2的 jQuery 对象。使用 jQuery 的.text方法执行搜索，因此搜索文本可以位于匹配元素或其任何后代的文本字符串的连接中的任何位置。

.eq()

| 将匹配元素的集合减少到指定索引处的一个元素。

.eq(index)

参数

index：指示元素的从 0 开始计数的位置的整数

返回值

新的 jQuery 对象。

描述

给定表示一组 DOM 元素的 jQuery 对象，.eq方法从匹配元素中构造一个新的 jQuery 对象。提供的索引标识集合中此元素的位置。

考虑一个包含简单列表的页面：

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>

我们可以将此方法应用于列表项的集合：

$('li').eq(2)

此调用的结果是包含item 3的 jQuery 对象。注意，提供的索引是从 0 开始计数的，并且是指 jQuery 对象内元素的位置，而不是DOM 树内的位置。

.lt()

| 将匹配元素的集合减少到指定索引之前的元素。

.lt(index)

参数

index：指示选择元素之前的从 0 开始计数的位置的整数

返回值

新的 jQuery 对象。

描述

给定表示一组 DOM 元素的 jQuery 对象，.lt方法从匹配元素的子集中构造一个新的 jQuery 对象。提供的index标识集合中一个元素的位置；此元素之前的所有元素都将包含在结果中。

考虑一个包含简单列表的页面：

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>

我们可以将此方法应用于列表项的集合：

$('li').lt(2)

此调用的结果是包含项目1和2的 jQuery 对象。注意，提供的索引是从 0 开始计数的，并且是指 jQuery 对象内的元素位置，而不是DOM 树内的位置。

.gt()

| 将匹配元素的集合减少到指定索引之后的元素。

.gt(index)

参数

index：指示选择元素之后的从 0 开始计数的位置的整数

返回值

新的 jQuery 对象。

描述

给定表示一组 DOM 元素的 jQuery 对象，.gt方法从匹配元素的子集中构造一个新的 jQuery 对象。提供的index标识集合中一个元素的位置；此元素之后的所有元素都将包含在结果中。

考虑一个包含简单列表的页面：

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>

我们可以将此方法应用于列表项的集合：

$('li').gt(2)

此调用的结果是包含项目 4 和 5 的 jQuery 对象。注意，提供的索引是从 0 开始计数的，并且是指 jQuery 对象内的元素位置，而不是DOM 树内的位置。

树遍历方法

这些方法利用 DOM 树的结构来定位一组新的元素。

.find()

| 获取当前匹配的每个元素的后代，该后代经过选择器筛选。

.find(selector)

参数

selector：包含要匹配元素的选择器表达式的字符串

返回值

新的 jQuery 对象。

描述

给定一个代表一组 DOM 元素的 jQuery 对象，.find 方法允许我们在 DOM 树的后代中搜索这些元素，并从匹配的元素构建一个新的 jQuery 对象。.find 和 .children 方法类似，不同之处在于后者只向下遍历 DOM 树的一级。

该方法接受与我们可以传递给 $() 函数的相同类型的选择器表达式。将通过测试它们是否与此选择器匹配来过滤元素。

考虑一个带有基本嵌套列表的页面：

<ul class="level-1">
  <li class="item-i">I</li>
  <li class="item-ii">II
    <ul class="level-2">
      <li class="item-a">A</li>
      <li class="item-b">B
        <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>
</ul>

如果我们从项目 II 开始，我们可以找到其中的列表项：

$('li.item-ii').find('li')

这次调用的结果是一个包含项 A, B, 1, 2, 3 和 C 的 jQuery 对象。即使项目 II 匹配了选择器表达式，它也不会被包含在结果中；只有后代被视为匹配项的候选者。

如 jQuery 工厂函数 部分所讨论的，选择器上下文是使用 .find 方法实现的；因此，$('li.item-ii').find('li') 等效于 $('li', 'li.item-ii')。

注意

与其它树遍历方法不同，在调用 .find() 时需要选择器表达式。如果我们需要检索所有后代元素，可以传递选择器 * 来完成此操作。

.children()

| 获取匹配元素集合中每个元素的子元素，可选择性地通过选择器进行过滤。

.children([selector])

参数

选择器（可选）：包含一个选择器表达式以匹配元素的字符串

返回值

新的 jQuery 对象。

描述

给定一个代表一组 DOM 元素的 jQuery 对象，.children 方法允许我们在 DOM 树中搜索这些元素的直接子元素，并从匹配的元素构建一个新的 jQuery 对象。.find 和 .children 方法类似，不同之处在于后者只向下遍历 DOM 树的一级。

该方法可选择地接受与我们可以传递给 $() 函数的相同类型的选择器表达式。如果提供了选择器，则将通过测试它们是否与选择器匹配来过滤元素。

考虑一个带有基本嵌套列表的页面：

<ul class="level-1">
  <li class="item-i">I</li>
  <li class="item-ii">II
    <ul class="level-2">
      <li class="item-a">A</li>
      <li class="item-b">B
        <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>
</ul>

如果我们从第二级列表开始，我们可以找到它的子元素：

$('ul.level-2').children()

这次调用的结果是一个包含项 A, B 和 C 的 jQuery 对象。由于我们没有提供选择器表达式，所有子元素都是对象的一部分。如果我们提供了一个，只有这三个中的匹配项将被包含在内。

.parents()

| 获取匹配元素集合中每个元素的祖先元素，可选择性地通过选择器进行过滤。

.parents([selector])

参数

选择器（可选）：包含一个选择器表达式以匹配元素的字符串

返回值

新的 jQuery 对象。

描述

给定表示一组 DOM 元素的 jQuery 对象，.parents 方法允许我们在 DOM 树中搜索这些元素的祖先，并从匹配的元素构造一个新的 jQuery 对象。.parents() 和 .parent() 方法是类似的，不同之处在于后者只在 DOM 树中向上移动一个级别。

方法可选地接受与我们可以传递给 $() 函数的相同类型的选择器表达式。如果提供了选择器，则将通过测试它们是否匹配选择器来过滤元素。

考虑一个上面有一个基本嵌套列表的页面：

<ul class="level-1">
  <li class="item-i">I</li>
  <li class="item-ii">II
    <ul class="level-2">
      <li class="item-a">A</li>
      <li class="item-b">B
        <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>
</ul>

如果我们从项目 A 开始，我们可以找到它的祖先：

$('li.item-a').parents()

这个调用的结果是一个包装着 level-2 列表、item ii 和 level-1 列表的 jQuery 对象（一直向上直到 <html> 元素的 DOM 树）。因为我们没有提供选择器表达式，所有祖先都是对象的一部分。如果我们提供了一个，只有这些匹配的项会被包含在其中。

.parent()

| 获取当前匹配的每个元素的父级，可以选择使用选择器进行过滤。

.parent([selector])

参数

选择器（可选）：包含要将元素与之匹配的选择器表达式的字符串。

返回值

新的 jQuery 对象。

描述

给定表示一组 DOM 元素的 jQuery 对象，.parent 方法允许我们在 DOM 树中搜索这些元素的父级，并从匹配的元素构造一个新的 jQuery 对象。.parents 和 .parent 方法是类似的，不同之处在于后者只在 DOM 树中向上移动一个级别。

方法可选地接受与我们可以传递给 $() 函数的相同类型的选择器表达式。如果提供了选择器，则将通过测试它们是否匹配选择器来过滤元素。

考虑一个上面有一个基本嵌套列表的页面：

<ul class="level-1">
  <li class="item-i">I</li>
  <li class="item-ii">II
    <ul class="level-2">
      <li class="item-a">A</li>
      <li class="item-b">B
        <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>
</ul>

如果我们从项目 A 开始，我们可以找到它的父元素：

$('li.item-a').parent()

这个调用的结果是一个包装着 level-2 列表的 jQuery 对象。因为我们没有提供选择器表达式，父元素明确包括在对象中。如果我们提供了一个，那么在包含之前会对元素进行匹配测试。

.siblings()

| 获取匹配元素集合中每个元素的同级，可以选择使用选择器进行过滤。

.siblings([selector])

参数

选择器（可选）：包含要将元素与之匹配的选择器表达式的字符串

返回值

新的 jQuery 对象。

描述

给定表示一组 DOM 元素的 jQuery 对象，.siblings 方法允许我们在 DOM 树中搜索这些元素的兄弟元素，并从匹配的元素构造一个新的 jQuery 对象。

方法可选地接受与我们可以传递给 $() 函数的相同类型的选择器表达式。如果提供了选择器，则将通过测试它们是否匹配选择器来过滤元素。

考虑一个上面有一个简单列表的页面：

<ul>
   <li>list item 1</li>
   <li>list item 2</li>
   <li class="third-item">list item 3</li>
   <li>list item 4</li>
   <li>list item 5</li>
</ul>

如果我们从第三个项目开始，我们可以找到它的兄弟：

$('li.third-item').siblings()

此调用的结果是一个包裹着1, 2, 4和5项的 jQuery 对象。因为我们没有提供选择器表达式，所以所有的兄弟元素都是对象的一部分。如果我们提供了一个选择器，那么这四个元素中的匹配项才会被包含。

在兄弟元素中不包括原始元素，这一点在我们希望找到 DOM 树特定级别的所有元素时很重要。

.prev()

| 获取匹配元素集合中每个元素的紧邻前序兄弟元素，可选择性地通过选择器进行过滤。

.prev([selector])

参数

selector（可选）: 包含用于匹配元素的选择器表达式的字符串

返回值

新的 jQuery 对象。

描述

给定一个代表一组 DOM 元素的 jQuery 对象，.prev方法允许我们在 DOM 树中搜索这些元素的前驱，并从匹配的元素构建一个新的 jQuery 对象。

此方法可选择性地接受与我们可以传递给$()函数的相同类型的选择器表达式。如果提供了选择器，则将通过测试它们是否与选择器匹配来对元素进行过滤。

考虑一个简单列表的页面：

<ul>
   <li>list item 1</li>
   <li>list item 2</li>
   <li class="third-item">list item 3</li>
   <li>list item 4</li>
   <li>list item 5</li>
</ul>

如果我们从第三项开始，我们可以找到它之前的元素：

$('li.third-item').prev()

此调用的结果是一个包裹着item 2的 jQuery 对象。因为我们没有提供选择器表达式，所以这个前序元素明确地被包含在对象中。如果我们提供了一个选择器，那么在包含之前会测试该元素是否匹配。

.next()

| 获取匹配元素集合中每个元素的紧邻后续兄弟元素，可选择性地通过选择器进行过滤。

.next([selector])

参数

selector（可选）: 包含用于匹配元素的选择器表达式的字符串

返回值

新的 jQuery 对象。

描述

给定一个代表一组 DOM 元素的 jQuery 对象，.next方法允许我们在 DOM 树中搜索这些元素的后继，并从匹配的元素构建一个新的 jQuery 对象。

考虑一个简单列表的页面：

<ul>
   <li>list item 1</li>
   <li>list item 2</li>
   <li class="third-item">list item 3</li>
   <li>list item 4</li>
   <li>list item 5</li>
</ul>

如果我们从第三项开始，我们可以找到它之后的元素：

$('li.third-item').next()

此调用的结果是一个包裹着item 4的 jQuery 对象。因为我们没有提供选择器表达式，所以这个后续元素明确地被包含在对象中。如果我们提供了一个选择器，那么在包含之前会测试该元素是否匹配。

杂项遍历方法

这些方法提供了在 jQuery 对象中操作匹配的 DOM 元素集合的其他机制。

.add()

| 将元素添加到匹配元素集合中。

.add(selector)
.add(elements)
.add(html)

参数（第一版本）

selector: 包含用于匹配额外元素的选择器表达式的字符串

参数（第二版本）

元素：要添加到匹配元素集的一个或多个元素

参数（第三个版本）

html：要添加到匹配元素集的 HTML 片段

返回值

新的 jQuery 对象。

描述

给定一个代表一组 DOM 元素的 jQuery 对象，.add方法从这些元素的并集和传递给该方法的元素构造一个新的 jQuery 对象。.add的参数几乎可以是$()接受的任何东西，包括一个 jQuery 选择器表达式、对 DOM 元素的引用或者一个 HTML 片段。

考虑一个页面，有一个简单的列表和一个随后的段落：

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
</ul>
<p>a paragraph</p>

我们可以通过使用选择器或对 DOM 元素本身的引用作为.add方法的参数来选择列表项，然后选择段落：

$('li').add('p') or
$('li').add(document.getElementsByTagName('p')[0])

此调用的结果是一个包装了所有四个元素的 jQuery 对象。

使用 HTML 片段作为.add方法的参数（如第三个版本中所示），我们可以动态创建额外的元素，并将这些元素添加到匹配的元素集中。举个例子，假设我们想要将一个foo类添加到列表项、段落以及一个新创建的段落中：

$('li').add('p').add('<p id="new">new paragraph</p>').addClass('foo')

尽管新的段落已经被创建并且其foo类已添加，但它仍然不会出现在页面上。为了将其放置在页面上，我们可以在链中添加一个插入方法。

关于插入方法的更多信息，请参阅第四章。

.is()

| 检查当前匹配的元素集是否与选择器匹配，并在至少有一个元素匹配选择器时返回true。

.is(selector)

参数

选择器：一个包含用于匹配元素的选择器表达式的字符串。

返回值

一个布尔值，指示元素是否与选择器匹配。

描述

与本章其他方法不同，.is()不会创建新的 jQuery 对象。相反，它允许我们在不修改 jQuery 对象的情况下测试其内容。这在回调函数中经常很有用，比如事件处理程序。

假设我们有一个列表，其中两个项目包含一个子元素：

<ul>
  <li>list <strong>item 1</strong></li>
  <li><span>list item 2</span></li>
  <li>list item 3</li>
</ul>

我们可以将单击处理程序附加到<ul>元素上，然后限制代码只在单击列表项本身时触发，而不是其子元素之一时触发：

$('ul').click(function(event) {
  if ($(event.target).is('li') ) {
    $(event.target).remove();
  }
});

现在，当用户在第一项中单击list这个词或者在第三项的任何位置单击时，被点击的列表项将会从文档中移除。然而，当用户在第一项中的item 1或者在第二项的任何位置单击时，不会发生任何事情，因为对于这些事件的目标分别是<strong>和<span>。

.end()

| 结束当前链中最近的过滤操作，并将匹配的元素集返回到其先前的状态。

.end()

参数

无。

返回值

前一个 jQuery 对象。

描述

本章中的大多数方法操作一个 jQuery 对象并产生一个新的对象，匹配不同的 DOM 元素集。当这种情况发生时，就好像一个新的元素集被推送到对象内部维护的堆栈上一样。每个连续的过滤方法都会将一个新的元素集推送到堆栈上。如果我们需要一个旧的元素集，可以使用 .end() 将集合从堆栈中弹出。

假设我们在页面上有几个简短的列表：

<ul class="first">
   <li class="foo">list item 1</li>
   <li>list item 2</li>
   <li class="bar">list item 3</li>
</ul>
<ul class="second">
   <li class="foo">list item 1</li>
   <li>list item 2</li>
   <li class="bar">list item 3</li>
</ul>

.end 方法主要在利用 jQuery 的链接属性时很有用。当不使用链接时，通常可以通过变量名调用前一个对象，这样我们就不需要操作堆栈。但是，使用 .end()，我们可以将所有方法调用串在一起：

$('ul.first').find('.foo').addClass('some-class').end() .find('.bar').addClass('another-class');

此链在第一个列表中搜索具有类 foo 的项目，并向其添加类 some-class。然后 .end() 将对象返回到调用 .find() 之前的状态，因此第二个 .find() 不仅在该列表的 <li class="foo"> 中查找 .bar，而且在 <ul class="first"> 中查找，然后将类 another-class 添加到匹配的元素上。结果是第一个列表的项目 1 和 3 添加了一个类，而第二个列表的项目没有添加任何类。

长长的 jQuery 链可以被视为一个结构化的代码块，其中过滤方法提供了嵌套块的开头，而 .end 方法则关闭它们：

$('#example-traversing-end ul.first').find('.foo')
  .addClass('some-class')
    .end()
      .find('.bar')
        .addClass('another-class');
.end();

最后一个 .end() 是不必要的，因为我们随后立即丢弃了 jQuery 对象。但是，当代码以这种形式编写时，.end() 提供了视觉对称性和闭合性——至少在某些开发人员眼中，这样做可以使程序更易读。

第四章： DOM 操作方法

洗手不干拯救灾厄

他让自己处于一种改变的状态。

-Devo，

“机械狂热男孩”

本章中的所有方法都以某种方式操作 DOM。其中一些只是改变元素的某个属性，而另一些则设置元素的样式属性。还有一些修改了整个元素（或元素组）本身-插入、复制、删除等等。

这些方法中的一些，如.attr()、.html()和.val()，也充当获取器，从 DOM 元素中检索信息以供以后使用。

通用属性

.attr(attribute)

| 获取匹配元素集合中第一个元素的属性值。

.attr(attribute)

参数

属性：要获取的属性名称

返回值

包含属性值的字符串。

描述

我们可以利用原生 JavaScript 函数getAttribute非常容易地获取元素的任何属性，而无需使用 jQuery。此外，这些属性中的大多数都可以通过 JavaScript 作为 DOM 节点属性使用。其中一些更常见的属性是：

className
标签名
id
href
title
rel
src

让我们考虑以下链接：

<a id="myid" href="/archives/jquery-links.htm" title="A few jQuery links from long ago">old jQuery links</a>

使用 jQuery 的.attr方法获取元素的属性有两个主要优点：

便利性：它可以链接到 jQuery 对象。
跨浏览器一致性：.attr方法始终获取实际的属性文本，而不管使用哪个浏览器。另一方面，当使用getAttribute()获取诸如href、src和cite等属性时，一些浏览器（如正确地）获取属性文本，而另一些浏览器获取绝对 URL，而不管属性是绝对 URL 还是相对 URL。

为了使用getAttribute()或元素的任何属性替换.attr()，我们需要确保我们使用的是 DOM 节点，而不是 jQuery 对象。要将 jQuery 对象中表示的第一个元素转换为 DOM 节点，我们可以使用[0]或.get(0)。

以下所有用getAttribute('title')获取其title属性：

document.getElementById('myid').getAttribute('title')
$('#myid').get(0).getAttribute('title')
$('#myid')[0].getAttribute('title')

通过任何这些选项，我们都可以用.title替换.getAttribute('title')。

.attr()

| 设置匹配元素集合中一个或多个属性。

.attr(attribute, value)
.attr(map)
.attr(attribute, function)

参数（第一个版本）

属性：要设置的属性名称
值：要为属性设置的值

参数（第二个版本）

映射：要设置的属性-值对映射

参数（第三个版本）

属性：要设置的属性名称
函数：返回要设置的值的函数

返回值

jQuery 对象，用于链接目的。

描述

.attr方法是一种方便而强大的设置属性值的方式，尤其是在设置多个属性或函数返回的值时。我们来考虑以下图片：

<img id="greatphoto" src="img/brush-seller.jpg" alt="brush seller" />

.attr(attribute, value)

我们通过在.attr方法的括号内放置'alt'后跟逗号和新值来更改alt属性：

$('#greatphoto').attr('alt', 'Beijing Brush Seller');

我们可以通过相同的方式添加一个属性：

$('#greatphoto').attr('title', 'Beijing Brush Seller photo by Kelly Clark');

`.attr({map})`

要同时更改alt属性并添加title属性，我们可以将名字和值的两套都一次传递到方法中，使用映射（JavaScript 对象语法）。我们用冒号将每个属性连接到其值，并用逗号分隔每对：

$('#greatphoto').attr({alt:'Beijing Brush Seller', title: 'Beijing Brush Seller photo by Kelly Clark'});

在设置多个属性时，围绕属性名称的引号是可选的。

`.attr(属性, 函数)`

通过使用函数设置属性，我们可以将新值与现有值连接起来：

$('#greatphoto').attr({alt: function() {return 'Beijing ' + this.alt}, title: function() {return 'Beijing ' + this.alt + ' photo by Kelly Clark'}});

当我们将属性应用于多个元素时，函数的这种用法甚至更有用。

`.removeAttr()`

| 从匹配元素集中的每个元素中删除一个属性。

.removeAttr(attribute)

参数

属性：属性

返回值

用于链式调用的 jQuery 对象。

描述

.removeAttr方法使用 JavaScript 的removeAttribute函数，但它具有可以链接到 jQuery 选择器表达式的优势。

样式属性

`.css(属性)`

| 获取匹配元素集中第一个元素的样式属性值。

.css(property)

参数

属性：CSS 属性

返回值

包含 CSS 属性值的字符串。

描述

.css方法是一种方便的方法，可以从第一个匹配的元素中获取样式属性，尤其是考虑到不同浏览器对某些属性使用不同术语的情况。例如，Internet Explorer 的 DOM 实现将float属性称为styleFloat，而基于 Mozilla 的浏览器将其称为cssFloat。.css方法考虑到这些差异，无论我们使用哪个术语，都会产生相同的结果。例如，一个向左浮动的元素将为以下三行中的每行返回字符串left：

$('div.left').css('float');
$('div.left').css('cssFloat');
$('div.left').css('styleFloat');

同样，jQuery 可以同样解释多词属性的 CSS 和 DOM 格式。例如，jQuery 能正确理解和返回.css('background-color')和.css('backgroundColor')的正确值。

`.css()`

| 设置匹配元素集的一个或多个 CSS 属性。

.css(property, value)
.css(map)
.css(property, function)

参数（第一个版本）

属性：CSS 属性名称
值：要设置的值

参数（第二个版本）

map：要设置的属性值对的映射

参数（第三个版本）

属性：CSS 属性名称
函数：返回要设置的值

返回值

用于链式调用的 jQuery 对象。

描述

与.attr方法一样，.css方法使得设置元素属性变得快速而简便。这个方法可以接受以逗号分隔的键值对或以冒号分隔的键值对的映射（JavaScript 对象表示法）。

此外，jQuery 可以同样解释多词属性的 CSS 和 DOM 格式。例如，jQuery 理解并返回了 .css({'background-color':'#ffe', 'border-left': '5px solid #ccc'}) 和 .css({backgroundColor:'#ffe', borderLeft: '5px solid #ccc'}) 两者的正确值。请注意，使用 DOM 标记，属性名称周围的引号是可选的，但使用 CSS 标记时，由于名称中的连字符，它们是必需的。

由于 .css 方法在内部调用 .attr 方法，我们也可以将函数作为属性值传递：

$('div.example').css('width', function(index) {
  return index * 50;
});

此示例将匹配元素的宽度设置为逐渐增大的值。

.height()

| 获取匹配元素集中第一个元素的当前计算高度。

.height()

参数

无。

返回值

元素的高度，以像素为单位。

描述

.css('height') 和 .height() 之间的区别在于后者返回无单位的像素值（例如，400），而前者返回单位完整的值（例如，400px）。当需要在数学计算中使用元素的高度时，推荐使用 .height 方法。

.height(value)

| 设置匹配元素集中每个元素的 CSS 高度。

.height(value)

参数

value: 表示像素数量的整数，或附加了可选计量单位的整数

返回值

用于链接目的的 jQuery 对象。

描述

与 .css('height','value') 不同，使用 .height('value')，值可以是字符串（数字和单位）或数字。如果只提供了数字作为值，则 jQuery 假定为像素单位。

.width()

| 获取匹配元素集中第一个元素的当前计算宽度。

.width()

参数

无。

返回值

元素的宽度，以像素为单位。

描述

.css(width) 和 .width() 之间的区别在于后者返回无单位的像素值（例如，400），而前者返回单位完整的值（例如，400px）。当需要在数学计算中使用元素的宽度时，推荐使用 .width 方法。

.width(value)

| 设置匹配元素集中每个元素的 CSS 宽度。

.width(value)

参数

value: 表示像素数量的整数，或附加了可选计量单位的整数

返回值

用于链接目的的 jQuery 对象。

描述

与 .css('width','value') 不同，使用 .width('value')，值可以是字符串（数字和单位）或数字。如果只提供了数字作为值，则 jQuery 假定为像素单位。

类属性

.addClass()

| 向匹配元素集中的每个元素添加一个或多个类。

.addClass(class)

参数

class: 要添加到每个匹配元素的 class 属性的一个或多个类名

返回值

用于链接目的的 jQuery 对象。

描述

需要注意的是，此方法不会替换类；它只是添加类。

可以一次添加多个类，以空格分隔，到匹配元素集，例如：$('p').addClass('myclass yourclass')。

这种方法通常与.removeClass()一起使用，以将元素的类从一个类切换到另一个类，如下所示：

$('p').removeClass('myclass noclass').addClass('yourclass')

在这里，所有段落中都将删除myclass和noclass类，而添加yourclass类。

.removeClass()

| 从匹配元素集的每个元素中删除一个或所有类。

.removeClass([class])

参数

类（可选）：要从每个匹配元素的类属性中删除的类名

返回值

用于链式操作的 jQuery 对象。

描述

如果在参数中包含类名，则只从匹配元素集中删除该类。如果在参数中未指定类名，则将删除所有类。

可以一次从匹配元素集中删除多个类，例如：$('p').removeClass('myclass yourclass')。

这种方法通常与.addClass()一起使用，以将元素的类从一个类切换到另一个类，例如：

$('p').removeClass('myclass').addClass('yourclass')

在这里，所有段落都将删除myclass类，而添加yourclass类。

要用另一个类替换所有现有类，可以使用.attr('class','new-class')。

.toggleClass()

| 如果类存在，.toggleClass() 将删除它从匹配元素集中的每个元素；如果不存在，它将添加该类。

.toggleClass(class)

参数

class: 在匹配集合中的每个元素的类属性中要切换的类名

返回值

用于链式操作的 jQuery 对象。

描述

此方法以其参数作为一个或多个类名。如果匹配集中的元素已经具有该类，则删除它；如果元素没有该类，则添加它。例如，我们可以将.toggleClass()应用到一个简单的<div>上：

<div class="tumble">Some text.</div>

第一次应用$('div.tumble').toggleClass('bounce')后，我们得到以下结果：

<div class="tumble bounce">Some text.</div>

第二次应用$('div.tumble').toggleClass('bounce')后，<div>类返回到单个的tumble值：

<div class="tumble">Some text.</div>

对同一个<div>应用.toggleClass('bounce spin')可交替呈现<div class="tumble bounce spin'>和<div class="tumble'>。

DOM 替换

.html()

| 获取匹配元素集中第一个元素的 HTML 内容。

.html()

参数

无。

返回值

包含元素的 HTML 表示的字符串。

描述

此方法不适用于 XML 文档。

在 HTML 文档中，我们可以使用.html方法来获取任何元素的内容。如果我们的选择器表达式匹配多个元素，则只返回第一个元素的 HTML 内容。考虑以下代码：

$('div.demo-container').html();

要检索以下 <div> 标记的内容，它必须是文档中的第一个标记：

<div class="demo-container">
  <div class="demo-box">Demonstration Box
  </div>
</div>

结果如下所示：

<div class="demo-box">Demonstration Box</div>

.html(HTML)

| 设置匹配元素集中每个元素的 HTML 内容。

.html(HTML)

参数

HTML: 要设置为每个匹配元素的内容的 HTML 字符串

返回值

jQuery 对象，用于链接目的。

描述

.html(HTML) 在 XML 文档中不可用。

当我们使用 .html(HTML) 来设置元素内容时，任何已在这些元素中的内容都会完全被新内容替换。考虑以下 HTML：

<div class="demo-container">
  <div class="demo-box">Demonstration Box
  </div>
</div>

我们可以这样设置 <div class="demo-container"> 的 HTML 内容：

$('div.demo-container'>.html('<p>All new content. <em>You bet!</em>');

那行代码将会替换 <div class="demo-container"> 中的所有内容：

<div class="demo-container"><p>All new content. <em>You bet!</em></div>

`.text()`

| 获取匹配元素集合中每个元素及其后代的组合文本内容。

.text()

参数

无。

返回值

包含匹配元素的组合文本内容的字符串。

描述

与 .html 方法不同，.text 方法可用于 XML 和 HTML 文档中。.text 方法的结果是一个包含所有匹配元素的组合文本的字符串。考虑以下 HTML：

<div class="demo-container">
  <div class="demo-box">Demonstration Box
  </div>
  <ul>
    <li>list item 1</li>
    <li>list <strong>item</strong> 2</li>
  </ul>
</div>

代码 $('div.demo-container').text() 将产生以下结果：

Demonstration Boxlist item 1list item 2

.text(text)

| 设置匹配元素集合中每个元素的内容为指定文本。

.text(text)

参数

text: 要设置为每个匹配元素内容的文本字符串

返回值

jQuery 对象，用于链接目的。

描述

与 .html(html) 方法不同，.text(text) 方法可用于 XML 和 HTML 文档中。

我们需要注意，此方法将<和>分别替换为&lt;和&gt;。考虑以下 HTML：

<div class="demo-container">
  <div class="demo-box">Demonstration Box
  </div>
  <ul>
    <li>list item 1</li>
    <li>list <strong>item</strong> 2</li>
  </ul>
</div>

代码 $('div.demo-container').text('<p>This is a test.</p>') 将产生以下 HTML：

<div class="demo-container">&lt;p&gt;This is a test.&lt;/p&gt;</div>

在渲染的页面上，它会呈现为标签被暴露的样子，就像这样：

<p>This is a test</p>

`.val()`

| 获取匹配元素集合中第一个元素的当前值。

.val()

参数

无。

返回值

包含元素值的字符串。

描述

.val 方法主要用于获取表单元素的值。

.val(value)

| 设置匹配元素集合中每个元素的值。

.val(value)

参数

value: 要设置为每个匹配元素值属性的文本字符串

返回值

jQuery 对象，用于链接目的。

描述

这个方法通常用于设置表单字段的值。

DOM 插入，内部

.prepend()

| 在匹配元素集合中的每个元素的开头插入指定参数指定的内容。

.prepend(content)

参数

content: 要在匹配元素集合中的每个元素的开头插入的元素、HTML 字符串或 jQuery 对象

返回值

jQuery 对象，用于链接目的。

描述

.prepend 和 .prependTo 方法执行相同的任务。唯一的区别在于语法，具体来说是在内容和目标的放置上。使用 .prepend() 方法，方法之前的选择器表达式是插入内容的容器。另一方面，.prependTo() 的语法则相反，内容出现在方法之前，可以是选择器表达式，也可以是即时创建的标记，在目标容器中插入。

考虑以下 HTML：

<div class="demo-container">
  <div class="demo-box">Demonstration Box
  </div> 
</div>

两个 <div>，加上一点 CSS，呈现在页面右侧，如下所示：

关于.prepend()的描述

我们可以将 HTML 结构插入到 <div class="demo-box"> 的开头，如下所示：

$('div.demo-box').prepend('<div class="insertion">This text was <strong>inserted</strong></div>');

新的 <div> 和 <strong> 元素以及文本节点是动态创建的并添加到 DOM 中。结果是一个新的 <div> 位于 演示框 文本之前：

关于.prepend()的描述

已经存在于页面上的元素（或元素数组）也可以移动到 <div class="demo-box"> 的开头。例如，以下代码通过使用 jQuery 对象将文档的第一个段落移动到目标位置：

$('div.demo-box').prepend( $('p:eq(0)') );

`.prependTo()`

| 将匹配元素集合中的每个元素插入到目标的开头。

.prependTo(target)

参数

target: 选择器、元素、HTML 字符串或 jQuery 对象；匹配的元素集将插入到由此参数指定的元素的开头

返回值

用于链式操作的 jQuery 对象。

描述

.prepend 和 .prependTo 方法执行相同的任务。唯一的区别在于语法 - 具体来说，在内容和目标的放置方面。使用 .prepend()，在方法之前的选择器表达式是要插入内容的容器。另一方面，使用 .prependTo()，内容在方法之前，可以是选择器表达式，也可以是动态创建的标记，它被插入到目标容器中。

考虑以下 HTML：

<div class="demo-container">
  <div class="demo-box">Demonstration Box
  </div> 
</div>

两个 <div>，加上一点 CSS，呈现在页面右侧，如下所示：

使用 .prependTo()，我们可以将 HTML 结构插入到 <div class="demo-box"> 的开头，如下所示：

$('<div class="insertion">This text was <strong>inserted</strong> </div>').prependTo('div.demo-box');

新的 <div> 和 <strong> 元素，以及文本节点，是动态创建的并添加到 DOM 中。结果是一个新的 <div> 位于 演示框 文本之前：

已经存在于页面上的元素（或元素数组）也可以移动到 <div class="demo-box"> 的开头。例如，以下代码通过使用选择器表达式将文档的第一个段落移动到目标位置：

$('p:eq(0)').prependTo('div.demo-box');

`.append()`

| 将参数指定的内容插入到匹配元素集合中每个元素的末尾。

.append(content)

参数

content: 要插入到匹配元素集合中每个元素末尾的选择器、元素、HTML 字符串或 jQuery 对象。

返回值

用于链式操作的 jQuery 对象。

描述

.append 和 .appendTo 方法执行相同的任务。唯一的区别在于语法——具体来说，是内容和目标的放置位置。使用 .append()，方法前面的选择器表达式是要插入内容的容器。另一方面，使用 .appendTo()，内容在方法之前，可以是选择器表达式，也可以是即时创建的标记，然后插入到目标容器中。

考虑以下的 HTML：

<div class="demo-container">
  <div class="demo-box">Demonstration Box
  </div> 
</div>

两个 <div>，通过一点 CSS，呈现在页面的右侧如下：

我们可以像这样将 HTML 结构插入到 <div class="demo-box"> 的末尾：

$('div.demo-box').append('<div class="insertion">This text was <strong>inserted</strong></div>');

新的 <div> 和 <strong> 元素，以及文本节点，是即时创建的并添加到 DOM 中。结果是一个新的 <div> 定位在 演示框 文本之后：

页面上已经存在的元素（或元素数组）也可以移动到 <div class="demo-box"> 的末尾。例如，下面的代码通过使用 jQuery 对象来移动文档的第一个段落：

$('div.demo-box').append( $('p:eq(0)') );

.appendTo()

| 在匹配元素集的每个元素之后插入到目标中。

.appendTo(target)

参数

目标：选择器、元素、HTML 字符串或 jQuery 对象；匹配的元素集将插入到由此参数指定的元素的末尾

返回值

jQuery 对象，用于链接目的。

描述

考虑以下的 HTML：

<div class="demo-container">
  <div class="demo-box">Demonstration Box
  </div> 
</div>

两个 <div>，通过一点 CSS，呈现在页面的右侧如下：

使用 .appendTo()，我们可以像这样将 HTML 结构插入到 <div class="demo-box"> 的末尾：

$('<div class="insertion">This text was <strong>inserted</strong> </div>').appendTo('div.demo-box');

新的 <div> 和 <strong> 元素，以及文本节点，是即时创建的并添加到 DOM 中。结果是一个新的 <div> 定位在 演示框 文本之后：

页面上已经存在的元素（或元素数组）也可以移动到 <div class="demo-box"> 的末尾。例如，下面的代码通过使用选择器表达式来移动文档的第一个段落：

$('p:eq(0)').appendTo('div.demo-box');

DOM 插入，外部

.before()

| 在匹配元素集的每个元素之前插入参数指定的内容。

.before(content)

参数

内容：要在匹配元素集的每个元素之前插入的元素、HTML 字符串或 jQuery 对象

返回值

jQuery 对象，用于链式调用。

描述

.before和.insertBefore方法执行相同的任务。唯一的区别在于语法——具体来说，在内容和目标的放置方面不同。对于.before()，在方法之前的选择器表达式是要插入内容的容器。而对于.insertBefore()，另一方面，内容在方法之前，可以作为选择器表达式或即时创建的标记插入，并且它会在目标容器之前插入。

考虑以下 HTML：

<div class="demo-container">
  <div class="demo-box">Demonstration Box
  </div> 
</div>

两个<div>经过一点 CSS 处理后，在页面的右侧呈现如下：

我们可以这样在<div class="demo-box">之前插入一个 HTML 结构：

$('div.demo-box').before('<div class="insertion">This text was <strong>inserted</strong></div>');

新的<div>和<strong>元素以及文本节点是即时创建的，并添加到 DOM 中。结果是一个新的<div>被定位在<div class="demo-box">的外部，就在它之前：

已经存在于页面上的一个元素（或元素数组）也可以移动到 DOM 位置，就在<div class="demo-box">之前。例如，以下代码通过使用 jQuery 对象移动文档的第一个段落：

$('div.demo-box').before( $('p:eq(0)') );

`.insertBefore()`

| 在参数中指定的一组元素之前插入匹配元素集合中的每个元素。

.insertBefore(content)

参数

内容：要插入的一组匹配元素之前的选择器或元素

返回值

jQuery 对象，用于链式调用。

描述

考虑以下 HTML：

<div class="demo-container">
  <div class="demo-box">Demonstration Box
  </div> 
</div>

两个<div>经过一点 CSS 处理后，在页面的右侧呈现如下：

我们可以这样在<div class="demo-box">之前插入一个 HTML 结构：

$('<div class="insertion">This text was <strong>inserted</strong> </div>').insertBefore('div.demo-box');

新的<div>和<strong>元素以及文本节点是即时创建的，并添加到 DOM 中。结果是一个新的<div>被定位在<div class="demo-box">的外部，就在它之前：

$('p:eq(0)').insertBefore('div.demo-box');

`.after()`

| 在匹配元素集合中的每个元素后插入参数指定的内容。

.after(content)

参数

内容：要在一组匹配元素中的每个元素后插入的元素、HTML 字符串或 jQuery 对象。

返回值

jQuery 对象，用于链式调用。

描述

.after 和 .insertAfter 方法执行相同的任务。唯一的区别在于语法，具体来说，在内容和目标的放置上有所不同。对于 .after()，方法之前的选择器表达式是将内容插入的容器。另一方面，对于 .insertAfter()，内容在方法之前，可以是选择器表达式，也可以是即时创建的标记，它被插入到目标容器之后。

考虑以下 HTML：

<div class="demo-container">
  <div class="demo-box">Demonstration Box
  </div> 
</div>

两个 <div>，稍加 CSS 处理，渲染在页面的右侧，如下所示：

我们可以在 <div class="demo-box">之后插入 HTML 结构，如下所示：

$('div.demo-box').after('<div class="insertion">This text was <strong>inserted</strong></div>');

新的 <div> 和 <strong> 元素，以及文本节点，都是即时创建并添加到 DOM 中的。结果是一个新的 <div>，在 <div class="demo-box">之外，紧接着它之后：

将页面上已经存在的元素（或元素数组）移动到 DOM 位置后面的<div class="demo-box">也是可以的。例如，以下代码通过使用 jQuery 对象将文档的第一个段落移动：

$('div.demo-box').after( $('p:eq(0)') );

`.insertAfter()`

| 将匹配元素集合中的每个元素插入到指定参数中的元素集合之后。

.insertAfter(content)

参数

content: 一个选择器或元素，用于指定将要插入的匹配元素集合之后

返回值

用于链式调用的 jQuery 对象。

描述

考虑以下 HTML：

<div class="demo-container">
  <div class="demo-box">Demonstration Box
  </div> 
</div>

两个 <div>，稍加 CSS 处理，渲染在页面的右侧，如下所示：

使用 .insertAfter()，我们可以在 <div class="demo-box">之后插入 HTML 结构，如下所示：

$('<div class="insertion">This text was <strong>inserted</strong> </div>').insertAfter('div.demo-box');

新的 <div> 和 <strong> 元素，以及文本节点，都是即时创建并添加到 DOM 中的。结果是一个新的 <div>，在 <div class="demo-box">之外，紧接着它之后：

$('p:eq(0)').insertAfter('div.demo-box');

DOM 插入，环绕

`.wrap()`

| 将一系列元素的结构包装在匹配元素集合中的每个元素周围。

.wrap(html)
.wrap(element)

参数（第一版本）

html: 一串 HTML 标记，用于围绕匹配元素集合

参数（第二版本）

element: 一个现有的元素，用于围绕匹配元素集合

返回值

jQuery 对象，用于链式调用。

描述

注意：HTML 必须仅包含格式正确、有效的元素结构。如果包含任何文本，或者任何标签未关闭，.wrap() 将失败。

考虑以下 HTML：

<div class="demo-container">
  <div class="demo-box">Demonstration Box
  </div> 
</div>

两个 <div>，通过一些 CSS，呈现在页面的右侧如下：

使用.wrap()，我们可以在 <div class="demo-box"> 周围插入 HTML 结构，如下所示：

$('div.demo-box').wrap('<div class="insertion"> </div>');

新的 <div> 元素是即时创建的，并添加到 DOM 中。结果是一个新的 <div> 包裹在 <div class="demo-box"> 周围：

使用 DOM 节点作为我们的参数，我们可以将新的 <div> 包装在具有 id="demo-box1" 的元素周围，如下所示：

$(document.getElementById('demo-box1')).wrap(' <div class="insertion"> </div>');

DOM 复制

.clone()

| 创建匹配元素集的副本。

.clone([deep])

参数

deep（可选）：布尔值。默认为true。如果设置为false，.clone方法仅复制匹配的元素本身，而不包括任何子/后代元素和文本。

返回值

一个新的 jQuery 对象，引用了创建的元素。

描述

当与其中一种插入方法结合使用时，.clone方法是在页面上复制元素的便捷方式。考虑以下 HTML：

<div class="demo-container">
  <div class="demo-box">Demonstration Box
  </div> 
</div>

两个 <div>，通过一些 CSS，呈现在页面的右侧如下：

要复制<div class="demo-box">并将该副本粘贴到原始内容之后，我们可以编写以下内容：

$('div.demo-box:last').clone().insertAfter('div.demo-box:last');

现在我们有两个演示框：

请注意，我们在这里使用:last选择器，以确保只复制(.clone())并粘贴(.insertAfter())一次。我们需要注意潜在的意外克隆或插入超出我们意图的数量，并采取必要的预防措施防止发生这种情况。

提示

使用.clone方法，我们可以在将克隆的元素或其内容插入文档之前修改它们。

可选的 deep 参数接受一个布尔值 — true 或 false。由于在大多数情况下，我们希望克隆子节点，而默认值为true，因此该参数很少被使用。但是，想象一下我们想要复制演示框而不带其文本，然后将段落附加到每个 <div class="demo-box">。我们可以使用以下代码实现这一点：

$('div.demo-box:last').clone(false).insertAfter('div.demo-box:last');
$('div.demo-box').append('<p>New Message</p>);

现在两个框看起来像这样：

第一个框现在既有原始演示框文本，又有额外的新消息文本，而新克隆的框只有额外的文本。

DOM 删除

.empty()

| 从 DOM 中删除匹配元素集的所有子节点。

.empty()

参数

无。

返回值

jQuery 对象，用于链式调用。

描述

此方法不仅会移除子元素（和其他后代元素），还会移除匹配元素集合中的任何文本。这是因为根据 DOM，元素内的任何文本字符串被视为该元素的子节点。考虑以下 HTML：

<div class="demo-container">
  <div class="demo-box">Demonstration Box
  </div> 
</div>

两个 <div> 经过一点 CSS 处理后，显示在页面的右侧如下：

如果我们对其应用 $('div.demo-box').empty();，则演示框文本字符串被移除：

如果我们在 <div class="demo-box"> 内有任意数量的嵌套元素，它们也会被移除。

.remove()

| 从 DOM 中移除一组匹配的元素。

.remove([selector])

参数

选择器（可选）：用于筛选要移除的一组匹配元素

返回值

用于链接目的的 jQuery 对象。

描述

与 .empty 类似，.remove 方法将元素从 DOM 中移除。我们使用 .remove() 当我们想要移除元素本身以及其中的所有内容。考虑以下 HTML：

<div class="demo-container">
  <div class="demo-box">Demonstration Box
  </div> 
</div>

两个 <div> 经过一点 CSS 处理后，显示在页面的右侧如下：

如果我们对其应用 $('div.demo-box').remove()，整个 <div class="demo-box> 以及其中的所有内容都会被移除：

我们还可以将选择器作为可选参数包含在内。例如，我们可以将前面的 DOM 移除代码重写为：$('div').remove('.demo-box')。或者，如果我们有多个具有相同类名的元素，并且只想移除第一个带有 id="temporary-demo-box" 的元素，我们可以这样编写：

$('div.demo‑box').remove('#temporary-demo-box ').

第五章：事件方法

女人，我与你结缘

我会做什么？

—— Devo，

“绳子之歌”

在本章中，我们将依次仔细研究每个可用的事件方法。这些方法用于在用户与浏览器进行交互时注册行为，并进一步操作这些注册的行为。

事件处理程序附加

以下方法是 jQuery 事件处理模块的构建块。

.bind()

| 为元素附加事件处理程序

.bind(eventType[, eventData], handler)

参数

eventType：包含 JavaScript 事件类型的字符串，如 click 或 submit。
eventData（可选）：将传递给事件处理程序的数据映射
处理程序：每次触发事件时执行的函数

返回值

jQuery 对象，用于链接目的。

描述

.bind() 方法是将行为附加到文档的主要方法。所有 JavaScript 事件类型都允许用于 eventType；以下是跨平台和推荐的：

blur
change
click
dblclick
error
focus
keydown
keypress
keyup
load
mousedown
mousemove
mouseout
mouseover
mouseup
resize
scroll
select
submit
unload

jQuery 库提供了绑定每种事件类型的快捷方法，例如 .click() 用于 .bind('click')。每种事件类型的描述可以在其快捷方法的描述中找到。

当事件到达元素时，绑定到该元素的该事件类型的所有处理程序都会被触发。如果有多个处理程序已注册，则它们将始终按照绑定它们的顺序执行。在所有处理程序执行完毕后，事件会沿着正常的事件传播路径继续。有关事件传播的完整讨论，请参阅 Learning jQuery 或 www.w3.org/TR/DOM-Level-2-Event/ 上的 W3C 规范。.bind() 的基本用法如下：

$('#foo').bind('click', function() {
  alert('User clicked on "foo."');
});

此代码将导致具有 foo ID 的元素对 click 事件做出响应；以后用户点击此元素内部时，警报将显示。

事件处理程序

handler 参数采用回调函数，如所示；在处理程序内部，关键字 this 设置为处理程序绑定的 DOM 元素。要在 jQuery 中使用该元素，可以将其传递给正常的 $() 函数。例如：

$('#foo').bind('click', function() {
  alert($(this).text());
});

执行此代码后，当用户点击具有 foo ID 的元素内部时，其文本内容将显示为警报。

事件对象

回调函数接受一个参数；当处理程序被调用时，JavaScript 事件对象将通过它传递。

事件对象通常是不必要的，参数被省略，因为当处理程序绑定时通常可用足够的上下文来准确知道触发处理程序时需要执行什么操作。但是，有时需要收集有关用户在事件发生时环境的更多信息。JavaScript 提供了诸如.shiftKey（是否在按下shift键时按住）、.offsetX（元素内鼠标光标的x坐标）和.type（事件类型）等信息。

事件对象的一些属性和方法在每个平台上都不可用。但是，如果事件由 jQuery 事件处理程序处理，那么库会标准化某些属性，以便它们可以在任何浏览器上安全使用。特别是：

.target: 此属性表示触发事件的 DOM 元素。通常比较event.target和this很有用，以确定事件是否由于事件冒泡而处理。
.pageX: 此属性包含鼠标光标相对于页面左边缘的x坐标。
.pageY: 此属性包含鼠标光标相对于页面顶部边缘的y坐标。
.preventDefault(): 如果调用此方法，则不会触发事件的默认操作。例如，点击的锚点不会将浏览器带到新的 URL。
.stopPropagation(): 这个方法阻止事件冒泡到 DOM 树上寻找更多的事件处理程序来触发。

返回false表示处理程序相当于在事件对象上调用.preventDefault()和.stopPropagation()。

在处理程序中使用事件对象看起来像这样：

$(document).ready(function() {
  $('#foo').bind('click', function(event) {
    alert('The mouse cursor is at (' + event.pageX + ', ' + event.pageY + ')');
  });
});

注意添加到匿名函数的参数。此代码将导致对具有 ID foo 的元素的click报告单击时鼠标光标的页面坐标。

传递事件数据

可选的eventData参数并不常用。提供时，此参数允许我们向处理程序传递附加信息。此参数的一个方便的用途是解决闭包引起的问题。例如，假设我们有两个事件处理程序，两者都引用相同的外部变量：

var message = 'Spoon!';
$('#foo').bind('click', function() {
  alert(message);
});
message = 'Not in the face!';
$('#bar').bind('click', function() {
  alert(message);
});

因为处理程序都是闭包，两者的环境中都有message，所以触发时都会显示消息Not in the face!变量的值已更改。为了规避这种情况，我们可以在eventData中传递消息：

var message = 'Spoon!';
$('#foo').bind('click', {msg: message}, function(event) {
  alert(event.data.msg);
});
message = 'Not in the face!';
$('#bar').bind('click', {msg: message}, function(event) {
  alert(event.data.msg);
});

这次变量不直接在处理程序中引用；相反，值通过eventData传递，这将在绑定事件时固定值。第一个处理程序现在将显示Spoon!，而第二个处理程序将警告Not in the face!

如果eventData存在，则它是.bind()方法的第二个参数；如果不需要向处理程序发送其他数据，则回调作为第二个和最后一个参数传递。

注意

请参阅 .trigger() 方法参考，了解在事件发生时传递数据给处理程序的方法，而不是绑定处理程序时。

`.unbind()`

| 从元素中删除先前附加的事件处理程序。

.unbind([eventType[, handler]])
.unbind(event)

参数（第一个版本）

eventType：包含 JavaScript 事件类型的字符串，例如click或submit
处理程序：不再执行的函数

参数（第二个版本）

事件：作为传递给事件处理程序的 JavaScript 事件对象

返回值

jQuery 对象，用于链接目的。

描述

使用 .bind() 绑定的任何处理程序都可以使用 .unbind() 删除。在最简单的情况下，没有参数，.unbind() 删除附加到元素的所有处理程序：

$('#foo').unbind();

这个版本无论类型如何都会删除处理程序。要更精确，我们可以传递一个事件类型：

$('#foo').unbind('click');

通过指定“click”事件类型，只会解绑该事件类型的处理程序。但是，如果其他脚本可能将行为附加到同一元素，则此方法仍可能具有负面影响。出于这个原因，健壮且可扩展的应用程序通常要求使用两个参数的版本：

var handler = function() {
  alert('The quick brown fox jumps over the lazy dog.');
};
$('#foo').bind('click', handler);
$('#foo').unbind('click', handler);

通过命名处理程序，我们可以确保没有其他函数被捕获。请注意，以下内容不工作：

$('#foo').bind('click', function() {
  alert('The quick brown fox jumps over the lazy dog.');
});

$('#foo').unbind('click', function() {
  alert('The quick brown fox jumps over the lazy dog.');
});

尽管这两个函数在内容上是相同的，但它们是分开创建的，因此 JavaScript 可以将它们保留为不同的函数对象。要解绑特定的处理程序，我们需要一个对该函数的引用，而不是对做同样事情的其他处理程序的引用。

使用事件对象

当我们希望在内部解绑处理程序时，使用此方法的第二种形式。例如，假设我们希望仅触发事件处理程序三次：

var timesClicked = 0;
$('#foo').bind('click', function(event) {
  alert('The quick brown fox jumps over the lazy dog.');
  timesClicked++;
  if (timesClicked >= 3) {
    $(this).unbind(event);
  }
});

在这种情况下，处理程序必须接受一个参数，以便我们可以捕获事件对象并在第三次单击后使用它来解绑处理程序。事件对象包含对于 .unbind() 知道要删除的处理程序的上下文是必要的。

这个例子也是闭包的一个例证。由于处理程序引用了在函数外部定义的 timesClicked 变量，因此增加变量的效果甚至在处理程序调用之间都会产生影响。

`.one()`

| 为元素附加事件处理程序。处理程序最多执行一次。

.one(eventType[, eventData], handler)

参数

eventType：包含 JavaScript 事件类型的字符串，例如click或submit
eventData（可选）：将传递给事件处理程序的数据映射
处理程序：在触发事件时执行的函数

返回值

jQuery 对象，用于链接目的。

描述

此方法与 .bind() 相同，只是在第一次调用后解绑处理程序。例如：

$('#foo').one('click', function() {
  alert('This will be displayed only once.');
});

执行代码后，单击具有 ID foo 的元素将显示警报。后续单击将不起作用。

这段代码等效于：

$('#foo').bind('click', function(event) {
  alert('This will be displayed only once.');
  $(this).unbind(event);
});

换句话说，从常规绑定处理程序内部显式调用 .unbind() 具有完全相同的效果。

`.trigger()`

| 执行附加到元素的所有事件处理程序的处理程序。

.trigger(eventType[, extraParameters])

参数

eventType：包含 JavaScript 事件类型的字符串，例如click或submit
extraParameters：传递给事件处理程序的额外参数数组

返回值

jQuery 对象，用于链式调用。

描述

任何使用.bind()或其快捷方法之一附加的事件处理程序在相应事件发生时触发。但是，可以通过.trigger()方法手动触发它们。调用.trigger()会按照与用户自然触发事件相同的顺序执行处理程序：

$('#foo').bind('click', function() {
  alert($(this).text());
});
$('#foo').trigger('click');

虽然.trigger()模拟了事件激活，包括合成的事件对象，但它并不能完美地复制自然发生的事件。不会发生事件冒泡，因此必须在实际附加了事件处理程序的元素上调用.trigger()。默认行为也不可靠地调用，因此必须使用诸如.submit()之类的方法手动调用 DOM 元素上的默认行为。

当我们使用.bind()方法定义自定义事件类型时，.trigger()的第二个参数会变得有用。例如，假设我们已经将处理程序绑定到自定义事件而不是之前绑定到内置的click事件的元素上：

$('#foo').bind('custom', function(event, param1, param2) {
  alert(param1 + "\n" + param2);
});
$('#foo').trigger('custom', ['Custom', 'Event']);

事件对象始终作为第一个参数传递给事件处理程序，但是如果像这样在.trigger()调用期间指定了额外的参数，那么这些参数也将被传递给处理程序。

注意这里传递的额外参数与.bind()方法的eventData参数之间的区别。两者都是向事件处理程序传递信息的机制，但是.trigger()的extraParameters参数允许在触发事件时确定信息，而.bind()的eventData参数要求在绑定处理程序时已经计算好信息。

文档加载

这些事件涉及页面加载到浏览器中。

$()

| 指定在 DOM 完全加载后执行的函数。

$(document).ready(handler)
$().ready(handler)
$(handler)

参数

处理程序：在 DOM 准备就绪后执行的函数

返回值

jQuery 对象，用于链式调用。

描述

尽管 JavaScript 提供了load事件来执行在页面渲染时运行的代码，但是此事件直到所有资源（例如图像）完全接收完毕才会触发。在大多数情况下，脚本可以在 DOM 层次结构完全构建后立即运行。传递给.ready()的处理程序保证在 DOM 准备就绪后执行，因此这通常是附加所有其他事件处理程序并运行其他 jQuery 代码的最佳位置。

在代码依赖于加载的资产（例如，如果需要图像的尺寸）的情况下，代码应该放在load事件的处理程序中。

.ready() 方法通常与 <body onload=""> 属性不兼容。如果必须使用 load，则要么不使用 .ready()，要么使用 jQuery 的 .load() 方法将 load 事件处理程序附加到窗口或更具体的项目，如图像。

所提供的三种语法是等效的。.ready() 方法只能在与当前文档匹配的 jQuery 对象上调用，因此可以省略选择器。

.ready() 方法通常与匿名函数一起使用：

$(document).ready(function() {
  alert('Ready event was triggered.');
});

将此代码放置后，页面加载时将显示一个警报。

当使用另一个 JavaScript 库时，我们可能希望调用 $.noConflict() 来避免命名空间的困扰。当调用此函数时，$ 快捷方式不再可用，强制我们在通常会写 $ 的地方写 jQuery。但是，传递给 .ready() 方法的处理程序可以接受一个参数，该参数传递给全局 jQuery 对象。这意味着我们可以在我们的 .ready() 处理程序的上下文中重命名对象而不影响其他代码：

jQuery(document).ready(function($) {
  // Code using $ as usual goes here.
});

如果在 DOM 初始化后调用 .ready()，则传入的新处理程序将立即执行。

`.load()`

| 将事件处理程序绑定到加载 JavaScript 事件。

.load(handler)

参数

handler: 当事件触发时要执行的函数

返回值

用于链接目的的 jQuery 对象。

描述

此处理程序是 .bind('load', handler) 的快捷方式。

当它和所有子元素都完全加载时，load 事件被发送到元素。此事件可以发送到与 URL 相关的任何元素 - 图像、脚本、框架以及文档本身的主体。

例如，考虑以下 HTML：

<img class="target" src="img/hat.gif" width="80" height="54" alt="Hat" />

事件处理程序可以绑定到图片上：

$('.target').load(function() {
  $(this).log('Load event was triggered.');
});

现在一旦图片加载完成，消息将被显示。

一般来说，等待所有图像完全加载是不必要的。如果代码可以更早执行，则通常最好将其放置在发送到 .ready() 方法的处理程序中。

注意

AJAX 模块还有一个名为 .load() 的方法。触发哪一个取决于传递的参数集合。

`.unload()`

| 将事件处理程序绑定到卸载 JavaScript 事件。

.unload(handler)

参数

handler: 当事件触发时要执行的函数。

返回值

用于链接目的的 jQuery 对象。

描述

此处理程序是 .bind('unload', handler) 的快捷方式。

当用户导航离开页面时，unload 事件被发送到 window 元素。这可能意味着许多事情之一。用户可能点击链接离开页面，或者在地址栏中键入新 URL。前进和后退按钮将触发事件。关闭浏览器窗口将导致事件触发。甚至页面重新加载也会首先创建 unload 事件。

任何 unload 事件处理程序都应绑定到 window 对象上：

$(window).unload(function() {
  alert('Unload event was triggered.');
});

执行此代码后，每当浏览器离开当前页面时将显示警报。

使用 .preventDefault() 无法取消 unload 事件。提供此事件是为了在用户离开页面时脚本可以执行清理操作。

.error()

| 将事件处理程序绑定到错误 JavaScript 事件。

.error(handler)

参数

handler：当事件触发时执行的函数

返回值

jQuery 对象，用于链式操作。

描述

此处理程序是 .bind('error', handler) 的快捷方式。

error 事件被发送到可以接收 load 事件的相同元素。如果元素加载不正确，则会调用该事件。

例如，考虑以下 HTML：

<img class="target" src="img/missing.gif" width="80" height="54" alt="Missing Image" />

可以将事件处理程序绑定到图像上：

$('.target').error(function() {
  $(this).log('Error event was triggered.');
});

如果图像无法加载（例如，因为它不存在于提供的 URL 中），则会显示消息。

当页面本地提供服务时，可能不会正确触发此事件。由于 error 依赖于正常的 HTTP 状态代码，因此通常不会在 URL 使用 file： 协议时触发。

鼠标事件

这些事件是由鼠标移动和按钮按下触发的。

.mousedown()

| 将事件处理程序绑定到鼠标按下 JavaScript 事件，或者在元素上触发该事件。

.mousedown(handler)
.mousedown()

参数（第一个版本）

handler：每次触发事件时执行的函数

返回值

jQuery 对象，用于链式操作。

描述

此处理程序是第一个变体中的 .bind('mousedown', handler) 的快捷方式，以及第二个变体中的 .trigger('mousedown')。

当鼠标指针位于元素上并按下鼠标按钮时，会向元素发送 mousedown 事件。任何 HTML 元素都可以接收此事件。

例如，考虑以下 HTML：

<div class="target button">Click Here</div>
<div class="trigger button">Trigger</div>

可以将事件处理程序绑定到目标按钮上：

$('.target').mousedown(function() {
  $(this).log('Mousedown event was triggered.');
});

现在，如果我们点击目标按钮，消息就会显示出来。我们还可以在第二个按钮被点击时触发事件：

$('.trigger').click(function() {
  $('.target').mousedown();
});

执行此代码后，点击触发按钮也会显示消息。

当任何鼠标按钮被单击时，会发送 mousedown 事件。为了仅对特定按钮执行操作，我们可以在 Mozilla 浏览器中使用事件对象的 which 属性（左键为 1，中键为 2，右键为 3），或者在 Internet Explorer 中使用 button 属性（左键为 1，中键为 4，右键为 2）。这对于确保使用主按钮开始拖动操作非常有用；如果忽略，当用户尝试使用上下文菜单时可能会产生奇怪的结果。虽然这些属性可以检测到中间和右键，但这不是可靠的。例如，在 Opera 和 Safari 中，默认情况下无法检测到右键单击。

如果用户点击一个元素，然后将鼠标指针移开或释放按钮，则仍将计为 mousedown 事件。在大多数用户界面中，这一系列操作被视为对按钮按下的取消，因此通常最好使用 click 事件，除非我们知道 mousedown 事件在特定情况下更可取。

.mouseup()

| 将事件处理程序绑定到 mouseup JavaScript 事件，或在元素上触发该事件。

.mouseup(handler)
.mouseup()

参数（第一个版本）

handler：每次触发事件时执行的函数

返回值

用于链接目的的 jQuery 对象。

描述

此处理程序是第一个变体中 .bind('mouseup', handler) 的快捷方式，以及第二个变体中 .trigger('mouseup') 的快捷方式。

当鼠标指针悬停在元素上并且鼠标按钮被释放时，mouseup 事件被发送到元素。任何 HTML 元素都可以接收此事件。

例如，考虑以下 HTML 代码：

<div class="target button">Click Here</div>
<div class="trigger button">Trigger</div>

事件处理程序可以绑定到目标按钮上：

$('.target').mouseup(function() {
  $(this).log('Mouseup event was triggered.');
});

现在，如果我们点击目标按钮，消息就会显示出来。我们还可以在第二个按钮被点击时触发事件：

$('.trigger').click(function() {
  $('.target').mouseup();
});

执行此代码后，点击触发按钮也会显示消息。

如果用户在元素外部单击，拖动到元素上并释放按钮，则此仍被视为 mouseup 事件。在大多数用户界面中，此操作序列不被视为按钮按下，因此通常最好使用 click 事件，除非我们知道对于特定情况来说，mouseup 事件更合适。

.click()

| 将事件处理程序绑定到点击 JavaScript 事件，或在元素上触发该事件。

.click(handler)
.click()

参数（第一个版本）

handler：每次触发事件时执行的函数

返回值

用于链接目的的 jQuery 对象。

描述

此处理程序是第一个变体中 .bind('click', handler) 的快捷方式，以及第二个变体中 .trigger('click') 的快捷方式。

当鼠标指针悬停在元素上并且鼠标按钮被按下并释放时，click 事件被发送到元素。任何 HTML 元素都可以接收此事件。

例如，考虑以下 HTML 代码：

<div class="target button">Click Here</div>
<div class="trigger button">Trigger</div>

事件处理程序可以绑定到目标按钮上：

$('.target').click(function() {
  $(this).log('Click event was triggered.');
});

现在，如果我们点击目标按钮，消息就会显示出来。我们还可以在第二个按钮被点击时触发事件：

$('.trigger').click(function() {
  $('.target').click();
});

执行此代码后，点击触发按钮也会显示消息。

click 事件仅在以下确切的事件序列之后触发：

当指针位于元素内部时按下鼠标按钮。
当鼠标指针位于元素内部时释放鼠标按钮。

在执行操作之前，这通常是期望的顺序。如果不需要这样做，则 mousedown 或 mouseup 事件可能更合适。

.dblclick()

| 将事件处理程序绑定到 dblclick JavaScript 事件，或在元素上触发该事件。

.dblclick(handler)
.dblclick()

参数（第一个版本）

handler：每次触发事件时执行的函数

返回值

用于链接目的的 jQuery 对象。

描述

此处理程序是第一个变体中 .bind('dblclick', handler) 的快捷方式，以及第二个变体中 .trigger('dblclick') 的快捷方式。

当元素被双击时，dblclick 事件被发送到元素。任何 HTML 元素都可以接收此事件。

例如，考虑以下 HTML 代码：

<div class="target button">Click Here</div>
<div class="trigger button">Trigger</div>

事件处理程序可以绑定到目标按钮上：

$('.target').dblclick(function() {
  $(this).log('Dblclick event was triggered.');
});

现在，如果我们双击目标按钮，消息将被显示。我们还可以在点击第二个按钮时触发事件：

$('.trigger').click(function() {
  $('.target').dblclick();
});

执行此代码后，单击 Trigger 按钮也会显示消息。

dblclick 事件仅在以下确切事件序列之后触发：

鼠标按钮在指针位于元素内时被按下。
鼠标按钮在指针位于元素内时释放。
在指针位于元素内，且在系统相关的时间窗口内再次按下鼠标按钮。
鼠标按钮在指针位于元素内时释放。

不建议为同一元素同时绑定 click 和 dblclick 事件处理程序。触发的事件序列因浏览器而异，有些会收到两个 click 事件，而其他则只会收到一个。如果无法避免需要对单击和双击做出不同反应的界面，则应在 click 处理程序内模拟 dblclick 事件。我们可以通过在处理程序中保存时间戳，然后在后续点击时将当前时间与保存的时间戳进行比较来实现这一点。如果差异足够小，则可以将单击视为双击。

.toggle()

| 将两个事件处理程序绑定到匹配的元素上，以在交替点击时执行。

.toggle(handlerEven, handlerOdd)

参数

handlerEven: 每次偶数次点击元素时执行的函数。
handlerOdd: 每次单数次点击元素时执行的函数。

返回值

jQuery 对象，用于链式操作。

描述

.toggle() 方法绑定了一个 click 事件处理程序，因此这里也适用于 click 触发的规则。

例如，考虑以下 HTML：

<div class="target button">Click Here</div>

可以将事件处理程序绑定到此按钮：

$('.target').toggle(function() {
  $(this).log('Toggle event was triggered (handler 1).');
}, function() {
  $(this).log('Toggle event was triggered (handler 2).');
});

第一次单击按钮时，将执行第一个处理程序。第二次，将执行第二个处理程序。后续点击将在两个处理程序之间循环。

.toggle() 方法提供了方便。手动实现相同的行为相对简单，如果 .toggle() 内置的假设限制了操作，则可能需要手动实现。例如，如果两次将 .toggle() 应用于同一元素，那么不能保证其正确工作。由于 .toggle() 内部使用 click 处理程序来完成其工作，因此我们必须解绑 click 以移除使用 .toggle() 附加的行为，以便其他 click 处理程序不会受到影响。该实现还在事件上调用了 .preventDefault()，因此如果在元素上调用了 .toggle()，则链接将不会被跟随，按钮也不会被点击。

.mouseover()

| 将事件处理程序绑定到 mouseover JavaScript 事件，或在元素上触发该事件。

.mouseover(handler)
.mouseover()

参数（第一版）

handler: 每次触发事件时执行的函数

返回值

jQuery 对象，用于链式操作。

描述

这个处理程序是第一种情况下.bind('mouseover', handler)的简写，以及第二种情况下.trigger('mouseover')的简写。

当鼠标指针进入元素时，会向元素发送mouseover事件。任何 HTML 元素都可以接收到这个事件。

举个例子，考虑一下 HTML：

<div class="target button">Move Here</div>
<div class="trigger button">Trigger</div>

这个事件处理程序可以绑定到目标按钮上：

$('.target').mouseover(function() {
  $(this).log('Mouseover event was triggered.');
});

当鼠标指针移过目标按钮时，消息被显示出来。我们还可以在第二个按钮被点击时触发事件：

$('.trigger').click(function() {
  $('.target').mouseover();
});

在这段代码执行后，点击Trigger按钮也将显示消息。

这种事件类型可能会由于事件冒泡而引起许多麻烦。当鼠标指针移过嵌套元素时，mouseover事件将发送给该元素，然后向上冒泡到层次结构中。这可能会在不适当的时候触发我们绑定的mouseover处理程序。通过使用.hover()方法，我们可以避免这个问题。

.mouseout()

| 绑定一个事件处理程序到mouseout JavaScript 事件，或在元素上触发该事件。

.mouseout(handler)
.mouseout()

参数（第一个版本）

handler: 每次事件被触发时要执行的函数

返回值

jQuery 对象，用于链式调用。

描述

这个处理程序是第一种情况下.bind('mouseout', handler)的简写，以及第二种情况下.trigger('mouseout')的简写。

当鼠标指针离开元素时，会向元素发送mouseout事件。任何 HTML 元素都可以接收到这个事件。

举个例子，考虑一下 HTML：

<div class="target button">Move Here</div>
<div class="trigger button">Trigger</div>

这个事件处理程序可以绑定到目标按钮上：

$('.target').mouseout(function() {
  $(this).log('Mouseout event was triggered.');
});

当鼠标指针移出目标按钮时，消息被显示出来。我们还可以在第二个按钮被点击时触发事件：

$('.trigger').click(function() {
  $('.target').mouseout();
});

在这段代码执行后，点击Trigger按钮也将显示消息。

这种事件类型可能会由于事件冒泡而引起许多麻烦。当鼠标指针移出嵌套元素时，mouseout事件将发送给该元素，然后向上冒泡到层次结构中。这可能会在不适当的时候触发我们绑定的mouseout处理程序。通过使用.hover()方法，我们可以避免这个问题。

.hover()

| 绑定两个事件处理程序到匹配的元素上，在鼠标指针进入和离开元素时执行。

.hover(handlerIn, handlerOut)

参数

handlerIn: 鼠标指针进入元素时执行的函数
handlerOut: 鼠标指针离开元素时执行的函数

返回值

jQuery 对象，用于链式调用。

描述

.hover()方法绑定了对mouseover和mouseout事件的处理程序。我们可以使用它简单地在鼠标在元素内部时应用行为。考虑一下 HTML：

<div class="target button">Move Here</div>

现在我们可以在一个方法调用中绑定进入元素和离开元素的处理程序：

$('.target').hover(function() {
  $(this).log('Hover event was triggered (entering).');
}, function() {
  $(this).log('Hover event was triggered (leaving).');
});

现在，当鼠标指针进入元素时，第一条消息将被显示，当鼠标指针离开时，第二条消息将被显示。

对于mouseover和mouseout事件，由于事件冒泡而常常会收到错误的响应。当鼠标指针穿过嵌套元素时，事件会生成并冒泡到父元素。.hover()方法中包含代码以检查此情况并不执行任何操作，因此在使用.hover()快捷方式时，我们可以放心地忽略此问题。

.mousemove()

| 绑定事件处理程序到 mousemove JavaScript 事件，或在元素上触发该事件。

.mousemove(handler)
.mousemove()

参数（第一个版本）

处理程序：每次触发事件时执行的函数

返回值

为了链式调用的 jQuery 对象。

描述

这个处理程序是第一个变体中.bind('mousemove', handler)的快捷方式，以及第二个变体中.trigger('mousemove')的快捷方式。

当鼠标指针在元素内移动时，将发送mousemove事件给该元素。任何 HTML 元素都可以接收此事件。

例如，考虑以下 HTML：

<div class="target button">Move Here</div>
<div class="trigger button">Trigger</div>

事件处理程序可以绑定到目标按钮上：

$('.target').mousemove(function() {
  $(this).log('Mousemove event was triggered.');
});

现在当鼠标指针在目标按钮内移动时，消息将被显示。我们还可以在点击第二个按钮时触发该事件：

$('.trigger').click(function() {
  $('.target').mousemove();
});

这段代码执行后，点击触发按钮也会显示消息。

在跟踪鼠标移动时，通常需要明确知道鼠标指针的实际位置。传递给处理程序的事件对象包含一些有关鼠标坐标的信息。诸如.clientX, .offsetX和.pageX等属性是可用的，但它们在浏览器之间的支持有所不同。幸运的是，jQuery 对.pageX和.pageY属性进行了标准化，以便它们可以在所有浏览器中使用。这些属性提供了鼠标指针相对于页面左上角的X和Y坐标。

我们需要记住，无论鼠标指针移动多少像素，都会触发mousemove事件。这意味着在非常短的时间内可能会生成数百个事件。如果处理程序必须执行任何重要的处理，或者如果存在多个事件处理程序，这可能会严重影响浏览器的性能。因此，尽可能优化mousemove处理程序，并在不再需要时解绑它们非常重要。

一个常见的模式是在mousedown处理程序中绑定mousemove处理程序，并从相应的mouseup处理程序中解绑它。如果实现这个事件序列，请记住mouseup事件可能被发送到与mousemove事件不同的 HTML 元素。为了解决这个问题，mouseup处理程序通常应该绑定到 DOM 树中的一个高级元素，比如<body>。

表单事件

这些事件涉及<form>元素及其内容。

.focus()

| 绑定事件处理程序到 focus JavaScript 事件，或在元素上触发该事件。

.focus(handler)
.focus()

参数（第一个版本）

处理程序：每次触发事件时执行的函数

返回值

jQuery 对象，用于链式目的。

描述

此处理程序是第一种变体中的.bind('focus', handler)的快捷方式，以及第二种变体中的.trigger('focus')。

当元素获得焦点时，会发送focus事件给该元素。最初，此事件仅适用于表单元素，如<input>。在最近的浏览器中，事件的范围已扩展到包括所有元素类型。元素可以通过键盘命令（例如Tab键）或通过鼠标点击元素来获得焦点。

浏览器通常会以某种方式突出显示具有焦点的元素，例如用虚线包围元素。焦点用于确定哪个元素首先接收与键盘相关的事件。

例如，考虑 HTML：

<form>
  <input class="target" type="text" value="Field 1" />
  <input type="text" value="Field 2" />
</form>
<div class="trigger button">Trigger</div>

事件处理程序可以绑定到第一个输入字段：

$('.target').focus(function() {
  $(this).log('Focus event was triggered.');
});

现在，如果我们单击第一个字段，或者从另一个字段Tab到它，消息将显示。我们可以在单击按钮时触发事件：

$('.trigger').click(function() {
  $('.target').focus();
});

执行此代码后，单击触发按钮也会显示消息。

注意

触发对隐藏元素的焦点会导致 Internet Explorer 出错。请小心，只在可见元素上调用.focus()而不带参数。

.blur()

| 将事件处理程序绑定到 blur JavaScript 事件，或在元素上触发该事件。

.blur(handler)
.blur()

参数（第一个版本）

handler：每次触发事件时执行的函数

返回值

jQuery 对象，用于链式目的。

描述

此处理程序是第一种变体中的.bind('blur', handler)的快捷方式，以及第二种变体中的.trigger('blur')。

当元素失去焦点时，会发送blur事件给该元素。最初，此事件仅适用于表单元素，如<input>。在最近的浏览器中，事件的范围已扩展到包括所有元素类型。元素可以通过键盘命令（例如Tab键）或通过在页面上的其他位置点击鼠标来失去焦点。

例如，考虑 HTML：

<form>
  <input class="target" type="text" value="Field 1" />
  <input type="text" value="Field 2" />
</form>
<div class="trigger button">Trigger</div>

事件处理程序可以绑定到第一个输入字段：

$('.target').blur(function() {
  $(this).log('Blur event was triggered.');
});

现在，如果我们单击第一个字段，然后单击或切换到其他位置，消息将显示。我们可以在单击按钮时触发事件：

$('.trigger').click(function() {
  $('.target').blur();
});

执行此代码后，单击触发按钮也会显示消息。

.change()

| 将事件处理程序绑定到 change JavaScript 事件，或在元素上触发该事件。

.change(handler)
.change()

参数（第一个版本）

handler：每次触发事件时执行的函数

返回值

jQuery 对象，用于链式目的。

描述

此处理程序是第一种变体中的.bind('change', handler)的快捷方式，以及第二种变体中的.trigger('change')。

当元素的值更改时，change事件将被发送到元素。此事件仅限于<input type="text">字段，<textarea>框和<select>元素。对于选择框，当用户使用鼠标进行选择时，事件会立即触发，但对于其他元素类型，事件会延迟到元素失去焦点时才触发。

例如，考虑以下 HTML：

<form>
  <input class="target" type="text" value="Field 1" />
  <select class="target">
    <option value="option1" selected="selected">Option 1</option>
    <option value="option2">Option 2</option>
  </select>
</form>
<div class="trigger button">Trigger</div>

事件处理程序可以绑定到文本输入和选择框：

$('.target').change(function() {
  $(this).log('Change event was triggered.');
});

现在当从下拉菜单中选择第二个选项时，消息将被显示。如果我们更改字段中的文本，然后单击其他位置，消息也将显示。但是，如果字段失去焦点而内容未更改，则不会触发事件。当单击按钮时，我们可以手动触发事件：

$('.trigger').click(function() {
  $('.target').change();
});

执行此代码后，点击触发按钮也会显示消息。消息将显示两次，因为处理程序已绑定到两个表单元素上的change事件。

.select()

| 将事件处理程序绑定到选择 JavaScript 事件，或在元素上触发该事件。

.select(handler)
.select()

参数（第一个版本）

处理程序：每次触发事件时执行的函数

返回值

用于链式调用目的的 jQuery 对象。

描述

此处理程序是第一种情况中.bind('select', handler)的快捷方式，以及第二种情况中的.trigger('select')。

当用户在其中进行文本选择时，select事件将被发送到元素。此事件仅限于<input type="text">字段和<textarea>框。

例如，考虑以下 HTML：

<form>
  <input class="target" type="text" value="The quick brown fox jumps over the lazy dog." />
</form>
<div class="trigger button">Trigger</div>

事件处理程序可以绑定到文本输入：

$('.target').select(function() {
  $(this).log('Select event was triggered.');
});

现在当文本的任何部分被选中时，消息将被显示。仅设置插入点的位置不会触发事件。当单击按钮时，我们可以手动触发事件：

$('.trigger').click(function() {
  $('.target').select();
});

执行此代码后，单击触发按钮也会显示消息。此外，字段上的默认select操作将被触发，因此整个文本字段将被选中。

.submit()

| 将事件处理程序绑定到提交 JavaScript 事件，或在元素上触发该事件。

.submit(handler)
.submit()

参数（第一个版本）

处理程序：每次触发事件时执行的函数

返回值

用于链式调用目的的 jQuery 对象。

描述

此处理程序是第一种情况中.bind('submit', handler)的快捷方式，以及第二种情况中的.trigger('submit')。

当用户尝试提交表单时，submit事件将被发送到元素。它只能附加到<form>元素上。表单可以通过点击显式的<input type="submit">按钮提交，或者当表单元素具有焦点时按Enter。

注意

根据浏览器的不同，Enter键可能仅在表单中有一个文本字段时触发表单提交，或者只有在存在提交按钮时才触发。界面不应依赖于此键的特定行为，除非通过观察keypress事件来强制解决Enter键的问题。

例如，考虑 HTML：

<form class="target" action="foo.html">
  <input type="text" />
  <input type="submit" value="Go" />
</form>
<div class="trigger button">Trigger</div>

事件处理程序可以绑定到表单：

$('.target').submit(function() {
  $(this).log('Submit event was triggered.');
});

现在，当表单提交时，将显示消息。这发生在实际提交之前，因此我们可以通过在事件上调用.preventDefault()或从处理程序中返回false来取消提交操作。当单击按钮时，我们可以手动触发事件：

$('.trigger').click(function() {
  $('.target').submit();
});

执行此代码后，单击触发按钮也会显示消息。此外，表单上的默认提交操作也将触发，因此将提交表单。

键盘事件

这些事件是由键盘上的键触发的。

`.keydown()`

| 将事件处理程序绑定到 keydown JavaScript 事件，或在元素上触发该事件。

.keydown(handler)
.keydown()

参数（第一个版本）

处理程序：每次触发事件时执行的函数

返回值

jQuery 对象，用于链式调用。

描述

此处理程序是第一个变体中.bind('keydown', handler)的快捷方式，并且是第二个变体中.trigger('keydown')的快捷方式。

当用户首次在键盘上按下键时，将向元素发送keydown事件。它可以附加到任何元素，但事件只会发送到具有焦点的元素。可获取焦点的元素在各个浏览器中可能不同，但表单元素始终可以获取焦点，因此是此事件类型的合理候选对象。

例如，考虑 HTML：

<form>
  <input class="target" type="text" />
</form>
<div class="trigger button">Trigger</div>

事件处理程序可以绑定到输入字段：

$('.target').keydown(function() {
  $(this).log('Keydown event was triggered.');
});

现在，当插入点位于字段内部且按下键时，将显示消息。当单击按钮时，我们可以手动触发事件：

$('.trigger').click(function() {
  $('.target').keydown();
});

执行此代码后，单击触发器按钮也会显示消息。

如果需要捕获任何地方的按键（例如，在页面上实现全局快捷键），将此行为附加到document对象是很有用的。由于事件冒泡，除非明确停止，所有按键都会向上冒泡到document对象。

要确定按下了哪个键，我们可以检查传递给处理程序函数的事件对象。.keyCode属性通常保存此信息，但在一些较旧的浏览器中，.which存储键码。JavaScript 的String对象具有.fromCharCode()方法，可用于将此数值代码转换为包含字符的字符串，以进行进一步处理。

fix_events.js插件进一步标准化了不同浏览器中的事件对象。使用此插件，我们可以在所有浏览器中使用.which来检索键码。

`.keypress()`

| 将事件处理程序绑定到 keypress JavaScript 事件，或在元素上触发该事件。

.keypress(handler)
.keypress()

参数（第一个版本）

handler：每次触发事件时要执行的函数

返回值

jQuery 对象，用于链式调用。

描述

此处理程序是第一个版本中 .bind('keypress', handler) 的快捷方式，第二个版本中是 .trigger('keypress') 的快捷方式。

keypress 事件在浏览器注册键盘输入时发送到元素。这类似于 keydown 事件，但在按键重复的情况下不同。如果用户按住键不放，keydown 事件会触发一次，但每个插入的字符都会触发单独的 keypress 事件。此外，修改键（例如Shift）会引发 keydown 事件，但不会引发 keypress 事件。

可以将 keypress 事件处理程序附加到任何元素，但事件只会发送到具有焦点的元素。可获得焦点的元素在浏览器之间可能有所不同，但表单元素总是可以获得焦点的，因此是此事件类型的合理候选对象。

例如，考虑以下 HTML：

<form>
  <input class="target" type="text" />
</form>
<div class="trigger button">Trigger</div>

可以将事件处理程序绑定到输入字段上：

$('.target').keypress(function() {
  $(this).log('Keypress event was triggered.');
});

现在，当插入点位于字段内并按下键时，消息会显示出来。如果按住键不放，消息会重复显示。当按钮被点击时，我们可以手动触发事件：

$('.trigger').click(function() {
  $('.target').keypress();
});

执行此代码后，点击触发按钮也会显示消息。

如果需要捕获任何地方的按键（例如，在页面上实现全局快捷键），将此行为附加到 document 对象是有用的。除非明确因为事件冒泡而被停止，否则所有按键都会向上 DOM 到达 document 对象。

要确定按下了哪个键，我们可以检查传递给处理程序函数的事件对象。.keyCode 属性通常保存此信息，但在一些较旧的浏览器中，.which 存储键码。JavaScript 的 String 对象具有 .fromCharCode() 方法，可用于将此数值代码转换为包含字符的字符串，以供进一步处理。

请注意，keydown 和 keyup 提供指示按下哪个键的代码，而 keypress 指示输入了哪个字符。例如，小写字母 "a" 将被 keydown 和 keyup 报告为 65，但被 keypress 报告为 97。大写字母 "A" 在所有事件中都报告为 97。这可能是决定使用哪种事件类型的主要动机。

.keyup()

| 将事件处理程序绑定到 keyup JavaScript 事件，或在元素上触发该事件。

.keyup(handler)
.keyup()

参数（第一个版本）

handler：每次触发事件时要执行的函数

返回值

jQuery 对象，用于链式调用。

描述

此处理程序是第一个版本中 .bind('keyup', handler) 的快捷方式，第二个版本中是 .trigger('keyup') 的快捷方式。

当用户释放键盘上的按键时，keyup事件将发送到元素。它可以附加到任何元素，但事件仅发送到具有焦点的元素。可聚焦元素在不同浏览器之间可能有所不同，但表单元素始终可以获得焦点，因此是此事件类型的合理候选者。

例如，请考虑以下 HTML：

<form>
  <input class="target" type="text" />
</form>
<div class="trigger button">Trigger</div>

事件处理程序可以绑定到输入字段上：

$('.target').keyup(function() {
  $(this).log('Keyup event was triggered.');
});

现在当插入点位于字段内并按下并释放键时，消息将显示。当点击按钮时，我们可以手动触发事件：

$('.trigger').click(function() {
  $('.target').keyup();
});

执行此代码后，点击Trigger按钮也将显示消息。

如果需要捕获任何地方的按键（例如，在页面上实现全局快捷键），将此行为附加到document对象是有用的。所有按键都会通过 DOM 上升到document对象，除非由于事件冒泡而明确停止。

要确定按下了哪个键，我们可以检查传递给处理程序函数的事件对象。.keyCode属性通常保存此信息，但在一些较旧的浏览器中，.which存储键码。JavaScript 的String对象有一个.fromCharCode()方法，可以用来将这个数值代码转换为包含字符的字符串以进行进一步处理。

浏览器事件

这些事件与整个浏览器窗口相关。

.resize()

| 绑定一个事件处理程序到 resize JavaScript 事件，或在元素上触发该事件。

.resize(handler)
.resize()

参数（第一个版本）

处理程序：每次触发事件时执行的函数

返回值

用于链式调用的 jQuery 对象。

描述

此处理程序是第一种情况下.bind('resize', handler)的快捷方式，以及第二种情况下的.trigger('resize')。

当浏览器窗口的大小改变时，resize事件将发送到window元素：

$(window).resize(function() {
  alert('Resize event was triggered.');
});

现在每当浏览器窗口的大小改变时，消息将显示。

在resize处理程序中的代码永远不应该依赖于处理程序被调用的次数。根据实现方式，resize事件可以在调整大小正在进行时持续发送（在 Internet Explorer 中的典型行为），或者仅在调整大小操作结束时发送一次（在 FireFox 中的典型行为）。

.scroll()

| 绑定一个事件处理程序到 scroll JavaScript 事件，或在元素上触发该事件。

.scroll(handler)
.scroll()

参数

处理程序：每次触发事件时执行的函数

返回值

用于链式调用的 jQuery 对象。

描述

此处理程序是第一种情况下.bind('scroll', handler)的快捷方式，以及第二种情况下的.trigger('scroll')。

当用户滚动到元素的不同位置时，scroll事件将发送到该元素。它不仅适用于window对象，还适用于可滚动的框架和具有overflow: scrollCSS 属性的元素。

例如，请考虑以下 HTML：

<div class="target" style="overflow: scroll; width: 200px; height: 100px;">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="trigger button">Trigger</div>

样式定义存在是为了使目标元素足够小，以便滚动。可以将scroll事件处理程序绑定到此元素上：

$('.target').scroll(function() {
  $(this).log('Scroll event was triggered.');
});

现在，当用户将文本向上或向下滚动时，消息会被显示出来。当点击按钮时，我们可以手动触发事件：

$('.trigger').click(function() {
  $('.target').scroll();
});

执行此代码后，点击触发器按钮也会显示消息。

每当元素的滚动位置发生变化时，都会发送scroll事件，而不管原因是什么。鼠标点击或拖动滚动条，在元素内拖动，按箭头键，或使用鼠标滚轮都可能引起此事件。

第六章：效果方法

它有风格，有品位

——德沃,

"无法控制的冲动"

在本章中，我们将仔细检查每个效果方法，揭示 jQuery 提供给用户的所有视觉反馈机制。

预打包效果

这些方法允许我们快速应用常用效果，并具有最小的配置。

`.show()`

| 显示匹配的元素。

.show([speed][, callback])

参数

speed（可选）：确定动画运行时间的字符串或数字
回调（可选）：动画完成后要调用的函数

返回值

jQuery 对象，用于链式操作。

描述

没有参数时，.show()方法是显示元素的最简单方法：

$('.target').show();

匹配的元素将立即显示，没有动画。这大致相当于调用.css('display', 'block')，除了display属性会恢复为初始值。如果将元素的display值设置为inline，然后将其隐藏和显示，则它将再次以inline显示。

如果提供了速度，则.show()变为动画方法。.show()方法同时动画匹配元素的宽度、高度和不透明度。

速度以动画的毫秒持续时间给出；较高的值表示较慢的动画，而不是较快的动画。可以提供字符串fast、normal和slow来指示速度值为200、400和600，如果省略速度参数，则默认为normal。

如果提供了回调函数，则在动画完成后调用。这对于将不同的动画按顺序串联在一起非常有用。回调函数不接收任何参数，但this被设置为正在被动画化的 DOM 元素。回调函数对每个匹配的元素执行一次，而不是对整个动画执行一次。

我们可以对任何元素进行动画处理，例如简单的包含图像的<div>：

<div class="content">
  <div class="trigger button">Trigger</div>
  <div class="target"><img src="img/hat.gif" width="80" height="54" alt="Hat" /></div>
  <div class="log"></div>
</div>

初始隐藏元素后，我们可以缓慢显示它：

$('.trigger').click(function() {
  $('.target').show('slow', function() {
    $(this).log('Effect complete.');
  });
});

Description.show() about

`.hide()`

| 隐藏匹配的元素。

.hide([speed][, callback])

参数

speed（可选）：确定动画运行时间的字符串或数字
回调（可选）：动画完成后要调用的函数

返回值

jQuery 对象，用于链式操作。

描述

没有参数时，.hide()方法是隐藏元素的最简单方法：

$('.target').hide();

匹配的元素将立即被隐藏，没有动画。这大致相当于调用.css('display', 'none')，除了display属性的值被保存为元素的另一个属性，以便稍后可以将display恢复为其初始值。如果将元素的display值设置为inline，然后将其隐藏和显示，则它将再次以inline显示。

如果提供了速度，则.hide()变为动画方法。.hide()方法同时动画匹配元素的宽度、高度和不透明度。

速度以动画的毫秒持续时间给出；较高的值表示较慢的动画，而不是较快的动画。可以提供字符串fast，normal和slow来表示速度值200、400和600。如果省略了速度参数，则假定为normal。

如果提供了回调函数，则在动画完成后调用该函数。这对于按顺序连接不同的动画非常有用。回调函数不接收任何参数，但this被设置为正在进行动画处理的 DOM 元素。回调函数对每个匹配的元素执行一次，而不是对整个动画执行一次。

我们可以对任何元素进行动画处理，比如一个简单的包含图片的<div>：

<div class="content">
  <div class="trigger button">Trigger</div>
  <div class="target"><img src="img/hat.gif" width="80" height="54" alt="Hat" /></div>
  <div class="log"></div>
</div>

初始显示元素后，我们可以慢慢隐藏它：

$('.trigger').click(function() {
  $('.target').hide('slow', function() {
    $(this).log('Effect complete.');
  });
});

`.toggle()`

| 显示或隐藏匹配的元素。

.toggle([speed][, callback])

参数

速度（可选）：确定动画运行时间的字符串或数字
回调（可选）：动画完成后要调用的函数

返回值

jQuery 对象，用于链接目的。

描述

没有参数时，.toggle()方法简单地切换元素的可见性：

$('.target').toggle();

匹配的元素将立即显示或隐藏，没有动画效果。如果元素最初是显示的，则将其隐藏；如果是隐藏的，则将其显示。根据需要保存并恢复display属性。如果给定的元素具有inline的display值，则隐藏和显示后，它将再次以inline的方式显示。

当提供速度时，.toggle()变为动画方法。.toggle()方法同时动画匹配元素的宽度、高度和不透明度。

我们可以对任何元素进行动画处理，比如一个简单的包含图片的<div>：

<div class="content">
  <div class="trigger button">Trigger</div>
  <div class="target"><img src="img/hat.gif" width="80" height="54" alt="Hat" /></div>
  <div class="log"></div>
</div>

初始显示元素后，我们可以慢慢隐藏和显示它：

$('.trigger').click(function() {
  $('.target').toggle('slow', function() {
    $(this).log('Effect complete.');
  });
});

`.slideDown()`

| 以滑动方式显示匹配的元素。

.slideDown([speed][, callback])

参数

速度（可选）：确定动画运行时间的字符串或数字
回调（可选）：动画完成后要调用的函数

返回值

jQuery 对象，用于链接目的。

描述

.slideDown()方法会使匹配元素的高度发生动画变化。这会导致页面的底部向下滑动，为显示的项目让出空间。

速度以动画的毫秒持续时间给出；更高的值表示更慢的动画，而不是更快的动画。可以提供字符串fast、normal和slow来指示速度值为200、400和600。如果省略速度参数，则假定为normal。

如果提供了回调函数，动画完成后将触发该回调。这对于按顺序串联不同的动画非常有用。回调函数不接收任何参数，但this被设置为正在进行动画的 DOM 元素。回调函数针对每个匹配的元素执行一次，而不是针对整个动画执行一次。

我们可以对任何元素进行动画处理，比如一个包含图像的简单的<div>：

<div class="content">
  <div class="trigger button">Trigger</div>
  <div class="target"><img src="img/hat.gif" width="80" height="54" alt="Hat" /></div>
  <div class="log"></div>
</div>

以元素初始隐藏的状态，我们可以缓慢显示它：

$('.trigger').click(function() {
  $('.target').slideDown('slow', function() {
    $(this).log('Effect complete.');
  });
});

.slideUp()

| 以滑动动作隐藏匹配的元素。

.slideUp([speed][, callback])

参数

speed（可选）：确定动画将运行多长时间的字符串或数字
回调（可选）：动画完成后要调用的函数

返回值

jQuery 对象，用于链接目的。

描述

.slideUp()方法动画化匹配元素的高度。这将导致页面的较低部分向上滑动，似乎隐藏了项目。

我们可以对任何元素进行动画处理，比如一个包含图像的简单的<div>：

<div class="content">
  <div class="trigger button">Trigger</div>
  <div class="target"><img src="img/hat.gif" width="80" height="54" alt="Hat" /></div>
  <div class="log"></div>
</div>

以元素初始可见的状态，我们可以缓慢隐藏它：

$('.trigger').click(function() {
  $('.target').slideUp('slow', function() {
    $(this).log('Effect complete.');
  });
});

.slideToggle()

| 以滑动动作显示或隐藏匹配的元素。

.slideToggle([speed][, callback])

参数

speed（可选）：确定动画将运行多长时间的字符串或数字
回调（可选）：动画完成后要调用的函数

返回值

jQuery 对象，用于链接目的。

描述

.slideToggle()方法动画化匹配元素的高度。这将导致页面的较低部分向上或向下滑动，似乎隐藏或显示了项目。

如果提供，回调函数在动画完成时被触发。这对于按顺序将不同的动画串联起来非常有用。回调不发送任何参数，但this被设置为正在被动画化的 DOM 元素。回调一次对匹配元素执行一次，而不是整个动画执行一次。

我们可以对任何元素进行动画处理，例如一个包含图像的简单的<div>：

<div class="content">
  <div class="trigger button">Trigger</div>
  <div class="target"><img src="img/hat.gif" width="80" height="54" alt="Hat" /></div>
  <div class="log"></div>
</div>

初始显示该元素，然后我们可以慢慢隐藏和显示它：

$('.trigger').click(function() {
  $('.target').slideToggle('slow', function() {
    $(this).log('Effect complete.');
  });
});

.fadeIn()

| 通过将匹配元素淡化为不透明来显示它们。

.fadeIn([speed][, callback])

参数

速度（可选）：确定动画运行时间的字符串或数字。
回调（可选）：动画完成时要调用的函数。

返回值

jQuery 对象，用于链接目的。

描述

.fadeIn()方法动画显示匹配元素的不透明度。

速度以动画的毫秒持续时间给出；较高的值表示较慢的动画，而不是较快的动画。可以提供字符串fast, normal和slow表示速度值分别为200, 400和600。如果省略速度参数，则假定为normal。

如果提供，回调函数在动画完成时被触发。这对于按顺序将不同的动画串联起来非常有用。回调不发送任何参数，但this被设置为正在被动画化的 DOM 元素。回调一次对匹配元素执行一次，而不是整个动画执行一次。

我们可以对任何元素进行动画处理，例如一个包含图像的简单的<div>：

<div class="content">
  <div class="trigger button">Trigger</div>
  <div class="target"><img src="img/hat.gif" width="80" height="54" alt="Hat" /></div>
  <div class="log"></div>
</div>

初始隐藏该元素，然后我们可以慢慢显示它：

$('.trigger').click(function() {
  $('.target').fadeIn('slow', function() {
    $(this).log('Effect complete.');
  });
});

.fadeOut()

| 通过将匹配元素淡化为透明来隐藏它们。

.fadeOut([speed][, callback])

参数

速度（可选）：确定动画运行时间的字符串或数字。
回调（可选）：动画完成时要调用的函数。

返回值

jQuery 对象，用于链接目的。

描述

.fadeOut()方法动画隐藏匹配元素的不透明度。

我们可以对任何元素进行动画处理，例如一个包含图像的简单的<div>：

<div class="content">
  <div class="trigger button">Trigger</div>
  <div class="target"><img src="img/hat.gif" width="80" height="54" alt="Hat" /></div>
  <div class="log"></div>
</div>

初始显示该元素，然后我们可以慢慢隐藏它：

$('.trigger').click(function() {
  $('.target').fadeOut('slow', function() {
    $(this).log('Effect complete.');
  });
});

.fadeTo()

| 调整匹配元素的不透明度。

.fadeTo(speed, opacity[, callback])

参数

速度：确定动画将运行多长时间的字符串或数字
不透明度：介于 0 和 1 之间的目标不透明度的数字
回调：（可选）：动画完成后要调用的函数

返回值

jQuery 对象，用于链接目的。

描述

.fadeTo（）方法会动画化匹配元素的不透明度。

速度以动画的毫秒持续时间给出；较高的值表示较慢的动画，不表示更快的动画。可以提供字符串fast，normal和slow以指示速度值分别为200，400和600。与其他效果方法不同，.fadeTo（）要求速度应明确指定。

如果提供了回调函数，则在动画完成后触发。这对于串联不同的动画在序列中很有用。回调函数不会发送任何参数，但this被设置为正在动画的 DOM 元素。回调函数针对每个匹配的元素执行一次，不是动画作为整体执行一次。

我们可以对任何元素进行动画处理，例如一个简单的包含图像的<div>：

<div class="content">
  <div class="trigger button">Trigger</div>
  <div class="target"><img src="img/hat.gif" width="80" height="54" alt="Hat" /></div>
  <div class="log"></div>
</div>

使用元素最初显示，我们可以慢慢将其变暗：

$('.trigger').click(function() {
  $('.target').fadeTo('slow', 0.5, function() {
    $(this).log('Effect complete.');
  });
});

将速度设置为0，此方法只是更改opacityCSS 属性，因此.fadeTo（0，opacity）与.css（'opacity'，opacity）相同。

注意

在 jQuery 版本 1.1.3 之前，.fadeTo（）会将元素的display属性设置为block。这在与非块项（如表格行和内联元素）一起使用时可能导致奇怪的布局渲染。从 jQuery 1.1.3 开始，可以安全地对这些元素使用淡入淡出。

自定义效果

本节描述了如何创建 jQuery 未提供的效果。

`.animate（）`

| 执行一组 CSS 属性的自定义动画。

.animate(properties[, speed][, easing][, callback])

参数

属性：动画将向其移动的 CSS 属性的映射
速度（可选）：确定动画将运行多长时间的字符串或数字
缓动（可选）：指示要用于过渡的缓动函数的字符串
回调（可选）：动画完成后要调用的函数

返回值

jQuery 对象，用于链接目的。

描述

.animate（）方法允许我们在任何数字 CSS 属性上创建动画效果。唯一必需的参数是一组 CSS 属性的映射。此映射类似于可以发送到.css（）方法的映射，只是属性范围更为限制。

所有动画属性都被视为像素数。如果属性最初以不同的单位（如 em 或百分比）指定，这可能会产生奇怪的结果。

除了数字值之外，每个属性还可以采用字符串show，hide和toggle。这些快捷方式允许自定义隐藏和显示动画，考虑了元素的显示类型。

速度以动画的毫秒持续时间给出；更高的值表示较慢的动画，不是更快的动画。可以提供字符串fast, normal和slow来指示速度值分别为200, 400和600。如果省略速度参数，则假定为normal。

如果提供了回调函数，则在动画完成时会触发。这对于按顺序串联不同的动画非常有用。回调函数不会发送任何参数，但this设置为正在动画的 DOM 元素。回调函数对每个匹配的元素执行一次，而不是对整个动画执行一次。

我们可以动画任何元素，比如一个简单的包含图像的<div>：

<div class="content">
  <div class="trigger button">Trigger</div>
  <div class="target"><img src="img/hat.gif" width="80" height="54" alt="Hat" /></div>
  <div class="log"></div>
</div>

我们可以同时动画多个属性：

$('.trigger').click(function() {
  $('.target').animate({
    'width': 300,
    'left': 100,
    'opacity': 0.25
  }, 'slow', function() {
    $(this).log('Effect complete.');
  });
});

如果我们希望像示例中那样动画left属性，则元素的position属性不能是fixed。

注意

更复杂的.animate()方法的版本可以在Interface插件中找到。它处理一些非数字样式，比如颜色，还处理类的动画，而不是单个属性。

.animate()的剩余参数是一个命名的字符串，用于指定要使用的缓动函数。缓动函数指定动画在动画内不同点的进度速度。jQuery 库中唯一的缓动实现是默认的linear。通过使用插件，如 Interface，可以获得更多的缓动函数。

第七章：AJAX 方法

她失去了同步

她从出口进入

从未停下来思考

——Devo

"失去同步"

jQuery 中的 AJAX 功能帮助我们从服务器加载数据，而不需要浏览器页面刷新。在本章中，我们将检查每个可用的 AJAX 方法和函数。我们将看到启动 AJAX 请求的各种方式，以及可以随时观察到正在进行的请求的几种方法。

低级接口

这些方法可用于进行任意的 AJAX 请求。

$.ajax()

| 执行异步 HTTP（AJAX）请求。

$.ajax(settings)

参数

settings：请求选项的映射可以包含以下项：
- url：包含发送请求的 URL 的字符串。
- type（可选）：定义用于请求的 HTTP 方法的字符串（GET 或 POST）。默认值为 GET。
- dataType（可选）：定义从服务器返回的数据类型的字符串（xml，html，json 或 script）。
- ifModified（可选）：一个布尔值，指示服务器在响应请求之前是否应检查页面是否已修改。
- timeout（可选）：请求失败时的超时毫秒数。
- global（可选）：一个布尔值，指示此请求是否会触发全局 AJAX 事件处理程序。默认值为 true。
- beforeSend（可选）：在发送请求之前执行的回调函数。
- error（可选）：请求失败时执行的回调函数。
- success（可选）：请求成功时执行的回调函数。
- complete（可选）：无论请求是否完成都会执行的回调函数。
- data（可选）：与请求一起发送到服务器的映射或字符串。
- processData（可选）：一个布尔值，指示是否将提交的数据从对象形式转换为查询字符串形式。默认值为 true。
- contentType（可选）：包含要为请求设置的 MIME 内容类型的字符串。默认值为 application/x-www-form-urlencoded。
- async（可选）：一个布尔值，指示是否异步执行请求。默认值为 true。

返回值

创建的 XMLHttpRequest 对象。

描述

$.ajax() 函数是 jQuery 发送的所有 AJAX 请求的基础。这个函数很少直接调用，因为有几个更高级的替代方法可用，如 $.post() 和 .load()，并且更容易使用。但是，如果需要不太常见的选项，$.ajax() 可以提供更大的灵活性。

在其最简单的形式下，$.ajax() 函数必须至少指定要加载数据的 URL：

$.ajax({
  url: 'ajax/test.html',
});

注意

即使这个唯一的必需参数也可以通过使用 $.ajaxSetup() 函数设置默认值来变为可选。

这个例子，使用唯一的必需选项，加载了指定 URL 的内容，但对结果没有做任何操作。要使用结果，我们可以实现其中一个回调函数。beforeSend，error，success和complete选项接受在适当时候被调用的回调函数：

beforeSend：在发送请求之前调用；XMLHttpRequest对象作为一个参数传递给它。
error：如果请求失败，将XMLHttpRequest对象作为参数调用，以及一个指示错误类型的字符串和一个（如适用）异常对象。
success：如果请求成功，将返回的数据作为其参数传递。
complete：当请求完成时调用，无论成功与否。将XMLHttpRequest对象以及一个包含成功或错误代码的字符串作为参数传递给它。

为了使用返回的 HTML，我们可以实现一个success处理程序：

$.ajax({
  url: 'ajax/test.html',
  success: function(data) {
    $('.result').html(data);
    $().log('Load was performed.');
  },
});

这样一个简单的例子通常最好使用.load()或$.get()来提供服务。

$.ajax()函数依赖于服务器提供有关检索数据的信息。如果服务器将返回数据报告为 XML，结果可以使用普通的 XML 方法或 jQuery 的选择器来遍历。如果检测到其他类型，比如上面的例子中的 HTML，数据将被视为文本。

通过使用dataType选项，可以实现不同的数据处理。除了纯粹的xml之外，dataType还可以是html，json或script。如果指定了html，检索数据中的任何嵌入 JavaScript 在返回 HTML 字符串之前将被执行。类似地，script将执行从服务器拉回的 JavaScript，并将脚本本身作为文本数据返回。json选项使用eval()来解析获取的数据文件，并将构造的对象作为结果数据返回。

注意

我们必须确保 Web 服务器报告的 MIME 类型与我们选择的dataType匹配。特别是，xml必须由服务器声明为text/xml以获得一致的结果。

默认情况下，AJAX 请求使用GET HTTP方法发送。如果需要POST方法，可以通过为type选项设置一个值来指定方法。这个选项影响data选项的内容如何发送到服务器。

data选项可以包含形式为key1=value1&key2=value2的查询字符串，或形式为{key1: 'value1', key2: 'value2'}的映射。如果使用后一种形式，数据在发送之前会被转换为查询字符串。如果希望将 XML 对象发送到服务器，则可以通过将processData设置为false来阻止这种处理。如果我们希望发送 XML 对象到服务器，可能并不需要这个处理；在这种情况下，我们还希望将contentType选项从application/x-www-form-urlencoded更改为一个更合适的 MIME 类型。

其余选项——ifModified、timeout、global和async——很少需要。有关ifModified的信息，请参阅$.getIfModified()函数。请求超时通常可以使用$.ajaxSetup()设置为全局默认值，而不是使用timeout选项针对特定请求设置。global选项阻止注册的处理程序使用.ajaxSend()、.ajaxError()或类似方法在此请求触发时触发。例如，如果请求频繁且简短，则可以使用此选项来禁止我们使用.ajaxSend()实现的加载指示器。最后，async选项的默认值为true，表示在请求完成后可以继续执行代码。强烈不建议将此选项设置为false，因为它可能导致浏览器无响应。

提示

使用此选项使请求同步不如使用blockUI插件效果更好。

$.ajax()函数返回它创建的XMLHttpRequest对象。通常可以丢弃此对象，但它确实提供了一个更低级别的接口来观察和操作请求。特别是，在对象上调用.abort()将在请求完成之前停止请求。

$.ajaxSetup()

| 为将来的 AJAX 请求设置默认值。

$.ajaxSetup(settings)

参数

设置：用于未来请求的选项映射。与$.ajax()中可能的项相同。

返回值

无。

描述

有关$.ajaxSetup()可用设置的详细信息，请参阅$.ajax()。所有使用任何函数的后续 AJAX 调用将使用新的设置，除非被单独调用覆盖，直到下一次调用$.ajaxSetup()为止。

例如，在反复 ping 服务器之前，我们可以为 URL 参数设置一个默认值：

$.ajaxSetup({
  url: 'ping.php',
});

现在每次进行 AJAX 请求时，将自动使用此 URL：

$.ajax({});
$.ajax({
  data: {'date': Date()},
});

快捷方法

这些方法使用更少的代码执行更常见类型的 AJAX 请求。

$.get()

| 使用 GET HTTP 请求从服务器加载数据。

$.get(url[, data][, success])

参数

URL：包含要发送请求的 URL 的字符串
数据：（可选）：发送请求的数据的映射
成功：（可选）：如果请求成功则执行的函数

返回值

创建的XMLHttpRequest对象。

描述

这是一个简写的 AJAX 函数，等价于：

$.ajax({
  url: url,
  data: data,
  success: success
});

回调函数传递了返回的数据，这将是一个 XML 根元素或文本字符串，具体取决于响应的 MIME 类型。

大多数实现将指定一个成功处理程序：

$.get('ajax/test.html', function(data) {
  $('.result').html(data);
  $().log('Load was performed.');
});

此示例获取所请求的 HTML 片段并将其插入页面。

$.getIfModified()

| 如果自上次请求以来已更改，则使用GET HTTP请求从服务器加载数据。

$.getIfModified(url[, data][, success])

参数

URL：包含要发送请求的 URL 的字符串
数据：（可选）：发送请求的数据的映射
成功：（可选）：如果请求成功则执行的函数

返回值

创建的XMLHttpRequest对象。

描述

这是一个简写的 AJAX 函数，相当于：

$.ajax({
  url: url,
  data: data,
  success: success,
  ifModified: true
});

回调传递了返回的数据，这将是一个 XML 根元素或一个文本字符串，具体取决于响应的 MIME 类型。

大多数实现都会指定一个成功处理程序：

$.getIfModified('ajax/test.html', function(data) {
  if (data) {
    $('.result').html(data);
  }
  $().log('Load was performed.');
});

此示例获取所请求的 HTML 片段，并将其插入到页面中。

发送 AJAX 请求时，将添加一个If-Modified-Since的 HTTP 标头。Web 服务器应该遵守这一点，并在文件未更改时省略数据。这可以用来节省带宽，当在页面内刷新数据时。

仍将未修改的页面响应视为success。在这种情况下，回调仍将被执行，但不会有数据可用。回调应该捕获这一点，以避免丢弃以前获取的数据。

.load()

| 从服务器加载数据，并将返回的 HTML 放入匹配的元素中。

.load(url[, data][, success])

参数

url: 包含发送请求的 URL 的字符串
data (可选): 要发送的数据的映射
success (可选): 如果请求成功，则执行的函数

返回值

jQuery 对象，用于链式调用。

描述

此方法是从服务器获取数据的最简单方法。它大致等同于$.get(url, data, success)，不同之处在于它是一个方法而不是一个全局函数，并且它具有一个隐式回调函数。当检测到成功响应时，.load()将匹配元素的 HTML 内容设置为返回的数据。这意味着该方法的大多数用法都可以非常简单：

$('.result').load('ajax/test.html');

提供的回调（可选）在执行此后处理后执行：

$('.result').load('ajax/test.html', function() {
  $(this).log('Load was performed.');
});

如果提供了数据，则使用 POST 方法；否则，假定为 GET。

注意

事件处理套件还有一个名为.load()的方法。哪一个被触发取决于传递的参数集。

.loadIfModified()

| 从服务器加载数据，如果自上次请求以来已更改，则将返回的 HTML 放入匹配的元素中。

.loadIfModified(url[, data][, success])

参数

url: 包含发送请求的 URL 的字符串
(可选): 要发送的数据的映射
success: (可选): 如果请求成功，则执行的函数

返回值

jQuery 对象，用于链式调用。

描述

此方法大致等同于$.getIfModified(url, data, success)，不同之处在于它是一个方法而不是一个全局函数，并且它具有一个隐式回调函数。当检测到成功响应时，.loadIfModified()将匹配元素的 HTML 内容设置为返回的数据。这意味着该方法的大多数用法都可以非常简单：

$('.result').loadIfModified('ajax/test.html');

提供的回调（如果有）在执行此后处理后执行：

$('.result').loadIfModified('ajax/test.html', function() {
  $(this).log('Load was performed.');
});

如果提供了数据，则使用 POST 方法；否则，假定为 GET。

要了解修改日期检查的工作原理，请参见$.getIfModified()。

$.post()

| 使用 POST HTTP 请求从服务器加载数据。

$.post(url[, data][, success])

参数

url: 包含发送请求的 URL 的字符串
（可选）：随请求发送的数据映射
success:（可选）：如果请求成功，则执行的函数

返回值

创建的 XMLHttpRequest 对象。

描述

这是一个简写的 AJAX 函数，相当于：

$.ajax({
  type: 'POST',
  url: url,
  data: data,
  success: success
});

回调函数传递返回的数据，这将是一个 XML 根元素或一个取决于响应的 MIME 类型的文本字符串。

大多数实现将指定一个成功处理程序：

$.post('ajax/test.html', function(data) {
  $('.result').html(data);
  $().log('Load was performed.');
});

这个例子获取请求的 HTML 片段并将其插入到页面上。

使用 POST 获取的页面永远不会被缓存，因此 ifModified 选项对这些请求没有影响。

$.getJSON()

| 使用 GET HTTP 请求从服务器加载 JSON 编码的数据。

$.getJSON(url[, data][, success])

参数

url: 包含发送请求的 URL 的字符串
（可选）：随请求发送的数据映射
success:（可选）：如果请求成功，则执行的函数

返回值

创建的 XMLHttpRequest 对象。

描述

这是一个简写的 AJAX 函数，相当于：

$.ajax({
  url: url,
  dataType: 'json',
  data: data,
  success: success
});

回调函数传递返回的数据，这将根据 JSON 结构定义并使用 eval() 函数解析为 JavaScript 对象或数组。

有关 JSON 格式的详细信息，请参阅 json.org/。

大多数实现将指定一个成功处理程序：

$.getJSON('ajax/test.json', function(data) {
  $('.result').html('<p>' + data.foo + '</p><p>' + data.baz[1]+ '</p>');
  $().log('Load was performed.');
});

当然，此示例依赖于 JSON 文件的结构：

{
  “foo": “The quick brown fox jumps over the lazy dog.",
  “bar": “How razorback-jumping frogs can level six piqued gymnasts!",
  “baz": [52, 97]
}

使用这个结构，示例将文件的第一个字符串和第二个数字插入到页面上。如果 JSON 文件中存在语法错误，请求通常会静默失败；为此避免频繁手动编辑 JSON 数据。

$.getScript()

| 使用 GET HTTP 请求从服务器加载 JavaScript，并执行它。

$.getScript(url[, success])

参数

url: 包含发送请求的 URL 的字符串
success:（可选）：如果请求成功，则执行的函数

返回值

创建的 XMLHttpRequest 对象。

描述

这是一个简写的 AJAX 函数，相当于：

$.ajax({
  url: url,
  type: 'script',
  success: success
});

回调函数传递返回的 JavaScript 文件。这通常是没有用的，因为此时脚本已经运行。

脚本在全局上下文中执行，因此可以引用其他变量并使用 jQuery 函数。包含的脚本应该对当前页面产生一定的影响：

$('.result').html('<p>Lorem ipsum dolor sit amet.</p>');

然后可以通过引用文件名来包含并运行脚本：

$.getScript('ajax/test.js', function() {
  $().log('Load was performed.');
});

在 Safari 中，不能保证在调用成功回调之前执行脚本。实际上，这意味着回调中的代码不应该在没有至少小延迟的情况下调用在外部脚本中定义的函数或引用变量。

全局 AJAX 事件处理程序

这些方法注册处理程序，以在页面上发生任何 AJAX 请求时调用。

.ajaxComplete()

| 注册一个处理程序，以在 AJAX 请求完成时调用。

.ajaxComplete(handler)

参数

处理程序：要调用的函数

返回值

用于链式调用的 jQuery 对象。

描述

每当 AJAX 请求完成时，jQuery 会触发 ajaxComplete 事件。所有已使用 .ajaxComplete() 方法注册的处理程序都在此时执行。

要观察此方法的操作，我们可以设置一个基本的 AJAX 加载请求：

<div class="trigger button">Trigger</div>
<div class="result"></div>
<div class="log"></div>

我们可以将我们的事件处理程序附加到任何元素上：

$('.log').ajaxComplete(function() {
  $(this).log('Triggered ajaxComplete handler.');
});

现在，我们可以使用任何 jQuery 方法进行 AJAX 请求：

$('.trigger').click(function() {
  $('.result').load('ajax/test.html');
});

当用户单击按钮并且 AJAX 请求完成时，日志消息会被显示。

所有 ajaxComplete 处理程序都会被调用，不管完成了什么 AJAX 请求。如果我们必须区分这些请求，我们可以使用传递给处理程序的参数。每次执行 ajaxComplete 处理程序时，都会传递事件对象、XMLHttpRequest 对象以及用于创建请求的设置对象。例如，我们可以将回调限制为仅处理与特定 URL 相关的事件：

$('.log').ajaxComplete(function(e, xhr, settings) {
  if (settings.url == 'ajax/test.html') {
    $(this).log('Triggered ajaxComplete handler for “ajax/test.html".');
  }
});

.ajaxError()

| 注册一个处理程序，以在 AJAX 请求完成时带有错误时调用。

.ajaxError(handler)

参数

处理程序：要调用的函数

返回值

用于链式调用的 jQuery 对象。

描述

每当 AJAX 请求完成并出现错误时，jQuery 会触发 ajaxError 事件。所有已使用 .ajaxError() 方法注册的处理程序都在此时执行。

要观察此方法的操作，我们可以设置一个基本的 AJAX 加载请求：

<div class="trigger button">Trigger</div>
<div class="result"></div>
<div class="log"></div>

我们可以将我们的事件处理程序附加到任何元素上：

$('.log').ajaxError(function() {
  $(this).log('Triggered ajaxError handler.');
});

现在，我们可以使用任何 jQuery 方法进行 AJAX 请求：

$('.trigger').click(function() {
  $('.result').load('ajax/missing.html');
});

当用户单击按钮并且 AJAX 请求失败时，因为请求的文件不存在，日志消息会被显示。

所有 ajaxError 处理程序都会被调用，不管完成了什么 AJAX 请求。如果我们必须区分这些请求，我们可以使用传递给处理程序的参数。每次执行 ajaxError 处理程序时，都会传递事件对象、XMLHttpRequest 对象以及用于创建请求的设置对象。如果请求失败是因为 JavaScript 引发了异常，则异常对象会作为第四个参数传递给处理程序。例如，我们可以将回调限制为仅处理与特定 URL 相关的事件：

$('.log').ajaxError(function(e, xhr, settings, exception) {
  if (settings.url == 'ajax/missing.html') {
    $(this).log('Triggered ajaxError handler for “ajax/missing.html".');
  }
});

.ajaxSend()

| 注册一个处理程序，以在 AJAX 请求开始时调用。

.ajaxSend(handler)

参数

处理程序：要调用的函数

返回值

用于链式调用的 jQuery 对象。

描述

每当 AJAX 请求即将发送时，jQuery 会触发 ajaxSend 事件。所有已使用 .ajaxSend() 方法注册的处理程序都在此时执行。

要观察此方法的操作，我们可以设置一个基本的 AJAX 加载请求：

<div class="trigger button">Trigger</div>
<div class="result"></div>
<div class="log"></div>

我们可以将我们的事件处理程序附加到任何元素上：

$('.log').ajaxSend(function() {
  $(this).log('Triggered ajaxSend handler.');
});

现在，我们可以使用任何 jQuery 方法进行 AJAX 请求：

$('.trigger').click(function() {
  $('.result').load('ajax/test.html');
});

当用户点击按钮并且 AJAX 请求即将开始时，日志消息将被显示。

所有的ajaxSend处理程序都会被调用，无论要发送什么 AJAX 请求。如果我们必须区分这些请求，我们可以使用传递给处理程序的参数。每次执行ajaxSend处理程序时，都会传递事件对象、XMLHttpRequest对象和在创建请求时使用的设置对象。例如，我们可以限制我们的回调只处理与特定 URL 相关的事件：

$('.log').ajaxSend(function(e, xhr, settings) {
  if (settings.url == 'ajax/test.html') {
    $(this).log('Triggered ajaxSend handler for “ajax/test.html".');
  }
});

.ajaxStart()

| 注册一个处理程序，当第一个 AJAX 请求开始时调用。

.ajaxStart(handler)

参数

处理程序：要调用的函数

返回值

用于链接目的的 jQuery 对象。

描述

每当一个 AJAX 请求即将发送，jQuery 都会检查是否还有其他尚未完成的 AJAX 请求。如果没有进行中的请求，jQuery 就会触发ajaxStart事件。所有使用.ajaxStart()方法注册的处理程序都会在这个时间点执行。

要观察这种方法的实际应用，我们可以设置一个基本的 AJAX 加载请求：

<div class="trigger button">Trigger</div>
<div class="result"></div>
<div class="log"></div>

我们可以将我们的事件处理程序附加到任何元素：

$('.log').ajaxStart(function() {
  $(this).log('Triggered ajaxStart handler.');
});

现在，我们可以使用任何 jQuery 方法进行 AJAX 请求：

$('.trigger').click(function() {
  $('.result').load('ajax/test.html');
});

当用户点击按钮并且 AJAX 请求被发送时，日志消息将会被显示。

.ajaxStop()

| 注册一个处理程序，当所有 AJAX 请求都完成时调用。

.ajaxStop(handler)

参数

处理程序：要调用的函数

返回值

用于链接目的的 jQuery 对象。

描述

每当一个 AJAX 请求完成，jQuery 都会检查是否还有其他尚未完成的 AJAX 请求；如果没有，jQuery 就会触发ajaxStop事件。所有使用.ajaxStop()方法注册的处理程序都会在这个时间点执行。

要观察这种方法的实际应用，我们可以设置一个基本的 AJAX 加载请求：

<div class="trigger button">Trigger</div>
<div class="result"></div>
<div class="log"></div>

我们可以将我们的事件处理程序附加到任何元素：

$('.log').ajaxStop(function() {
  $(this).log('Triggered ajaxStop handler.');
});

现在，我们可以使用任何 jQuery 方法进行 AJAX 请求：

$('.trigger').click(function() {
  $('.result').load('ajax/test.html');
});

当用户点击按钮并且 AJAX 请求完成时，日志消息将被显示。

注意

因为.ajaxStart(), .ajaxStop(), .ajaxSend(), ajaxError()和.ajaxComplete()都作为方法而不是全局函数实现，我们可以像这样使用关键字this来引用回调函数中的选定元素。

.ajaxSuccess()

| 注册一个处理程序，当 AJAX 请求成功完成时调用。

.ajaxSuccess(handler)

参数

处理程序：要调用的函数

返回值

用于链接目的的 jQuery 对象。

描述

每当一个 AJAX 请求成功完成，jQuery 就会触发ajaxSuccess事件。所有使用.ajaxSuccess()方法注册的处理程序都会在这个时间点执行。

要观察这种方法的实际应用，我们可以设置一个基本的 AJAX 加载请求：

<div class="trigger button">Trigger</div>
<div class="result"></div>
<div class="log"></div>

我们可以将我们的事件处理程序附加到任何元素：

$('.log').ajaxSuccess(function() {
  $(this).log('Triggered ajaxSuccess handler.');
});

现在，我们可以使用任何 jQuery 方法进行 AJAX 请求：

$('.trigger').click(function() {
  $('.result').load('ajax/test.html');
});

当用户单击按钮并且 AJAX 请求成功完成时，将显示日志消息。

提示

因为 .ajaxSuccess() 被实现为方法而不是全局函数，所以我们可以像这样使用 this 关键字来在回调函数中引用所选元素。

所有的 ajaxSuccess 处理程序都会被调用，无论完成了什么 AJAX 请求。如果我们必须区分这些请求，我们可以使用传递给处理程序的参数。每次执行 ajaxSuccess 处理程序时，它都会传递事件对象、XMLHttpRequest 对象和用于创建请求的设置对象。例如，我们可以将我们的回调限制为仅处理涉及特定 URL 的事件：

$('.log').ajaxSuccess(function(e, xhr, settings) {
  if (settings.url == 'ajax/test.html') {
    $(this).log('Triggered ajaxSuccess handler for “ajax/test.html".');
  }
});

辅助函数

此函数协助执行 AJAX 任务时遇到的常见习语。

`.serialize()`

| 将一组表单元素编码为提交字符串。

.serialize(param)

参数

无。

返回值

包含元素序列化表示的字符串。

描述

.serialize() 方法使用标准的 URL 编码表示法创建一个文本字符串。它在表示一组表单元素的 jQuery 对象上操作。表单元素可以是几种类型：

<form>
  <div><input type="text" name="a" value="1" id="a" /></div>
  <div><input type="text" name="b" value="2" id="b" /></div>
  <div><input type="hidden" name="c" value="3" id="c" /></div>
  <div><textarea name="d" rows="8" cols="40">4</textarea></div>
  <div><select name="e">
    <option value="5" selected="selected">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
  </select></div>
  <div><input type="checkbox" name="f" value="8" id="f" /></div>
  <div><input type="submit" name="g" value="Submit" id="g">
</form>

我们可以在选择它们之后对所有这些元素类型进行序列化：

$('form').submit(function() {
  $(this).log($('input, textarea, select').serialize());
  return false;
});

这将生成一个标准的查询字符串。

a=1&b=2&c=3&f=8&g=Submit&d=4&e=5

该字符串接近于，但不完全相同于，在正常表单提交期间浏览器将生成的字符串。.submit() 方法使用每个元素的 .name 和 .value 属性来创建字符串，因此在这些属性不反映实际表单值的情况下，字符串可能不正确。例如，上面的示例中的复选框始终具有 .value 为 8 的值，无论框是否被选中。

为了得到更健壮的解决方案，form 插件是可用的。它的方法提供了与浏览器提供的相匹配的编码。

第八章：其他方法

选择的自由是你获得的

选择的自由是你想要的

Devo,

"选择的自由"

在前面的章节中，我们已经审查了许多类别的 jQuery 方法。但是到目前为止，该库提供的一些方法还不属于任何类别。在本章中，我们将探讨用于缩写常见 JavaScript 习语的方法。

设置方法

这些函数在主代码体开始之前很有用。

$.browser

| 包含有关当前运行浏览器的信息。

$.browser

参数

无。

返回值

每个用户代理可能的布尔标记。

描述

$.browser属性允许我们检测访问页面的是哪个 Web 浏览器，如浏览器本身所报告的。它包含每个最常见的浏览器类别——Internet Explorer，Mozilla，Safari 和 Opera 的标志。可以独立测试这些浏览器：

$()
  .log('Safari: ' + $.browser.safari)
  .log('Opera: ' + $.browser.opera)
  .log('MSIE: ' + $.browser.msie)
  .log('Mozilla: ' + $.browser.mozilla);

在 Firefox 浏览器上执行时，结果是：

Safari: false
Opera: false
MSIE: false
Mozilla: true

这个属性立即可用。因此可以用它来确定是否调用$(document).ready()是安全的。

因为$.browser使用navigator.useragent来确定平台，所以用户可能会伪装它。最好在可能的情况下完全避免特定于浏览器的代码。在需要为不同代理编写它的特殊情况下，最好的选择是测试你想要使用的 JavaScript 功能的存在。如果这不能很好地区分客户端，可以使用$.browser属性进行进一步的区分。

$.noConflict()

| 放弃 jQuery 对$变量的控制。

$.noConflict()

参数

无。

返回值

全局 jQuery 对象。这可以设置为一个变量，提供一个替代快捷键给$.

描述

许多 JavaScript 库使用$作为函数或变量名，就像 jQuery 一样。在 jQuery 的情况下，$只是jQuery的别名，所以所有功能都可以在不使用$的情况下实现。如果我们需要在 jQuery 旁边使用另一个 JavaScript 库，我们可以通过调用$.noConflict()来让$的控制权归还给其他库：

// Import other library
// Import jQuery
$.noConflict();
// Code that uses other library’s $ can follow here.

这种技术特别适用于.ready()方法与jQuery对象的别名，因为在.ready()中，我们可以使用$而不必担心后续的冲突：

// Import other library
// Import jQuery
$.noConflict();
jQuery(document).ready(function($) {
  // Code that uses jQuery’s $ can follow here.
});
// Code that uses other library’s $ can follow here.

DOM 元素方法

这些方法帮助我们处理每个 jQuery 对象下的 DOM 元素。

.length

| 返回 jQuery 对象匹配的 DOM 元素的数量。

.length

参数

无。

返回值

匹配的元素数量。

描述

假设页面上有一个简单的无序列表：

<ul>
  <li>foo</li>
  <li>bar</li>
</ul>

我们可以通过调用.length来确定列表项的数量：

$().log('Length: ' + $('li’).length);

.size()

| 返回 jQuery 对象匹配的 DOM 元素的数量。

.size()

参数

无。

返回值

匹配的元素数量。

描述

假设页面上有一个简单的无序列表：

<ul>
  <li>foo</li>
  <li>bar</li>
</ul>

我们可以通过调用.size()来确定列表项的数量：

$().log('Size: ' + $('li’).size());

.get()

| 检索与 jQuery 对象匹配的 DOM 元素。

.get([index])

参数

索引（可选）：指示要检索的元素的整数

返回值

一个 DOM 元素，或者如果省略索引，则是一组 DOM 元素的数组。

描述

.get()方法允许我们访问每个 jQuery 对象下面的 DOM 节点。假设我们在页面上有一个简单的无序列表：

<ul>
  <li>foo</li>
  <li>bar</li>
</ul>

指定了索引，.get()将检索单个元素：

$().log('Get(0): ' + $('li’).get(0));

由于索引是从零开始的，因此返回第一个列表项：

Get(0): [object HTMLLIElement]

每个 jQuery 对象也都伪装成数组，因此我们可以使用数组解引用运算符来获取列表项：

$().log('Get(0): ' + $('li’)[0]);

没有参数时，.get()返回正常数组中的所有匹配的 DOM 节点：

$().log('Get(): ' + $('li’).get());

在我们的示例中，这意味着返回了所有列表项：

Get(): [object HTMLLIElement],[object HTMLLIElement]

.index()

| 从匹配的元素中搜索给定的 DOM 节点。

.index(node)

参数

节点：要查找的 DOM 元素

返回值

元素在 jQuery 对象中的位置，如果找不到则为-1。

描述

与.get()相对应的操作，它接受一个索引并返回一个 DOM 节点，.index()接受一个 DOM 节点并返回一个索引。假设我们在页面上有一个简单的无序列表：

<ul>
  <li>foo</li>
  <li>bar</li>
</ul>

如果我们检索了两个列表项中的一个，我们可以将其存储在一个变量中。然后，.index()可以在匹配元素集中搜索此列表项：

var listItem = $('li’)[1];
$().log('Index: ' + $('li’).index(listItem));

我们得到了列表项的从零开始的位置：

Index: 1

集合操作

这些辅助函数操作数组，映射和字符串。

.each()

| 在集合上进行迭代，在每个项目上触发回调函数。

.each(callback)
$.each(collection, callback)

参数（第一版）

回调：要对每个匹配的元素执行的函数

返回值（第一版）

jQuery 对象，用于链接目的。

参数（第二版）

集合：要迭代的对象或数组
回调：要在集合中的每个项目上执行的函数

返回值（第二版）

集合。

描述

.each()方法和$.each()函数是设计用于创建简洁且不易出错的循环结构的通用迭代器。它们在集合上操作，并且对该集合中的每个项目执行一次回调函数。

上面列出的第一种语法是 jQuery 对象的一种方法，当调用它时，它会迭代对象的一部分 DOM 元素。每次回调运行时，都将当前循环迭代作为参数传递，从0开始。更重要的是，回调在当前 DOM 元素的上下文中触发，因此关键字this指的是该元素。

假设我们在页面上有一个简单的无序列表：

<ul>
  <li>foo</li>
  <li>bar</li>
</ul>

我们可以选择列表项并对它们进行迭代：

$('li’).each(function(index) {
  $(this).log(index + ': ' + $(this).text());
});

因此，对列表中的每个项目记录了一条消息：

0: foo
1: bar

第二种语法类似，但它是一个全局函数，而不是一个方法。在这种情况下，集合作为第一个参数传递，并且可以是映射（JavaScript 对象）或数组。在数组的情况下，每次回调都会将数组索引和相应的数组值作为参数传递：

$.each([52, 97], function(key, value) {
  $().log(key + ': ' + value);
});

这产生了两条消息：

0: 52
1: 97

如果作为集合使用映射，每次回调都会把一个键值对传递为参数：

$.each({'flammable’: 'inflammable’, 'duh’: 'no duh’}, function(index, value) {
  $().log(index + ': ' + value);
});

再次，这产生了两条消息：

flammable: inflammable
duh: no duh

$.grep()

| 筛选一个数组，只留下所选的项目。

$.grep(array, filter[, invert])

参数

数组: 要搜索的数组
filter: 要对每个项目应用的测试函数，或包含要用作测试的表达式的字符串
invert（可选）：一个布尔值，指示是否倒转过滤条件

返回值

新构建的、经过过滤的数组。

描述

$.grep() 方法根据需要从数组中移除项，以便所有剩余项都通过提供的测试。测试是一个函数，它以数组项和数组中的索引作为参数；只有在测试返回 true 时，项才会在结果数组中。

与 jQuery 方法一样，回调函数通常是匿名定义的：

var array = [0, 1, 52, 97];
$(this).log('Before: ' + array);
array = $.grep(array, function(a) {
  return (a > 50);
});
$(this).log('After: ' + array);

结果数组中保留了所有大于50的项目：

Before: 0,1,52,97
After: 52,97

由于过滤函数往往非常简短，jQuery 提供了一个更进一步的快捷方式。过滤函数可以定义为对数组中的每个项目a进行评估的单个表达式：

var array = [0, 1, 52, 97];
$(this).log('Before: ' + array);
array = $.grep(array, 'a > 50’);
$(this).log('After: ' + array);

这产生了与以前相同的结果。通过添加第三个参数，我们可以反转这个测试：

var array = [0, 1, 52, 97];
$(this).log('Before: ' + array);
array = $.grep(array, 'a > 50’, true);
$(this).log('After: ' + array);

现在产生了一个小于或等于50的项目数组：

Before: 0,1,52,97
After: 0,1

$.map()

| 通过使用一个过滤函数将一个数组转换成另一个数组。

$.map(array, filter)

参数

数组: 要转换的数组
过滤器: 要应用于每个项的函数，或包含要应用的表达式的字符串

返回值

新构建的转换数组。

描述

$.map() 方法对数组中的每个项目应用一个函数，将结果收集到一个新数组中。过滤器是一个函数，它以数组项和数组中的索引作为参数。

与 jQuery 方法一样，回调函数通常是匿名定义的：

var array = [0, 1, 52, 97];
$(this).log('Before: ' + array);
array = $.map(array, function(a) {
  return (a - 45);
});
$(this).log('After: ' + array);

结果数组中的所有项目都减去了45：

Before: 0,1,52,97
After: -45,-44,7,52

由于过滤函数往往非常简短，jQuery 提供了一个更进一步的快捷方式。过滤函数可以定义为应用于数组中每个项目a的单个表达式：

var array = [0, 1, 52, 97];
$(this).log('Before: ' + array);
array = $.map(array, 'a - 45’);
$(this).log('After: ' + array);

这产生了与以前相同的结果。通过从过滤函数中返回null，我们可以从数组中移除项目：

var array = [0, 1, 52, 97];
$(this).log('Before: ' + array);
array = $.map(array, 'a > 50 ? a - 45 : null’);
$(this).log('After: ' + array);

现在产生了一个大于50的项目数组，每个都减去了45：

Before: 0,1,52,97
After: 7,52

如果过滤函数返回的是一个数组而不是一个标量，则返回的数组将连接在一起形成结果：

var array = [0, 1, 52, 97];
$(this).log('Before: ' + array);
array = $.map(array, function(a, i) {
  return [a - 45, i];
});
$(this).log('After: ' + array);

而不是二维结果数组，映射形成了一个扁平化的结果：

Before: 0,1,52,97
After: -45,0,-44,1,7,2,52,3

$.merge()

| 将两个数组的内容合并到第一个数组中。

$.merge(array1, array2)

参数

array1: 要合并的第一个数组
array2: 要合并的第二个数组

返回值

由两个提供的数组元素组成的数组。

描述

$.merge() 操作形成一个包含两个数组中所有元素的数组，重复项已被移除。第一个数组中的项目顺序被保留，第二个数组中的项目被附加：

var array1 = [0, 1, 52];
var array2 = [52, 97];
$(this).log('Array 1: ' + array1);
$(this).log('Array 2: ' + array2);
array = $.merge(array1, array2);
$(this).log('After: ' + array);

结果数组包含所有四个不同的项目：

Array 1: 0,1,52
Array 2: 52,97
After: 0,1,52,97

$.merge() 函数是破坏性的。它修改第一个参数以添加第二个参数中的项目。如果需要原始的第一个数组，在调用 $.merge() 之前复制它。幸运的是，$.merge() 本身可以用于这种复制：

var newArray = $.merge([], oldArray);

这个快捷方式创建一个新的空数组，并将 oldArray 的内容合并到其中，从而有效地克隆数组。

$.unique()

| 创建一个删除重复项的对象数组的副本。

$.unique(array)

参数

数组：对象数组

返回值

仅由唯一对象组成的数组。

描述

$.unique() 函数搜索对象数组，形成一个不包含重复对象的新数组。如果两个对象引用内存中的不同位置，则认为它们是不同的对象，即使它们的内容相同也是如此。原始数组不会被修改。数组可以包含任何类型的 JavaScript 对象：

var alice = {'alice’: 'alice’};
var bob = {'bob’: 'bob’};
var carol = {'carol’: 'carol’};
var ted = {'bob’: 'bob’};
var oldArray = [alice, bob, carol, bob, ted];
$(this).log('Before: ' + oldArray);
newArray = $.unique(oldArray);
$(this).log('After: ' + newArray);

结果数组仅包含四个不同的项目：

Before: {alice: alice}, {bob: bob}, {carol: carol},
  {bob: bob}, {bob: bob}
After: {alice: alice, mergeNum: 52}, {bob: bob, mergeNum: 52},
  {carol: carol, mergeNum: 52}, {bob: bob, mergeNum: 52}

结果数组中移除了第二个名为 bob 的对象实例。但是，名为 ted 的对象保留了下来，即使它具有相同的内容，因为它是作为单独的对象创建的。

注意，$.unique() 修改数组中的对象，为每个对象添加了一个名为 mergeNum 的额外属性。这个属性是函数实现的副作用，并且对调用代码没有用处。

$.extend()

| 将两个对象的内容合并到第一个对象中。

$.extend([target, ]properties[, ...])

参数

目标（可选）：将接收新属性的对象
属性：包含要合并的其他属性的对象

返回值

修改后的目标对象。

描述

$.extend() 函数以与 $.merge() 合并数组相同的方式合并两个对象。将第二个对象的属性添加到第一个对象中，创建一个具有两个对象所有属性的对象：

var object1 = {
  apple: 0,
  banana: 52,
  cherry: 97
};
var object2 = {
  banana: 1,
  durian: 100
};

$().log(object1);
$().log(object2);
var object = $.extend(object1, object2);
$().log(object);

第二个对象中的 durian 的值被添加到第一个对象中，而 banana 的值被覆盖：

{apple: 0, banana: 52, cherry: 97, }
{banana: 1, durian: 100, }
{apple: 0, banana: 1, cherry: 97, durian: 100, }

$.extend() 函数是破坏性的；目标对象在过程中被修改。这通常是期望的行为，因为 $.extend() 可以用来模拟对象继承。添加到对象的方法可供所有引用对象的代码使用。然而，如果我们想保留原始对象的副本，我们可以通过将空对象作为目标来实现：

var object = $.extend({}, object1, object2)

我们还可以向 $.extend() 提供两个以上的对象。在这种情况下，所有对象的属性都将添加到目标对象中。

如果给$.extend()提供了一个参数，这意味着目标参数被省略了。在这种情况下，jQuery 对象本身被假定为目标。通过这样做，我们可以向 jQuery 命名空间添加新功能。在讨论如何创建 jQuery 插件时，我们将探讨这种能力。

$.extend()执行的合并不是递归的；如果第一个对象的属性本身是对象或数组，则它将被第二个对象中具有相同键的属性完全覆盖。值不会合并。

$.trim()

| 从字符串的两端删除空白。

$.trim()

参数

string：要修剪的字符串

返回值

修剪后的字符串。

描述

$.trim()函数从提供的字符串的开头和结尾删除所有换行符、空格和制表符：

var string = "\tYes, no, I, this is. \n ";
$(this).log('Before: ' + string);
string = $.trim(string);
$(this).log('After: ' + string);

所有空白字符都被修剪：

Before: 	Yes, no, I, this is. 

After: Yes, no, I, this is.

第九章：插件 API

现在我一次做两个

我已经开发了一种技术

—Devo，

"Fräulein"

每当一个任务要执行两次或更多次时，都应用DRY原则——不要重复自己是一个好主意。为了方便起见，jQuery 为开发人员提供了几种工具，超出了简单的迭代和函数创建。插件开发是一种反复证明有益的技术。

在本章中，我们将简要介绍使用其他开发者的插件的基础知识，然后深入探讨用我们自己定义的插件扩展 jQuery 的各种方法。

使用插件

利用现有的 jQuery 插件非常简单。插件包含在一个标准的 JavaScript 文件中。获得该文件的方法有很多种，但最简单的方法是浏览jquery.com/plugins上的 jQuery 插件仓库。许多热门插件的最新版本都可以从该网站下载。

要使插件的方法对我们可用，我们只需将其包含在文档的<head>中。我们必须确保它出现在主要的 jQuery 源文件之后，并且出现在我们自定义的 JavaScript 代码之前：

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <script src="img/jquery.js" type="text/javascript"></script>
 <script src="img/jquery.plug-in.js" type="text/javascript"></script>
  <script src="img/custom.js" type="text/javascript"></script>
  <title>Example</title>
</head>

在那之后，我们就可以使用插件公开的任何方法了。例如，使用Form插件，我们可以在我们自定义文件的$(document).ready方法内添加一行代码来通过 AJAX 提交表单：

$(document).ready(function() {
  $('#myForm').ajaxForm();
});

每个插件都有独立的文档。在接下来的章节中，我们将详细介绍一些更显著的插件，描述它们的每个方法。要了解更多关于其他插件的信息，我们可以查看从 jQuery 插件仓库链接的文档，或者阅读源代码中的解释性注释。

如果我们在插件仓库、作者的网站或插件的注释中找不到所有问题的答案，我们总是可以求助于 jQuery 讨论列表。许多插件作者经常在列表上发表意见，并且总是乐意帮助新用户可能面临的任何问题。订阅讨论列表的说明可以在docs.jquery.com/Discussion找到。

开发插件

正如我们上面讨论的，当我们要执行一个任务超过一次时，插件开发是一种有用的技术。在这里，我们将列举可以填充我们自己设计的插件文件的组件。我们的插件可以使用以下四种类型的 jQuery 增强的任意组合：对象方法、全局函数、选择器表达式和缓动样式。

对象方法

| 将一个新的方法添加到由$()工厂函数创建的所有 jQuery 对象中。

jQuery.fn.methodName = methodDefinition

组件

methodName：新方法的标签。
methodDefinition：在 jQuery 对象实例上调用.methodName()时要执行的函数对象。

讨论

当函数需要对一个或多个 DOM 元素进行操作时，通常适合创建一个新的 jQuery 对象方法。对象方法可以访问由 jQuery 对象引用的匹配元素，并且可以检查或操作它们。

可以通过引用关键字 this 从方法实现中检索到 jQuery 对象。我们可以调用这个对象的内置 jQuery 方法，也可以直接提取 DOM 节点以直接处理它们。正如我们在第八章中看到的那样，我们可以使用数组表示法检索引用的 DOM 节点：

jQuery.fn.showAlert = function() {
  alert('You called the method on "' + this[0] + '".');
  return this;
}

在这里，我们使用 this[0] 来找到一个元素，但是我们需要记住，jQuery 选择器表达式始终可以匹配零个、一个或多个元素。在设计插件方法时，我们必须为这些情况中的任何一种留出空间。实现这一点的最简单方法是在方法上下文中调用 .each()；这强制进行隐式迭代，这对于保持插件和内置方法之间的一致性很重要。在 .each() 调用的函数参数内，this 依次引用每个 DOM 元素：

jQuery.fn.showAlert = function() {
  return this.each(function() {
    alert('You called the method on "' + this + '".');
  });
}

现在我们可以将我们的方法应用于引用多个项的 jQuery 对象：

$('.myClass').showAlert();

我们的方法为每个由前面选择器表达式匹配的元素生成一个单独的警报。

还要注意，在这些示例中，当我们完成工作时，我们会返回 jQuery 对象本身（由 this 引用）。这样一来，就实现了 jQuery 用户应该依赖的链接行为。除非方法明确用于检索不同的信息并且已经记录了这样的用法，否则我们必须从所有插件方法中返回一个 jQuery 对象。

全局函数

| 使一个新的函数可用于脚本，包含在 jQuery 命名空间内。

jQuery.pluginName = fnDefinition;
jQuery.pluginName = {
function1: fnDefinition1,
function2: fnDefinition2
};

组件（第一个版本）

pluginName: 当前插件的名称。
fnDefinition: 当调用 $.pluginName() 时要执行的函数对象。

组件（第二个版本）

pluginName: 当前插件的名称。
function1: 第一个函数的标签。
fnDefinition1: 当调用 $.pluginName.function1() 时要执行的函数对象。
function2: 第二个函数的标签。
fnDefinition2: 当调用 $.pluginName.function2() 时要执行的函数对象。

讨论

我们这里称之为全局函数的东西在技术上是 jQuery 函数对象的方法。从实际上来说，它们是 jQuery 命名空间内的函数。通过将函数放在 jQuery 命名空间内，我们减少了与脚本中其他函数和变量的名称冲突的机会。

单一函数

第一种用法反映了当插件仅需要一个单独的函数时创建全局函数的情况。通过使用插件名称作为函数名称，我们可以确保我们的函数定义不会被其他插件踩踏（只要其他插件遵循相同的准则！）。新函数被分配为 jQuery 函数对象的属性：

jQuery.myPlugin = function() {
  alert('This is a test. This is only a test.');
};

现在在使用此插件的任何代码中，我们可以编写：

jQuery.myPlugin();

我们也可以使用 $ 别名并写：

$.myPlugin();

这将像任何其他函数调用一样工作，并显示警报。

多个函数

在第二种用法中，我们看到如何在同一个插件需要多个函数时定义全局函数。我们将所有插件封装在一个名为我们插件的命名空间中：

jQuery.myPlugin = {
  foo: function() {
    alert('This is a test. This is only a test.');
  },
  bar: function(param) {
    alert('This function takes a parameter, which is "' + param + '".');
  }
};

要调用这些函数，我们将它们视为命名为我们插件的对象的成员，该对象本身是全局 jQuery 函数对象的属性：

$.myPlugin.foo();
$.myPlugin.bar('baz');

现在函数已正确保护，不会与全局命名空间中的其他函数和变量发生冲突。

通常，从一开始就使用第二种用法是明智的，即使看起来只需要一个函数，因为这样做可以更轻松地进行将来的扩展。

选择器表达式

| 添加了一种使用 jQuery 选择器字符串查找 DOM 元素的新方法。

jQuery.extend(jQuery.expr[selectorType], {
selectorName: elementTest
});

组件

selectorType：选择器字符串的前缀字符，指示正在定义哪种类型的选择器。在实践中，对于插件来说，有用的值是 ':'，表示伪类选择器。
selectorName：一个唯一标识此选择器的字符串。
elementTest：包含要评估的 JavaScript 表达式的字符串。如果表达式对元素 a 评估为 true，则该元素将包含在结果集中；否则，该元素将被排除。

讨论

插件可以添加允许脚本使用紧凑语法找到特定集合的 DOM 元素的选择器表达式。通常，插件添加的表达式是新的伪类，以领先的 ':' 字符标识。

jQuery 支持的伪类具有 :selectorName(param1(param2)) 的一般格式。此格式仅需要 selectorName 部分；如果伪类允许参数以使其更具体，param1 和 param2 可用。

元素测试表达式可以引用两个特殊变量，名为 a 和 m。正在测试的 DOM 元素存储在 a 中，选择器表达式的组件存储在 m 中。m 的内容是正则表达式匹配的结果，它将 :selectorName(param1(param2)) 分解如下：

m[0] == ':selectorName(param1(param2))'
m[1] == ':'
m[2] == 'selectorName'
m[3] == 'param1(param2)'
m[4] == '(param2)'

例如，我们可以构建一个测试元素的子节点数的伪类，并将这个新的选择器表达式称为 :num-children(n)：

jQuery.extend(jQuery.expr[':'], {
  'num-children': 'a.childNodes.length == m[3]'
});

现在我们可以，例如，选择所有具有两个子节点的 <ul> 元素，并将它们变为红色：

$(document).ready(function() {
  $('ul:num-children(2)').css('color', 'red');
});

如果需要添加除伪类之外的选择器表达式，应查看jquery.js中的jQuery.parse以找到其他选择器类型的相关正则表达式匹配。

缓动样式

| 为未来的动画定义了一个加速曲线。

jQuery.extend(jQuery.easing, {
easingStyleName: easingFunction
});

组件

easingStyleName：新缓动样式的标签。
easingFunction：确定任何给定时刻的动画值的函数对象。缓动函数传递以下参数：
- fraction：动画的当前位置，以从 0（动画的开始）到 1（动画的结束）的时间来衡量。
- elapsed：动画开始后经过的毫秒数（很少使用）。
- attrStart：正在进行动画的 CSS 属性的起始值。
- attrDelta：正在进行动画的 CSS 属性的起始值和结束值之间的差异。
- duration：动画期间总共经过的毫秒数（很少使用）。

讨论

大多数有效的方法都会触发一个具有固定缓动样式的动画，称为swing。缓动样式定义了动画随时间加速和减速的方式。.animate 方法给了我们更大的灵活性；该方法的一个参数允许指定自定义缓动样式。可以使用这个插件机制创建新的缓动样式。

缓动函数必须在动画的任何时刻返回正在动画的属性的值。由于传递给缓动函数的参数，计算通常采用以下形式：

f(fraction) * attrDelta + attrStart

在这个计算中，f代表一个数学函数，其值随着参数从 0 到 1 的变化而从 0 到 1 变化。例如，一个导致动画以恒定速率进行的缓动样式将需要一个线性函数（f(x) = x）：

关于缓动样式的讨论

在一个插件中，这个缓动样式将用以下代码表示：

jQuery.extend(jQuery.easing, { 
  'linear': function(fraction, elapsed, attrStart, attrDelta,
                                                       duration) {
    return fraction * attrDelta + attrStart;
  }
});

另一方面，如果我们希望我们的动画开始缓慢，然后逐渐加速，我们可以使用一个二次函数（f(x) = x 2 ）：

关于缓动样式的讨论

在一个插件中，这个缓动样式将用以下代码表示：

jQuery.extend(jQuery.easing, { 
  'quadratic': function(fraction, elapsed, attrStart, attrDelta,
                                                       duration) {
    return fraction * fraction * attrDelta + attrStart;
  }
});

安装了这样一个缓动插件后，我们可以在调用.animate方法时随时选择新的缓动样式：

$('.myClass').animate({
  'left': 500,
  'opacity': 0.1
}, 'slow', 'quadratic');

通过这个调用，所有附有myClass类的元素都会移动并淡出到指定的值，开始缓慢，然后逐渐加速直到它们到达目的地。

示例：维护多个事件日志

在前面的参考章节中的各种示例中，我们需要在各种事件发生时显示日志事件。JavaScript 的 alert 函数通常用于此类演示，但不允许我们按时显示频繁的消息。一个更好的选择是 Firefox 和 Safari 可用的 console.log 函数，它允许将消息打印到不会中断页面交互流程的单独日志中。然而，由于此函数不适用于 Internet Explorer，因此我们使用了一个自定义函数来实现此类消息记录的样式。

注意

Firebug Lite 脚本（见附录 B）提供了一个非常强大的跨平台日志记录工具。我们在这里开发的方法专门针对前几章的示例；对于一般情况，通常更倾向于使用 Firebug Lite。

记录消息的一个简单方法是创建一个全局函数，将消息附加到页面上的特定元素：

jQuery.log = function(message) {
  $('<div class="log-message"></div>')
    .text(message).appendTo('.log');
};

我们可以变得更加花哨，让新消息以动画的方式出现：

jQuery.log = function(message) {
  $('<div class="log-message"></div>')
    .text(message)
    .hide()
    .appendTo('.log')
    .fadeIn();
};

现在我们可以调用 $.log('foo') 在页面上的日志框中显示 foo。

然而，我们有时在单个页面上有多个示例，因此，将每个示例保持单独的日志记录是很方便的。我们通过使用方法而不是全局函数来实现这一点：

jQuery.fn.log = function(message) {
  return this.each(function() {
    $('<div class="log-message"></div>')
      .text(message)
      .hide()
      .appendTo(this)
      .fadeIn();
  });
};

现在调用 $('.log').log('foo') 就像我们之前的全局函数调用一样，但我们可以更改选择器表达式以定位不同的日志框。

然而，理想情况下，.log 方法应该足够智能，能够在没有显式选择器的情况下找到最相关的日志消息框。通过利用传递给方法的上下文，我们可以遍历 DOM，找到最接近所选元素的日志框：

jQuery.fn.log = function(message) {
  return this.each(function() {
    $context = $(this);
    while ($context.length) {
      $log = $context.find('.log');
      if ($log.length) {
        $('<div class="log-message"></div>')
          .text(message).hide().appendTo($log).fadeIn();
        break;
      }
      $context = $context.parent();
    }
  });
};

此代码在匹配元素中查找日志消息框，如果找不到，则向上遍历 DOM 查找一个。

最后，有时我们需要显示对象的内容。直接打印对象本身得到的是几乎没有信息的东西，像 [object Object]，因此，我们可以检测参数类型，在传递对象时进行一些自己的美化打印：

jQuery.fn.log = function(message) {
  if (typeof(message) == 'object') {
    string = '{';
    $.each(message, function(key, value) {
      string += key + ': ' + value + ', ';
    });
    string += '}';
    message = string;
  }
  return this.each(function() {
    $context = $(this);
    while ($context.length) {
      $log = $context.find('.log');
      if ($log.length) {
        $('<div class="log-message"></div>')
          .text(message).hide().appendTo($log).fadeIn();
        break;
      }
      $context = $context.parent();
    }
  });
};

现在我们有了一个可以在页面上与正在进行的工作相关的地方写出对象和字符串的方法。

总结

在本章中，我们从两个角度查看了插件：使用和开发。我们看了四种类型的 jQuery 插件添加：插件可以引入新的全局方法和 jQuery 对象方法；此外，它们可以添加选择器表达式和缓动样式。

虽然如此，我们通常更感兴趣的是使用其他人创建的插件。虽然我们已经指向了许多插件的可用文档，但在接下来的章节中，我们将更详细地介绍两个较受欢迎的插件。

第十章：尺寸插件

我们信仰的符号

有时会颠倒过来

重塑每个尺寸

我们对此深信不疑

—Devo，

"纯真的真相"

Dimensions 插件，由 Paul Bakaus 和 Brandon Aaron 共同编写，有助于弥合 CSS 盒模型与开发者准确测量文档中元素的高度和宽度之间的差距。它还以像素精度测量元素的顶部和左侧偏移量，无论它们在页面的哪个位置。在本章中，我们将探讨此插件的各种方法并讨论它们的选项。

尺寸方法

除了确定浏览器窗口或文档的尺寸之外，以下尺寸方法还形成了一组强大的工具，用于识别元素的高度和宽度，无论我们是否想考虑元素的填充和边框大小。

我们将在接下来的每个示例中使用相同的基本 HTML：

<body>
  <div id="container">
<!-- CODE CONTINUES -->    
    <div id="content">
      <div class="dim-outer">
        <p>This is the outer dimensions box. It has the following CSS rule:</p>
<pre><code>.dim-outer {
  height: 200px;
  width: 200px;
  margin: 10px;
  padding: 1em;
  border: 5px solid #e3e3e3;
  overflow: auto;
  font-size: 12px;
}</code></pre>
        <p>Scroll down for the inner dimensions box.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <div class="dim-inner"> This is the inner dimensions box.
        </div>
      </div> 

<!-- CODE CONTINUES -->

    </div>
  </div> 
</body>

.height()

| 获取 document 或 window 对象的高度。

.height()

参数

无。

返回值

一个表示高度的像素整数。

讨论

.height 方法简单地使用了 jQuery 核心方法相同名称的方法。Dimensions 将 .height() 方法扩展到浏览器 window 和 document 上。

$(window).height() 返回浏览器窗口的像素高度。如果有水平滚动条，则不包含在高度计算中。

$(document).height() 返回文档的像素高度。如果文档的高度大于可见区域——在这种情况下存在垂直滚动条——$(document).height() 计算总高度，包括可见部分和隐藏部分。

以下图像说明了 $(document).height() 和 $(window).height() 之间的差异：

Discussion.height()about

有关在页面上使用 .height 方法的信息，请参见第四章。

.width()

| 获取 document 或 window 对象的宽度。

.width()

参数

无。

返回值

一个表示宽度的像素整数。

描述

.width 方法，就像它的 .height() 对应物一样，当应用到元素时，简单地使用了 jQuery 核心方法相同名称的方法。然而，Dimensions 将 .width() 扩展，以便我们可以将其应用到 document 和浏览器 window 上。

$(document).width() 返回文档的像素宽度。如果有垂直滚动条，则 $(document).width() 不包括在计算中。如果文档的宽度大于可见区域——在这种情况下存在水平滚动条——$(document).width() 计算总高度，包括页面的可见部分和隐藏部分。

$(window).width() 返回浏览器的像素宽度。如果有垂直滚动条，则不包含在宽度计算中。

下面的图像说明了$(document).width()和$(window).width()之间的差异：

Description.width()about

有关在页面上使用.width方法的信息，请参阅第四章。

.innerHeight()

| 获取匹配元素集中第一个元素的计算内部高度。

.innerHeight()

参数

无。

返回值

一个表示元素内部高度的整数，以像素为单位。

描述

.innerHeight 方法与基本的.height()不同之处在于它计算顶部和底部填充的高度，而不仅仅是元素本身的高度。但是，它的计算不包括边框或外边距。

如果与document或window一起使用，.innerHeight() 调用 Dimensions.height方法返回这个值。

给定一个高度为200px，字体大小为12px，顶部和底部填充为1em的元素，.innerHeight() 返回224（像素），如下图所示：

Description.innerHeight()about

.innerWidth()

| 获取匹配元素集合中第一个元素的计算内部宽度。

.innerWidth()

参数

无。

返回值

一个表示元素内部宽度的整数，以像素为单位。

描述

.innerWidth 方法与基本的.width()不同之处在于它计算左右填充的宽度，而不仅仅是元素本身的宽度。然而，它的计算不包括边框或外边距。

如果与document或window一起使用，.innerWidth()调用 Dimensions.width方法返回这个值。

给定宽度为200px，字体大小为12px，左右填充为1em的元素，.innerWidth()返回224（像素），如下图所示：

Description.innerWidth()about

.outerHeight()

| 获取匹配元素集中第一个元素的计算外部高度。

.outerHeight()

参数

无。

返回值

一个表示元素外部高度的整数，以像素为单位。

讨论

.outerHeight 方法与基本的 .height() 不同之处在于它计算顶部和底部填充以及顶部和底部边框的高度，而不仅仅是元素本身的高度。但是，与.height()和.innerHeight()一样，它的计算不包括元素的外边距。

如果与document或window一起使用，.outerHeight() 调用 Dimensions.height方法返回这个值。

Discussion.outerHeight()about

.outerWidth()

| 获取匹配元素集中第一个元素的计算外部宽度。

.outerWidth()

参数

无。

返回值

一个表示元素外部宽度的整数，以像素为单位。

描述

.outerWidth方法与基本的.width()不同之处在于，它在计算元素本身的宽度之外还计算左右填充和左右边框的宽度。然而，与.width()和.innerWidth()一样，它不包括元素的边距在内的计算。

如果与document或window一起使用，.outerWidth()调用尺寸.width方法来返回值。

Description.outerWidth()about

定位方法

以下方法有助于确定元素的精确位置——相对于定位祖先、文档主体或文档的可视区域。

就像尺寸方法部分一样，我们将为以下每个示例使用相同的基本 HTML：

<body>
  <div id="container">
<!-- CODE CONTINUES -->    
    <div id="content">
      <div class="dim-outer">
        <p>This is the outer dimensions box. It has the following CSS rule:</p>
<pre><code>.dim-outer {
  height: 200px;
  width: 200px;
  margin: 10px;
  padding: 1em;
  border: 5px solid #e3e3e3;
  overflow: auto;
  font-size: 12px;
}</code></pre>
        <p>Scroll down for the inner dimensions box.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><div class="dim-inner"> This is the inner dimensions box.
        </div>
      </div> 

<!-- CODE CONTINUES -->

    </div>
  </div> 
</body>

.scrollTop()

| 获取窗口或文档内的可滚动元素向下滚动的像素数。

.scrollTop()

参数

无。

返回值

表示像素的垂直滚动条位置的整数。

讨论

.scrollTop方法能够返回浏览器窗口或文档内元素的垂直滚动位置。例如，在<div class="dim-outer">向下滚动了 96 像素后（如下图所示），$('div.dim-outer').scrollTop()返回96：

Discussion.scrollTop()about

.scrollTop(value)

| 设置在窗口或文档内匹配的可滚动元素中从上向下滚动的像素数。

.scrollTop(value)

参数

value：表示像素数的整数。

返回值

用于链接目的的 jQuery 对象。

描述

通过将数值传递给.scrollTop方法，我们可以将浏览器窗口或文档内可滚动元素的滚动位置上下移动。在下图中，<div class="dim-outer">的滚动位置已经设置为$('div.dim-outer').scrollTop(200)：

Description.scrollTop(value)about

.scrollLeft()

| 获取窗口或文档内可滚动元素从左向右滚动的像素数。

.scrollLeft()

参数

无。

返回值

表示水平滚动条位置的整数。

描述

.scrollLeft方法能够返回浏览器窗口或文档内元素的水平滚动位置。例如，在浏览器窗口向右滚动了 24 像素后，如下图所示，$(window).scrollLeft()的返回值是24：

Description.scrollLeft()about

.scrollLeft(value)

| 设置在窗口或文档内匹配的可滚动元素中从左向右滚动的像素数。

.scrollLeft(value)

参数

value：表示像素数的整数。

返回值

用于链接目的的 jQuery 对象。

讨论

通过向.scrollLeft方法传递一个数字值，我们可以将浏览器窗口或文档内可滚动元素的滚动位置向左或向右移动。在下面的图像中，浏览器窗口的滚动位置已经设置为$(window).scrollLeft(50)

关于 Discussion.scrollLeft(value)

.偏移量()

| 获取匹配元素集中第一个元素的顶部和左侧坐标。还获取匹配元素的scrollTop和scrollLeft偏移量。

.offset([options])
.offset(options, returnObject)

参数（第一版）

options (optional)：一个设置映射，用于配置偏移量的计算方式。可以包含以下项目：
- margin (optional)：一个布尔值，表示是否在计算中包含元素的外边距。默认为true。
- border (optional)：一个布尔值，表示是否在计算中包含元素的边框。默认为false。
- padding (optional)：一个布尔值，表示是否在计算中包含元素的填充。默认为false。
- scroll (optional)：一个布尔值，表示是否在计算中包含所有祖先元素的滚动偏移量。默认为true。
- lite (optional)：一个布尔值，表示是否使用 offsetLite 而不是 offset。默认为false。
relativeTo (optional)：表示匹配元素将被偏移到哪个祖先元素的 HTML 元素。默认为document.body。

参数（第二版）

options：一个设置映射，用于配置偏移量的计算方式。
- margin (optional)：一个布尔值，表示是否在计算中包含元素的外边距。默认为true。
- border (optional)：一个布尔值，表示是否在计算中包含元素的边框。默认为false。
- padding (optional)：一个布尔值，表示是否在计算中包含元素的填充。默认为false。
- scroll (optional)：一个布尔值，表示是否在计算中包含所有祖先元素的滚动偏移量。默认为true。
- lite (optional)：一个布尔值，表示是否使用offsetLite而不是offset。默认为false。
- relativeTo (optional)：表示匹配元素将被偏移到哪个祖先元素的 HTML 元素。默认为document.body。
- returnObject：一个对象，用于存储返回值。当使用方法的第二个版本时，链条将不会被打破，并且结果将被分配到此对象中。

返回值（第一版）

包含top, left值，以及可选的scrollTop和scrollLeft值的对象。

返回值（第二版）

jQuery 对象，用于链式目的。

描述

.offset方法允许我们定位页面上任何位置的任何元素的top和left位置，不管其position是static还是relative, absolute还是fixed，也不管滚动条的位置如何。通过对 margin、border、padding 和 scroll 进行计算，.offset()提供了极大的灵活性和准确性。

以下一系列图像展示了不同设置下.offset()返回的不同值。

默认设置

在第一个示例中，使用了 padding（false）、border（false）和 margin（true）的默认设置。结果：

{top: 117, left: 580, scrollTop: 0, scrollLeft: 0}

Description.offset()about

请注意，由于 margin 的默认值是true，因此从窗口左边缘到匹配元素的距离一直延伸到（但不包括）元素的边框。

包括边框

在第二个示例中，边框选项设置为true。由于<div class="dim-outer">周围有 5 像素的边框，top和left值分别增加了 5 像素：

{top: 122, left: 585, scrollTop: 0, scrollLeft: 0}

Description.offset()about

包括边框和内边距

接下来的示例将边框和 padding 选项都设置为true（记住 margin 选项的默认值为true）。结果是边框增加了 5 像素，内边距增加了另外 12 像素（1em）：

{top: 134, left: 597, scrollTop: 0, scrollLeft: 0}

Description.offset()about

查找相对于祖先的位置

通过relativeTo选项，我们可以找到元素与其任何一个定位祖先之间的偏移距离。在下一个示例中，我们正在获取<div class="dim-outer">和<div id="content">之间的偏移量。由于content <div>本身就是由于容器的 24 像素左边距而从窗口左侧偏移，左侧的值现在比上一个示例少了 24 像素：

{top: 27, left: 573, scrollTop: 0, scrollLeft: 0}

Description.offset()about

值得注意的是，由于relativeTo设置需要一个 DOM 元素，所以我们在使用它的relativeTo参数之前，使用了简写[0]来将 jQuery 对象转换为 DOM 元素。

top值为27是由浮动<div class="dim-outer">元素的 margin（12）、border（5）和 padding（10）的总和得出的。如果<div id="content">有任何应用到其顶部的 padding，那也将被添加到总的顶部偏移量中。

返回滚动偏移

scroll选项的默认值为true，当匹配的元素位于一个或多个overflow属性设置为auto或scroll的元素内部时，它特别有用。它将所有祖先元素的滚动偏移量添加到总偏移量中，并向返回的对象添加了两个属性，scrollTop和scrollLeft。其实用性可以在下面的示例中观察到，示例显示了<div class="dim-outer">在<div class="dim-outer">向下滚动了 79 像素时的偏移量。

{top: 509, left: 597, scrollTop: 79, scrollLeft: 0}

描述.offset()about

保持链式操作

如果我们希望传递返回对象以便继续链接方法，我们仍然必须包含选项映射。为了保持这些选项的默认值不变，同时传递返回对象，我们可以简单地使用一个空映射。例如，$('div.dim-outer').offset({}, returnObject)获得与$('div.dim-outer').offset()相同的值，但将它们存储在returnObject中以供以后使用。

假设我们希望在更改<div class="dim-outer">的背景颜色为灰色（#cccccc）的同时获取其偏移和滚动值。代码将如下所示：

var retObj = {};
$('div.dim-outer')
  .offset({}, retObj)
  .css('background','#ccc');
$(this).log(retObj);

我们首先声明一个返回对象的变量（retObj）。然后我们将.offset和.css方法链接到选择器上。最后，我们对.offset()返回的对象执行某些操作—在这种情况下，使用我们的日志插件记录结果。 <div>的背景颜色被更改，并且.offset()值如下所示被记录：

{top: 117, left: 580, scrollTop: 0, scrollLeft: 0}

描述.offset()about

`.position()`

| 获取匹配元素集中第一个元素相对于其最近的相对、绝对或固定定位的祖先的位置。

.position()
.position(returnObject)

参数（第一个版本）

无。

参数（第二个版本）

returnObject：用于存储返回值的对象。当使用方法的第二个版本时，链不会中断，并且结果将被分配给此对象。

返回值（第一个版本）

包含top和left值的对象。

返回值（第二个版本）

jQuery 对象，用于链式操作。

描述

.position方法是以下.offset()变体的简写形式：

.offset({
  margin: false, 
  scroll: false, 
  relativeTo: offsetParent
  }, 
  returnObject);

在这里，只确定元素的顶部和左侧位置—没有填充、边框或边距—与其最近的定位祖先相关。有关这些选项的更多详细信息，请参阅.offset()的描述。

对于relativeTo，.position()方法使用一个名为offsetParent的变量，该变量在 Dimensions 代码中设置。实际上，这段代码从元素的直接父级开始，然后在 DOM 中向上爬行，停止在第一个具有relative, absolute或fixed位置的元素处。然后，相对于最近的定位元素计算初始元素的偏移位置。

考虑以下 HTML：

<div id="outer">
  <div id="middle" style="position: relative">
    <div id="inner">
      <p>Use .position() for this paragraph</p>
    </div>
  </div>
</div>

使用$('p').position()计算段落相对于<div id="middle">的顶部和左侧偏移，因为该<div>是最近的定位祖先（请注意其style属性）。

由于.position()不带任何参数（第二个版本中除了returnValue），它比.offset()灵活性要小得多。在大多数情况下，建议使用上述讨论的.offset()。

第十一章：表单插件

你最好找出来

在你填写空白之前

—Devo,

"找出"

Form 插件是一个很好的例子，它使得一个困难、复杂的任务变得非常简单。它帮助我们以 AJAX 方式提交表单（即使表单包含文件上传字段），以及检查和操作表单字段的内容。

AJAX 表单提交

这些方法有助于使用 AJAX 调用将表单内容提交到服务器。

.ajaxSubmit()

| 发送表单内容到服务器而不刷新页面。

.ajaxSubmit(success)
.ajaxSubmit(options)

参数 (第一个版本)

success：当服务器成功响应时执行的回调。

参数 (第二个版本)

options：配置提交的选项的映射。可以包含以下项目：
- url (可选)：表单将被提交到的 URL。默认值为表单的 action 属性值，如果没有找到则为当前页面的 URL。
- type (可选)：提交表单时要使用的方法（GET 或 POST）。默认值为表单的 method 属性值，如果没有找到则为 GET。
- beforeSubmit (可选)：在发送请求之前执行的回调。
- dataType (可选)：如何解释响应数据。可以是 'xml', 'script' 或 'json'。
- target (可选)：响应 HTML 将放置的元素。可以是选择器字符串、jQuery 对象或 DOM 元素引用。仅当省略 dataType 时有效。
- success (可选)：当服务器成功响应时执行的回调。
- semantic (可选)：是否强制 HTML 字段的严格排序。默认值为 false。
- resetForm (可选)：一个布尔值，指示在成功提交后将表单值重置为默认值。默认值为 false。
- clearForm (可选)：一个布尔值，指示是否在成功提交后清除表单值。默认值为 false。

返回值

用于链接目的的 jQuery 对象。

讨论

.ajaxSubmit 方法使用提供的 url 和 type 信息发起一个 AJAX 请求，同时使用表单中当前存在的数据。表单内容使用 .formToArray 方法进行编码，而文件上传等细节则在幕后处理。

如果使用 beforeSubmit 选项提供了回调函数，则在发送请求之前将触发该回调。这给我们一个机会来进行最后一分钟的验证或清理。如果验证程序检测到用户必须更正的错误，程序可以返回 false 阻止表单提交。回调函数通过由 .formToArray() 返回的表单数据、引用表单的 jQuery 对象以及提供给 .ajaxSubmit() 的选项对象来传递。有关此回调函数的示例，请查看后面关于 .ajaxForm() 的讨论中的示例。

当提供了dataType时，响应数据将相应地进行解释。所执行的处理与支持的数据类型的$.ajax函数相同。任何script响应都将被解释为 JavaScript 并在全局上下文中执行，而json响应将被解析为 JavaScript 对象或数组。指定xml数据类型的调用在接收到响应时不会引起任何解析。

如果未提供dataType，则可以使用target选项。目标引用的 DOM 元素将被填充为 AJAX 请求的响应，解释为纯 HTML。dataType和target选项是互斥的。

在由于dataType或target选项而执行了任何相关处理后，将执行success回调。此函数会提供响应数据以进行操作。有关解释和操作响应数据的方法，请参见第七章中的$.ajax函数讨论。

semantic标志以执行速度为代价强制使用严格的语义排序。有关更多信息，请参见稍后的.formToArray()讨论。

如果resetForm或clearForm设置为true，则在执行success回调（如果提供）之前会执行相应的操作。有关这些操作的更多信息，请参见稍后的.clearForm和.resetForm方法讨论。

如果要提交的表单包含文件上传字段，则文件数据将使用multipart/form-data MIME 类型正确上传。无需采取进一步操作。

请注意，.ajaxSubmit方法会立即执行。由于通常在单击提交按钮时发出 AJAX 请求，因此通常更方便使用.ajaxForm方法。但是，.ajaxSubmit()的直接操作可能是实现此插件与其他插件（如流行的Validation插件）之间交互的最简便方法。

.ajaxForm()

| 准备一个表单以进行自动 AJAX 提交。

.ajaxForm(options)

参数

options：配置提交的选项映射。可以包含以下项目（这些项目将原样传递给.ajaxSubmit()）：
- url（可选）：表单将提交到的 URL。默认值为表单的action属性值，如果找不到则为当前页面的 URL。
- type（可选）：提交表单时使用的方法（GET或POST）。默认值为表单的method属性值，如果找不到则为GET。
- beforeSubmit（可选）：在发送请求之前执行的回调。
- dataType（可选）：响应数据的解释方式。可以是'xml'，'script'或'json'。
- target（可选）：将响应 HTML 放置到其中的元素。可以是选择器字符串、jQuery 对象或 DOM 元素引用。仅当省略dataType时有效。
- success（可选）：服务器成功响应时执行的回调。
- semantic（可选）：是否强制使用严格的 HTML 字段顺序。默认值为 false。
- resetForm（可选）：一个布尔值，指示在成功提交后是否将表单值重置为默认值。默认值为 false。
- clearForm（可选）：一个布尔值，指示在成功提交后是否清除表单值。默认值为 false。

返回值

jQuery 对象，用于链式调用目的。

讨论

.ajaxForm 方法通过 AJAX 准备表单以供稍后提交。当提交表单时，AJAX 请求将使用提供的 url 和 type 信息以及当前在表单中的数据。表单内容使用 .formToArray 方法进行编码，并且诸如文件上传之类的复杂性在幕后处理。

与 .ajaxSubmit 方法不同，.ajaxForm 方法不会导致立即操作。相反，它将处理器绑定到表单的 submit 事件和表单按钮的 click 事件，从而导致表单内容作为 AJAX 请求发送。这消除了设置 AJAX 表单的一些工作。

此外，.ajaxForm 方法能够模拟标准表单提交的其他方面，而.ajaxSubmit 方法则不能。当 .ajaxForm() 执行时，包括被点击的提交按钮的名称和值在内的请求会被包含在其中。此外，当表单包含一个类型为 image 的 <input> 字段时，.ajaxForm() 可以捕获鼠标坐标并将它们与请求一起发送。

为了获得最佳效果，在使用图像输入时，Dimensions 插件也应该存在。Form 插件将自动检测 Dimensions 的存在，并在可能的情况下使用它。

.ajaxForm 方法可用于包含任何标准字段类型的表单：

<form id="test-form" name="test-form" action="submit.php" method="post">
  <div class="form-row">
    <label for="city">City</label>
    <input type="text" id="city" name="city" size="20" />
  </div>
  <div class="form-row">
    <label for="state">State</label>
    <input type="text" id="state" name="state" size="5" value="MI" />
  </div>
  <div class="form-row">
    <label for="comment">Comments</label>
    <textarea id="comment" name="comment" rows="8" cols="30">
    </textarea>
  </div>

  <div class="form-row">
    <label for="sacks">Villages sacked</label>
    <select name="villages" id="villages">
      <option value="0">none</option>
      <option value="5" selected="selected">1-5</option>
      <option value="10">6-10</option>
      <option value="20">11-20</option>
      <option value="50">21-50</option>
      <option value="100">51-100</option>
      <option value="more">over 100</option>
    </select>
  </div>
  <div class="form-row multi">
    <span class="multi-label">Preferred tactic</span>
    <input type="radio" name="tactic" value="loot" id="loot" checked="checked" /><label for="loot">loot</label>
    <input type="radio" name="tactic" value="pillage" id="pillage" /><label for="pillage">pillage</label>
    <input type="radio" name="tactic" value="burn" id="burn" /><label for="burn">burn</label>
  </div>

  <div class="form-row multi">
    <span class="multi-label">Viking gear</span>
    <input type="checkbox" name="gear[helmet]" value="yes" id="helmet" checked="checked" /><label for="helmet">horned helmet</label>
    <input type="checkbox" name="gear[longboat]" value="yes" id="longboat" /><label for="pillage">longboat</label>
    <input type="checkbox" name="gear[goat]" value="yes" id="goat" checked="checked"/><label for="goat">magic goat</label>
  </div>

  <div class="form-row buttons">
    <input type="submit" id="submit" name="submit" value="Send" />
    <input type="button" id="more" name="more" value="More Options" />
  </div>
</form>

要准备表单进行提交，我们只需要在 DOM 就绪时调用 .ajaxForm() 一次。

$(document).ready(function() {
  $('#test-form').ajaxForm({
     target: '.log'
  });
});

用户随后可以填写表单字段：

Discussion.ajaxForm()about

当稍后点击发送按钮时，服务器将接收到所有表单信息，而无需浏览器刷新。为了测试目的，我们可以使用 PHP 的 print_r 函数来显示已发布的表单内容：

Array
(
    [city] => Morton
    [state] => IL
    [comment] => Eric the Red is my hero!
    [villages] => 50
    [tactic] => pillage
    [gear] => Array
        (
            [helmet] => yes
            [longboat] => yes
        )

    [submit] => Send
)

如果使用 beforeSubmit 选项提供回调函数，则在发送请求之前将触发回调。回调以由 .formToArray() 返回的表单数据、引用表单的 jQuery 对象和提供给 .ajaxForm() 的选项对象作为参数传递。此回调主要用于执行表单验证：

$(document).ready(function() {
  $('#test-form').ajaxForm({
     target: '.ajax-form .log',
     beforeSubmit: function(formData, $form, options) {
       if ($form.find('#city').val() == '') {
         alert('You must enter a city.');
         return false;
       }
     }
  });
});

如果验证例程检测到用户必须更正的错误，则该例程可以返回 false 以防止提交表单。在我们的示例中，城市字段必须输入一个值，否则将显示警报并且不会提交。

当提供了dataType时，响应数据将相应地进行解释。执行的处理与$.ajax函数相同，适用于支持的数据类型。任何script响应都将被解释为 JavaScript 并在全局上下文中执行，而json响应将被解析为 JavaScript 对象或数组。指定xml数据类型的调用在接收到响应时不会引起任何解析。

如果未提供dataType，则可以使用target选项。由目标引用的 DOM 元素将填充为 AJAX 请求的响应，解释为纯 HTML。dataType和target选项是互斥的。

在由于dataType或target选项而执行了任何相关处理后，将执行success回调。此函数被给予响应数据以便执行操作。有关解释和操作响应数据的方法，请参见第七章中的$.ajax函数讨论。

semantic标志以执行速度为代价强制执行严格的语义顺序。有关更多信息，请参见稍后的.formToArray()讨论。

如果resetForm或clearForm设置为true，则会在执行success回调（如果提供）之前执行相应的操作。有关这些操作的更多信息，请参见稍后的.clearForm和.resetForm方法讨论。

如果要提交的表单包含文件上传字段，则文件数据将使用multipart/form-data MIME 类型正确上传。无需采取进一步的操作。

.ajaxFormUnbind()

| 将表单恢复到其非 AJAX 状态。

.ajaxFormUnbind()

参数

无。

返回值

用于链接目的的 jQuery 对象。

讨论

在表单上调用.ajaxForm()会将处理程序绑定到表单的submit事件以及其中任何按钮和图像输入的click事件上。如果以后表单不再使用 AJAX 提交，我们可以在同一表单上调用.ajaxFormUnbind()来移除这些处理程序，而不会中断可能已绑定到表单元素的任何其他处理程序。

检索表单值

这些方法允许脚本读取和转换 Web 表单中字段的值。

.formToArray()

| 将表单中的值收集到对象数组中。

.formToArray([semantic])

参数

semantic（可选）：是否强制执行字段的严格 HTML 排序。默认值为false。

返回值

一个对象数组，每个对象代表表单中的一个字段。

讨论

.formToArray方法获取表单的值，并将它们组织成适合传递给 jQuery AJAX 函数（如$.ajax(), $.post()和.load()）的数据结构。它可以处理具有任何标准字段类型的表单。

给定在.ajaxFor()讨论中说明的表单，.formToArray方法将返回一个 JavaScript 数组，其中包含表单的值：

[
  {name: city, value: Morton},
  {name: state, value: IL},
  {name: comment, value: Eric the Red is my hero!},
  {name: villages, value: 50},
  {name: tactic, value: pillage},
  {name: gear[helmet], value: yes},
  {name: gear[longboat], value: yes}
]

数组中的每个对象都有name和value属性。未选中的复选框元素不会在数组中表示。

如果将semantic参数设置为true，则数组中列出的字段将保证按照它们在 HTML 源代码中的顺序排序。如果表单中不包含<input>类型为image的元素，则这已经是事实。除非需要，否则避免使用此选项，因为涉及的额外处理会减慢方法的速度。

.formSerialize()

| 将表单中的值收集到序列化字符串中。

.formSerialize([semantic])

参数

semantic（可选）：是否强制严格的 HTML 字段排序。默认值为false。

返回值

适合提交的表单字段的字符串表示。

讨论

.formSerialize方法获取表单的值，并将其转换为适合作为GET请求的查询字符串传递的字符串。它可以处理任何标准字段类型的表单。

考虑到在.ajaxFor()讨论中所示的表单，.formSerialize方法将返回表单值的字符串表示：

city=Morton&state=IL&comment=Eric%20the%20Red%20is%20my%20hero!
  &villages=50&tactic=pillage&gear%5Bhelmet%5D=yes
  &gear%5Blongboat%5D=yes

每个字段在字符串中显示为键值对。未选中的复选框元素不会在字符串中表示。字符串根据需要进行 URL 编码。

如果将semantic参数设置为true，那么字符串中列出的字段将保证按照它们在 HTML 源代码中的顺序排序。如果表单中不包含<input>类型为image的元素，则这已经是事实。除非需要，否则避免使用此选项，因为涉及的额外处理会减慢方法的速度。

.fieldSerialize()

| 将一组字段的值收集到序列化字符串中。

.fieldSerialize([successful])

参数

successful（可选）：是否修剪包含的字段值以获取成功的字段。默认值为true。

返回值

适合提交的表单字段的字符串表示。

讨论

类似于之前的.formSerialize方法，.fieldSerialize方法获取表单的值，并将其转换为适合作为GET请求的查询字符串传递的字符串。然而，.fieldSerialize()作用于一个引用单个字段而不是整个表单的 jQuery 对象上。

它可以处理任何标准类型的字段，例如<select>菜单：

<select name="villages" id="villages">
  <option value="0">none</option>
  <option value="5" selected="selected">1-5</option>
  <option value="10">6-10</option>
  <option value="20">11-20</option>
  <option value="50">21-50</option>
  <option value="100">51-100</option>
  <option value="more">over 100</option>
</select>

用户可以选择任何选项：

Discussion.fieldSerialize()about

值从当前选择的选项中获取，并且.fieldSerialize方法将返回此值的字符串表示：

villages=50

每个给定的字段在字符串中显示为键值对。未选中的复选框元素不会在字符串中表示。字符串根据需要进行 URL 编码。

默认情况下，如果字段不成功，则不会在字符串中表示它们，如 HTML 表单的 W3C 规范中所定义：

www.w3.org/TR/html4/interact/forms.html#h-17.13.2

成功的字段是在正常表单提交操作期间提交到服务器的字段。例如，当前选中的复选框是成功的；未选中的不是。很少会想要不成功字段的值，但如果需要，可以将.fieldSerialize()的successful参数设置为false。

在.ajaxFor()讨论中所示的表单中，当successful设置为true时，.fieldSerializer()仅包括选中的单选按钮和复选框：

tactic=loot&gear%5Bhelmet%5D=yes&gear%5Bgoat%5D=yes

但是当successful设置为false时，fieldSerializer()也包括未选中的选项：

tactic=loot&tactic=pillage&tactic=burn&gear%5Bhelmet%5D=yes
  &gear%5Blongboat%5D=yes&gear%5Bgoat%5D=yes

`.fieldValue()`

| 将一组字段的值收集到一个字符串数组中。

.fieldValue([successful])
$.fieldValue(element[, successful])

参数（第一个版本）

successful（可选）：是否将包含的字段值修剪为成功的值。默认值为true。

参数（第二个版本）

element：要检索其值的表单输入元素。
successful（可选）：是否将包含的字段值修剪为成功的值。默认值为true。

返回值

一个包含字段值的字符串数组。

讨论

.fieldValue()方法和$.fieldValue()函数都会获取表单的值，并将它们作为字符串数组返回。.fieldValue()方法作用于引用单个字段的 jQuery 对象，而$.fieldValue()函数在其第一个参数作为字段元素时执行相同的任务。

这些操作可以处理任何标准类型的字段，比如<select>菜单：

<select name="villages" id="villages">
  <option value="0">none</option>
  <option value="5" selected="selected">1-5</option>
  <option value="10">6-10</option>
  <option value="20">11-20</option>
  <option value="50">21-50</option>
  <option value="100">51-100</option>
  <option value="more">over 100</option>
</select>

用户随后可以选择任何选项：

Discussion.fieldValue()about

该值从当前选定的选项中获取，并且.fieldValue()方法将以数组表示此值：

[50]

给定的每个字段都以数组中的字符串形式出现。未选中的复选框元素不会在数组中表示。

默认情况下，如果字段在 W3C HTML 表单规范中定义的不成功，则不会在数组中表示这些字段：

www.w3.org/TR/html4/interact/forms.html#h-17.13.2

成功的字段是在正常表单提交操作期间提交到服务器的字段。例如，当前选中的复选框是成功的；未选中的不是。很少会想要不成功字段的值，但如果需要，可以将.fieldValue()的successful参数设置为false。

在.ajaxFor()讨论中所示的表单中，当successful设置为true时，.fieldValue()仅包括选中的单选按钮和复选框：

[loot, yes, yes]

但是当successful设置为false时，.fieldValue()也包括未选中的选项：

[loot, pillage, burn, yes, yes, yes]

.fieldValue 方法始终返回一个数组；如果在被操作元素集中没有要报告的值，则结果数组将为空。相比之下，如果所询问的字段元素不成功，$.fieldValue 函数将返回 null。

表单操作

这些方法使脚本可以轻松地更改页面上表单的当前内容。

.clearForm()

| 清除表单中的所有数据。

.clearForm()

参数

无。

返回值

jQuery 对象，用于链式调用。

讨论

此方法查找匹配元素内的所有输入字段（、<select> 和 <textarea> 元素），并清除它们的值。此方法通常应用于 <form> 元素，但也可以与任何字段容器（如 <fieldset>）一起使用。

所有字段都将清空，而不考虑其默认值：

Discussion.clearForm()about

根据其类型清除字段，如下所示：

文本字段和文本区域的值设置为空字符串。
选择元素设置为 -1，表示无选择。
复选框和单选按钮未选中。
其他字段，如提交按钮和图像输入，不受影响。

请注意，尽管隐藏字段具有值，但它们不受清除操作的影响。

.clearFields()

| 清除输入字段中的所有数据。

.clearFields()

参数

无。

返回值

jQuery 对象，用于链式调用。

讨论

此方法清除所有匹配的输入字段元素的值（、<select> 和 <textarea> 元素）。

.clearFields 方法与 .clearForm() 仅在 .clearForm() 发送到匹配表单元素的 jQuery 对象时有所不同，而 .clearFields() 发送到匹配的字段本身的 jQuery 对象时有所不同：

Discussion.clearFields()about

根据其类型清除字段，如下所示：

文本字段和文本区域的值设置为空字符串。
选择元素设置为 -1，表示“无选择”。
复选框和单选按钮未选中。
其他字段，如提交按钮和图像输入，不受影响。

请注意，尽管隐藏字段具有值，但它们不受清除操作的影响。

.resetForm()

| 将表单重置为其初始值。

.resetForm()

参数

无。

返回值

jQuery 对象，用于链式调用。

讨论

此方法将表单中的所有字段返回到其初始值（在 HTML 源代码中定义的值）：

Discussion.resetForm()about

使用 DOM API 的本地 .reset 方法完成此操作。因此，.resetForm() 只能应用于引用 <form> 元素的 jQuery 对象，而不像 .clearForm() 那样，后者可以应用于引用任何包含元素的 jQuery 对象。

附录 A. 在线资源

我不记得我曾经知道的东西

有人现在帮帮我，让我离开

—Devo,

"Deep Sleep"

以下在线资源代表了进一步了解 jQuery、JavaScript 和 Web 开发的起点，超出了本书介绍的范围。网络上有太多优质信息源，本附录不可能涵盖所有。此外，虽然其他印刷出版物也可以提供有价值的信息，但它们在此未予记录。

jQuery 文档

jQuery Wiki

jquery.com 上的文档以 wiki 的形式呈现，这意味着内容可以由公众编辑。该网站包括完整的 jQuery API、教程、入门指南、插件存储库等等：

docs.jquery.com/

jQuery API

在 jQuery.com 上，API 可以在两个位置找到——文档部分和分页 API 浏览器。

jQuery.com 的文档部分不仅包括 jQuery 方法，还包括所有 jQuery 选择器表达式：

docs.jquery.com/Selectors

docs.jquery.com/

jquery.com/api

jQuery API Browser

Jörn Zaeferrer 制作了一个方便的 jQuery API 树形浏览器，具有搜索功能和按字母顺序或类别排序：

jquery.bassistance.de/api-browser/

Visual jQuery

这款由Yehuda Katz设计的 API 浏览器既美观又方便。它还提供了对许多 jQuery 插件的快速查看方法：

www.visualjquery.com/

Web Developer Blog

Sam Collet 在他的博客上保存了一个 jQuery 文档的主列表，包括可下载版本和备忘单，以及其他博客上经过验证的 JavaScript 资源：

webdevel.blogspot.com/2007/01/jquery-documentation.html

JavaScript Reference

Mozilla Developer Center

该网站提供了全面的 JavaScript 参考资料，JavaScript 编程指南，有用工具的链接等等：

developer.mozilla.org/en/docs/JavaScript/

Dev.Opera

虽然主要关注自己的浏览器平台，但 Opera 的网站也包括一些有关 JavaScript 的有用文章：

dev.opera.com/articles/

Quirksmode

Peter-Paul Koch 的 Quirksmode 网站是理解浏览器实现各种 JavaScript 函数以及许多 CSS 属性差异的绝佳资源：

www.quirksmode.org/

JavaScript Toolbox

Matt Kruse's JavaScript Toolbox 提供了大量自制的 JavaScript 库，以及有关 JavaScript 最佳实践的可靠建议和其他地方验证过的 JavaScript 资源集合：

www.javascripttoolbox.com/

JavaScript Code Compressors

Packer

This JavaScript compressor/obfuscator by Dean Edwards is used to compress the jQuery source code. It's available as a web-based tool or as a free download. The resulting code is very efficient in file size, at a cost of a small increase in execution time:

dean.edwards.name/packer/

dean.edwards.name/download/#packer

JSMin

Created by Douglas Crockford, JSMin is a filter that removes comments and unnecessary white space from JavaScript files. It typically reduces file size by half, resulting in faster downloads:

www.crockford.com/javascript/jsmin.html

Pretty Printer

This tool prettifies JavaScript that has been compressed, restoring line breaks and indentation where possible. It provides a number of options for tailoring the results:

www.prettyprinter.de/

(X)HTML Reference

W3C Hypertext Markup Language Home Page

The World Wide Web Consortium (W3C) sets the standard for (X)HTML, and the HTML home page is a great launching point for its specifications and guidelines:

www.w3.org/MarkUp/

CSS Reference

W3C Cascading Style Sheets Home Page

The W3C's CSS home page provides links to tutorials, specifications, test suites, and other resources:

www.w3.org/Style/CSS/

Mezzoblue CSS Cribsheet

Dave Shea provides this helpful CSS cribsheet in an attempt to make the design process easier, and provide a quick reference to check when you run into trouble:

mezzoblue.com/css/cribsheet/

Position Is Everything

This site includes a catalog of CSS browser bugs along with explanations of how to overcome them:

www.positioniseverything.net/

XPath Reference

W3C XML Path Language Version 1.0 Specification

Although jQuery's XPath support is limited, theW3C's XPath Specification may still be useful for those wanting to learn more about the variety of possible XPath selectors:

www.w3.org/TR/xpath

TopXML XPath Reference

The TopXML site provides helpful charts of axes, node tests, and functions for those wanting to learn more about XPath:

www.topxml.com/xsl/XPathRef.asp

MSDN XPath Reference

The Microsoft Developer Network website has information on XPath syntax and functions:

msdn2.microsoft.com/en-us/library/ms256115.aspx

Useful Blogs

The jQuery Blog

John Resig, et al., the official jQuery blog posts announcements about new versions and other initiatives among the project team, as well as occasional tutorials and editorial pieces.

jquery.com/blog/

学习 jQuery

Karl Swedberg、Jonathan Chaffer、Brandon Aaron 等 运行着一个提供 jQuery 教程、示例和公告的博客：

www.learningjquery.com/

Jack Slocum 的博客

Jack Slocum，受欢迎的 EXT 套件 JavaScript 组件的作者，写了关于他的工作和 JavaScript 编程的博客：

www.jackslocum.com/blog/

具有想象力的 Web 标准

Dustin Diaz 的博客专注于网页设计和开发的文章，重点放在 JavaScript 上：

www.dustindiaz.com/

Snook

Jonathan Snook 的一般编程/网页开发博客：

snook.ca/

等我来

Christian Heilmann 的三个网站提供了与 JavaScript 和网页开发相关的博客文章、示例代码和长篇文章：

www.wait-till-i.com/

www.onlinetools.org/

icant.co.uk/

DOM 脚本化

Jeremy Keith 的博客继续了广受欢迎的 DOM 脚本书留下的内容——一个非常好的关于非侵入式 JavaScript 的资源：

domscripting.com/blog/

随着时间的流逝

Stuart Langridge 试验了浏览器 DOM 的高级用法：

www.kryogenix.org/code/browser/

一个不同寻常的列表

A List Apart 探讨了网页内容的设计、开发和含义，特别关注网页标准和最佳实践：

www.alistapart.com/

Particletree

Chris Campbell、Kevin Hale 和 Ryan Campbell 开设了一个博客，提供了许多网页开发方面的有价值信息：

particletree.com/

JavaScript 的奇怪禅意

Scott Andrew LePera 的博客关于 JavaScript 的怪癖、注意事项、奇怪的黑客技巧、奇闻异事和积累的智慧。专注于 Web 应用程序开发的实际用途：

jszen.blogspot.com/

使用 jQuery 的 Web 开发框架

随着开源项目的开发者意识到 jQuery，许多人将 JavaScript 库纳入自己的系统中。以下是一些早期采用者的简要列表：

要获取更完整的列表，请访问 使用 jQuery 的网站 页面：

docs.jquery.com/Sites_Using_jQuery

附录 B. 开发工具

当问题来临时

你必须鞭打它

—Devo，

"鞭打它"

文档可以帮助解决我们 JavaScript 应用程序的问题，但没有好的软件开发工具来替代。幸运的是，有许多可用于检查和调试 JavaScript 代码的软件包，其中大多数都可以免费获取。

Firefox 工具

Mozilla Firefox 是大多数 Web 开发人员首选的浏览器，因此拥有一些最全面和备受尊敬的开发工具。

Firebug

用于 jQuery 开发的Firebug扩展不可或缺：

www.getfirebug.com/

Firebug 的一些功能包括：

一个出色的 DOM 检查器，用于查找文档片段的名称和选择器
CSS 操作工具，用于查找页面外观原因并进行更改
一个交互式 JavaScript 控制台
一个 JavaScript 调试器，可以监视变量和跟踪代码执行

Web 开发者工具栏

这不仅在 DOM 检查方面与 Firebug 重叠，还包含用于常见任务的工具，如 cookie 操作，表单检查和页面调整。您还可以使用此工具栏快速轻松地为站点禁用 JavaScript，以确保在用户的浏览器功能较差时功能优雅降级：

chrispederick.com/work/web-developer/

Venkman

Venkman是 Mozilla 项目的官方 JavaScript 调试器。它提供了一个类似于用于调试其他语言编写的程序的 GDB 系统的故障排除环境。

www.mozilla.org/projects/venkman/

正则表达式测试器

用于在 JavaScript 中匹配字符串的正则表达式可能难以编写。这个 Firefox 扩展允许使用界面轻松地尝试正则表达式以输入搜索文本：

sebastianzartner.ath.cx/new/downloads/RExT/

Internet Explorer 的工具

网站在 IE 中的行为通常与其他 Web 浏览器不同，因此对于该平台具有调试工具是重要的。

微软 Internet Explorer 开发者工具栏

开发者工具栏主要提供了网页的 DOM 树视图。可以通过视觉定位元素，并通过新的 CSS 规则即时修改。它还提供其他杂项开发辅助工具，如用于测量页面元素的标尺：

www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038

微软 Visual Web Developer

微软的 Visual Studio软件包可用于检查和调试 JavaScript 代码：

msdn.microsoft.com/vstudio/express/vwd/

要在免费版本（Visual Web Developer Express）中交互式运行调试器，请按照此处概述的过程进行操作：

www.berniecode.com/blog/2007/03/08/how-to-debug-javascript-with-visual-web-developer-express/

DebugBar

DebugBar 提供了 DOM 检查器以及用于调试的 JavaScript 控制台：

www.debugbar.com/

Drip

JavaScript 代码中的内存泄漏可能会导致 Internet Explorer 的性能和稳定性问题。Drip 有助于检测和隔离这些内存问题：

Sourceforge.net/projects/ieleak/

Safari 的工具

Safari 作为开发平台仍处于起步阶段，但仍然可以为代码在此浏览器中的行为与其他地方不同的情况提供可用的工具。

Web Inspector

Safari 的 Nightly 构建版本包括检查单个页面元素并收集有关每个元素应用的 CSS 规则的信息的功能。

trac.webkit.org/projects/webkit/wiki/Web%20Inspector

Drosera

Drosera 是 Safari 和其他基于 WebKit 的应用程序的 JavaScript 调试器。它启用了断点、变量监视和交互式控制台。

其他工具

Firebug Lite

虽然 Firebug 扩展本身仅限于 Firefox web 浏览器，但一些功能可以通过在网页上包含 Firebug Lite 脚本来复制。此包模拟了 Firebug 控制台，包括允许调用 console.log() 的功能，通常会导致其他浏览器中抛出 JavaScript 错误：

www.getfirebug.com/lite.html

TextMate jQuery Bundle

这个为流行的 Mac OS X 文本编辑器 TextMate 提供了语法高亮显示 jQuery 方法和选择器、方法代码完成以及代码内快速 API 参考。该包还与 E 文本编辑器兼容（适用于 Windows）：

www.learningjquery.com/2006/09/textmate-bundle-for-jquery

Charles

在开发 AJAX 密集型应用程序时，查看浏览器和服务器之间发送的确切数据可能很有用。Charles web 调试代理显示两个点之间的所有 HTTP 流量，包括正常的 web 请求、HTTPS 流量、Flash 远程和 AJAX 响应：

www.xk72.com/charles/

posted @ 2024-05-19 20:12 绝不原创的飞龙阅读(6) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

龙哥盟

掠夺·扩张·投机·博弈

jQuery-参考指南-全-

jQuery 参考指南（全）

序言

本书涵盖内容

这本书是为谁准备的？

约定

注意

提示

第一章：jQuery 脚本的结构

一个动态目录

获取 jQuery

设置 HTML 文档

注意

编写 jQuery 代码

脚本解剖

注意

选择器表达式

DOM 遍历方法

DOM 操作方法

事件方法

效果方法

AJAX 方法

其他方法

插件 API

摘要

第二章：选择器表达式

CSS 选择器

元素：T

示例

描述

ID：#myid

示例

描述

类：.myclass

示例

描述

后代：E F

举例

描述

子级：E > F

举例

描述

相邻兄弟：E + F

举例

描述

一般兄弟：E ~ F

例子

描述

多个元素：E,F,G

例子

描述

Nth Child（:nth-child(n)）

例子

描述

第一个子元素 (:first-child)

示例

描述

最后一个子元素 (:last-child)

示例

描述

只有一个子元素 :only-child

示例

不是 :not(s)

示例

空 :empty

示例

描述

通用：*

例子

描述

XPath 选择器

后代：E//F

例子

描述

子元素：E/F

例子

描述

父元素：E/..