</body>
</html>
效果如下:
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=”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’});
});










