我的书签
添加书签
移除书签13.2 使用jQuery文档
jQuery Web站点提供了针对jQuery的非常详细的文档（http：//docs.jquery.com/），如图13-1所示。你将会发现一些有用的链接，介绍如何开始使用jQuery、在哪里找到帮助、教程以及更多内容，但是，该站点最为重要的部分是介绍jQuery API。API表示Application Programming Interface（应用编程接口），它只是表示jQuery允许你使用的一组函数，例如，第5章介绍的事件处理函数（.click（）、.hover（）），第4章介绍的CSS函数（.css（）、.addClass（）和.removeClass（）），还有更为重要的，基本的jQuery函数自身$（），它允许我们选择页面上的元素。
图 13-1 jQuery文档主页面包含了到很多有用信息的链接，但是，帮助你搞清楚jQuery所提供的所有函数的链接，在页面主区域中的A P I标题下（大纲在右边）或者在左边的边栏（大纲在左边）列出。当你访问其他的页面的时候，将会发现左边的边栏可用
图13-1突出显示了API的主要分类。单击分类之一，可以跳转到一个页面，它列出了和该jQuery部分相关的函数。主要的分类包括：
·jQuery Core（http：//api. jquery.com/category/core/）。在这里，你将会看到关于一些函数的信息，这些函数中的大多数都是你不需要访问的高级函数。你还将看到主jQuery（）函数，它是jQuery的核心。访问其页面（http：//api.jquery.com/jQuery/），将会帮助你找到关于jQuery（）函数的更深入信息。
注意：我们已经了解了$（）函数以及如何使用它选择一个页面元素，例如，$（'p'）。对于名为jQuery（）的函数，也有相同的形式。即$（）是名为jQuery（）的函数的别名。这两者是可以互换的，因此你可能会在一个教程或者本书中看到类似下面的代码：
jQuery（'p'）.css（'color'，’#F03'）；
在功能上等价于：
$（'p'）.css（'color'，’#F03'）；
·Selectors（http：//api. jquery.com/category/selectors/）提供了对一些最有用的jQuery函数的访问。这个页面值得经常访问，因为它列出了使用jQuery选择页面元素的多种不同方式。我们将在本书第4章了解到更多内容，但是，当你访问jQuery文档的这个部分的时候，将会找到更多的方式。
·Attributes（http：//api. jquery.com/category/attributes/）。访问这个页面，将会看到获取和设置HTML元素的属性的各种jQuery函数，例如，给标签添加一个类、找到或设置一个属性的值（例如，一个＜a＞标签上的href属性），或者获取一个form元素的值。
注意：你常常会发现，相同的函数在jQuery文档站点的多个位置列出。例如，通常用来读取和设置一个表单字段的值的.val（）函数，在该站点的Attributes和Forms分类下都列出了。
·Traversing（http：//api. jquery.com/category/traversing/）指用来操作一组页面元素的函数。例如，.find（）函数允许你在一个jQuery选择中找到一个元素：当你想要选择一个页面元素时（例如，一个＜ul＞标签），在其上执行一个操作（例如，添加一个类或将其淡入到视线），然后在该页面元素中找到另一个元素来做些其他的事情（例如，在初始的＜ul＞标签中找到一个＜li＞标签），这个时候，这个函数很方便。jQuery提供了用来遍历HTML元素的很多函数，并且，你可以在本章稍后了解其中的一些。
·Manipulation（http：//api. jquery.com/category/manipulation/）。当你想要向页面添加内容，或者从页面删除内容的时候，你需要操作页面的DOM（Document Object Model，文档对象模型，参见4.5节）。这个页面列出了可以用来修改页面的众多函数，包括你在第4章（参见4.7节）了解到的那些，例如，用来给页面添加HTML的.html（），以及给页面添加文本的.text（）等。函数的这个分类非常重要，因为很多JavaScript编程是关于动态地更改Web页面的内容和外观的。
·CSS页面（http：//api.jquery.com/category/css/）列出了用来读取和设置元素上的CSS相关属性的jQuery函数，包括添加和删除类，直接设置CSS属性，并且控制或读取一个元素的高度、宽度和位置。我们已经在4.8.2节介绍了这些函数中的一些。
·Events（http：//api. jquery.com/category/events/）。在第5章中，我们学习了如何使用jQuery来响应用户交互，例如，鼠标光标悬停在一个链接上，或者访问者单击页面上的一个按钮。你可以在这个页面上找到众多事件相关的jQuery函数的一个列表。在13.5节中，我们将了解一些高级的事件函数。
·通过Effects页面（http：//api.jquery.com/category/effects/），可以访问与jQuery的效果相关的函数的信息，例如，我们在第6章中了解到的.slideDown（）、.fadeIn（）和.animate（）函数。
·Ajax分类（http：//api.jquery.com/category/ajax/）列出了相关的函数，这些函数根据向Web服务器发送信息或者从Web服务器获取的信息来动态更新页面。可以在本书第四部分学习Ajax。
·Utilities（http：//api. jquery.com/category/utilities/）。jQuery还提供了很多函数，专门用来简化常见的编程任务，例如，在一个数组中查找一个元素（参见2.8节），在数组或对象中的每一项上执行操作（4.10节介绍的$.each（）函数），以及一些其他的细节。在你目前的编程生涯中，你可能还不需要任何这些函数（它们真的不会给你带来任何漂亮的效果，或者帮助你更新页面上出现的内容），但是，随着你获得更多的进步，看看jQuery文档站点的这个页面是很值得的。
奇怪的是，当你访问分类页面之一的时候（例如，Ajax或Selectors），左边的边栏会针对主页面上没有列出的jQuery API添加更多的函数分类。
·Data分类（http：//api.jquery.com/category/data/）列出了与向页面元素添加数据相关的函数。jQuery提供了一个.data（）函数来向一个元素添加数据，可以将其看做向任何页面（类似一种微型数据库）元素添加名/值对的一种方式。当你开发一个需要存储和记录数据的Web应用程序的时候，这个函数和其他与数据相关的函数用起来很方便。要找到关于使用这些数据函数的一个便于理解的介绍，查看http：//tutorialzine.com/2010/11/jquery-data-method/。
·Deferred对象（http：//api.jquery.com/category/deferred-object/）。只需要看看这个分类的介绍（它说明了一个deferred对象是“一个串联的工具对象，可以将多个回调注册到回调队列中，调用回调队列，并且传递任何同步或异步函数的成功或失败状态”），就可以知道jQuery的Deferred对象是一头复杂的怪兽。基本上，它帮助排列函数以控制它们的运行顺序。如果你想要了解更多，访问jQuery文档站点的该分类页面。
·Dimensions（http：//api. jquery.com/category/dimensions/）引用确定对象的宽度和高度的函数。这些函数也在前面提到的CSS分类下列出。
·Forms分类（http：//api.jquery.com/category/forms/）列出了与drum-roll please表单相关的函数。它主要列出了和表单元素一起使用的事件，但是也包括用来读取和设置一个表单字段的值的.val（）函数，以及让使用Ajax提交表单（参见本书第四部分）更容易的几个函数。
·Internals（http：//api. jquery.com/category/internals/）是一组不同用途的函数。例如，.jquery属性，返回了页面上使用的jQuery的版本：
//open alert box with version number
alert（$（）.jquery）；//1.6.2，for example
我们可以过着快乐、悠长的人生，而不用使用这里的任何函数。
·Offset分类页面（http：//api.jquery.com/category/offset/）列出了与确定一个对象相对于屏幕或相对于其父元素的位置的函数。当设置或获取页面上的一个元素的位置的时候，我们将使用这些函数。
阅读jQuery Docs站点上的一个页面
每个jQuery函数都有其自己的页面，记录了它做什么以及如何工作。图13-2展示了说明jQuery的.css（）函数的页面的一部分。这个页面列出了函数名（在这个例子中是.css（）），并且在下面列出了分类及其子分类。你可以单击分类和子分类链接，以跳转到一个页面，该页面列出了属于该分类的所有函数。
在某些情况下，一个函数充当两种甚至三种角色，并且根据我们提供给它的参数的类型和数量的不同来执行不同操作。在这种情况下，我们会看到函数以几种不同的方式列在函数名下。例如，在图13-2中，我们可以看到.css（）函数以两种不同的方式使用（图中的编号1和编号2）。
第一种方式#1是css（propertyName）的形式。在这里，propertyName表示我们给该函数传递一个参数，它应该是一个CSS属性的名称。jQuery随后返回指定元素的该属性的值（注意图中部靠右边的Returns：String）。这个页面上列出的信息随后让我们知道要传递一个参数，并接收返回的一个字符串。例如，假设你想要确定ID为tooltip的一个＜div＞标签的宽度，可以使用如下代码：
var tipWidth=$（'#tooltip'）.css（'width'）；//get the width value
在上面的代码中，'width'传递给该函数，并且返回了一个字符串值。（然而，在这个例子中，因为它是一个宽度，那么字符串实际上是宽度的像素数，例如，该元素是’300’。）
图 13-2 jQuery函数的每个文档页面都列出了可以使用一个函数的不同方式。在这个例子中，在Contents下列出，你可以看到，可以把单个的参数（#1）或两个参数（#2）传递给.css（）函数。该函数根据我们所选的路径不同而执行不同的操作。通过单击蓝色的向下箭头（圆圈圈出的地方），我们可以直接跳转到页面上描述该函数用法的位置
使用.css（）函数的第二种方式（#2）是css（propertyName, value），表示你可以给该函数传递两个参数，即一个CSS属性的名称和一个值。使用这种方式，.css（）函数设置了该元素的CSS属性。例如，如果你想要设置ID为tooltip的一个＜div＞标签的宽度，应该将width作为第一个参数传递，并且将你想要的宽度值作为第二个参数，如下所示：
$（'#tooltip'）.css（'width'，300）；//set div to 300px wide
该文档还列出了使用.css（）函数设置CSS属性的两种其他方式：
·. css（propertyName, function（index, value））表示你可以使用一个函数动态地生成一个值，用来设置一个CSS属性。当你有一组页面元素，并且想要为每个元素设置略微不同的值的时候，这很方便；例如，有一系列的div，我们想要通过设置left属性来放置它们，但是，想要每个div都以略微不同的left位置彼此靠近放置。
·. cs s（map）在4.8.2节介绍过，它表示你可以传递一个对象直接量，目的是一步中设置几个CSS属性和值。
需要理解的重要的一点是，相同的jQuery函数常常可以接收不同的参数并做不同的事情。例如，.css（）函数可以接收和设置一个CSS值。我们常常发现jQuery函数以这种方式工作，既充当“getters”（也就是说，它们获取关于一个元素的信息），也充当“setters”（即它们设置元素的一个特定属性的值）。
文档页面将会描述每个函数的用法，并且通常会提供函数如何工作的示例。jQuery的文档维护得很好，并且就目前的技术文档情况来说，确实很易于阅读和理解。你应该花些时间访问这些页面，特别是阅读你经常使用的那些函数。
