jQuery基本过滤选择器

  1 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
  2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  3 <html>
  4   <head>
  5     <!-- jQuery基本过滤选择器 -->
  6     <!--
  7         :first             选取第一个元素                             单个元素         #("div:first")              选取所有div中的第一个div元素
  8         :last                    选取最后一个元素                               单个元素       $("div:last")                  选取所有div中的最后一个div元素
  9         :not(selector)    去除所有与给定选择器匹配的元素            集合元素      $("input:not(.myClass)")    选取class不是myClass的input元素
 10         :even            选取索引是偶数的所有元素，索引从0开始        集合元素        $("input:even")                选取索引是偶数的input元素
 11         :odd            选取索引是奇数的所有元素，索引从0开始        集合元素        $("input:odd")                选取索引是奇数的input元素
 12         :eq(index)        选取索引等于index的元素（index从0开始）     单个元素      $("input:eq(1)")              选取索引等于1的input元素
 13         :gt(index)        选取索引大于index的元素（index从0开始）     集合元素      $("input:gt(1)")              选取索引大于1的input元素（注：大于1  而不包括1）
 14          :lt(index)        选育索引小与index的元素（index从0开始）     集合元素      $("input:lt(1)")            选取索引小于1的input元素（注：小于1 而不包括1）
 15          :header            选取所有的标题元素，例如h1,h2,h3等等          集合元素        $(":header")                选取网页中所有的<h1>,<h2>,<h3>……
 16          :animated        选取当前正在执行动画的所有元素            集合元素          $("div:animated")             选取正在执行动画的div元素
 17          :focus            选取当前获取焦点的元素                    集合元素        $(":focus")                    选取当前获取焦点的元素
 18      -->
 19     <meta http-equiv="pragma" content="no-cache">
 20     <meta http-equiv="cache-control" content="no-cache">
 21     <meta http-equiv="expires" content="0">
 22     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 23     <meta http-equiv="description" content="This is my page">
 24     <script type="text/javascript"  src="../../js/jquery.js"></script>
 25     <style type="text/css">
 26         div,span,p{ 27             width:140px;
 28             height:140px;
 29             margin:5px;
 30             background:#aaa;
 31             border:#000 1px solid;
 32             float:left;
 33             font-size:17px;
 34             font_family:Verdana;
 35         }
 36         div.mini{ 37             width:55px;
 38             height:55px;
 39             background-color:#aaa;
 40             font-size:12px;
 41         }
 42         div.hide{ 43             display:none;
 44         }
 45     </style>
 46
 47     <script type="text/javascript" >
 48
 49         //选取第一个div元素
 50         function test1(){
 51             $("div:first").css("background","#bbffaa");
 52         }
 53
 54         //选取最后第一个div元素
 55         function test2(){
 56             $("div:last").css("background","#808000");
 57         }
 58
 59         //选取class不为one的div元素   多个用    ,  隔开    $("div:not(.one,.two)")
 60         function test3(){
 61             $("div:not(.one)").css("background","#00ff00");
 62         }
 63
 64         //选取索引值为偶数的div   下标从0开始  0算偶数
 65         function test4(){
 66             $("div:even").css("background","00ff00");
 67         }
 68
 69         //选取索引值为奇数的div        下标从0开始  0算偶数
 70         function test5(){
 71             $("div:odd").css("background","00ff00");
 72         }
 73
 74         //选取索引值为3的div    下标从0开始  0算偶数
 75         function test6(){
 76             $("div:eq(3)").css("background","00ff00");
 77         }
 78
 79         //选取索引值大于3的div  下标从0开始  0算偶数    不包括3
 80         function test7(){
 81             $("div:gt(3)").css("background","00ff00");
 82         }
 83
 84         //选取索引值小于3的div  下标从0开始  0算偶数    不包括3
 85         function test8(){
 86             $("div:lt(3)").css("background","00ff00");
 87         }
 88
 89         //选取所有标题元素  <h1>  <h2>   <h3>
 90         function test9(){
 91             $(":header").css("background","00ff00");
 92         }
 93
 94         //改变当前正在执行动画的元素 的背景色  ？？？
 95         function test10(){
 96             $(":animated").css("background","00ff00");
 97         }
 98
 99         //改变当前获取焦点的背景色
