jQuery：DOM API

选择元素和与 DOM 交互可能是你使用 jQuery 最多的功能。幸运的是，这非常容易做到，因为选择单个元素或一组元素的语法与 CSS 中的元素选择语法完全相同。

jQuery 还可以轻松地同时对多个元素执行操作，这非常有用。

在下面的示例中，$('.note') 选择页面上所有类名为 note 的元素，然后我们将所有 note 框的背景设置为红色，高度设置为 100px。


$('.note').css('background', 'red').height(100);

jQuery 使用一种非常巧妙的链式语法来实现上述代码。这是可行的，因为对于任何一种“设置”方法，jQuery 都会返回与选择器函数 (“$”) 相同的东西：$ 是一个函数，它返回一个围绕元素的 jQuery包装器。.css 是该 jQuery 包装器的一个方法，它也返回相同的包装器。.height 设置所选元素的（显而易见）高度，当然也有一个相应的宽度方法。

获取器和设置器

在上面的示例中，我们使用 .css 和 .height 来设置元素的值，但这些方法也充当获取器。不带任何值调用 .height 会返回当前元素的高度，而只带 CSS 属性名称调用 .css 会检索该属性的值。


var currentHeight = $('.note').height(),
    currentColor = $('.note').css('color');

如果你选择了多个元素（比如有很多 note 元素），获取器将返回其中第一个元素的值。

上下文

有时限制可以从中选择元素的 DOM 区域很有用。使用的 DOM 区域也称为不同的上下文。

要告诉 jQuery 你想从哪个区域进行选择，你可以传递第二个参数，它可以是DOM 元素、字符串选择器（选择一个 jQuery 可以找到并使用的元素）或jQuery 对象。jQuery 将只在此上下文内搜索你的选择器。

这是一个示例。请注意，用于存储 jQuery 对象的变量都以美元符号开头。这是一个约定，旨在帮助你和你的代码读者理解这是一个正在保存的 jQuery 对象。


var $header = $('header'),
    $headerBoxes = $('.note', $header);