Learning jQuery Ralph Steyer 2013

是 否 +2 论坛币

k人 参与回答

经管之家送您一份

应届毕业生专属福利!

求职就业群

赵安豆老师微信：zhaoandou666

经管之家联合CDA

送您一个全额奖学金名额~ !

立即领取

感谢您参与论坛问题回答

经管之家送您两个论坛币！

+2 论坛币

• Learning jQuery: A Hands-on Guide to Building Rich Interactive Web Front Ends

• By: Ralph Steyer

• Publisher: Addison-Wesley Professional

• Pub. Date: April 26, 2013

• Print ISBN-10: 0-321-81526-2

• Print ISBN-13: 978-0-321-81526-2

• Web ISBN-10: 0-13-293158-3

• Web ISBN-13: 978-0-13-293158-8

• Pages in Print Edition: 512

• Subscriber Rating: [1 Rating] Subscriber Reviews

  
  

扫码加我 拉你入群

请注明：姓名-公司-职位

以便审核进群资格，未注明则拒绝

分享0 收藏0 回帖

关键词：Learning earning Jquery Learn Query

1. 01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 01
   
2.    Transitional//EN"
   
3.    "http://www.w3.org/TR/html4/loose.dtd">
   
4. 02 <html >
   
5. 03  <head>
   
6. 04    <meta http-equiv="Content-Type"
   
7. 05      content="text/html; charset=utf-8" />
   
8. 06    <title>The first jQuery example</title>
   
9. 07    <script type="text/javascript"
   
10. 08        src="lib/jquery-1.8.min.js"></script>
    
11. 09    <script type="text/javascript">
    
12. 10      $(document).ready(function(){
    
13. 11        $("#a").click(function(){
    
14. 12          $("#output").html("Boring :-(");
    
15. 13        });
    
16. 14        $("#b").click(function(){
    
17. 15          $("#output").html("A nice game :-)");
    
18. 16        });
    
19. 17        $("#c").click(function(){
    
20. 18          $("#output").html("A strange game. " +
    
21. 19               "The only winning move " +
    
22. 20             "is not to play.");
    
23. 21        });
    
24. 22      });
    
25. 23    </script>
    
26. 24  </head>
    
27. 25  <body>
    
28. 26    <h1>Welcome to WOPR</h1>
    
29. 27    <h3>Shall we play a game</h3>
    
30. 28    <button id="a">Tic Tac Toe</button>
    
31. 29    <button id="b">Chess</button>
    
32. 30    <button id="c">
    
33. 31      Worldwide Thermonuclear War</button>
    
34. 32    <div id="output"></div>
    
35. 33  </body>
    
36. 34 </html>

复制代码

1. Listing 2.2 The File with the External Style Sheets
   
2. 01 body {
   
3. 02  background: lightgray;color: blue;
   
4. 03 }
   
5. 04 div {
   
6. 05  background: white;font-size: 14px;
   
7. 06 }
   
8. 07 .mClass {
   
9. 08  background: red; color: yellow; font-size: 24px;
   
10. 09 }

复制代码

1. Listing 2.3 Changing the CSS Class
   
2. 01 <html >
   
3. 02  <head>
   
4. 03  <meta http-equiv="Content-Type"
   
5. 04    content="text/html; charset=utf-8" />
   
6. 05  <title>The second jQuery example</title>
   
7. 06  <link type="text/css" rel="stylesheet"
   
8. 07    href="lib/ch2_2.css" />
   
9. 08  <script type="text/javascript"
   
10. 09    src="lib/jquery-1.8.2.min.js"></script>
    
11. 10  <script type="text/javascript">
    
12. 11    $(document).ready(function(){
    
13. 12      $("#a").click(function(){
    
14. 13        $("#c").addClass("mClass");
    
15. 14      });
    
16. 15      $("#b").click(function(){
    
17. 16        $("#c").removeClass("mClass");
    
18. 17      });
    
19. 18    });
    
20. 19  </script>
    
21. 20  </style>
    
22. 21 </head>
    
23. 22 <body>
    
