jQuery参考实例 1.3 使用选择器和jQuery函数对DOM元素进行选择

原文：

http://www.lifelaf.com/blog/?p=191

本文翻译自jQuery Cookbook (O’Reilly 2009) 1.3 Selecting DOM Elements Using Selectors and the jQuery Function

需求

为了在页面元素上运行jQuery方法，需要选择单个或者多个DOM对象。

解决方案

从DOM树中选择元素，jQuery提供了两种方法。这两种方法都需要用到jQuery函数（jQuery()或者其别名$()）。第一种方法，也是目前使用最多的一种方法，是直接使用CSS选择器。通过向jQuery函数传一个包含选择器表达式的字符串，可以让jQuery函数遍历DOM树，并根据该表达式来定位DOM节点。下面是一个简单的例子，在该示例中，HTML文档内所有的<a>元素会被选中：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
  <a href='#'>link</a>
  <a href='#'>link</a>
  <a href='#'>link</a>
  <a href='#'>link</a>
  <a href='#'>link</a>
  <a href='#'>link</a>
  <script type="text/JavaScript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <script type="text/JavaScript">
    //alerts there are 6 elements
    alert('Page contains ' + jQuery('a').length + ' <a> elements!');
  </script>
</body>
</html>

如果用浏览器打开该HTML页面，浏览器会弹出一个alert()警告框，告诉我们该页面中包含6个<a>元素。在上面的例子中，首先我用jQuery函数来选中所有的<a>元素，然后使用了length属性得到所有选中对象的数目。

需要注意的是，jQuery函数的第一个参数可以接受多个表达式，只需要在多个表达式之间用逗号分隔开就可以了。以下是一个简单的示例：

jQuery('selector1, selector2, selector3').length;

第二种选择DOM元素的方法是给jQuery函数传DOM对象的JS引用。与第一种方法相比，这种方法就不那么流行了。以下面的代码为例，还是选择HTML文档中所有的<a>元素，这一次，传给jQuery函数的是使用getElementsByTagName方法而得到的<a>元素数组。与上面的例子相比，下述代码得到的结果完全一样：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body bgcolor="yellow"> <!-- yes the attribute is depreciated, I know, roll
with it -->
  <a href='#'>link</a>
  <a href='#'>link</a>
  <a href='#'>link</a>
  <a href='#'>link</a>
  <a href='#'>link</a>
  <a href='#'>link</a>
  <script type="text/JavaScript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <script type="text/JavaScript">
    //alerts there are 6 elements
    alert('Page contains ' + jQuery(document.getElementsByTagName('a')).length +
      ' <a> Elements, And has a '
      + jQuery(document.body).attr('bgcolor') + ' background');
  </script>
</body>
</html>