jQuery选择器之基本过滤选择器Demo

最新推荐文章于 2024-07-08 16:22:29 发布

weixin_34220623

最新推荐文章于 2024-07-08 16:22:29 发布

阅读量56

点赞数

文章标签： javascript xhtml ViewUI

测试代码:

03-基本过滤选择器.html

  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.4.2.js" type="text/javascript"></script>
  8 
  9  <link rel="stylesheet" type="text/css" href="./css/style.css" />   
 10   <script type="text/javascript">
 11       $(document).ready(function(){
 12           //<input type="button"div:first value="选择第一个div元素." id="btn1"/>
 13           $("#btn1").click(function(){
 14                   $("div:first").css("background","red");
 15           });
 16           
 17           //<input type="button" value="选择最后一个div元素." id="btn2"/>
 18           $("#btn2").click(function(){
 19                   $("div:last").css("background","red");
 20           });
 21           
 22           //<input type="button" value="选择class不为one的 所有div元素.div:not(.one)" id="btn3"/>
 23           $("#btn3").click(function(){
 24                 $("div:not(.one)").css("background","blue");
 25           });
 26           
 27           //<input type="button" value="选择索引值为偶数 的div元素." id="btn4"/>
 28           $("#btn4").click(function(){
 29                   $("div:even").css("background","red");
 30           });
 31           
 32           //<input type="button" value="选择索引值为奇数 的div元素." id="btn5"/>
 33           $("#btn5").click(function(){
 34                   $("div:odd").css("background","red");
 35           });
 36           
 37           //<input type="button" value="选择索引值等于3的元素." id="btn6"/>
 38           $("#btn6").click(function(){
 39               
 40                 $("div:eq(3)").css("background","red");          
 41           });
 42           
 43           //<input type="button" value="选择索引值大于3的元素." id="btn7"/>
 44           $("#btn7").click(function(){    
 45           
 46                  $("div:gt(3)").css("background","red");        
 47           });
 48           
 49           //<input type="button" value="选择索引值小于3的元素." id="btn8"/>
 50           $("#btn8").click(function(){
 51                   $("div:lt(3)").css("background","red");    
 52           });
 53           
 54           //<input type="button" value="选择所有的标题元素." id="btn9"/>
 55           $("#btn9").click(function(){
 56                   //<h3><h4>
 57                 $(":header").css("background","red");    
 58           });
 59           
 60           
 61           
 62           //<input type="button" value="选择当前正在执行动画的所有元素." id="btn10"/>
 63           function move(){
 64                       // slideDwon();  向下滑动
 65                     // slideUp();  向上收起
 66                     //如果界面的元素是隐藏的，调用这个slideToggle方法，它会自动显示元素，
 67                     //如果是显示的，调用这个slideToggle方法，它会自动隐藏元素，
 68                 $("#mover").slideToggle("slow",move);
 69                 //滑动切换：当元素隐藏时，向下滑动，但元素显示时，先上收起..
 70           }
 71           move();
 72           //获取正在执行动画的元素...
 73           $("#btn10").click(function(){
 74                 $(":animated").css("background","red");    
 75                 
 76           });
 77 //animated
 78           
 79     });
 80   </script>
 81 </head>
 82 <body>
 83   <h3>基本过滤选择器.</h3>
 84   
 85   
 86   <button id="reset">手动重置页面元素</button>
 87   <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />
 88 
 89   <input type="button" value="选择第一个div元素." id="btn1"/>
 90   <input type="button" value="选择最后一个div元素." id="btn2"/>
 91   <input type="button" value="选择class不为one的 所有div元素." id="btn3"/>
 92   <input type="button" value="选择索引值为偶数 的div元素." id="btn4"/>
 93   <input type="button" value="选择索引值为奇数 的div元素." id="btn5"/>
 94   <input type="button" value="选择索引值等于3的元素." id="btn6"/>
 95   <input type="button" value="选择索引值大于3的元素." id="btn7"/>
 96   <input type="button" value="选择索引值小于3的元素." id="btn8"/>
 97   <input type="button" value="选择所有的标题元素." id="btn9"/>
 98   <input type="button" value="选择当前正在执行动画的所有元素." id="btn10"/>
 99  
100 <br /><br />
101  
102    <!-- 测试的元素 -->
103   <div class="one" id="one" >
104  id为one,class为one的div
105       <div class="mini">class为mini</div>
106   </div>
107 
108     <div class="one"  id="two" title="test" >
109      id为two,class为one,title为test的div.
110       <div class="mini"  title="other">class为mini,title为other</div>
111       <div class="mini"  title="test">class为mini,title为test</div>
112   </div>
113 
114   <div class="one">
115       <div class="mini">class为mini</div>
116       <div class="mini">class为mini</div>
117       <div class="mini">class为mini</div>
118       <div class="mini"></div>
119   </div>
120 
121   <div class="one">
122       <div class="mini">class为mini</div>
123       <div class="mini">class为mini</div>
124       <div class="mini">class为mini</div>
125       <div class="mini"  title="tesst">class为mini,title为tesst</div>
126   </div>
127 
128 
129   <div style="display:none;"  class="none">style的display为"none"的div</div>
130   
131   <div class="hide">class为"hide"的div</div>
132  
133   <div>
134   包含input的type为"hidden"的div<input type="hidden" size="8"/>
135   </div>
136 
137   
138   <span id="mover" >正在执行动画的span元素.</span>
139 
140 <!-- Resources from http://down.liehuo.net -->
141 </body>
142 </html>

weixin_34220623

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery选择器之基本过滤选择器Demo

测试代码:03-基本过滤选择器.html 1 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; 2 &lt;html xmlns="http://www.w3.org/199...
复制链接

扫一扫