jQuery Way

jQuery WayRight path to Javascript and jQuery

Thursday, September 23, 2010

Web Triad

Javascript HTML

CSS

Thursday, September 23, 2010

jQuery

Web Triad

Javascript HTML

CSS

Thursday, September 23, 2010

Structure

*http://developer.yahoo.com/performance/rules.html

Thursday, September 23, 2010

Real Structure

Thursday, September 23, 2010

jQuery: Start

Thursday, September 23, 2010

jQuery: Start

=

Thursday, September 23, 2010

jQuery: Start

=

<img /><script /><style />

Thursday, September 23, 2010

DOMReady

Thursday, September 23, 2010

jQuery - Selectors

$(‘selectors’)

Thursday, September 23, 2010

jQuery - Selectors$(‘selectors’)

<input id=”txt-email” class=”.input-text” type=”text” name=”email” />

*http://api.jquery.com/category/selectors/

Thursday, September 23, 2010

$(‘input’)

jQuery - Selectors$(‘selectors’)

<input id=”txt-email” class=”.input-text” type=”text” name=”email” />

*http://api.jquery.com/category/selectors/

Thursday, September 23, 2010

$(‘input’) $(‘#txt-email’)

jQuery - Selectors$(‘selectors’)

<input id=”txt-email” class=”.input-text” type=”text” name=”email” />

*http://api.jquery.com/category/selectors/

Thursday, September 23, 2010

$(‘input’) $(‘#txt-email’) $(‘.input-text’)

jQuery - Selectors$(‘selectors’)

<input id=”txt-email” class=”.input-text” type=”text” name=”email” />

*http://api.jquery.com/category/selectors/

Thursday, September 23, 2010

$(‘input’) $(‘#txt-email’) $(‘input[name=email]’)$(‘.input-text’)

jQuery - Selectors$(‘selectors’)

<input id=”txt-email” class=”.input-text” type=”text” name=”email” />

*http://api.jquery.com/category/selectors/

Thursday, September 23, 2010

jQuery - What It Can Do?

• Event Handler

• Traversing

• Manipulating

• Helper

• Effect

• AJAX

Thursday, September 23, 2010

jQuery - Event Handler

$(‘selectors’) .click( function() { ... } );.bind(‘click’, function() { ... } );

.click(someFunction);

*http://api.jquery.com/category/events/

Thursday, September 23, 2010

jQuery - Traversing

$(‘selectors’) .find(‘selectors’);.filter(‘selectors’);.parent();.parents(‘selectors’).each(function(index, element) { ... })

*http://api.jquery.com/category/traversing/

Thursday, September 23, 2010

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

jQuery - Helper

$(‘selectors’) .hasClass(‘className’);.text(‘textContent’);.val(‘value’);.val() - Returns value

Thursday, September 23, 2010

jQuery - Effect

$(‘selectors’) .show();.show(‘slow|fast’);.hide();.toggle().slideUp().slideDown().fadeIn().fadeOut()

*http://api.jquery.com/category/effects/

Thursday, September 23, 2010

jQuery - AJAX

$.ajax(url: ‘ajax-path’,type: ‘post’,dataType: ‘json’,success: function(data) {

// ...}

)

Thursday, September 23, 2010

jQuery - AJAX

$.post(‘ajax-path’, { name: val },success: function(data) {

// ...},‘json’

)

Thursday, September 23, 2010

$(jQuery).stop();

Facebook: http://facebook.com/ferry.mulyono

Twitter: @ferrymulyono

Thursday, September 23, 2010