16-解决方案
1.3.2 解决方案
当你需要从DOM中选择元素时，jQuery提供两种备选方案。这两种选项都要求使用jQuery函数（ jQuery() 或其别名 $() ）。第一种选项使用CSS选择器和自定义选择器，这是最常用和最清晰的解决方案。通过向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">
//用警告框显示页面上有6个元素
alert('Page contains ' + jQuery('a').length + ' <a> elements!');
</script>
</body>
</html>
如果你在Web浏览器中运行这个HTML页面，就会看到这段代码执行一个浏览器 alert() 方法，告诉我们该页面包含6个 <a> 元素。我首先选择所有的元素，然后用 length 属性返回jQuery包装器集中元素的数量，并将其传递给 alert() 方法。
你应该知道，这里使用的jQuery函数的第一个参数能够接受多个表达式，只要在传递给jQuery函数的第一个字符串参数中用逗号分隔多个选择器就行了。下面是一个例子：
jQuery('selector1, selector2, selector3').length;选择DOM元素的第二种选项是向jQuery函数传递DOM元素的实际JavaScript引用，这种选项不如第一种常用。举个例子，下面的代码将选择HTML文档中的所有 <a> 元素。注意，我传递给jQuery函数的是一个用 getElementsByTagName DOM 方法收集到的 <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">
//用警告框提示页面上有6个元素
alert('Page contains ' + jQuery(document.getElementsByTagName('a')).length +
' <a> Elements, And has a '
+ jQuery(document.body).attr('bgcolor') + ' background');
</script>
</body>
</html>