jquery学习之1.3-基本选择器

基本选择器学习:

代码如下:

 1 <%@ page language="java" import="java.util.*"
 2  pageEncoding="utf-8"%>
 3 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 4 <html>
 5   <head>
 6     <title>11</title>    
 7   <script type="text/javascript" src="js/jquery-1.11.0.js">
 8   </script>
 9   <script language="javascript">
10    $(document).ready(function()
11   {
12       alert("欢迎来到层级选择器学习界面");
13       //*************改变第一个和最后一个div的背景色为#ff00ff*******
14     $("#bt1").click(function()
15     {
16         $("div").first().css("background","ff00ff");    
17         //两种方法一样
18         //$("div:first").css("background","ff00ff");
19         $("div:last").css("background","ff00ff");    
20     });
21     //*************改变id不为div1的所有div的背景色为#ff0001*******
22     $("#bt2").click(function()
23     {
24         //先选择div,然后再过滤
25         $("div:not(#div1)").css("background","#ff0001");
26     });
27     //*************改变索引值为偶数的div背景色为#ff00aa,偶数的为#aa00bb*******
28     $("#bt3").click(function()
29     {
30         //先选择div,然后再过滤
31         $("div:even").css("background","#ff00aa");
32          $("div:odd").css("background","#aa00bb");
33     });
34     
35   });
36   
37   //****************************************************** 
38   </script>
39   </head> 
40   <body>
41     <input type="button"  id="bt1" value="改变第一个和最后一个div的背景色为#ff00ff" ></input>
42     <input type="button"  id="bt2" value="改变id不为div1的所有div的背景色为#ff0001" ></input>
43     <input type="button"  id="bt3" value="改变索引值为偶数的div背景色为#ff00aa,偶数的为#aa00bb" ></input>    
44     <br/><br/>
45     <div id="div1" style="background:grey;border:1px solid;20%;height:30%;float:left;">div1</div> 
46     <div id="div2"  style="background:white;border:1px solid;20%;height:30%;float:left;">
47         div2
48         <p>p1第一段</p>
49         <p>p2第二段</p>
50         <div id="div2_01"  style="background:white;border:1px solid;20%;height:30%;float:left;">div2_01</div>
51     </div>
52     <div id="div3"  style="background:grey;border:1px solid;20%;height:30%;float:left;">div3</div>   
53     <br>
54   </body>
55 </html>
View Code

 动画效果的背景控制:

 1 <%@ page language="java" import="java.util.*"
 2  pageEncoding="utf-8"%>
 3 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 4 <html>
 5   <head>
 6     <title>11</title>    
 7   <script type="text/javascript" src="js/jquery-1.11.0.js">
 8   </script>
 9   </head> 
10   <body>
11     <h1>第一个table</h1>
12     <table border="1px" width="20%" >
13     <tr><td>1.1</td><td>1.2</td></tr>
14     <tr><td>2.1</td><td>2.2</td></tr>
15     <tr><td>3.1</td><td>3.2</td></tr>
16     </table>
17     <h1>第二个table</h1>
18     <table width="20%">
19     <tr><td>1.1</td><td>1.2</td></tr>
20     <tr><td>2.1</td><td>2.2</td></tr>
21     <tr><td>3.1</td><td>3.2</td></tr>
22     </table>
23     <input type="button" value="改变动画效果的背景色为grey" id="move" > </input>
24     <div id="mover" background="grey">动画</div>
25     <script language="javascript">     
26      $("table:eq(0) tr:even").css("background","#ff00a0");    
27      $("table:eq(0) tr:odd").css("background","silver");      
28      $("table:eq(1) tr:eq(0)").css("background","yellow");
29      $("table:eq(1) tr:gt(1)").css("background","pink");    
30      $(":header").css("background","silver");
31      function ca()
32      {
33      $("#mover").slideToggle("fast",ca);
34      }
35      ca();
36      $("#move").click(
37      function()
38      {
39          $(":animated").css("background", "pink")
40      });
41      
42     //****************************************************** 
43   </script>
44   </body>
45 </html>
my Code
原文地址:https://www.cnblogs.com/luckyflower/p/3619256.html