Downloaded 37 times
jQuery 2 イベントを理解する - 芸大Webデザイン演習B
- 2.
- 3.
- 4.
- 5.
- 6. ‣ <script> $(function(){ $("h1").fadeOut(3000); }); </script>
- 7. ‣ <script> $(function(){ $("h1").fadeOut(3000); }); </script>
- 8. ‣ ‣ <script> $(function(){ $("h1").fadeOut(3000); }); </script>
- 9. ‣ ‣ <script> $(function(){ $("h1").fadeOut(3000); }); </script>
- 10. ‣ ‣ <script> $(function(){ $("h1").fadeOut(3000) .fadeIn(3000); }); </script>
- 12.
- 13.
- 14. ‣ ‣ ‣ ‣ $(function() { ... });
- 15. ‣ ‣ $(function() { ... }); $(document).ready(function() { ... }); ‣
- 16.
- 17.
- 18. ‣ ‣ <script src=" "></script> ‣ <script src="script.js"></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> <script src="script.js"></script> </head> <body> </body> </html>
- 20. ‣ ‣ <!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>
- 21.
- 22.
- 23.
- 24.
- 25.
- 26. ‣ ‣ $(function(){ $("img").click(function(){ $("img").hide(); }); });
- 27.
- 28. ‣ ‣ $(function(){ $("img").click(function(){ $("img").fadeOut(1000); }); });
- 29. ‣ $(function(){ $("img").click(function(){ $(this).fadeOut(1000); }); });
- 30. ‣ ‣ <!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>
- 31.
- 32.
- 33. ‣ ‣ <!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>
- 34.
- 35. ‣ $(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"); }); });
- 36.
- 37.