今天说的是过滤选择器，主要是通过特定的过滤规则来筛选出所需的DOM元素，方便以后添加我们所需的效果，过滤规则与CSS中的伪类选择器语法相同，即选择器都以一个冒号(:)开头。
按照不同的过滤规则，过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。
============================================================================================
今天就像我们标题写的一样，先了解下基本的过滤，以后在说说其他的。
基本过滤器有10个，下面我们一个一个的来了解下
| 选择器 | 描述 | 返回 | 示例 |
| $("Element:first") | 获得在HTML页面中某种元素的第一个 | 单个元素 | $("div:first")表示获得第一个div |
| $("Element:last") | 获得在HTML页面中某种元素的最后一个 | 单个元素 | $("div:last")表示获得最后一个div |
| $("Element:not(selector)") | 去除所有与给定选择器匹配的元素 | 集合元素 | $(“input:not:(.myclass)”)选取class不是myclass的input元素 |
| $("Element:even") | 选取索引是偶数的所有元素，注意：索引是从0开始的 | 集合元素 | $(“input:even”)选取索引是偶数的input元素。 |
| $("Element:odd") | 选取索引是奇数的所有元素，注意：索引是从0开始的 | 集合元素 | $(“input:odd”)选取索引是奇数的input元素。 |
| $("Element:eq(index)") | 选取索引等于index的元素，注意：索引是从0开始的 | 集合元素 | $(“input:eq(1)”)选取索引等于1的input元素。实际上选择的是第二个input元素 |
| $("Element:gt(index)") | 选取索引大于index的元素，注意：索引是从0开始的 | 集合元素 | $(“input:gt(1)”)选取索引大于1的input元素。实际上选择的是第二个input元素开始，之【后】所有的input元素 |
| $("Element:lt(index)") | 选取索引小于index的元素，注意：索引是从0开始的 | 集合元素 |
$(“input:lt(1)”)选取索引小于于1的input元素。这个就等同于$(“input:eq(0)”)。 $(“input:gt(3)”)选取索引大于3的input元素。实际上选择的是第三个input元素开始，之【前】所有的input元素 |
| $(":header") | 选取所有的标题元素，例如h1,h2,h3….. | 集合元素 | $(“:header”)选取网页中所有的h1,h2,h3… |
| $("Element:animated") | 选取当前正在执行动画的所有元素 | 集合元素 | $(“div:animated”)选取正在执行动画的div元素 |
=====================================================================================================
这里有几点要注意的：
【1】有一点我觉得有必要提醒大家的是”:first”和”:last”选择器，虽然获取到的是一个元素，但是返回的jQuery对象仍然是一个jQuery包装集，还是一个集合，还是要这样$(“div:first”)[0]转换为DOM对象。具体是以后在说。
【2】odd和even获取的是索引值，是从0开始算起，所以正常表现情况是 even是获取奇数行，odd是获取偶数行 。
【3】如果上面两个方法（gt(index)和lt(index)）的大于号小于号记不清，就想想HTML标记中的[& gt ;]和[& lt ;](中括号中内容去掉空格)就行了哈。
=====================================================================================================
ps.文章参考梦三秋和w3cfuns网站
=====================================================================================================
完成了w3cfuns网站的作业
基本过滤选择器
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>实例</title> 6 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 7 <script type="text/javascript"> 8 $(function(){ 9 $("#but1").click(function(){ 10 $(".a li:first").text("我是第一行"); 11 }); 12 $("#but2").click(function(){ 13 $(".a li:last").text("我是最后一行"); 14 }); 15 $("#but3").click(function(){ 16 $(".b li:odd").text("我是偶数行"); 17 }); 18 $("#but4").click(function(){ 19 $(".b li:even").text("我是奇数行"); 20 }); 21 $("#but5").click(function(){ 22 $(".c li:eq(1)").text("我是第二行"); 23 }); 24 $("#but6").click(function(){ 25 $(".d li:lt(4)").text("我在第五行之前"); 26 }); 27 $("#but7").click(function(){ 28 $(".d li:gt(4)").text(" 我在第五行之后"); 29 }); 30 $("#but8").click(function(){ 31 $(".e :header").text("我是h标题标签"); 32 }); 33 }); 34 35 36 </script> 37 </head> 38 39 <body> 40 41 <input type="button" id="but1" value="我是第一行" /> 42 <input type="button" id="but2" value="我是最后一行" /> 43 <input type="button" id="but3" value="我是偶数行【:odd】" /> 44 <input type="button" id="but4" value="我是奇数行【:even】" /> 45 <input type="button" id="but5" value="我是第二行" /> 46 <input type="button" id="but6" value="我在第五行之前【:lt()】" /> 47 <input type="button" id="but7" value="我在第五行之后【:gt()】" /> 48 <input type="button" id="but8" value="我是h标题标签" /> 49 50 <p>===============================我是淫荡的分割线【:first和:last应用】===============================</p> 51 <ul class="a"> 52 <li>1</li> 53 <li>2</li> 54 <li>3</li> 55 <li>4</li> 56 <li>5</li> 57 </ul> 58 <p>===============================我是淫荡的分割线【:odd和:even应用】===============================</p> 59 <ul class="b"> 60 <li>1</li> 61 <li>2</li> 62 <li>3</li> 63 <li>4</li> 64 <li>5</li> 65 <li>6</li> 66 <li>7</li> 67 <li>8</li> 68 <li>9</li> 69 <li>10</li> 70 </ul> 71 <p>===============================我是淫荡的分割线【:eq()应用】===============================</p> 72 <ul class="c"> 73 <li>1</li> 74 <li>2</li> 75 <li>3</li> 76 </ul> 77 <p>===============================我是淫荡的分割线【:lt()和:gt()应用】===============================</p> 78 <ul class="d"> 79 <li>1</li> 80 <li>2</li> 81 <li>3</li> 82 <li>4</li> 83 <li>5</li> 84 <li>6</li> 85 <li>7</li> 86 <li>8</li> 87 <li>9</li> 88 <li>10</li> 89 </ul> 90 <p>===============================我是淫荡的分割线【:header应用】===============================</p> 91 <div class="e"> 92 <h1>h1</h1> 93 <h2>h2</h2> 94 <h3>h3</h3> 95 <h4>h4</h4> 96 <h5>h5</h5> 97 <h6>h6</h6> 98 </div> 99 100 101 </body> 102 </html>