jQuery Way

jQuery WayRight path to Javascript and jQuery

Thursday, September 23, 2010

Web Triad

Javascript HTML

CSS


jQuery

Web Triad

Javascript HTML

CSS


Structure

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


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

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

Real Structure


jQuery: Start


jQuery: Start

=


jQuery: Start

=

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


DOMReady


jQuery - Selectors

$(‘selectors’)


jQuery - Selectors$(‘selectors’)

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

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


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


$(‘input’)







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







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







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







jQuery - What It Can Do?

• Event Handler

• Traversing

• Manipulating

• Helper

• Effect

• AJAX


jQuery - Event Handler

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

.click(someFunction);

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


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

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

jQuery - Traversing

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

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


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

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

jQuery - Manipulating

$(‘selectors’) .addClass(‘className’);.removeClass(‘className’);.css(‘name’, ‘value’);.attr(‘name’, ‘value’).remove().html(‘<div />).append(‘<div />’)

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


http://api.jquery.com/category/manipulation/

http://api.jquery.com/category/manipulation/

jQuery - Helper

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


jQuery - Effect

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

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


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

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

jQuery - AJAX

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

// ...}

)


jQuery - AJAX

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

// ...},‘json’

)


$(jQuery).stop();

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

Twitter: @ferrymulyono


http://facebook.com/ferry.mulyono

http://facebook.com/ferry.mulyono

jQuery Way

Technology

Transcript of jQuery Way