Successfully reported this slideshow.

jQueryでつくる、動きのあるWebページ - 多摩美 メディアリテラシー

3

Share

1 of 66
1 of 66

More Related Content

More from Atsushi Tadokoro

Related Books

Free with a 14 day trial from Scribd

See all

Related Audiobooks

Free with a 14 day trial from Scribd

See all

jQueryでつくる、動きのあるWebページ - 多摩美 メディアリテラシー

  1. 1. ‣ ‣
  2. 2. ‣ ‣
  3. 3. ‣ ‣ ‣ JavaScript
  4. 4. ‣ ‣ ‣ ‣
  5. 5. ‣ ‣ var divs = document.getElementsByTagName("h1"); for(var i = 0; i < divs.length; i++) { ! divs[i].style.color = "red"; } ‣
  6. 6. ‣ ‣ ‣ ‣
  7. 7. ‣ ‣ ‣ ‣
  8. 8. ‣ var divs = document.getElementsByTagName("h1"); for(var i = 0; i < divs.length; i++) { ! divs[i].style.color = "red"; } $("h1").css("color", "red"); ‣
  9. 9. ‣ ‣ ‣ ‣ ‣
  10. 10. ‣ ‣ ‣ HTML5 jQuery
  11. 11. ‣ ‣ http://semooh.jp/jquery/
  12. 12. ‣ ‣ ‣ ‣ ‣ ‣
  13. 13. ‣ ‣ <!DOCTYPE html> <html> ! <head> ! ! <meta charset="utf-8" /> ! ! <title>jQuery </title> ! </head> ! <body> ! ! <h1>jQuery </h1> ! </body> </html>
  14. 14.
  15. 15. ‣ ‣ ‣ http://code.google.com/intl/ja/apis/libraries/ ‣ ‣ <script src="http://www.google.com/jsapi"></script> <script>google.load("jquery", "1");</script> ‣
  16. 16. ‣ <!DOCTYPE html> <html> ! <head> ! ! <meta charset="utf-8" /> ! ! <title>jQuery </title> ! ! <script src="http://www.google.com/jsapi"></script> ! ! <script>google.load("jquery", "1");</script> ! </head> ! <body> ! ! <h1>jQuery </h1> ! </body> </html>
  17. 17. ‣ ‣
  18. 18. ‣ <!DOCTYPE html> <html> ! <head> ! ! <meta charset="utf-8" /> ! ! <title>jQuery </title> ! ! <script src="http://www.google.com/jsapi"></script> ! ! <script>google.load("jquery", "1");</script> ! ! <script> ! ! ! $(function() { ! ! ! $("h1").fadeOut(3000); ! ! ! }); ! ! </script> ! </head> ! <body> ! ! <h1>jQuery </h1> ! </body> </html>
  19. 19. ‣ ‣
  20. 20. ‣ <script> $(function() { $("h1").fadeOut(3000); }); </script> <script> $(function() { $("h1").fadeOut(3000).fadeIn(3000); }); </script>
  21. 21.
  22. 22. ‣ <script> $(function() { $("h1").fadeOut(3000); }); </script>
  23. 23. ‣ <script> $(function() { $("h1").fadeOut(3000); }); </script>
  24. 24. ‣ ‣ <script> $(function() { $("h1").fadeOut(3000); }); </script>
  25. 25. ‣ ‣ <script> $(function() { $("h1").fadeOut(3000); }); </script>
  26. 26. ‣ ‣ <script> $(function() { $("h1").fadeOut(3000) .fadeIn(3000); }); </script>
  27. 27. ‣ ‣ $(function() { //h1 $("h1").text(" "); });
  28. 28. ‣ ‣ $(function() { //h1 $("h1").css("backgroundColor","#336699"); });
  29. 29. ‣ ‣ $(function() { //h1 CSS $("h1").css({ backgroundColor:"#336699", color:"white", size:"40px", padding:"20px" }) });
  30. 30. ‣ ‣ ‣ // 500px → 500px $("h1").animate({marginTop:"500px"}, 500); // 500px 1000ms $("h1").animate({marginTop:"500px"}, 500) .delay(1000) .animate({marginTop:"0px"}, 200);
  31. 31. ‣ ‣ $(function() { // $("h1").animate({ fontSize:"150px", opacity:0.2 }, 500) .delay(1000) .animate({ fontSize:"40px", opacity:1.0 }, 500); });
  32. 32. ‣ ‣ $(function() { // NG $("h1").animate({ color:"white", backgroundColor:"blue" }, 500)); });
  33. 33. ‣ ‣ ‣
  34. 34. ‣ $(function() { //h1 CSS $("h1").css({ backgroundColor:"#6699cc", color:"white", size:"40px", padding:"20px", }) .animate({ paddingLeft:"640px", }).delay(200) .animate({ paddingLeft:"20px", marginLeft:"640px" }).delay(200) .animate({ paddingTop:"60%" }).delay(200) .animate({ marginLeft:"0" }).delay(200) .animate({ paddingTop:"20px" }); });
  35. 35.
  36. 36. ‣ ‣ ‣ ‣
  37. 37. ‣ ‣ ‣ ‣ ‣ ‣
  38. 38. ‣ ‣ ‣ ‣ $(function() { ... });
  39. 39. ‣ ‣ $(function() { ... }); $(document).ready(function() { ... }); ‣
  40. 40. ‣ ‣ ‣
  41. 41. ‣ ‣ ‣
  42. 42. ‣ ‣ <script src=" "></script> ‣ <script src="script.js"></script>
  43. 43. ‣ <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jQuery </title> <script src="http://www.google.com/jsapi"></script> <script>google.load("jquery", "1");</script> <script src="script.js"></script> </head> <body> </body> </html>
  44. 44. ‣ ‣ <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jQuery </title> <script src="http://www.google.com/jsapi"></script> <script>google.load("jquery", "1");</script> <script src="script.js"></script> </head> <body> <img src="test.jpg" alt="jQuery " /> </body> </html>
  45. 45.
  46. 46. ‣ ‣ ‣ ‣
  47. 47. ‣ ‣ ‣ ‣ ‣
  48. 48. ‣ ‣ $(function(){ });
  49. 49. ‣ ‣ $(function(){ $("img").click(function(){ }); });
  50. 50. ‣ ‣ $(function(){ $("img").click(function(){ $("img").hide(); }); });
  51. 51.
  52. 52. ‣ ‣ $(function(){ $("img").click(function(){ $("img").fadeOut(1000); }); });
  53. 53. ‣ $(function(){ $("img").click(function(){ $(this).fadeOut(1000); }); });
  54. 54. ‣ ‣ <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jQuery </title> <script src="http://www.google.com/jsapi"></script> <script>google.load("jquery", "1");</script> <script src="script.js"></script> </head> <body> <img src="test1.jpg" alt=" 1" /><br /> <img src="test2.jpg" alt=" 2" /><br /> <img src="test3.jpg" alt=" 3" /><br /> <img src="test4.jpg" alt=" 4" /> </body> </html>
  55. 55.
  56. 56.
  57. 57. ‣ ‣ <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jQuery </title> <script src="http://www.google.com/jsapi"></script> <script>google.load("jquery", "1");</script> <script src="script.js"></script> </head> <body> <nav> <ul> <li><a href="#"> 1</a></li> <li><a href="#"> 2</a></li> <li><a href="#"> 3</a></li> <li><a href="#"> 4</a></li> </ul> </nav> <img src="test1.jpg" alt=" 1" /><br /> </body> </html>
  58. 58.
  59. 59. ‣ $(function(){ $("a:eq(0)").click(function(){ $("img").attr("src","test1.jpg"); }); $("a:eq(1)").click(function(){ $("img").attr("src","test2.jpg"); }); $("a:eq(2)").click(function(){ $("img").attr("src","test3.jpg"); }); $("a:eq(3)").click(function(){ $("img").attr("src","test4.jpg"); }); });
  60. 60. ‣ ‣
  61. 61. ‣ ‣ ‣

×