(5) :eq(索引序号)等于、:gt(索引序号)大于、:lt(索引序号)小于
(6) $(":header")选取所有的h1……h6元素（*）
简单选择器
(1) :first 选取第一个元素。$("div:first")选取第一个<div>$(".warn:first");
(2) :last 选取最后一个元素。$("div:last")选取最后一个<div>
(3) :not(选择器) 选取不满足“选择器”条件的元素，$("input:not(.myClass)")
选取样式名不是myClass的<input>
-
<!DOCTYPE html>
-
<html xmlns="http://www.w3.org/1999/xhtml">
-
<head>
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-
<title></title>
-
<script src="Jqeury/jquery-1.10.2.js" type="text/javascript"></script>
-
<script type="text/javascript">
-
$(function () {
-
//:first 选取第一个元素。
-
$("input:first").css("background-color", "blue");
-
//:last 选取最后一个元素。
-
$("input:last").css("background-color", "gray");
-
//:not(选择器) 选取不满足“选择器”条件的元素
-
$("input:not(.myClass)").val("不是myClass");
-
}) -
</script>
-
</head>
-
<body>
-
<input id="d1" type="text" />first<br />
-
<input type="text" /><br />
-
<input class="myClass" type="text" /><br />
-
<input class="myClass" type="text" /><br />
-
<input type="text" /><br />
-
<input type="button" value="aaa" /><br />
-
<input type="button" value="aaa" /><br />
-
<input type="text" /><br />
-
<input type="text" />last<br />
-
</body>
-
</html>
-
(4) :even、:odd，选取索引是奇数、偶数的元素：$("input:even")选取索引是奇数的<input>
(5) :eq(索引序号)等于、:gt(索引序号)大于、:lt(索引序号)小于 选取索引等于、大于、小于索引序号的元素，比如$("input:lt(5)")选取索引小于5的<input>
(6) $(":header")选取所有的h1……h6元素（*）
(7) $("div:animated")选取正在执行动画的<div>元素。 （*）
案例
第一行是表头，所以显示大字体（fontSize=30），最后一行是汇总，所以显示红色字体。正文的前三行是前三名，所以显示大的字体（28）表格的奇数行是黄色背景。
用Dom实现；用JQuery实现。对比差异！
-
<!DOCTYPE html>
-
<html xmlns="http://www.w3.org/1999/xhtml">
-
<head>
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-
<title></title>
-
<script src="Jqeury/jquery-1.10.2.js"></script>
-
<script type="text/javascript">
-
$(function () {
-
//表头
-
$("#salary tr:eq(0)").css({ "font-size": "30px", "text-align": "center" });
-
//最后1行
-
$("#salary tr:last").css("color", "red");
-
//排除表头的前3行
-
$("#salary tr:not(:first):lt(3)").css("font-size", "22px");
-
//排除表头和汇总
-
var str = "#salary tr:not(:first):not(:last)";
-
//各行变色
-
$(str + ":even").css("background-color", "yellow");
-
-
var bgColor;
-
//光棒效果
-
$(str).mouseover(function () {
-
bgColor = $(this).css("background-color");
-
$(this).css("background-color", "blue");
-
}).mouseout(function () {
-
$(this).css("background-color", bgColor);
-
}) -
-
//鼠标变小手
-
$(str).css("cursor", "pointer");
-
}) -
</script>
-
</head>
-
<body>
-
<table id="salary" border="1px" width="300">
-
<tbody>
-
<tr>
-
<td>姓名</td>
-
<td>年龄</td>
-
<td>工资</td>
-
</tr>
-
<tr>
-
<td>江户川</td>
-
<td>42</td>
-
<td>30000</td>
-
</tr>
-
<tr>
-
<td>刘备</td>
-
<td>38</td>
-
<td>25000</td>
-
</tr>
-
<tr>
-
<td>关羽</td>
-
<td>28</td>
-
<td>15000</td>
-
</tr>
-
<tr>
-
<td>张飞</td>
-
<td>27</td>
-
<td>8000</td>
-
</tr>
-
<tr>
-
<td>诸葛亮</td>
-
<td>38</td>
-
<td>22000</td>
-
</tr>
-
<tr>
-
<td>汇总</td>
-
<td colspan="2">220000</td>
-
</tr>
-
</tbody>
-
</table>
-
</body>
-
</html>
-
练习
案例：表格隔行变色
案例：前三名粗体显示
相对定位
不仅可以使用选择器进行进行绝对定位，还可以进行相对定位，只要在$()指定第二个参数，第二个参数为相对的元素. $("ul", $(this)).css("background", "red");
案例：修改点击行的所有td的背景色
（看上面工资表格那块）
