Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
‣‣
‣‣‣
‣‣<script src="http://www.google.com/jsapi"></script><script>google.load("jquery", "1");</script>‣‣
‣‣‣
‣<script>  $(function() {          $("h1").fadeOut(3000);    });</script>
‣<script>  $(function() {     $("h1").fadeOut(3000);  });</script>
‣‣<script>  $(function() {     $("h1").fadeOut(3000);  });</script>
‣‣<script>  $(function() {     $("h1").fadeOut(3000);  });</script>
‣‣<script>  $(function() {     $("h1").fadeOut(3000)     .fadeIn(3000);  });</script>
‣‣‣‣
‣‣‣‣‣‣
‣‣‣‣    $(function() {          ...    });
‣‣$(function() {  ...});$(document).ready(function() {  ...});‣
‣‣‣
‣‣‣
‣‣<script src="         "></script>‣<script src="script.js"></script>
‣<!DOCTYPE html><html>  <head>    <meta charset="utf-8" />    <title>jQuery       </title>      <script src="http://www.go...
‣‣<!DOCTYPE html><html>  <head>    <meta charset="utf-8" />    <title>jQuery       </title>      <script src="http://www.g...
‣
‣‣‣‣
‣‣‣‣‣
‣‣$(function(){});
‣‣$(function(){ $("img").click(function(){  });});
‣‣$(function(){  $("img").click(function(){      $("img").hide();  });});
‣
‣‣$(function(){  $("img").click(function(){    $("img").fadeOut(1000);  });});
‣$(function(){  $("img").click(function(){    $(this).fadeOut(1000);  });});
‣‣<!DOCTYPE html><html>  <head>    <meta charset="utf-8" />    <title>jQuery       </title>      <script src="http://www.g...
‣
‣
‣‣<!DOCTYPE html><html>  <head>    <meta charset="utf-8" />    <title>jQuery       </title>      <script src="http://www.g...
‣
‣$(function(){  $("a:eq(0)").click(function(){      $("img").attr("src","test1.jpg");  });  $("a:eq(1)").click(function(){...
‣‣
‣‣‣
jQuery入門2 - イベント:千葉商科大学 Web動画表現
jQuery入門2 - イベント:千葉商科大学 Web動画表現
Upcoming SlideShare
Loading in …5
×

jQuery入門2 - イベント:千葉商科大学 Web動画表現

1,446 views

Published on

Published in: Education, Technology, Business
  • Be the first to comment

jQuery入門2 - イベント:千葉商科大学 Web動画表現

  1. 1. ‣‣
  2. 2. ‣‣‣
  3. 3. ‣‣<script src="http://www.google.com/jsapi"></script><script>google.load("jquery", "1");</script>‣‣
  4. 4. ‣‣‣
  5. 5. ‣<script> $(function() { $("h1").fadeOut(3000); });</script>
  6. 6. ‣<script> $(function() { $("h1").fadeOut(3000); });</script>
  7. 7. ‣‣<script> $(function() { $("h1").fadeOut(3000); });</script>
  8. 8. ‣‣<script> $(function() { $("h1").fadeOut(3000); });</script>
  9. 9. ‣‣<script> $(function() { $("h1").fadeOut(3000) .fadeIn(3000); });</script>
  10. 10. ‣‣‣‣
  11. 11. ‣‣‣‣‣‣
  12. 12. ‣‣‣‣ $(function() { ... });
  13. 13. ‣‣$(function() { ...});$(document).ready(function() { ...});‣
  14. 14. ‣‣‣
  15. 15. ‣‣‣
  16. 16. ‣‣<script src=" "></script>‣<script src="script.js"></script>
  17. 17. ‣<!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>
  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 src="script.js"></script> </head> <body> <img src="test.jpg" alt="jQuery " /> </body></html>
  19. 19.
  20. 20. ‣‣‣‣
  21. 21. ‣‣‣‣‣
  22. 22. ‣‣$(function(){});
  23. 23. ‣‣$(function(){ $("img").click(function(){ });});
  24. 24. ‣‣$(function(){ $("img").click(function(){ $("img").hide(); });});
  25. 25.
  26. 26. ‣‣$(function(){ $("img").click(function(){ $("img").fadeOut(1000); });});
  27. 27. ‣$(function(){ $("img").click(function(){ $(this).fadeOut(1000); });});
  28. 28. ‣‣<!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>
  29. 29.
  30. 30.
  31. 31. ‣‣<!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>
  32. 32.
  33. 33. ‣$(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"); });});
  34. 34. ‣‣
  35. 35. ‣‣‣

×