Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Andere mochten auch (20)
Mehr von Atsushi Tadokoro
Mehr von Atsushi Tadokoro (20)
jQueryでつくる、動きのあるWebページ - 多摩美 メディアリテラシー
- 3. ‣ ‣
- 4. ‣ ‣
- 5. ‣ ‣ ‣ JavaScript
- 6. ‣ ‣ ‣ ‣
- 7. ‣ ‣ var divs = document.getElementsByTagName("h1"); for(var i = 0; i < divs.length; i++) { ! divs[i].style.color = "red"; } ‣
- 8. ‣ ‣ ‣ ‣
- 9. ‣ ‣ ‣ ‣
- 10. ‣ var divs = document.getElementsByTagName("h1"); for(var i = 0; i < divs.length; i++) { ! divs[i].style.color = "red"; } $("h1").css("color", "red"); ‣
- 11. ‣ ‣ ‣ ‣ ‣
- 12. ‣ ‣ ‣ HTML5 jQuery
- 15. ‣ ‣ ‣ ‣ ‣ ‣
- 16. ‣ ‣ <!DOCTYPE html> <html> ! <head> ! ! <meta charset="utf-8" /> ! ! <title>jQuery </title> ! </head> ! <body> ! ! <h1>jQuery </h1> ! </body> </html>
- 17. ‣
- 18. ‣ ‣ ‣ http://code.google.com/intl/ja/apis/libraries/ ‣ ‣ <script src="http://www.google.com/jsapi"></script> <script>google.load("jquery", "1");</script> ‣
- 19. ‣ <!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>
- 20. ‣ ‣
- 21. ‣ <!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>
- 22. ‣ ‣
- 23. ‣ <script> $(function() { $("h1").fadeOut(3000); }); </script> <script> $(function() { $("h1").fadeOut(3000).fadeIn(3000); }); </script>
- 24. ‣
- 26. ‣ <script> $(function() { $("h1").fadeOut(3000); }); </script>
- 27. ‣ <script> $(function() { $("h1").fadeOut(3000); }); </script>
- 28. ‣ ‣ <script> $(function() { $("h1").fadeOut(3000); }); </script>
- 29. ‣ ‣ <script> $(function() { $("h1").fadeOut(3000); }); </script>
- 30. ‣ ‣ <script> $(function() { $("h1").fadeOut(3000) .fadeIn(3000); }); </script>
- 31. ‣ ‣ $(function() { //h1 $("h1").text(" "); });
- 32. ‣ ‣ $(function() { //h1 $("h1").css("backgroundColor","#336699"); });
- 33. ‣ ‣ $(function() { //h1 CSS $("h1").css({ backgroundColor:"#336699", color:"white", size:"40px", padding:"20px" }) });
- 34. ‣ ‣ ‣ // 500px → 500px $("h1").animate({marginTop:"500px"}, 500); // 500px 1000ms $("h1").animate({marginTop:"500px"}, 500) .delay(1000) .animate({marginTop:"0px"}, 200);
- 35. ‣ ‣ $(function() { // $("h1").animate({ fontSize:"150px", opacity:0.2 }, 500) .delay(1000) .animate({ fontSize:"40px", opacity:1.0 }, 500); });
- 36. ‣ ‣ $(function() { // NG $("h1").animate({ color:"white", backgroundColor:"blue" }, 500)); });
- 37. ‣ ‣ ‣
- 38. ‣ $(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" }); });
- 39. ‣
- 41. ‣ ‣ ‣ ‣
- 42. ‣ ‣ ‣ ‣ ‣ ‣
- 43. ‣ ‣ ‣ ‣ $(function() { ... });
- 44. ‣ ‣ $(function() { ... }); $(document).ready(function() { ... }); ‣
- 45. ‣ ‣ ‣
- 46. ‣ ‣ ‣
- 47. ‣ ‣ <script src=" "></script> ‣ <script src="script.js"></script>
- 48. ‣ <!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>
- 49. ‣ ‣ <!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>
- 50. ‣
- 51. ‣ ‣ ‣ ‣
- 52. ‣ ‣ ‣ ‣ ‣
- 54. ‣ ‣ $(function(){ $("img").click(function(){ }); });
- 55. ‣ ‣ $(function(){ $("img").click(function(){ $("img").hide(); }); });
- 56. ‣
- 57. ‣ ‣ $(function(){ $("img").click(function(){ $("img").fadeOut(1000); }); });
- 58. ‣ $(function(){ $("img").click(function(){ $(this).fadeOut(1000); }); });
- 59. ‣ ‣ <!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>
- 60. ‣
- 61. ‣
- 62. ‣ ‣ <!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>
- 63. ‣
- 64. ‣ $(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"); }); });
- 65. ‣ ‣
- 66. ‣ ‣ ‣