过滤选择器——简单过滤选择器
过滤选择器根据某类过滤规则进行元素的匹配，书写时都以冒号(:)开头；
简单过滤选择器是选择器中使用最广泛的一种，其详细说明如下表所示。
| 选择器 | 功能 | 返回值 |
| first() 或 :first | 获取第一个元素 | 单个元素 |
| last() 或 :last | 获取最后一个元素 | 单个元素 |
| :not(selector) | 获取除给定选择器外的所有元素 | 元素集合 |
| :even | 获取所有索引值为偶数的元素，索引号从0开始 | 元素集合 |
| :odd | 获取所有索引值为奇数的元素，索引号从0开始 | 元素集合 |
| :eq(index) | 获取指定索引值的元素，索引号从0开始 | 单个元素 |
| :gt(index) | 获取所有大于给定索引值的元素，索引号从0开始 | 元素集合 |
| :lt(index) | 获取所有小于给定索引值的元素，索引号从0开始 | 元素集合 |
| :header | 获取所有标题类型的元素，如h1,h2...... | 元素集合 |
| :animated | 获取正在执行动画效果的元素 | 元素集合 |
Demo如下：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XMTML 1.0 2 Transitional//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 <html xmlns="http://www.w3.org/1999/xhtml"> 5 <head> 6 <title>使用jQuery层次选择器</title> 7 <script type="text/javascript" src="../../software/jquerys/jquery-1.7.2.js"></script> 8 <style type="text/css"> 9 body{font-size:12px;text-align:center} 10 div{width:241px;height:93px;border:solid 1px #eee} 11 h1{font-size:13px} 12 ul{list-style-type:none;padding:0px} 13 .DefClass .NotClass{height:23px;width:60px; 14 line-height:23px;float:left; 15 border-top:solid 1px #eee;border-bottom:solid 1px #eee} 16 .GetFocus{width:58px;border:solid 1px #666; 17 background-color:#eee} 18 19 #spnMove{width:238px;height:23px;line-height:23px;} 20 </style> 21 <script type="text/javascript"> 22 $(function(){ // 增加第一个元素的类别 23 // $("li:first").addClass("GetFocus"); 24 }) 25 26 $(function(){ // 增加最后一个元素的类别 27 // $("li:last").addClass("GetFocus"); 28 }) 29 30 $(function(){ // 增加去除所有与给定选择器匹配的元素类别 31 // $("li:not(.NotClass)").addClass("GetFocus"); 32 }) 33 34 $(function(){ // 增加所有索引值为偶数的元素类编，从0开始计数 35 // $("li:even").addClass("GetFocus"); 36 }) 37 38 $(function(){ // 增加所有索引值为奇数的元素类别，从0开始计数 39 // $("li:odd").addClass("GetFocus"); 40 }) 41 42 $(function(){ // 增加一个给定索引值得元素类别，从0开始计数 43 // $("li:eq(1)").addClass("GetFocus"); 44 }) 45 46 $(function(){ // 增加所有大于给定索引值得元素类别，从0开始计数 47 // $("li:gt(1)").addClass("GetFocus"); 48 }) 49 50 $(function(){ // 增加所有小于给定索引值的元素类别，从0开始计数。 51 // $("li:lt(4)").addClass("GetFocus"); 52 }) 53 54 $(function(){ // 增加标题类元素类别 55 // $("div h1").css("width","238"); 56 // $(":header").addClass("GetFocus"); 57 }) 58 59 $(function(){ 60 animateIt(); // 增加动画效果元素类别 61 $("#spnMove:animated").addClass("GetFocus"); 62 }) 63 64 function animateIt(){ // 动画效果 65 $("#spnMove").slideToggle("slow",animateIt); 66 } 67 </script> 68 </head> 69 <body> 70 <div> 71 <h1>基本过滤选择器</h1> 72 <ul> 73 <li class="DefClass">Item 0</li> 74 <li class="DefClass">Item 1</li> 75 <li class="NotClass">Item 2</li> 76 <li class="DefClass">Itme 3</lis> 77 </ul> 78 <span id="spnMove">Span Move</span> 79 </div> 80 </body> 81 </html>
