关于jQuery参考实例2.0 用jQuery选择元素_基础知识

译自jQuery Cookbook (O'Reilly 2009) Chapter 2 Selecting Elements with jQuery, 2.0 Introduction

jQuery的核心是它的选择器引擎，其作用是从文档中通过名称、属性、状态等将元素筛选出来。由于CSS的广泛使用，在jQuery中采用CSS的选择器语法就成了很自然的选择。在支持绝大多数CSS1-3规范中的选择器之外，jQuery还增加了很多自定义的选择器来根据一些特殊的状态选择元素；与此同时，我们还可以自己编写选择器。

在文档中定位某个元素或者某些元素的最简单的方法，是使用jQuery封装函数和CSS选择器，比如：

<SPAN class=pln>jQuery</SPAN><SPAN class=pun>(</SPAN><SPAN class=str>'#content p a'</SPAN><SPAN class=pun>);</SPAN><SPAN class=pln>
</SPAN><SPAN style="COLOR: #333399" class=com>//选择所有#content元素内的p元素中的a元素</SPAN>

在选择好元素之后，就可以在这些元素上调用jQuery方法。比如，在所有选择的链接元素上添加selected的class属性：

<SPAN class=pln>jQuery</SPAN><SPAN class=pun>(</SPAN><SPAN class=str>'#content p a'</SPAN><SPAN class=pun>).</SPAN><SPAN class=pln>addClass</SPAN><SPAN class=pun>(</SPAN><SPAN class=str>'selected'</SPAN><SPAN class=pun>);</SPAN>

jQuery提供了很多遍历DOM树的方法来帮助选择元素，比如next()，prev()，parent()等。这些方法接受一个选择器表达式作为其唯一的参数，从而对选择到的元素集进行过滤。因此，除了jQuery(…)，CSS选择器还会在很多地方用到。

在构建选择器时，为了提升其性能，可以遵循一条法则：尽可能地简化选择器的编写。选择器字符串越复杂，jQuery进行处理的时间也就越长。jQuery内部使用了浏览器原生的DOM方法来选择元素，因此，直接用选择器来选择元素仅仅是一种抽象封装后的结果。直接使用选择器本身并无不妥，但是理解所写代码的执行性能这一点却非常重要。以下是一个过度使用选择器的例子：

<SPAN class=pln>jQuery</SPAN><SPAN class=pun>(</SPAN><SPAN class=str>'body div#wrapper div#content'</SPAN><SPAN class=pun>);</SPAN>

更精确的定位并不意味着代码的运行速度更快。上述选择器可以重写为：

<SPAN class=pln>jQuery</SPAN><SPAN class=pun>(</SPAN><SPAN class=str>'#content'</SPAN><SPAN class=pun>);</SPAN>

与之前的例子相比，该代码的作用相同，但却节省了不少性能开销。值得注意的是，有时我们可以通过指定选择器的上下文背景来进一步提升性能。