jQuery的强大之处还不限于此，除了支持CSS选择符以外，jQuery自身还支持其他的选择符，其中一大类就是基于位置的选择符。例如选择列表中的第一个，或者表格中的偶数行等等。这类选择器的一般形式是 :location，例如 a:first，匹配页面上第一个a， p:even 匹配页面上偶数个p.下面详细介绍。
选择器
描述
:first
页面最先出现的。li a:first 在li标签下第一个出现的a
:last
同上,最后出现的。
:first-child
最先的子元素
:last-child
最后的子元素
:nth-child(n)
返回第n个子元素（从1开始）
:nth-child(even|odd)
返回第偶数|奇数个子元素
:even :odd
第偶数、奇数个元素
:eq(n) :gt(n) :lt(n)
返回第n个元素（从0开始），第n个元素之后元素，第n个元素之前的元素
先看一个例子再作解释：
复制代码 代码如下:
<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="https://www.jb51.net/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的伪类，例如：
:button
选择input[type=button]
:checked
选中的复选框或按钮
:contains('xxx')
包含字符串xxx的元素
具体用法比较简单，不详细介绍。
您可能感兴趣的文章: