Downloaded 30 times
![‣
‣
var divs = document.getElementsByTagName("h1");
for(var i = 0; i < divs.length; i++) {
! divs[i].style.color = "red";
}
‣](https://image.slidesharecdn.com/taumedia111031-111030013318-phpapp02/75/jQuery-Web-7-2048.jpg)
![‣
var divs = document.getElementsByTagName("h1");
for(var i = 0; i < divs.length; i++) {
! divs[i].style.color = "red";
}
$("h1").css("color", "red");
‣](https://image.slidesharecdn.com/taumedia111031-111030013318-phpapp02/75/jQuery-Web-10-2048.jpg)
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
- 13.
- 15. ‣ ‣ ‣ ‣ ‣ ‣
- 16. ‣ ‣ <!DOCTYPE html> <html> ! <head> !! <meta charset="utf-8" /> ! ! <title>jQuery </title> ! </head> ! <body> ! ! <h1>jQuery </h1> ! </body> </html>
- 17.
- 18.
- 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.
- 53.
- 54.
- 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.