jQuery プラグイン作成入門

  • 4,776 views
Uploaded on

2010年10月30日に行われたCSS Nite MIYAZAKIで発表させていただいたときのスライドです。

2010年10月30日に行われたCSS Nite MIYAZAKIで発表させていただいたときのスライドです。

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,776
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
48
Comments
0
Likes
10

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. jQuery
  • 2. :••• etc..
  • 3. :••• etc.. jQuery OK!!
  • 4. “jQuery”HTML/CSS JavaScriptWeb
  • 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 with jQuery• jQuery • 1.4.3 (2010/10/30 )• <script>
  • 13. Getting started with jQuery• jQuery • 1.4.3 (2010/10/30 )• <script type="text/javascript" <script> src="js/jquery-1.4.3.min.js"></script>
  • 14. Getting started with jQuery• 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. Manipulate DOM
  • 16. DOM
  • 17. DOM =
  • 18. DOM = Document Object Model
  • 19. DOM = Document Object Model• HTML XML JavaScript API•
  • 20. DOM = Document Object Model title head ... html li h1 ul body ... div p
  • 21. How to select DOM Elements with jQuery
  • 22. jQuery CSS DOM
  • 23. $(ul);
  • 24. $(ul);<div id="header"><p id="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">Lets eat pudding.</li></ul></div><div id="footer">Copyright 2010 Foobar Inc.</div>
  • 25. $(ul);<div id="header"><p id="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">Lets eat pudding.</li></ul></div><div id="footer">Copyright 2010 Foobar Inc.</div>
  • 26. $(#title);
  • 27. $(#title);<div id="header"><p id="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">Lets eat pudding.</li></ul></div><div id="footer">Copyright 2010 Foobar Inc.</div>
  • 28. $(#title);<div id="header"><p id="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">Lets eat pudding.</li></ul></div><div id="footer">Copyright 2010 Foobar Inc.</div>
  • 29. $(.message);
  • 30. $(.message);<div id="header"><p id="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">Lets eat pudding.</li></ul></div><div id="footer">Copyright 2010 Foobar Inc.</div>
  • 31. $(.message);<div id="header"><p id="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">Lets eat pudding.</li></ul></div><div id="footer">Copyright 2010 Foobar Inc.</div>
  • 32. $(#contents p);
  • 33. $(#contents p);<div id="header"><p id="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">Lets eat pudding.</li></ul></div><div id="footer">Copyright 2010 Foobar Inc.</div>
  • 34. $(#contents p);<div id="header"><p id="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">Lets eat pudding.</li></ul></div><div id="footer">Copyright 2010 Foobar Inc.</div>
  • 35. DOM Traversing DOM
  • 36. $(#contents).next();
  • 37. $(#contents).next();<div id="header"><p id="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">Lets eat pudding.</li></ul></div><div id="footer">Copyright 2010 Foobar Inc.</div>
  • 38. $(#contents).next();<div id="header"><p id="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">Lets eat pudding.</li></ul></div><div id="footer">Copyright 2010 Foobar Inc.</div>
  • 39. $(#contents).next();<div id="header"><p id="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">Lets eat pudding.</li></ul></div><div id="footer">Copyright 2010 Foobar Inc.</div>
  • 40. $(#contents).find(p);
  • 41. $(#contents).find(p);<div id="header"><p id="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">Lets eat pudding.</li></ul></div><div id="footer">Copyright 2010 Foobar Inc.</div>
  • 42. $(#contents).find(p);<div id="header"><p id="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">Lets eat pudding.</li></ul></div><div id="footer">Copyright 2010 Foobar Inc.</div>
  • 43. $(#contents).find(p);<div id="header"><p id="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">Lets eat pudding.</li></ul></div><div id="footer">Copyright 2010 Foobar Inc.</div>
  • 44. $(li.message).parent(div);
  • 45. $(li.message).parent(div);<div id="header"><p id="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">Lets eat pudding.</li></ul></div><div id="footer">Copyright 2010 Foobar Inc.</div>
  • 46. $(li.message).parent(div);<div id="header"><p id="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">Lets eat pudding.</li></ul></div><div id="footer">Copyright 2010 Foobar Inc.</div>
  • 47. $(li.message).parent(div);<div id="header"><p id="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">Lets 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"> pjQuery(#contents).find(p);// <input id="email"/> formjQuery(input#email).parent(form);
  • 51. Manipulate DOM elementsjQuery DOM
  • 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. Demo
  • 57. Event Handler
  • 58. Event Handler• • • • • •
  • 59. Event Handler• click(func) onClick$(a).click(function(){ // Move to return confirm(Move to " + this.href + ");});
  • 60. Event Handler• ready(func) • DOM$(document).ready(function(){ // Complete alert(Complete);});
  • 61. Event Handler• • change() • dbclick() • error() • focus() • keydown() • keypress() • keyup() • load() • mousedown() • mousemove() • .....
  • 62. Animation with jQuery
  • 63. jQuery
  • 64. Animation• jQuery • hide() / show() • slideUp() / slideDown() • fadeOut() / fadeIn()•
  • 65. Create Animation• animate(properties, options)$(.move-right).click(function(){ // .move-right $(#box).animate({ left: +=50px // #box 50px }, { duration: "slow", // // complete: function(){ alert(Move!); } });});
  • 66. Letʼs create jQuery Plugin!
  • 67. jQuery !
  • 68. 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>
  • 69. Why Plugin?• • • HTML JavaScript •
  • 70. How to create Plugin• • jQuery • $(‘selector’) jQuery
  • 71. $.pluginName(params);
  • 72. $.pluginName(params);;(function($){})(jQuery);
  • 73. $.pluginName(params);;(function($){ ←})(jQuery); ←
  • 74. $.pluginName(params);;(function($){ $.extend({ });})(jQuery);
  • 75. $.pluginName(params);;(function($){ $.extend({ "pluginName" : function(params){ } });})(jQuery);
  • 76. $.pluginName(params);;(function($){ $.extend({ "pluginName" : function(params){ // do something... } });})(jQuery);
  • 77. $(selector).pluginName(params);
  • 78. $.fn
  • 79. $(selector).pluginName(params);;(function($){})(jQuery);
  • 80. $(selector).pluginName(params);;(function($){ $.fn.extend({ });})(jQuery);
  • 81. $(selector).pluginName(params);;(function($){ $.fn.extend({ "pluginName" : function(params){ } });})(jQuery);
  • 82. $(selector).pluginName(params);;(function($){ $.fn.extend({ "pluginName" : function(params){ // do something. return this; } });})(jQuery);
  • 83. $(selector).pluginName(params);;(function($){})(jQuery);
  • 84. $(selector).pluginName(params);;(function($){ $.fn.pluginName = function(params){ };})(jQuery);
  • 85. $(selector).pluginName(params);;(function($){ $.fn.pluginName = function(params){ // do something. return this; };})(jQuery);
  • 86. $(selector).pluginName(params);;(function($){ $.fn.pluginName = function(params){ // do something. }; return this; ←})(jQuery);
  • 87. $(‘#target’).someFunc() .addClass(‘someClass’) .slideDown();
  • 88. Tips 1• ( ) $.pluginName({foo: true})
  • 89. (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);
  • 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. Tips 2•
  • 93. (function($){ var localFunction = function(params) { alert(local function); }; $.fn.pluginName = function(params){ // do something.. localFunction(params); // do something.. };})(jQuery);
  • 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. Tips 3• • $.pluginName.funcA() • $.pluginName.funcB()
  • 97. (function($){ $.pluginName = {};})(jQuery);
  • 98. (function($){ $.pluginName = {}; $.pluginName.FuncA = function(){ // do something... };})(jQuery);
  • 99. (function($){ $.pluginName = {}; $.pluginName.FuncA = function(){ // do something... } $.pluginName.FuncA() };})(jQuery);
  • 100. (function($){ $.pluginName = {}; $.pluginName.FuncA = function(){ // do something... }; $.pluginName.FuncB = function(){ // do something... };})(jQuery);
  • 101. (function($){ $.pluginName = {}; $.pluginName.FuncA = function(){ // do something... }; $.pluginName.FuncB = function(){ // do something... } $.pluginName.FuncB() };})(jQuery);
  • 102. Example.
  • 103. jQuery.formControll.js
  • 104. jQuery.formControll.js• TAB, Enter • Meta + Enter • • textarea TAB
  • 105. Demo
  • 106. Thank you for your listening!!