jQuery Way
24
jQuery Way Right path to Javascript and jQuery Thursday, September 23, 2010
-
Upload
ferry-mulyono -
Category
Technology
-
view
1.437 -
download
0
description
Starting jQuery path the right way
Transcript of 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
