jQuery--基本过滤选择器

Posted jxxblogs

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery--基本过滤选择器相关的知识,希望对你有一定的参考价值。

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--基本过滤选择器的主要内容,如果未能解决你的问题,请参考以下文章

jQuery 基本选择器 层次选择器 过滤选择器 内容过滤选择器 可见过滤选择器 属性过滤选择器 表单对象属性过滤选择器

JavaScript之jQuery-2 jQuery选择器(jQuery选择器基本选择器层次选择器过滤选择器表单选择器)

jQuery选择器

jQuery选择器概述

jQuery选择器详解

JQuery选择器学习整理(基本选择器,层级选择器,伪类选择器,属性过滤,内容过滤,可见性过滤,范围选择器,排除选择器)