jQuery 8 基本过滤器
有以下几种(前面的冒号不能少哦)：
- :first 选择第一个元素. $("div:first"):选择第一个div。
- :last 选择最后一个元素. $("div:last"):选择最后一个div.
- :not 选择不满足条件的元素。$("input:not(.myclass)"):选择样式名不是myclass的input.
- :even(:odd) 选择索引是奇数或偶数的元素. $("input:even"):选择索引是奇数的input.
- :eq(索引号) 等于，是Equal缩写. $("input:eq(1)"):选择索引为1的input元素
- :gt(索引号) 大于，是great than的缩写. $("input:gt(0)"):选择索引大于0的input元素
- :lt(索引号) 小于，是little than的缩写. $("input:lt(1)"):选择索引小于1的input元素
- :header 选择所有h1~h6的元素。 $(":header"):选择所有的 h1~h6元素
- :animated 选择所有正在执行的动画元素。 $("div:animated") 选择正在执行动画的div元素
实例1：
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="JScript/jquery-1.9.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("div:last").css("background", "Red"); alert($("input:not(.myclass)").val()); }); </script> <style type="text/css"> .myclass{background:Green;} </style> </head> <body> <div> aaa </div> <div> bbb </div> <input type="button" value="我是按钮"/> <input type="text" class="myclass"/> </body> </html>
实例2
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="JScript/jquery-1.9.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#table1 td").html("我是表格").mouseover(function () { $(this).html("<font color=yellow>我是表格</font>").siblings().html("<font color=red>我是表格</font>"); }) $("td:last").html("fafdafaf"); $(":header").html("<font color='yellow'>我来了</font>"); }); </script> </head> <body> <h1>我的太阳</h1> <h2>我的太阳</h2> <h3>我的太阳</h3> <table id="table1" border="0" cellspacing="0" cellpadding="0" width="100%"> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> </body> </html>
实例3
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="JScript/jquery-1.9.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#table1 tr:first").css("background", "yellow"); //第一行变色 $("#table1 tr:gt(0):lt(3)").css("color", "blue"); //除表头外前三行变色 $("#table1 tr:gt(0):odd").css("background", "green"); //队表头外偶数变色 $("#table1 tr td:last").css("color","red");//最后一个单元格字体显红色 }); </script> </head> <body> <table id="table1" border="1" cellspacing="0" cellpadding="0" width="15%"> <tr> <th>名称</th> <th>成绩</th> </tr> <tr> <td >TOM</td> <td align="right">100</td> </tr> <tr> <td>JIM</td> <td align="right">99</td> </tr> <tr> <td>Lilu</td> <td align="right">98</td> </tr> <tr> <td>WanKe</td> <td align="right">97</td> </tr> <tr> <td>Xuwei</td> <td align="right">96</td> </tr> <tr> <td>Jams</td> <td align="right">95</td> </tr> <tr> <td>平均成绩</td> <td align="right">98</td> </tr> </table> </body> </html>
