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

1. jQuery

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 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">Let's 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">Let's 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">Let's 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">Let's 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">Let's 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">Let's 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">Let's 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">Let's 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">Let's 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">Let's 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">Let's 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">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">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>

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">Let's 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">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">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>

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">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. Manipulate DOM elements
jQuery 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

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. Animation with jQuery

64. jQuery

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 jQuery Plugin!

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 create Plugin
•
• jQuery
• $(‘selector’) jQuery

72. $.pluginName(params);

73. $.pluginName(params);
;(function($){
})(jQuery);

74. $.pluginName(params);
;(function($){ ←
})(jQuery); ←

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. $(selector).pluginName(params);

79. $.fn

80. $(selector).pluginName(params);
;(function($){
})(jQuery);

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. $(selector).pluginName(params);
;(function($){
})(jQuery);

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. Tips 2
•

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. Example.

104. jQuery.formControll.js

105. jQuery.formControll.js
• TAB, Enter
• Meta + Enter
•
• textarea TAB

106. Demo

107. Thank you for your listening!!