在开发过程中，有机会深入了解HTML5和新规范所带来的期待，因此可以预见未来会有更多关于这个话题的文章。在本文中，将介绍什么是JavaScript选择器API Level 1，并将其与jQuery进行比较。
选择器API允许网页开发者选择DOM元素，并检索与一组选择器匹配的DOM节点。这种方法简化了元素的选择过程，并使其直接集成到浏览器中。API描述了两种新的强大的方法，用于选择：
querySelector —— 选择给定选择表达式的第一个匹配项，并返回一个DOM元素；
querySelectorAll —— 选择给定选择表达式的所有匹配项，并返回DOM元素数组。
选择表达式是一组CSS3选择器，可以用逗号分隔（这意味着在选定的元素之间进行逻辑或操作）。
为了进一步了解选择器API，请参考。
现在已经熟悉了规范，让深入一个例子。在例子中，将使用以下HTML片段：
<!DOCTYPE html>
<html>
<head>
<title>选择器示例</title>
<style type="text/css">
.red { color: Red; }
.blue { color: Blue; }
</style>
</head>
<body>
<ul id="ulOfItems">
<li>item 1</li>
<li class="red">item 2</li>
<li id="item3">item 3</li>
<li class="red">item 4</li>
<li>item 5</li>
</ul>
</body>
</html>
当想使用选择器API来获取第一个具有red类的列表项时，会编写以下代码行：
var elm = document.querySelector("ul li.red");
如果想获取所有具有red类的列表项，会编写以下代码行：
var elements = document.querySelectorAll("ul li.red");
这里有一个完整的示例，展示了两种方法选择单个或多个列表项，然后在点击按钮时更改它们的类名：
<!DOCTYPE html>
<html>
<head>
<title>选择器示例</title>
<style type="text/css">
.red { color: Red; }
.blue { color: Blue; }
</style>
</head>
<body>
<ul id="ulOfItems">
<li>item 1</li>
<li class="red">item 2</li>
<li id="item3">item 3</li>
<li class="red">item 4</li>
<li>item 5</li>
</ul>
<input type="button" name="btnFirstElm" value="更改第一个元素的类名" onclick="changeClassNameToBlueToFirstLI()"/>
<input type="button" name="btnAllElm" value="更改所有元素的类名" onclick="changeClassNameToBlueToAllLI()"/>
<script type="text/javascript">
function changeClassNameToBlueToFirstLI() {
var elm = document.querySelector("ul li.red");
elm.className = "blue";
}
function changeClassNameToBlueToAllLI() {
var elements = document.querySelectorAll("ul li.red");
for (var i = 0; i < elements.length; i++) {
elements[i].className = "blue";
}
}
</script>
</body>
</html>
当最初听说选择器API时，可能听到了笑容。jQuery和其他JavaScript库多年来一直在做同样的事情。在这种情况下，外部库与浏览器原生支持的唯一区别是，需要在所有需要的页面上下载外部库。这可以通过使用CDN或客户端缓存来最小化，以提高性能。那么，原生浏览器支持给这些库提供了什么能力，使它们能够使用和实现更好的选择实现呢？如果打开jQuery 1.6.2（最新版本）并寻找querySelector这个词，会看到jQuery首先通过应用特性检测来定位新的选择函数。因此，在底层，jQuery将使用原生的选择支持（如果浏览器中可用），这是完美的。那么，将如何重构前面的示例以使用jQuery呢？
这里有一个提议的实现：
<!DOCTYPE html>
<html>
<head>
<title>选择器示例</title>
<script src="jquery-1.6.2.js" type="text/javascript"></script>
<style type="text/css">
.red { color: Red; }
.blue { color: Blue; }
</style>
</head>
<body>
<ul id="ulOfItems">
<li>item 1</li>
<li class="red">item 2</li>
<li id="item3">item 3</li>
<li class="red">item 4</li>
<li>item 5</li>
</ul>
<input type="button" id="btnFirstElm" value="更改第一个元素的类名"/>
<input type="button" id="btnAllElm" value="更改所有元素的类名"/>
<script type="text/javascript">
$(document).ready(function() {
$('#btnFirstElm').click(function() {
$('ul li.red').first().toggleClass('blue');
});
$('#btnAllElm').click(function() {
$('ul li.red').each(function() {
$(this).toggleClass('blue');
});
});
});
</script>
</body>
</html>