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

本文翻译自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>  

讨论

jQuery以简化开发而闻名,这一部分归功于其从HTML文档中选择DOM元素的CSS引擎,Sizzle。给jQuery传一个DOM对象引用是个不错的选择,但是这种方法的使用并不广泛。使得jQuery如此独具魅力的实际上是第一种方法:在jQuery函数中直接使用选择器。