24. 23  <h1>Editing Style Sheets with jQuery</h1>
    
25. 24  <button id="a">Add CSS class</button>
    
26. 25  <button id="b">Remove CSS class</button><hr/>
    
27. 26  <div id="c">He who knows all the answers
    
28. 27    has not been asked all the questions.
    
29. 28  </div><hr/>
    
30. 29  <div id="c">Be not afraid of going slowly,
    
31. 30   be afraid only of standing still.</div>
    
32. 31 </body>
    
33. 32 </html>

复制代码

1. Listing 2.5 The CSS File
   
2. 
   
3. Click here to view code image
   
4. 
   
5. 01 body {
   
6. 02  background: lightgray;color: blue;
   
7. 03 }
   
8. 04 #i1 {
   
9. 05  width:300px; height:225px;
   
10. 06 }
    
11. 07 #i2 {
    
12. 08  height:225px;
    
13. 09 }
    
14. 10 #h2{
    
15. 11  background: white; color:#0000FF; font-size: 18px;
    
16. 12 }

复制代码

1. Listing 2.6 Reducing or Enlarging Two Images and Some Text
   
2. 
   
3. ...
   
4. 06    <link type="text/css" rel="stylesheet"
   
5. 07      href="lib/ch2_3.css" />
   
6. 08    <script type="text/javascript"
   
7. 09      src="lib/jquery-1.8.min.js"></script>
   
8. 10    <script type="text/javascript">
   
9. 11      $(document).ready(function(){
   
10. 12        $("#toggle1").click(function(event){
    
11. 13          $('#i1').slideToggle('slow');
    
12. 14        });
    
13. 15        $("#toggle2").click(function(event){
    
14. 16          $('#i2').slideToggle('slow');
    
15. 17        });
    
16. 18        $("#toggle3").click(function(event){
    
17. 19          $('#h2').slideToggle('slow');
    
18. 20        });
    
19. 21      });
    
20. 22    </script>
    
21. 23  </head>
    
22. 24  <body>
    
23. 25    <h1>Animated showing and hiding
    
24. 26   of an image and text with jQuery</h1>
    
25. 27    <button id="toggle1">Toggle Image 1</button>
    
26. 28    <button id="toggle2">Toggle Image 2</button>
    
27. 29    <button id="toggle3">Toggle Text</button><hr/>
    
28. 30    <img src="images/i1.jpg" id="i1" />
    
29. 31    <img src="images/i2.jpg" id="i2" /><hr/>
    
30. 32    <h2 id="h2">A ski jump</h2>
    
31. 33  </body>
    
32. 34 </html>

复制代码

1. Listing 2.7 Changing Attributes on an Element
   
2. 
   
3. ...
   
4. 06    <script type="text/javascript"
   
5. 07      src="lib/jquery-1.8.min.js"></script>
   
6. 08    <script type="text/javascript">
   
7. 09      $(document).ready(function(){
   
8. 10        $("#toggle1").click(function(){
   
9. 11          $("img").attr({
   
10. 12            src: "images/i1.jpg"
    
11. 13          });
    
12. 14        });
    
13. 15        $("#toggle2").click(function(){
    
14. 16          $("img").attr(
    
15. 17            "src", "images/i2.jpg"
    
16. 18          );
    
17. 19        });
    
18. 20      });
    
19. 21    </script>
    
20. 22  </head>
    
21. 23  <body>
    
22. 24    <h1>Replacing an image</h1>
    
23. 25    <button id="toggle1">Image 1</button>
    
24. 26    <button id="toggle2">Image 2</button>
    
25. 27    <hr/><img src="images/i1.jpg"/>
    
26. 28 </html>

复制代码

1. Listing 3.3 Integrating the External jQuery JavaScript Files
   
2. 
   
3. 01 <script language="JavaScript"
   
4.      src="jquery-1.8.2.min.js"></script>
   
5. 02 <script language="JavaScript"
   
6.      src="lib/jquery-1.8.2.min.js"></script>
   
7. 03 <script type="text/javascript"
   
8.      src="lib/jquery-1.8.2.min.js"></script>

复制代码