Your SlideShare is downloading. ×
0
jQuery
:•••   etc..
:•••   etc..            jQuery OK!!
“jQuery”HTML/CSS          JavaScriptWeb
• jQuery •   jQuery •   DOM • • •
•
About Me• WEB             Developer / PHP / CakePHP / HTML / CSS / jQuery / PostgreSQL /    MySQL / iPhone /       /     /...
About   ?
?
About jQuery   HTML/CSS  JavaScript
About jQuery          :   http://jquery.com/• CSS                 DOM•         DOM Element   /••• GPL/MIT
Getting started with jQuery•   jQuery    •          1.4.3 (2010/10/30   )•   <script>
Getting started with jQuery•   jQuery    •           1.4.3 (2010/10/30   )•   <script type="text/javascript"    <script>  ...
Getting started with jQuery•   jQuery    •           1.4.3 (2010/10/30   )•   <script type="text/javascript"    <script>  ...
Manipulate DOM
DOM
DOM =
DOM = Document Object Model
DOM = Document Object Model• HTML        XML             JavaScript                                           API•
DOM = Document Object Model                     title             head                      ...   html                    ...
How to select DOM Elements        with jQuery
jQuery     CSS     DOM
$(ul);
$(ul);<div id="header"><p id="title">Foobar Website</p><ul>  <li>Home</li>  <li>Products</li>  <li>Contacts</li></ul></div...
$(ul);<div id="header"><p id="title">Foobar Website</p><ul>  <li>Home</li>  <li>Products</li>  <li>Contacts</li></ul></div...
$(#title);
$(#title);<div id="header"><p id="title">Foobar Website</p><ul>  <li>Home</li>  <li>Products</li>  <li>Contacts</li></ul><...
$(#title);<div id="header"><p id="title">Foobar Website</p><ul>  <li>Home</li>  <li>Products</li>  <li>Contacts</li></ul><...
$(.message);
$(.message);<div id="header"><p id="title">Foobar Website</p><ul>  <li>Home</li>  <li>Products</li>  <li>Contacts</li></ul...
$(.message);<div id="header"><p id="title">Foobar Website</p><ul>  <li>Home</li>  <li>Products</li>  <li>Contacts</li></ul...
$(#contents p);
$(#contents p);<div id="header"><p id="title">Foobar Website</p><ul>  <li>Home</li>  <li>Products</li>  <li>Contacts</li><...
$(#contents p);<div id="header"><p id="title">Foobar Website</p><ul>  <li>Home</li>  <li>Products</li>  <li>Contacts</li><...
DOM Traversing  DOM
$(#contents).next();
$(#contents).next();<div id="header"><p id="title">Foobar Website</p><ul>  <li>Home</li>  <li>Products</li>  <li>Contacts<...
$(#contents).next();<div id="header"><p id="title">Foobar Website</p><ul>  <li>Home</li>  <li>Products</li>  <li>Contacts<...
$(#contents).next();<div id="header"><p id="title">Foobar Website</p><ul>  <li>Home</li>  <li>Products</li>  <li>Contacts<...
$(#contents).find(p);
$(#contents).find(p);<div id="header"><p id="title">Foobar Website</p><ul>  <li>Home</li>  <li>Products</li>  <li>Contacts...
$(#contents).find(p);<div id="header"><p id="title">Foobar Website</p><ul>  <li>Home</li>  <li>Products</li>  <li>Contacts...
$(#contents).find(p);<div id="header"><p id="title">Foobar Website</p><ul>  <li>Home</li>  <li>Products</li>  <li>Contacts...
$(li.message).parent(div);
$(li.message).parent(div);<div id="header"><p id="title">Foobar Website</p><ul>  <li>Home</li>  <li>Products</li>  <li>Con...
$(li.message).parent(div);<div id="header"><p id="title">Foobar Website</p><ul>  <li>Home</li>  <li>Products</li>  <li>Con...
$(li.message).parent(div);<div id="header"><p id="title">Foobar Website</p><ul>  <li>Home</li>  <li>Products</li>  <li>Con...
$ ?
$ is jQuery                                 $ jQuery// <div id="contents">$(#contents).next();// <div id="contents">      ...
$ is jQuery                                  $ jQuery// <div id="contents">jQuery(#contents).next();// <div id="contents">...
Manipulate DOM elementsjQuery   DOM
Manipulate DOM elements• append()• prepend()• remove()
Manipulate DOM elements• html(val)         HTML val• text(val)          val  val
Manipulate DOM elements• attr(key,   val)       key      val• removeAttr(key)      key
Manipulate DOM elements• addClass(val)      class   val• removeClass(val)      class   val• css(key,     val)       style ...
Demo
Event Handler
Event Handler•    •    •    •    •    •
Event Handler• click(func) onClick$(a).click(function(){    //                      Move to      return confirm(Move to " ...
Event Handler• ready(func) •   DOM$(document).ready(function(){    //                        Complete      alert(Complete)...
Event Handler•    •   change()    •   dbclick()    •   error()    •   focus()    •   keydown()    •   keypress()    •   ke...
Animation with jQuery
jQuery
Animation•   jQuery    • hide()   / show()    • slideUp()   / slideDown()    • fadeOut()   / fadeIn()•
Create Animation• animate(properties,                   options)$(.move-right).click(function(){ // .move-right      $(#bo...
Letʼs create jQuery Plugin!
jQuery   !
Plugin?•    <script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>    <script type="text/javascript" src="j...
Why Plugin?•    •    •   HTML   JavaScript    •
How to create Plugin•    •   jQuery    •   $(‘selector’)   jQuery
$.pluginName(params);
$.pluginName(params);;(function($){})(jQuery);
$.pluginName(params);;(function($){ ←})(jQuery);   ←
$.pluginName(params);;(function($){    $.extend({    });})(jQuery);
$.pluginName(params);;(function($){    $.extend({          "pluginName" : function(params){          }    });})(jQuery);
$.pluginName(params);;(function($){    $.extend({          "pluginName" : function(params){              // do something.....
$(selector).pluginName(params);
$.fn
$(selector).pluginName(params);;(function($){})(jQuery);
$(selector).pluginName(params);;(function($){    $.fn.extend({    });})(jQuery);
$(selector).pluginName(params);;(function($){    $.fn.extend({          "pluginName" : function(params){          }    });...
$(selector).pluginName(params);;(function($){    $.fn.extend({          "pluginName" : function(params){              // d...
$(selector).pluginName(params);;(function($){})(jQuery);
$(selector).pluginName(params);;(function($){    $.fn.pluginName = function(params){    };})(jQuery);
$(selector).pluginName(params);;(function($){    $.fn.pluginName = function(params){         // do something.         retu...
$(selector).pluginName(params);;(function($){    $.fn.pluginName = function(params){         // do something.    };       ...
$(‘#target’).someFunc()    .addClass(‘someClass’)    .slideDown();
Tips 1•                  (      )    $.pluginName({foo: true})
(function($){    $.fn.pluginName = function(params){         // override input params   	     params = $.extend({}, $.fn.p...
(function($){    $.fn.pluginName = function(params){         // override input params   	     params = $.extend({}, $.fn.p...
(function($){    $.fn.pluginName = function(params){         // override input params         ↓   	     params = $.extend(...
Tips 2•
(function($){    var localFunction = function(params) {         alert(local function);    };    $.fn.pluginName = function...
(function($){    var localFunction = function(params) {                                             }         alert(local ...
(function($){    var localFunction = function(params) {                                             }         alert(local ...
Tips 3•    •   $.pluginName.funcA()    •   $.pluginName.funcB()
(function($){    $.pluginName = {};})(jQuery);
(function($){    $.pluginName = {};    $.pluginName.FuncA = function(){         // do something...    };})(jQuery);
(function($){    $.pluginName = {};    $.pluginName.FuncA = function(){         // do something...        } $.pluginName.F...
(function($){    $.pluginName = {};    $.pluginName.FuncA = function(){         // do something...    };    $.pluginName.F...
(function($){    $.pluginName = {};    $.pluginName.FuncA = function(){         // do something...    };    $.pluginName.F...
Example.
jQuery.formControll.js
jQuery.formControll.js•                        TAB, Enter    • Meta + Enter    •    • textarea     TAB
Demo
Thank you for your listening!!
jQuery プラグイン作成入門
Upcoming SlideShare
Loading in...5
×

jQuery プラグイン作成入門

4,984

Published on

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

Published in: Technology

Transcript of "jQuery プラグイン作成入門"

  1. 1. jQuery
  2. 2. :••• etc..
  3. 3. :••• etc.. jQuery OK!!
  4. 4. “jQuery”HTML/CSS JavaScriptWeb
  5. 5. • jQuery • jQuery • DOM • • •
  6. 6.
  7. 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. 8. About ?
  9. 9. ?
  10. 10. About jQuery HTML/CSS JavaScript
  11. 11. About jQuery : http://jquery.com/• CSS DOM• DOM Element /••• GPL/MIT
  12. 12. Getting started with jQuery• jQuery • 1.4.3 (2010/10/30 )• <script>
  13. 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. 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. 15. Manipulate DOM
  16. 16. DOM
  17. 17. DOM =
  18. 18. DOM = Document Object Model
  19. 19. DOM = Document Object Model• HTML XML JavaScript API•
  20. 20. DOM = Document Object Model title head ... html li h1 ul body ... div p
  21. 21. How to select DOM Elements with jQuery
  22. 22. jQuery CSS DOM
  23. 23. $(ul);
  24. 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. 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. 26. $(#title);
  27. 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. 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. 29. $(.message);
  30. 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. 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. 32. $(#contents p);
  33. 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. 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. 35. DOM Traversing DOM
  36. 36. $(#contents).next();
  37. 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. 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. 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. 40. $(#contents).find(p);
  41. 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. 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. 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. 44. $(li.message).parent(div);
  45. 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. 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. 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. 48. $ ?
  49. 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. 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. 51. Manipulate DOM elementsjQuery DOM
  52. 52. Manipulate DOM elements• append()• prepend()• remove()
  53. 53. Manipulate DOM elements• html(val) HTML val• text(val) val val
  54. 54. Manipulate DOM elements• attr(key, val) key val• removeAttr(key) key
  55. 55. Manipulate DOM elements• addClass(val) class val• removeClass(val) class val• css(key, val) style key: val
  56. 56. Demo
  57. 57. Event Handler
  58. 58. Event Handler• • • • • •
  59. 59. Event Handler• click(func) onClick$(a).click(function(){ // Move to return confirm(Move to " + this.href + ");});
  60. 60. Event Handler• ready(func) • DOM$(document).ready(function(){ // Complete alert(Complete);});
  61. 61. Event Handler• • change() • dbclick() • error() • focus() • keydown() • keypress() • keyup() • load() • mousedown() • mousemove() • .....
  62. 62. Animation with jQuery
  63. 63. jQuery
  64. 64. Animation• jQuery • hide() / show() • slideUp() / slideDown() • fadeOut() / fadeIn()•
  65. 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. 66. Letʼs create jQuery Plugin!
  67. 67. jQuery !
  68. 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. 69. Why Plugin?• • • HTML JavaScript •
  70. 70. How to create Plugin• • jQuery • $(‘selector’) jQuery
  71. 71. $.pluginName(params);
  72. 72. $.pluginName(params);;(function($){})(jQuery);
  73. 73. $.pluginName(params);;(function($){ ←})(jQuery); ←
  74. 74. $.pluginName(params);;(function($){ $.extend({ });})(jQuery);
  75. 75. $.pluginName(params);;(function($){ $.extend({ "pluginName" : function(params){ } });})(jQuery);
  76. 76. $.pluginName(params);;(function($){ $.extend({ "pluginName" : function(params){ // do something... } });})(jQuery);
  77. 77. $(selector).pluginName(params);
  78. 78. $.fn
  79. 79. $(selector).pluginName(params);;(function($){})(jQuery);
  80. 80. $(selector).pluginName(params);;(function($){ $.fn.extend({ });})(jQuery);
  81. 81. $(selector).pluginName(params);;(function($){ $.fn.extend({ "pluginName" : function(params){ } });})(jQuery);
  82. 82. $(selector).pluginName(params);;(function($){ $.fn.extend({ "pluginName" : function(params){ // do something. return this; } });})(jQuery);
  83. 83. $(selector).pluginName(params);;(function($){})(jQuery);
  84. 84. $(selector).pluginName(params);;(function($){ $.fn.pluginName = function(params){ };})(jQuery);
  85. 85. $(selector).pluginName(params);;(function($){ $.fn.pluginName = function(params){ // do something. return this; };})(jQuery);
  86. 86. $(selector).pluginName(params);;(function($){ $.fn.pluginName = function(params){ // do something. }; return this; ←})(jQuery);
  87. 87. $(‘#target’).someFunc() .addClass(‘someClass’) .slideDown();
  88. 88. Tips 1• ( ) $.pluginName({foo: true})
  89. 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. 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. 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. 92. Tips 2•
  93. 93. (function($){ var localFunction = function(params) { alert(local function); }; $.fn.pluginName = function(params){ // do something.. localFunction(params); // do something.. };})(jQuery);
  94. 94. (function($){ var localFunction = function(params) { } alert(local function); }; $.fn.pluginName = function(params){ // do something.. localFunction(params); // do something.. };})(jQuery);
  95. 95. (function($){ var localFunction = function(params) { } alert(local function); }; $.fn.pluginName = function(params){ // do something.. localFunction(params); } // do something.. };})(jQuery);
  96. 96. Tips 3• • $.pluginName.funcA() • $.pluginName.funcB()
  97. 97. (function($){ $.pluginName = {};})(jQuery);
  98. 98. (function($){ $.pluginName = {}; $.pluginName.FuncA = function(){ // do something... };})(jQuery);
  99. 99. (function($){ $.pluginName = {}; $.pluginName.FuncA = function(){ // do something... } $.pluginName.FuncA() };})(jQuery);
  100. 100. (function($){ $.pluginName = {}; $.pluginName.FuncA = function(){ // do something... }; $.pluginName.FuncB = function(){ // do something... };})(jQuery);
  101. 101. (function($){ $.pluginName = {}; $.pluginName.FuncA = function(){ // do something... }; $.pluginName.FuncB = function(){ // do something... } $.pluginName.FuncB() };})(jQuery);
  102. 102. Example.
  103. 103. jQuery.formControll.js
  104. 104. jQuery.formControll.js• TAB, Enter • Meta + Enter • • textarea TAB
  105. 105. Demo
  106. 106. Thank you for your listening!!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×