Your SlideShare is downloading. ×
0
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
jQuery プラグイン作成入門
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

jQuery プラグイン作成入門

4,927

Published on

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

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

Published in: Technology
0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,927
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
50
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!!

×