【5】jQuery学习——入门jQuery选择器之过滤选择器基本过滤选择器

今天说的是过滤选择器，主要是通过特定的过滤规则来筛选出所需的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>