jQuery--筛选【过滤函数】
之前选择器可以完成的功能，筛选也提供了相同的函数
筛选函数介绍
- 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>
