This document discusses jQuery and its capabilities. It introduces jQuery as a JavaScript library for HTML documents. It describes how jQuery works with HTML, CSS, and JavaScript together as the "web triad". It then covers key jQuery concepts like DOM ready, selectors, events, traversing, manipulating, effects, AJAX, and more.

1. jQuery Way
Right path to Javascript and jQuery
Thursday, September 23, 2010

2. Web Triad
Javascript HTML
CSS
Thursday, September 23, 2010

3. Web Triad
jQuery
Javascript HTML
CSS
Thursday, September 23, 2010

4. Structure
*http://developer.yahoo.com/performance/rules.html
Thursday, September 23, 2010

5. Real Structure
Thursday, September 23, 2010

6. jQuery: Start
Thursday, September 23, 2010

7. jQuery: Start
=
Thursday, September 23, 2010

8. jQuery: Start
=
<img />
<script />
<style />
Thursday, September 23, 2010

9. DOMReady
Thursday, September 23, 2010

10. jQuery - Selectors
$(‘selectors’)
Thursday, September 23, 2010

11. jQuery - Selectors
$(‘selectors’)
<input id=”txt-email” class=”.input-text” type=”text” name=”email” />
*http://api.jquery.com/category/selectors/
Thursday, September 23, 2010

12. jQuery - Selectors
$(‘selectors’)
<input id=”txt-email” class=”.input-text” type=”text” name=”email” />
$(‘input’)
*http://api.jquery.com/category/selectors/
Thursday, September 23, 2010

13. jQuery - Selectors
$(‘selectors’)
<input id=”txt-email” class=”.input-text” type=”text” name=”email” />
$(‘input’) $(‘#txt-email’)
*http://api.jquery.com/category/selectors/
Thursday, September 23, 2010

14. jQuery - Selectors
$(‘selectors’)
<input id=”txt-email” class=”.input-text” type=”text” name=”email” />
$(‘input’) $(‘#txt-email’) $(‘.input-text’)
*http://api.jquery.com/category/selectors/
Thursday, September 23, 2010

15. jQuery - Selectors
$(‘selectors’)
<input id=”txt-email” class=”.input-text” type=”text” name=”email” />
$(‘input’) $(‘#txt-email’) $(‘.input-text’) $(‘input[name=email]’)
*http://api.jquery.com/category/selectors/
Thursday, September 23, 2010

16. jQuery - What It Can Do?
• Event Handler
• Traversing
• Manipulating
• Helper
• Effect
• AJAX
Thursday, September 23, 2010

17. jQuery - Event Handler
$(‘selectors’) .click( function() { ... } );
.bind(‘click’, function() { ... } );
.click(someFunction);
*http://api.jquery.com/category/events/
Thursday, September 23, 2010

18. jQuery - Traversing
$(‘selectors’) .find(‘selectors’);
.filter(‘selectors’);
.parent();
.parents(‘selectors’)
.each(function(index, element) { ... })
*http://api.jquery.com/category/traversing/
Thursday, September 23, 2010

19. jQuery - Manipulating
$(‘selectors’) .addClass(‘className’);
.removeClass(‘className’);
.css(‘name’, ‘value’);
.attr(‘name’, ‘value’)
.remove()
.html(‘<div />)
.append(‘<div />’)
*http://api.jquery.com/category/manipulation/
Thursday, September 23, 2010

20. jQuery - Helper
$(‘selectors’) .hasClass(‘className’);
.text(‘textContent’);
.val(‘value’);
.val() - Returns value
Thursday, September 23, 2010

21. jQuery - Effect
$(‘selectors’) .show();
.show(‘slow|fast’);
.hide();
.toggle()
.slideUp()
.slideDown()
.fadeIn()
.fadeOut()
*http://api.jquery.com/category/effects/
Thursday, September 23, 2010

22. jQuery - AJAX
$.ajax(
url: ‘ajax-path’,
type: ‘post’,
dataType: ‘json’,
success: function(data) {
// ...
}
)
Thursday, September 23, 2010

23. jQuery - AJAX
$.post(‘ajax-path’, { name: val },
success: function(data) {
// ...
},
‘json’
)
Thursday, September 23, 2010

24. $(jQuery).stop();
Facebook: http://facebook.com/ferry.mulyono
Twitter: @ferrymulyono
Thursday, September 23, 2010