jQuery选择符详解：从基础到高级用法

jQuery选择符基础与$函数解析

选择符可视为增强版的 getElementById 方法。前者返回单个 HTML 元素，而 jQuery 选择符返回的是包含该元素的包装集（jQuery Object）。借助这一包装集，HTML 元素获得了更多可操作的方法。在 jQuery 中，核心函数是 $，尽管名字看似古怪，但它本质上是一个函数，即选择函数，其基本用法如下：

var obj=$(selector);

其中 selector 是字符串，即下文重点介绍的选择符，返回值为元素的包装集合。实际上，jQuery 核心 $ 函数的功能远不止作为选择符使用。当参数为函数时，其作用类似于 onload 事件：当页面 DOM 元素完全加载后，函数体内的代码将被执行。相比 onload，$ 函数更具优势：onload 只能注册一个函数，而 $ 函数可多次调用，允许注册多个函数在 DOM 加载完成后执行。此外，onload 需等待页面所有内容（如大图片）加载完毕才执行，可能导致延迟；而 $ 函数仅在 DOM 结构加载完成即可执行。

 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JQuery First Page</title>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function(){
var p=$('#p1');
alert(p);
}); 
</script>
</head>
<body>
<p id="p1">I'm a p</p>
</body>
</html>

可以看到，最简单的选择器与 getElementById 类似，利用元素 ID 作为选择符。通过 JS 调试器观察 p 的内容可知：

p 是一个类似数组的对象，内部包含被选中的元素。展开 [Methods] 节点可见大量 jQuery 提供的方法。在本例中，因仅有一个元素，通过 p[0] 即可获取该 HTML 元素，p[0] 与 getElementById 返回的对象一致。

jQuery 选择符的强大之处在于其几乎完全兼容 CSS2 选择器，无论浏览器是否原生支持 CSS2。若对 CSS 选择器不熟悉，可参考相关日志。对于选中的元素，可施加多种方法，本文暂不展开，先介绍 css(attr,value) 方法，该方法可将包装元素指定 CSS 属性 attr 的值设为 value。以下示例利用此方法改变页面元素的字体样式，以此区分不同选择器选中的元素。此例内容与上一篇几乎一致，但适用于 IE6！代码如下：

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JQuery Selector</title>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function(){
$("h1,h2").css("color","Red"); //element selector
$(".warning").css("font-style","italic"); //class selecotr
$("p.warning").css("color","Red");
$("p.big.warning").css("font-size","x-large");//multi-class selector
$("*[id]").css("color","red"); //attribute selector
$("p[class]").css("color","blue");
$("p[class][id]").css("font-size","x-large");
$("div[title='title']").css("font-weight","bold");
$("div[title^='title']").css("color","red");
$("div[title$='World']").css("color","blue");
$("div[title~='Hello']").css("font-size","x-large");
$("div[title*='Hello']").css("font-style","italic");
$("div[title|='Hello']").css("background-color","silver");
$("p .warning").css("font-size","x-large"); //decendent selector
$("body > .warning").css("border","1px solid"); //child selector
}); 
</script>
</head>
<body>
<h1>
This is H1</h1>
<h2>
This is H2</h2>
<h3>
This is H3</h3>
<p class="warning">
Real Warning!</p>
<span class="warning">Common Worning</span>
<p class="big warning ">
Warning and Big</p>
<div id="title">
I am title</div>
<p class="warning">
Real Warning!</p>
<p id="idp1" class="myclass">
P with an ID and class</p>
<p>
The last line.</p>
<p id="idp2">
P with an ID</p>
<div title="title" >I am title</div>
<div title="title2">I am title2</div>
<div title="Hello World">Hello World</div>
<div title="HelloWorld">HelloWorld</div>
<div title="Hello-World">Hello-World</div>
<p><span class="warning">Class warning inside p</span></p>
</body>
</html>

效果如下：

基于位置的选择器应用

jQuery 的强大之处不仅限于支持 CSS 选择器，它还支持其他选择器，其中一大类是基于位置的选择器。例如选择列表中的第一个元素，或表格中的偶数行等。这类选择器的一般形式为 :location，例如 a:first 匹配页面上第一个 a 标签，p:even 匹配页面上偶数个 p 标签。下面详细介绍。

先看一个例子再作解释：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Custom Selector</title>
<style type="text/css">
table
{ 
border-collapse: collapse;
font-family:Verdana;
} 
td
{ 
padding-left: 10px;
padding-right: 10px;
border: solid 1px black;
} 
</style>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function(){
$('tr:first').css({fontWeight:'bold',fontSize:'large'});
$('tr:even').css('background-color','silver');
$('tr td:first').css('color','red');
$('tr:gt(0) :first-child').css('font-style','italic');
$('p:eq(0)').css({fontFamily:'Arial',fontSize:'x-large'});
}); 
</script>
</head>
<body>
<p>Entry Level DSLR Prices</p>
<table>
<tr>
<td>Company</td>
<td>Model</td>
<td>Price</td>
</tr>
<tr>
<td>Canon</td>
<td>1000D</td>
<td>3800</td>
</tr>
<tr>
<td>Canon</td>
<td>450D</td>
<td>4100</td>
</tr>
<tr>
<td>Canon</td>
<td>500D</td>
<td>4900</td>
</tr>
<tr>
<td>Canon</td>
<td>550D</td>
<td>6100</td>
</tr>
<tr>
<td>Nikon</td>
<td>D3000</td>
<td>3600</td>
</tr>
<tr>
<td>Nikon</td>
<td>D5000</td>
<td>4600</td>
</tr>
<tr>
<td>Pentax</td>
<td>Kx</td>
<td>3900</td>
</tr>
<tr>
<td>Sony</td>
<td>a230</td>
<td>2900</td>
</tr>
<tr>
<td>Sony</td>
<td>a450</td>
<td>4400</td>
</tr>
</table>
<p>Date: 2010-03</p>
</body>
</html>

第一条语句将第一行设置为粗体、大号字。第二句将偶数行的背景色设为银灰色。第三句将 tr 中 td 元素的第一个设为红色。第四句将第二行开始所有 tr 的第一个子元素设为斜体。

第四条展示了选择器的组合使用。这一类选择器与 CSS 选择器类似，也可组合使用。需特别注意 p:first 和 p :first 的区别：前者表示整个页面中第一个 p 标签，后者表示包含在 p 中的第一个元素。综合上述解释，最终结果应为：

题外话，上图在 IE8 下截取，IE 对字体的渲染确实赏心悦目，Chrome 和 FF 均不及此效果。

伪类选择器简介

言归正传，继续介绍 jQuery 的最后一类选择器。这类选择器类似于 CSS 的伪类，例如：

具体用法较为简单，此处不再详细介绍。