100         function test11(){
101             $(":focus").css("background","00ff00");
102         }
103     </script>
104   </head>
105   <body>
106
107       <div id="one" class="one">
108           id为one  class为one的div
109           <div class="mini">class为mini</div>
110       </div>
111
112       <div class="one"  id="two"  title="test">
113            id为two class为one title为test的div
114            <div class="mini"  title="other">class为mini  title为other</div>
115            <div class="mini"  title="test">class为mini  title为test</div>
116       </div>
117
118       <div class="one">
119           <div class="mini">class为mini</div>
120           <div class="mini">class为mini</div>
121           <div class="mini">class为mini</div>
122           <div class="mini"></div>
123       </div>
124
125       <div class="one">
126           <h1>fsdfds</h1>
127           <div class="mini">class为mini</div>
128           <div class="mini">class为mini</div>
129           <div class="mini">class为mini</div>
130           <div class="mini" title="tesst">class为mini title为tesst</div>
131       </div>
132
133       <div style="display:none;"  class="none">
134           style为display class为none的div
135       </div>
136
137     <div class="hide">class为hide的div</div>
138
139
140       <div>
141           包涵input的type为hidden的div<input  type="hidden"  size="8"/>
142       </div>
143
144       <span id="mover">正在执行动画的span元素</span>
145
146
147       <br>
148       <input type="button" onclick="test1()"  value="改变第一个div元素的背景色"/>
149       <input type="button" onclick="test2()"  value="改变最后一个div元素的背景色"/>
150       <input type="button" onclick="test3()"  value="改变class不为one的div元素的背景色"/>
151       <input type="button" onclick="test4()"  value="改变索引值为偶数的div元素的背景色"/>
152       <input type="button" onclick="test5()"  value="改变索引为奇数的div元素的背景色"/>
153       <input type="button" onclick="test6()"  value="改变索引值等于3的div元素的背景色"/>
154       <input type="button" onclick="test7()"  value="改变索引值大于3的div元素的背景色"/>
155       <input type="button" onclick="test8()"  value="改变索引值小于3的div元素的背景色"/>
156       <input type="button" onclick="test9()"  value="改变所有的标题元素，例如<h1>,<h2>,<h2>这些元素的背景色"/>
157       <input type="button" onclick="test10()"  value="改变当前正在执行动画的元素的背景色"/>
158       <input type="button" onclick="test11()"  value="改变当前获取焦点的背景色"/>
159
160
161   </body>
162 </html>

转载于:https://www.cnblogs.com/nwme/p/5374476.html

jQuery基本过滤选择器相关推荐

jq查找字段忽略html标签,jquery内容过滤选择器有哪些？
jQuery内容过滤选择器的过滤规则主要运用在DOM元素所包含的子元素或其文本内容上,主要包括四种过滤方法: :contains(text).:empty .:has(seletor) .:paren ...
jquery可见性过滤选择器
jquery可见性过滤选择器可见性过滤选择器是根据元素的可见性状态来选择相应的元素. 在锋利的jquery一书中的介绍如下:
jquery属性过滤选择器[attr=value]、[attr!=value]、[attr^=value]、[attr$=value]、[attr*=value]、[attr|=value]
全栈工程师开发手册 (作者:栾鹏) jquery系列教程1-选择器全解 jquery属性过滤选择器 jquery属性过滤选择器,包括[attr].[attr=value].[attr!=value]. ...
jquery可见性过滤选择器:hidden、:visible
全栈工程师开发手册 (作者:栾鹏) jquery系列教程1-选择器全解 jquery可见性过滤选择器 jquery可见性过滤选择器,包括:hidden.:visible,具体功能如代码中注释. 代码如 ...
jquery基本过滤选择器:first :last :not(.myclass) :even :odd :eq(1) :gt(5) :lt(1) :header :animated :focus
全栈工程师开发手册 (作者:栾鹏) jquery系列教程1-选择器全解 jquery基本过滤选择器 jquery基本过滤选择器,包括:first.:last.:not(.myclass).:even, ...
jQuery之过滤选择器
过滤选择器 1.基本选择器 2.内容选择器 3.可见性选择器 4.子元素过滤器过滤选择器简称:过滤器.它其实也是一种选择器,而这种选择器类似于CSS3(http://t.mb5u.com/css3/ ...
jQuery前端开发学习指南(11)——jQuery属性过滤选择器
版权声明本文原创作者:谷哥的小弟作者博客地址:http://blog.csdn.net/lfdfhl 属性过滤选择器概述属性过滤选择器用于根据元素的属性来匹配元素. [attribute] 匹配 ...
jQuery属性过滤选择器
属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素. [attribute] 选取用次属性的元素 [attribute=value] 选取属性值为value的元素 [attribute ...
jquery基本过滤选择器（jquery筛选选择器）
这些选择器里面除了first和last还有eq方法返回的是元素对象,其余的返回都是元素集合 :gt(index) 用法: $("li:gt(0)") 意思:获取索引大于0,但不包括 ...

jQuery基本过滤选择器

jQuery基本过滤选择器相关推荐

最新文章

热门文章