JQuery笔记6： JQuery过滤选择器
除了前面的选择器外，JQuery还有过滤选择器。
基本过滤选择器：
（1） :first 选取第一个元素。
$("div:first") 选取第一个 <div>
（2）:last 选取最后一个元素。
$("div:last") 选取最后一个 <div>
（3） :not( 选择器 ) 选取不满足 “ 选择器 ” 条件的元素：
$("input:not(.myClass)") 选取样式名不是 myClass 的 <input>
（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 ）表格的奇数行是黄色背景。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//id为table1下的直接或间接的所有的tr的第一个元素
$("#table1 tr:first").css("fontSize", "40"); // 第一行是表头，所以显示大字体（ fontSize=30 ）
$("#table1 tr:last").css("color", "red"); //最后一行是汇总，所以显示红色字体
//注意，过滤的逐级性，是对先前过滤结果的进一步过滤。
//gt(0)过滤的结果是把这一行给除去了。lt(3)是把Tom作为此次过滤的第一行，小于jim（在第三行）所在的那一行，过滤的结果是：Tom,hengheng,miemie
$("#table1 tr:gt(0):lt(3)").css("fontSize", "28"); //成绩前三名：序列大于第0行，小于第3行（gt(0):lt(3)）显示28号字体。
$("#table1 tr:gt(0):even").css("color", "Yellow"); //大于0的奇数行，显示红色
});
</script>
</head>
<body>
<table id="table1">
<tr><td>姓名</td><td>成绩</td></tr>
<tr><td>Tom</td><td>100</td></tr>
<tr><td>hengheng</td><td>100</td></tr>
<tr><td>miemie</td><td>100</td></tr>
<tr><td>jim</td><td>96</td></tr>
<tr><td>haha</td><td>92</td></tr>
<tr><td>平均分</td><td>96</td></tr>
</table>
</body>
</html>
相对定位：不仅可以使用选择器进行进行绝对定位，还可以进行相对定位，
只要在 $() 指定第二个参数，第二个参数为相对的元素 . $("ul", $(this)).css("background", "red");
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#div1").click(function () {
$("ul", $(this)).css("background", "red")//第二个参数传递一个JQuery对象，以这个对象为基准进行相对的选择
});
});
</script>
</head>
<body>
<div id="div1">
<ul>
<li>是大家看法是的浪费</li>
<li>上的防伪日</li>
<li>问问</li>
</ul>
</div>
<div>
<ul>
<li>上的防伪</li>
<li>所答非所问而非</li>
<li>是得分为二</li>
</ul>
</div>
</body>
</html>
相对定位案例：修改点击行的所有 td 的背景色
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#t1 tr").click(function () { $("td", $(this)).css("background","red"); });
});
</script>
</head>
<body>
<table id="t1">
<tr><td>dd</td><td>dd</td></tr>
<tr><td>dd</td><td>dd</td></tr>
<tr><td>dd</td><td>dd</td></tr>
</table>
</body>
</html>
属性过滤选择器：
（1） $("div[id]") 选取有 id 属性的 <div>
（2）$("div[title=test]") 选取 title 属性为 “ test ” 的 <div> ，相当于getElementsByName 。 JQuery 中没有对getElementsByName 进行封装，用 $("input[name=abc]")
（3） $("div[title!=test]") 选取 title 属性不为 “ test ” 的 <div>
（4） 还可以选择开头、结束、包含等，条件还可以复合。（ * ）
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("input[value=显示选中项]").click(function () {
alert($("input:checked").val());
});
});
</script>
</head>
<input id="Checkbox4" type="checkbox" value="南京" />南京<br />
<input id="Checkbox3" type="checkbox" value="北京" />北京<br />
<input id="Checkbox2" type="checkbox" value="上海" />上海<br />
<input id="Checkbox1" type="checkbox" value="杭州" />杭州<br />
<input type="button" value="显示选中项" />
<body>
</body>
</html>
表单对象选择器（过滤器）：
（1） $("#form1:enabled") 选取 id 为 form1 的表单内所有启用的元素
（2） $("#form1:disabled") 选取 id 为 form1 的表单内所有禁用的元素
（3） $("input:checked") 选取所有选中的元素（ Radio 、 CheckBox ）
（4） $("select:selected") 选取所有选中的选项元素（下拉列表）
� 练习：图片版评分控件
� 练习：单选超链接