JQuery CookBook翻译连载3
1.3 使用选择器及jQuery函数选择DOM元素
问题
你需要选择一个单独的DOM元素（或者一系列DOM元素）以便提供给jQuery提供的方法来操作这些DOM元素。
解决方案
jQuery提供了2种方式以便使用者可以从DOM中选择你需要的元素。这2种方式都需要使用jQuery方法(jQuery()或者它的缩写$())。第一种方式是使用css选择器和自定义选择器, 这种方式是最常用的也是大家了解最多的方式。通过向jQuery方法传递一个字符串类型的选择器表达式， jQuery方法会遍历DOM文档找出该表达式对应的DOM节点。下面的代码将在HTML中找出所有的<a>元素。
Code:
<!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 elementsalert('Page contains ' + jQuery('a').length + ' <a> elements!');</script></body></html>?
如果你在浏览器中运行这个HTML页面，你将会看到浏览器调用alert方法告诉我们页面中有6个<a>元素。首先，我通过jQuery('a')找出所有的a标签元素集合（jQuery('a')返回jQuery封装的集合类型），然后使用length方法返回集合中a标签元素的数量，最后将这个数值通过alert()方法打印出来。
您可能已经意识到，我们向jQuery方法传递的第一个参数可以接收多个表达式。我们只需要在传递给jQuery方法的第一个参数字符串中,使用逗号分开各个选择器就可以了。下面的代码为我们实现了一个简单的样例:
?
Code:
?? 1. jQuery('selector1, selector2, selector3').length; ?
?
另一种我们并不常用的选择DOM元素的方式是直接向jQuery方法中传递JavaScript的DOM元素引用。下面的代码是这种方式的一个简单的例子， 其作用是筛选出HTML文档中所有的a标签元素。请注意，在这里我直接向jQuery方法中传递一个通过getElementsByTagName方法获取的a标签元素的DOM数组。这个例子的执行结果和第一种方式样例代码的执行结果是一样的。
Code:
<!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, rollwith 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 elementsalert('Page contains ' + jQuery(document.getElementsByTagName('a')).length +' <a> Elements, And has a '+ jQuery(document.body).attr('bgcolor') + ' background');</script></body></html>?
讨论
众所周知，使用选择器引擎在HTML文档中查找DOM元素是一项繁琐的工作，并且向jQuery方法中传递DOM引用这种方法也并不像第一种方法那样为大家所知。但是不得不说，这是一个非常强大的功能，也正是选择器的这个功能让jQuery如此的与众不同。
在全书剩余的部分，你会发现许多功能强大的选择器。你要确保你完全理解每一个选择器的功能。这部分知识将会在你未来使用jQuery编码中发挥巨大的作用。