筛选函数介绍

eq(index|-index) 　　类似:eq()index:正数，从头开始获得指定所有的元素，从0算起，0表示第一个-index:负数，从尾开始获得指定索引的元素，1算起，-1表示最后一个
is()　　判断
hasClass()　　判断class是否是指定的类
filter()　　筛选出与制定表达式匹配的元素集合
not()　　将指定的内容删除
has() 　　子元素是否有
slice(start,end)　　截取jquery对象数组中的元素，[2,4]得到2,3，左闭右开
map()　　 jquery对象拆分成jquery对象数组

代码实例

  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>05-可见性过滤选择器.html</title>
  6  <!--   引入jQuery --> 
  7  <script src="../js/jquery-1.8.3.js" type="text/javascript"></script>
  8  <script src="./script/assist.js" type="text/javascript"></script>
  9  <link rel="stylesheet" type="text/css" href="./css/style.css" />   
 10   <script type="text/javascript">
 11       $(document).ready(function(){
 12 //        <input type="button" value=" 选择索引值等于3的元素"  id="b1"/>
 13         $("#b1").click(function(){
 14             $("div").eq(3).css("background-color","red");
 15         });
 16 //            <input type="button" value=" 选择第一个div元素"  id="b2"/>
 17         $("#b2").click(function(){
 18             $("div").first().css("background-color","red");
 19         });
 20 //            <input type="button" value=" 选择最后一个div元素"  id="b3"/>
 21         $("#b3").click(function(){
 22             //两种方法都可以
 23 //            $("div").last().css("background-color","red").show();
 24             $("div").eq(-1).css("background-color","red").show();
 25         });
 26 //            <input type="button" value=" id=one div样式是否是one"  id="b4"/>
 27         $("#b4").click(function(){
 28 //            $("div #one").is(".one")  中间加空格代表的是div内部的id为one的元素
 29             alert($("div#one").is(".one"));
 30         });
 31 //            <input type="button" value=" 选择class为none的所有div"  id="b5"/>
 32         $("#b5").click(function(){
 33             $("div").filter(".none").css("background-color","red").show();
 34         });
 35 //            <input type="button" value=" 样式为hide div 下一个兄弟是否是span"  id="b6"/>
 36         $("#b6").click(function(){
 37             alert($("div.hide").next().is("span"));
 38         });
 39 //            <input type="button" value=" 选择所有div中含有div的"  id="b7"/>
 40         $("#b7").click(function(){
 41             $("div").has("div").css("background-color","red");
 42         });
 43 //            <input type="button" value=" 选择样式为one div 子元素中没有title属性的div"  id="b8"/>
 44         $("#b8").click(function(){
 45 //            $("div.one").not("[title]").css("background-color","red");
 46             $("div.one").children("div").not("[title]").css("background-color","red");
 47         });
 48 //            <input type="button" value=" 选择所以号为3,4的div"  id="b9"/>
 49         $("#b9").click(function(){
 50             //左闭右开
 51             $("div").slice(3,5).css("background-color","red");
 52         });
 53     });
 54   
 55   </script>
 56 </head>
 57 <body>
 58   <h3>可见性过滤选择器.</h3>
 59   <button id="reset">手动重置页面元素</button>
 60   <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label>
 61   <br/><br/>
 62   <input type="button" value=" 选择索引值等于3的元素"  id="b1"/>
 63   <input type="button" value=" 选择第一个div元素"  id="b2"/>
 64   <input type="button" value=" 选择最后一个div元素"  id="b3"/>
 65   <input type="button" value=" id=one div样式是否是one"  id="b4"/>
 66   <input type="button" value=" 选择class为none的所有div"  id="b5"/>
 67   <input type="button" value=" 样式为hide div 下一个兄弟是否是span"  id="b6"/>
 68   <input type="button" value=" 选择所有div中含有div的"  id="b7"/>
 69   <input type="button" value=" 选择样式为one div 子元素中没有title属性的div"  id="b8"/>
 70   <input type="button" value=" 选择所以号为3,4的div"  id="b9"/>
 71   <br /><br />
 72   
 73   <!--文本隐藏域-->
 74  <input type="hidden" value="hidden_1">
 75  <input type="hidden" value="hidden_2">
 76  <input type="hidden" value="hidden_3">
 77  <input type="hidden" value="hidden_4">
 78   
 79   <div class="one" id="one" >
 80  id为one,class为one的div
 81       <div class="mini">class为mini</div>
 82   </div>
 83 
 84     <div class="one"  id="two" title="test" >
 85      id为two,class为one,title为test的div.
 86       <div class="mini"  title="other">class为mini,title为other</div>
 87       <div class="mini"  title="test">class为mini,title为test</div>
 88   </div>
 89 
 90   <div class="one">
 91       <div class="mini">class为mini</div>
 92       <div class="mini">class为mini</div>
 93       <div class="mini">class为mini</div>
 94       <div class="mini"  title="tesst">class为mini,title为tesst</div>
 95   </div>
 96 
 97 
 98   <div style="display:none;"  class="none">style的display为"none"的div</div>
 99   
100   <div class="hide">class为"hide"的div</div>
101   
102   <span id="mover">正在执行动画的span元素.</span>
103 </body>
104 </html>