jquery练习1
Jquery练习1
This is a heading
This is a paragraph.
This is another paragraph.
show me !!
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>Jquery练习1</title>
6 <script type="text/javascript" src="jquery.js"></script>
7 <style type="text/css">
8 .bggg,.bgg{width:200px; height:150px; background:#FC3; border:solid #FC3 1px; text-align:center; position:relative;}
9 .bggg{background-color:#FCF;}
10 </style>
11 <script type="text/javascript">
12 $(document).ready(function(){
13 /*$(".show").click(function(){
14 $("p").css("background","green");
15 $("p").show("normal");
16 });
17 $(".hide").click(function(){
18 $("p").hide("normal");
19 $("p").css("background","red");
20 });*/
21 /* 显示和隐藏*/
22 /* $(".show").click(function(){
23 $(".bgg").show("normal");
24 $(".bggg").toggle("1000");
25 });
26 $(".hide").click(function(){
27 $(".bgg").toggle("normal",alert("hide!"));
28 $(".bggg").slideUp("1000");
29 });*/
30 /*淡入淡出*/
31 /* $(".hide").click(function(){
32 $(".bgg").fadeOut(1000);
33 $(".bggg").fadeTo("slow",0.25);
34 });
35 $(".show").click(function(){
36 $(".bgg").fadeIn(2000);
37 $(".bggg").fadeTo(5000,1);
38 });
39 */
40 $(".show").click(function(){
41 $(".bgg").animate({height:400},"slow");
42 $(".bgg").animate({width:600},"slow ");
43 $(".bgg").animate({fontSize:"55px"},3000);
44 });
45
46 $(".hide").click(function(){
47 $(".bgg").animate({fontSize:"12px"},1000);
48 $(".bgg").animate({height:150},"fast");
49 $(".bgg").animate({width:200},"fast");
50
51 });
52 });
53 </script>
54
55 </head>
56
57 <body>
58 <h2>This is a heading</h2>
59 <div class="bgg">
60 <p>This is a paragraph.</p>
61 <p>This is another paragraph.</p>
62 </div>
63 <p></p><p></p>
64 <div class="bggg">show me !!</div>
65 <button class="hide" type="button">Hide me</button>
66 <button class="show" type="button">Show me</button>
67 </body>
68 </html>
