![javaScript
DOM
//1
document.form[0].elements[0]
//1
document.form[0].elements[0].value
// id hoge_btn
document.getElementByID(“hoge_btn”)](https://image.slidesharecdn.com/jqueryshare-111129032948-phpapp02/85/jQuery-49-320.jpg)
jQuery入門
- 1. jQuery Copyright © 2005-2011 JUSTPLAYER Co.,Ltd. All Rights Reserved.
- 3. jQuery
- 4. jQuery 1. MIT 2. CSS 3. UI 4. • 30kb • javaScript ( )
- 5. jQuery <head> … <script src=“jquery-1.6.2.min.js” type=“text/javascript”></script> … </head> • $ • jQuery $ (※$ )
- 6. jQuery • head • jQuery <head> … <script src="jquery-1.6.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ }); </script> … </head>
- 7. jQuery
- 8. • javaScript • DIV
- 9. • javaScript $(document).ready(function(){ $("#btn_hoge").click(function(){ $("#fuga").show(); }); });
- 10. • javaScript $(document).ready(function(){ $("#btn_hoge").click(function(){ $("#fuga").show(); }); }); hoge
- 11. • javaScript $(document).ready(function(){ $("#btn_hoge").click(function(){ $("#fuga").show(); }); }); hoge
- 12. • javaScript $(document).ready(function(){ $("#btn_hoge").click(function(){ $("#fuga").show(); }); }); hoge fuga
- 13. • javaScript $(document).ready(function(){ $("#btn_hoge").click(function(){ $("#fuga").show(); }); }); hoge fuga
- 14. (Selectors) • ○○ CSS jQuery $(“#hoge”) id=“hoge” $(“.hoge”) class=“hoge” $(“p”) <p> $(“p.hoge”) <p class=“hoge”> $(“#hoge p”) id=“hoge” <p> $(“#hoge, #fuga”) id=“hoge” id=”fuga”
- 15. (Events) • javaScript onClick onMouseOver on click dblclick focus keydown mouseover change ready
- 16. (Manipulation,Attributes,CSS,Effects) • CSS append $(‘#hoge’).append(‘<p> </p>’); remove $(‘#hoge’).remove(); attr $(‘#image’).attr(‘src’, ‘/images/picture.jpg’); removeAttr $(‘.check’).removeAttr(‘checked’); CSS css $(‘.style).css(‘color’, ‘#ff0000’); show $(‘#hoge’).show(); hide $(‘#hoge’).hide(); fadeIn $(‘#hoge’).fadeIn(); fadeOut $(‘#hoge’).fadeOut(); toggle $(‘#hoge’).toggle();
- 17. • click $("#btn_hoge").click( function(){ $("#fuga").show(); } );
- 18. • click $("#btn_hoge").click( function(){ $("#fuga").show(); } );
- 19. • click $("#btn_hoge").click( );
- 20. • click $("#btn_hoge").click( ); function(){ $("#fuga").show(); }
- 21. • click $("#btn_hoge").click( ); function(){ function showFuga(){ $("#fuga").show(); $("#fuga").show(); } }
- 22. • javaScript • // "ABCDEFG".slice(2, 4); // document.write(" ");
- 23. • javaScript • // "ABCDEFG".slice(2, 4); // document.write(" "); // $("#btn_hoge").click( function(){ $("#fuga").show(); } );
- 24. HTML • HTML <input id=”hoge” type=”button” onClick=”( )” /> javaScript js
- 25. (Selectors) (Events) (Manipulation,A ttributes,CSS,Eff ects)
- 27. • $("#div_hoge").find(‘.btn_hoge’).click( function(){ $("#fuga1").show(‘slow’); $("#fuga2").hide(500); } );
- 28. • $("#div_hoge").find(‘.btn_hoge’).click( function(){ $("#fuga1").show(‘slow’); $("#fuga2").hide(500); } ); id=”div_hoge” btn_hoge
- 29. • $("#div_hoge").find(‘.btn_hoge’).click( function(){ $("#fuga1").show(‘slow’); $("#fuga2").hide(500); } ); id=”div_hoge” btn_hoge
- 30. • $("#div_hoge").find(‘.btn_hoge’).click( function(){ $("#fuga1").show(‘slow’); $("#fuga2").hide(500); } ); id=”div_hoge” btn_hoge fuga1
- 31. • $("#div_hoge").find(‘.btn_hoge’).click( function(){ $("#fuga1").show(‘slow’); $("#fuga2").hide(500); } ); id=”div_hoge” btn_hoge fuga1
- 32. • $("#div_hoge").find(‘.btn_hoge’).click( function(){ $("#fuga1").show(‘slow’); $("#fuga2").hide(500); } ); id=”div_hoge” btn_hoge fuga1 fuga2
- 33. • $("#div_hoge").find(‘.btn_hoge’).click( function(){ $("#fuga1").show(‘slow’); $("#fuga2").hide(500); } ); id=”div_hoge” btn_hoge fuga1 fuga2 500
- 34. • $("#div_hoge").find(‘.btn_hoge’).click( function(){ $("#fuga1").show(‘slow’); $("#fuga2").hide(500); } ); id=”div_hoge” btn_hoge fuga2 500
- 35. • $("#div_hoge").find(‘.btn_hoge’).click( function(){ $("#fuga1").show(‘slow’); $("#fuga2").hide(500); } ); id=”div_hoge” btn_hoge 500
- 36. • $("#div_hoge").find(‘.btn_hoge’).click( function(){ $("#fuga1").show(‘slow’); $("#fuga2").hide(500); } ); id=”div_hoge” btn_hoge 500
- 37. • $("#div_hoge").find(‘.btn_hoge’).click( function(){ $("#fuga1").show(‘slow’); $("#fuga2").hide(500); } ); id=”div_hoge” btn_hoge
- 38. • $("#div_hoge").find(‘.btn_hoge’).click( function(){ $("#fuga1").show(‘slow’); $("#fuga2").hide(500); } ); id=”div_hoge” btn_hoge
- 39. find • $("#div_hoge").find(‘.btn_hoge’) <div id=”div_hoge”> <input class=”.btn_hoge” type=”button” value=” ” /> <input class=”.btn_hoge” type=”button” value=” ” /> <input class=”.text” type=”text” value=” ” /> </div> <div id=”div_fuga”> <input class=”.btn_hoge” type=”button” value=” ” /> <input class=”.btn_hoge” type=”button” value=” ” /> </div>
- 40. find • $("#div_hoge").find(‘.btn_hoge’) <div id=”div_hoge”> <input class=”.btn_hoge” type=”button” value=” ” /> <input class=”.btn_hoge” type=”button” value=” ” /> <input class=”.text” type=”text” value=” ” /> </div> <div id=”div_fuga”> <input class=”.btn_hoge” type=”button” value=” ” /> <input class=”.btn_hoge” type=”button” value=” ” /> </div>
- 41. find • $("#div_hoge").find(‘.btn_hoge’) <div id=”div_hoge”> <input class=”.btn_hoge” type=”button” value=” ” /> <input class=”.btn_hoge” type=”button” value=” ” /> <input class=”.text” type=”text” value=” ” /> </div> <div id=”div_fuga”> <input class=”.btn_hoge” type=”button” value=” ” /> <input class=”.btn_hoge” type=”button” value=” ” /> </div>
- 42. show hide • $("#fuga1").fadeIn(‘slow’); $("#fuga2").fadeOut(500); slow normal fast 500 0.5 ( ) 2000 2
- 44. jQuery • … $(document).ready( function(){ } );
- 45. jQuery • … $(document).ready( function(){ } ); document
- 46. jQuery • … $(document).ready( function(){ } ); document
- 47. jQuery • … $(document).ready( function(){ } ); document
- 48. document $(document).ready( function(){ } ); • document DOM • DOM XML HTML form input
- 49. javaScript DOM //1 document.form[0].elements[0] //1 document.form[0].elements[0].value // id hoge_btn document.getElementByID(“hoge_btn”)
- 50. HTML DOM document <html> <head> <body> <title> <div> <form> <input>
- 51. HTML DOM document <html> <head> <body> <title> <div> <form> <input>
- 52. $() $(“hoge_btn”) ← $(document) ←DOM $() DOM jQuery
- 53. jQuery id=”hoge_btn” jQuery “hoge_btn” DOM (1) (2) (3) DOM jQuery
- 54. document jQuery DOM (1) (2) jQuery DOM
- 55. jQuery DOM (“#fuga”)get(0) (“#fuga”) id=”fuga” jQuery DOM (“.btn_hoge”)get(0) class=”btn_hoge” 1 DOM (“.btn_hoge”) jQuery class=”btn_hoge” (“.btn_hoge”)get(1) 2 DOM
- 56. ready • • $(document).ready( function(){ } ); ready
- 57. $(document).ready( function(){ } );
- 58. $(document).ready <head> <script type="text/javascript"> $(“#fuga”).show(); </script> </head>
- 59. $(document).ready <head> <script type="text/javascript"> $(“#fuga”).show(); #fuga </script> </head> (1)
- 60. $(document).ready <head> <script type="text/javascript"> $(“#fuga”).show(); #fuga </script> </head> (1) HTML <head> (2) …
- 61. $(document).ready <head> <script type="text/javascript"> $(“#fuga”).show(); #fuga </script> </head> (1) <body> <div id=”fuga”> <p> … HTML <head> (2) </p> </div> … … </body> </html>
- 62. $(document).ready <head> <script type="text/javascript"> $(document).ready( function(){ $(“#fuga”).show(); } ); </script> </head> HTML <head>
- 63. $(document).ready <head> <script type="text/javascript"> $(document).ready( function(){ document $(“#fuga”).show(); } ); </script> (1) </head> HTML <head>
- 64. $(document).ready <head> <script type="text/javascript"> $(document).ready( function(){ $(“#fuga”).show(); } ); </script> </head> HTML <head>
- 65. $(document).ready <head> <script type="text/javascript"> $(document).ready( function(){ $(“#fuga”).show(); } ); </script> </head>
- 66. $(document).ready <head> <script type="text/javascript"> $(document).ready( function(){ $(“#fuga”).show(); } ); </script> </head> <body> <div id=”fuga”> <p> … </p> </div> … </body> </html>
- 67. $(document).ready <head> <script type="text/javascript"> $(document).ready( function(){ $(“#fuga”).show(); } ); </script> </head> <body> <div id=”fuga”> <p> … </p> </div> (2) … </body> </html>
- 68. $(document).ready <head> <script type="text/javascript"> $(document).ready( function(){ #fuga $(“#fuga”).show(); } ); </script> (3) </head> <body> <div id=”fuga”> <p> … </p> </div> (2) … </body> </html>
- 69. jQuery
Editor's Notes
- #2: \n
- #3: \n
- #4: \n
- #5: \n
- #6: \n
- #7: \n
- #8: \n
- #9: \n
- #10: \n
- #11: \n
- #12: \n
- #13: \n
- #14: \n
- #15: \n
- #16: \n
- #17: \n
- #18: \n
- #19: \n
- #20: \n
- #21: \n
- #22: \n
- #23: \n
- #24: \n
- #25: \n
- #26: \n
- #27: \n
- #28: \n
- #29: \n
- #30: \n
- #31: \n
- #32: \n
- #33: \n
- #34: \n
- #35: \n
- #36: \n
- #37: \n
- #38: \n
- #39: \n
- #40: \n
- #41: \n
- #42: \n
- #43: \n
- #44: \n
- #45: \n
- #46: \n
- #47: \n
- #48: \n
- #49: \n
- #50: \n
- #51: \n
- #52: \n
- #53: \n
- #54: \n
- #55: \n
- #56: \n
- #57: \n
- #58: \n
- #59: \n
- #60: \n
- #61: \n