1.基本过滤选择器介绍
基本过滤器：
- :first 获取数组中第一个元素
- :last 获取数组中最后一个
- :eq(selector) 获取指定索引
- :gt(index) 大于指定索引
- :lt(index) 小于指定索引
- :even 偶数，从0开始计数（0、2、4即1/3/5行）
- :odd 奇数
- :not(selector) 去除所有与指定选择器匹配的元素
- :header 获得所有标题元素
- :animated 获得所有动画
- :focus 获得焦点
2.代码实例
?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>03-基本过滤选择器.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 ??????$(function(){ 12 // ?????????????<input type="button" value="选择第一个div元素." id="btn1"/> 13 ??????????$("#btn1").click(function(){ 14 ??????????????$("div:first").css("background-color","red"); 15 ??????????}); 16 // ?????????????<input type="button" value="选择最后一个div元素." id="btn2"/> 17 ??????????$("#btn2").click(function(){ 18 ??????????????$("div:last").css("background-color","red"); 19 ??????????}); 20 // ?????????????<input type="button" value="选择class不为one的 所有div元素." id="btn3"/> 21 ??????????$("#btn3").click(function(){ 22 ??????????????$("div:not(‘.one‘)").css("background-color","red"); 23 ??????????}); 24 // ?????????????<input type="button" value="选择索引值为偶数 的div元素." id="btn4"/> 25 ??????????$("#btn4").click(function(){ 26 ??????????????$("div:even").css("background-color","red"); 27 ??????????}); 28 // ?????????????<input type="button" value="选择索引值为奇数 的div元素." id="btn5"/> 29 ??????????$("#btn5").click(function(){ 30 ??????????????$("div:odd").css("background-color","red"); 31 ??????????}); 32 // ?????????????<input type="button" value="选择索引值等于3的元素." id="btn6"/> 33 ??????????$("#btn6").click(function(){ 34 ??????????????$("div:eq(3)").css("background-color","red"); 35 ??????????}); 36 // ?????????????<input type="button" value="选择索引值大于3的元素." id="btn7"/> 37 ??????????$("#btn7").click(function(){ 38 ??????????????$("div:gt(3)").css("background-color","red"); 39 ??????????}); 40 // ?????????????<input type="button" value="选择索引值小于3的元素." id="btn8"/> 41 ??????????$("#btn8").click(function(){ 42 ??????????????$("div:lt(3)").css("background-color","red"); 43 ??????????}); 44 // ?????????????<input type="button" value="选择所有的标题元素." id="btn9"/> 45 ??????????$("#btn9").click(function(){ 46 ??????????????$(":header").css("background-color","red"); 47 ??????????}); 48 // ?????????????<input type="button" value="选择当前正在执行动画的所有元素." id="btn10"/> 49 ??????????$("#btn10").click(function(){ 50 ??????????????$(":animated").css("background-color","red"); 51 ??????????}); 52 // ?????????????<input type="text" value="请输入账号" defaultValue="请输入账号" /> 53 // ?????????????<input type="text" value="请输入密码" defaultValue="请输入密码"/> 54 ??????????//给文本框绑定获取和失去焦点的事件 55 ??????????//on支持一个函数可以绑定多个事件 56 ??????????$("input[type=‘text‘]").on("blur focus",function(){ 57 ??????????????var defaultValue = $(this).attr("defaultValue"); 58 ??????????????if($(this).is(":focus")){ 59 ??????????????????if($(this).val() == defaultValue){ 60 ??????????????????????$(this).val(""); 61 ??????????????????} 62 ??????????????} else { 63 ??????????????????if($(this).val() == "") { 64 ??????????????????????$(this).val(defaultValue); 65 ??????????????????} 66 ??????????????} 67 ??????????}); 68 ??????}); 69 ??</script> 70 </head> 71 <body> 72 ??<h3>基本过滤选择器.</h3> 73 ??<button id="reset">手动重置页面元素</button> 74 ??<input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br /> 75 ?76 ??<input type="button" value="选择第一个div元素." id="btn1"/> 77 ??<input type="button" value="选择最后一个div元素." id="btn2"/> 78 ??<input type="button" value="选择class不为one的 所有div元素." id="btn3"/> 79 ??<input type="button" value="选择索引值为偶数 的div元素." id="btn4"/> 80 ??<input type="button" value="选择索引值为奇数 的div元素." id="btn5"/> 81 ??<input type="button" value="选择索引值等于3的元素." id="btn6"/> 82 ??<input type="button" value="选择索引值大于3的元素." id="btn7"/> 83 ??<input type="button" value="选择索引值小于3的元素." id="btn8"/> 84 ??<input type="button" value="选择所有的标题元素." id="btn9"/> 85 ??<input type="button" value="选择当前正在执行动画的所有元素." id="btn10"/> 86 ??<input type="text" value="请输入账号" defaultValue="请输入账号" /> 87 ??<input type="text" value="请输入密码" defaultValue="请输入密码"/> 88 ??89 <br /><br /> 90 ??91 ???<!-- 测试的元素 --> 92 ??<div class="one" id="one" > 93 ?id为one,class为one的div 94 ??????<div class="mini">class为mini</div> 95 ??</div> 96 ?97 ????<div class="one" ?id="two" title="test" > 98 ?????id为two,class为one,title为test的div. 99 ??????<div class="mini" ?title="other">class为mini,title为other</div>100 ??????<div class="mini" ?title="test">class为mini,title为test</div>101 ??</div>102 103 ??<div class="one">104 ??????<div class="mini">class为mini</div>105 ??????<div class="mini">class为mini</div>106 ??????<div class="mini">class为mini</div>107 ??????<div class="mini"></div>108 ??</div>109 110 ??111 112 ??<div class="one">113 ??????<div class="mini">class为mini</div>114 ??????<div class="mini">class为mini</div>115 ??????<div class="mini">class为mini</div>116 ??????<div class="mini" ?title="tesst">class为mini,title为tesst</div>117 ??</div>118 119 120 ??<div style="display:none;" ?class="none">style的display为"none"的div</div>121 ??122 ??<div class="hide">class为"hide"的div</div>123 ?124 ??<div>125 ??包含input的type为"hidden"的div<input type="hidden" size="8"/>126 ??</div>127 128 ??129 ??<span id="mover">正在执行动画的span元素.</span>130 131 </body>132 </html>jQuery--基本过滤选择器
原文地址：https://www.cnblogs.com/jxxblogs/p/9538932.html