Download as PDF, PPTX
jQuery プラグイン作成入門
- 1.
- 2. : • • • etc..
- 3. : • • • etc.. jQuery OK!!
- 4. “jQuery” HTML/CSS JavaScript Web
- 5. • jQuery • jQuery • DOM • • •
- 6.
- 7. About Me • WEB Developer / PHP / CakePHP / HTML / CSS / jQuery / PostgreSQL / MySQL / iPhone / / / / / / / / no more • BLOG: http://php-tips.com/ • TWITTER: @nojimage • FACEBOOK: http://www.facebook.com/nojimage
- 8. About ?
- 9.
- 10. About jQuery HTML/CSS JavaScript
- 11. About jQuery : http://jquery.com/ • CSS DOM • DOM Element / • • • GPL/MIT
- 12. Getting started withjQuery • jQuery • 1.4.3 (2010/10/30 ) • <script>
- 13. Getting started withjQuery • jQuery • 1.4.3 (2010/10/30 ) • <script type="text/javascript" <script> src="js/jquery-1.4.3.min.js"></script>
- 14. Getting started withjQuery • jQuery • 1.4.3 (2010/10/30 ) • <script type="text/javascript" <script> src="js/jquery-1.4.3.min.js"></script> <script type="text/javascript"><!-- $(document).ready(function(){ /* */ }; // --></script>
- 15.
- 16.
- 17.
- 18. DOM = DocumentObject Model
- 19. DOM = DocumentObject Model • HTML XML JavaScript API •
- 20. DOM = DocumentObject Model title head ... html li h1 ul body ... div p
- 21. How to selectDOM Elements with jQuery
- 22. jQuery CSS DOM
- 23.
- 24. $('ul'); <div id="header"> <p id="title">FoobarWebsite</p> <ul> <li>Home</li> <li>Products</li> <li>Contacts</li> </ul> </div> <div id="contents"> <p>jQuery is a fast and concise JavaScript Library.</p> <ul> <li class="message">Hello World.</li> <li class="message">Let's eat pudding.</li> </ul> </div> <div id="footer">Copyright 2010 Foobar Inc.</div>
- 25. $('ul'); <div id="header"> <p id="title">FoobarWebsite</p> <ul> <li>Home</li> <li>Products</li> <li>Contacts</li> </ul> </div> <div id="contents"> <p>jQuery is a fast and concise JavaScript Library.</p> <ul> <li class="message">Hello World.</li> <li class="message">Let's eat pudding.</li> </ul> </div> <div id="footer">Copyright 2010 Foobar Inc.</div>
- 26.
- 27. $('#title'); <div id="header"> <p id="title">FoobarWebsite</p> <ul> <li>Home</li> <li>Products</li> <li>Contacts</li> </ul> </div> <div id="contents"> <p>jQuery is a fast and concise JavaScript Library.</p> <ul> <li class="message">Hello World.</li> <li class="message">Let's eat pudding.</li> </ul> </div> <div id="footer">Copyright 2010 Foobar Inc.</div>
- 28. $('#title'); <div id="header"> <p id="title">FoobarWebsite</p> <ul> <li>Home</li> <li>Products</li> <li>Contacts</li> </ul> </div> <div id="contents"> <p>jQuery is a fast and concise JavaScript Library.</p> <ul> <li class="message">Hello World.</li> <li class="message">Let's eat pudding.</li> </ul> </div> <div id="footer">Copyright 2010 Foobar Inc.</div>
- 29.
- 30. $('.message'); <div id="header"> <p id="title">FoobarWebsite</p> <ul> <li>Home</li> <li>Products</li> <li>Contacts</li> </ul> </div> <div id="contents"> <p>jQuery is a fast and concise JavaScript Library.</p> <ul> <li class="message">Hello World.</li> <li class="message">Let's eat pudding.</li> </ul> </div> <div id="footer">Copyright 2010 Foobar Inc.</div>
- 31. $('.message'); <div id="header"> <p id="title">FoobarWebsite</p> <ul> <li>Home</li> <li>Products</li> <li>Contacts</li> </ul> </div> <div id="contents"> <p>jQuery is a fast and concise JavaScript Library.</p> <ul> <li class="message">Hello World.</li> <li class="message">Let's eat pudding.</li> </ul> </div> <div id="footer">Copyright 2010 Foobar Inc.</div>
- 32.
- 33. $('#contents p'); <div id="header"> <pid="title">Foobar Website</p> <ul> <li>Home</li> <li>Products</li> <li>Contacts</li> </ul> </div> <div id="contents"> <p>jQuery is a fast and concise JavaScript Library.</p> <ul> <li class="message">Hello World.</li> <li class="message">Let's eat pudding.</li> </ul> </div> <div id="footer">Copyright 2010 Foobar Inc.</div>
- 34. $('#contents p'); <div id="header"> <pid="title">Foobar Website</p> <ul> <li>Home</li> <li>Products</li> <li>Contacts</li> </ul> </div> <div id="contents"> <p>jQuery is a fast and concise JavaScript Library.</ p> <ul> <li class="message">Hello World.</li> <li class="message">Let's eat pudding.</li> </ul> </div> <div id="footer">Copyright 2010 Foobar Inc.</div>
- 35. DOM Traversing DOM
- 36.
- 37. $('#contents').next(); <div id="header"> <p id="title">FoobarWebsite</p> <ul> <li>Home</li> <li>Products</li> <li>Contacts</li> </ul> </div> <div id="contents"> <p>jQuery is a fast and concise JavaScript Library.</p> <ul> <li class="message">Hello World.</li> <li class="message">Let's eat pudding.</li> </ul> </div> <div id="footer">Copyright 2010 Foobar Inc.</div>
- 38. $('#contents').next(); <div id="header"> <p id="title">FoobarWebsite</p> <ul> <li>Home</li> <li>Products</li> <li>Contacts</li> </ul> </div> <div id="contents"> <p>jQuery is a fast and concise JavaScript Library.</p> <ul> <li class="message">Hello World.</li> <li class="message">Let's eat pudding.</li> </ul> </div> <div id="footer">Copyright 2010 Foobar Inc.</div>
- 39. $('#contents').next(); <div id="header"> <p id="title">FoobarWebsite</p> <ul> <li>Home</li> <li>Products</li> <li>Contacts</li> </ul> </div> <div id="contents"> <p>jQuery is a fast and concise JavaScript Library.</p> <ul> <li class="message">Hello World.</li> <li class="message">Let's eat pudding.</li> </ul> </div> <div id="footer">Copyright 2010 Foobar Inc.</div>
- 40.
- 41. $('#contents').find('p'); <div id="header"> <p id="title">FoobarWebsite</p> <ul> <li>Home</li> <li>Products</li> <li>Contacts</li> </ul> </div> <div id="contents"> <p>jQuery is a fast and concise JavaScript Library.</p> <ul> <li class="message">Hello World.</li> <li class="message">Let's eat pudding.</li> </ul> </div> <div id="footer">Copyright 2010 Foobar Inc.</div>
- 42. $('#contents').find('p'); <div id="header"> <p id="title">FoobarWebsite</p> <ul> <li>Home</li> <li>Products</li> <li>Contacts</li> </ul> </div> <div id="contents"> <p>jQuery is a fast and concise JavaScript Library.</p> <ul> <li class="message">Hello World.</li> <li class="message">Let's eat pudding.</li> </ul> </div> <div id="footer">Copyright 2010 Foobar Inc.</div>
- 43. $('#contents').find('p'); <div id="header"> <p id="title">FoobarWebsite</p> <ul> <li>Home</li> <li>Products</li> <li>Contacts</li> </ul> </div> <div id="contents"> <p>jQuery is a fast and concise JavaScript Library.</p> <ul> <li class="message">Hello World.</li> <li class="message">Let's eat pudding.</li> </ul> </div> <div id="footer">Copyright 2010 Foobar Inc.</div>
- 44.
- 45. $('li.message').parent('div'); <div id="header"> <p id="title">FoobarWebsite</p> <ul> <li>Home</li> <li>Products</li> <li>Contacts</li> </ul> </div> <div id="contents"> <p>jQuery is a fast and concise JavaScript Library.</p> <ul> <li class="message">Hello World.</li> <li class="message">Let's eat pudding.</li> </ul> </div> <div id="footer">Copyright 2010 Foobar Inc.</div>
- 46. $('li.message').parent('div'); <div id="header"> <p id="title">FoobarWebsite</p> <ul> <li>Home</li> <li>Products</li> <li>Contacts</li> </ul> </div> <div id="contents"> <p>jQuery is a fast and concise JavaScript Library.</p> <ul> <li class="message">Hello World.</li> <li class="message">Let's eat pudding.</li> </ul> </div> <div id="footer">Copyright 2010 Foobar Inc.</div>
- 47. $('li.message').parent('div'); <div id="header"> <p id="title">FoobarWebsite</p> <ul> <li>Home</li> <li>Products</li> <li>Contacts</li> </ul> </div> <div id="contents"> <p>jQuery is a fast and concise JavaScript Library.</ p> <ul> <li class="message">Hello World.</li> <li class="message">Let's eat pudding.</li> </ul> </div> <div id="footer">Copyright 2010 Foobar Inc.</div>
- 48.
- 49. $ is jQuery $ jQuery // <div id="contents"> $('#contents').next(); // <div id="contents"> p $('#contents').find('p'); // <input id="email"/> form $('input#email').parent('form');
- 50. $ is jQuery $ jQuery // <div id="contents"> jQuery('#contents').next(); // <div id="contents"> p jQuery('#contents').find('p'); // <input id="email"/> form jQuery('input#email').parent('form');
- 51.
- 52. Manipulate DOM elements •append() • prepend() • remove()
- 53. Manipulate DOM elements •html(val) HTML val • text(val) val val
- 54. Manipulate DOM elements •attr(key, val) key val • removeAttr(key) key
- 55. Manipulate DOM elements •addClass(val) class val • removeClass(val) class val • css(key, val) style key: val
- 56.
- 57.
- 59. Event Handler • • • • • •
- 60. Event Handler • click(func) onClick $('a').click(function(){ // Move to return confirm('Move to "' + this.href + '"'); });
- 61. Event Handler • ready(func) • DOM $(document).ready(function(){ // Complete alert('Complete'); });
- 62. Event Handler • • change() • dbclick() • error() • focus() • keydown() • keypress() • keyup() • load() • mousedown() • mousemove() • .....
- 63.
- 64.
- 65. Animation • jQuery • hide() / show() • slideUp() / slideDown() • fadeOut() / fadeIn() •
- 66. Create Animation • animate(properties, options) $('.move-right').click(function(){ // .move-right $('#box').animate({ 'left': '+=50px' // #box 50px }, { duration: "slow", // // complete: function(){ alert('Move!'); } }); });
- 67. Letʼs create jQueryPlugin!
- 68. jQuery !
- 69. Plugin? • <script type="text/javascript" src="js/jquery-1.4.3.min.js"></script> <script type="text/javascript" src="js/jquery.plugin_name.js"></script> <script type="text/javascript"><!-- $(document).ready(function(){ $.pluginName(); }); // --></script>
- 70. Why Plugin? • • • HTML JavaScript •
- 71. How to createPlugin • • jQuery • $(‘selector’) jQuery
- 72.
- 73.
- 74.
- 75. $.pluginName(params); ;(function($){ $.extend({ }); })(jQuery);
- 76. $.pluginName(params); ;(function($){ $.extend({ "pluginName" : function(params){ } }); })(jQuery);
- 77. $.pluginName(params); ;(function($){ $.extend({ "pluginName" : function(params){ // do something... } }); })(jQuery);
- 78.
- 79.
- 80.
- 81. $(selector).pluginName(params); ;(function($){ $.fn.extend({ }); })(jQuery);
- 82. $(selector).pluginName(params); ;(function($){ $.fn.extend({ "pluginName" : function(params){ } }); })(jQuery);
- 83. $(selector).pluginName(params); ;(function($){ $.fn.extend({ "pluginName" : function(params){ // do something. return this; } }); })(jQuery);
- 84.
- 85. $(selector).pluginName(params); ;(function($){ $.fn.pluginName = function(params){ }; })(jQuery);
- 86. $(selector).pluginName(params); ;(function($){ $.fn.pluginName = function(params){ // do something. return this; }; })(jQuery);
- 87. $(selector).pluginName(params); ;(function($){ $.fn.pluginName = function(params){ // do something. }; return this; ← })(jQuery);
- 88. $(‘#target’).someFunc() .addClass(‘someClass’) .slideDown();
- 89. Tips 1 • ( ) $.pluginName({foo: true})
- 90. (function($){ $.fn.pluginName = function(params){ // override input params params = $.extend({}, $.fn.pluginName.defaults, params); // do something... }; // default values $.fn.pluginName.defaults = { foo: 'hoge', bar: 'fuga' }; })(jQuery);
- 91. (function($){ $.fn.pluginName = function(params){ // override input params params = $.extend({}, $.fn.pluginName.defaults, params); // do something... }; // default values $.fn.pluginName.defaults = { foo: 'hoge', bar: 'fuga' } }; })(jQuery);
- 92. (function($){ $.fn.pluginName = function(params){ // override input params ↓ params = $.extend({}, $.fn.pluginName.defaults, params); // do something... }; // default values $.fn.pluginName.defaults = { foo: 'hoge', bar: 'fuga' } }; })(jQuery);
- 93.
- 94. (function($){ var localFunction = function(params) { alert('local function'); }; $.fn.pluginName = function(params){ // do something.. localFunction(params); // do something.. }; })(jQuery);
- 95. (function($){ var localFunction = function(params) { } alert('local function'); }; $.fn.pluginName = function(params){ // do something.. localFunction(params); // do something.. }; })(jQuery);
- 96. (function($){ var localFunction = function(params) { } alert('local function'); }; $.fn.pluginName = function(params){ // do something.. localFunction(params); } // do something.. }; })(jQuery);
- 97. Tips 3 • • $.pluginName.funcA() • $.pluginName.funcB()
- 98. (function($){ $.pluginName = {}; })(jQuery);
- 99. (function($){ $.pluginName = {}; $.pluginName.FuncA = function(){ // do something... }; })(jQuery);
- 100. (function($){ $.pluginName = {}; $.pluginName.FuncA = function(){ // do something... } $.pluginName.FuncA() }; })(jQuery);
- 101. (function($){ $.pluginName = {}; $.pluginName.FuncA = function(){ // do something... }; $.pluginName.FuncB = function(){ // do something... }; })(jQuery);
- 102. (function($){ $.pluginName = {}; $.pluginName.FuncA = function(){ // do something... }; $.pluginName.FuncB = function(){ // do something... } $.pluginName.FuncB() }; })(jQuery);
- 103.
- 104.
- 105. jQuery.formControll.js • TAB, Enter • Meta + Enter • • textarea TAB
- 106.
- 107. Thank you foryour listening!!