jQuery Way
-
Upload
ferry-mulyono -
Category
Technology
-
view
1.437 -
download
0
description
Transcript of jQuery Way
![Page 1: jQuery Way](https://reader034.fdocuments.in/reader034/viewer/2022052523/5558bdfcd8b42aa52a8b508a/html5/thumbnails/1.jpg)
jQuery WayRight path to Javascript and jQuery
Thursday, September 23, 2010
![Page 2: jQuery Way](https://reader034.fdocuments.in/reader034/viewer/2022052523/5558bdfcd8b42aa52a8b508a/html5/thumbnails/2.jpg)
Web Triad
Javascript HTML
CSS
Thursday, September 23, 2010
![Page 3: jQuery Way](https://reader034.fdocuments.in/reader034/viewer/2022052523/5558bdfcd8b42aa52a8b508a/html5/thumbnails/3.jpg)
jQuery
Web Triad
Javascript HTML
CSS
Thursday, September 23, 2010
![Page 4: jQuery Way](https://reader034.fdocuments.in/reader034/viewer/2022052523/5558bdfcd8b42aa52a8b508a/html5/thumbnails/4.jpg)
Structure
*http://developer.yahoo.com/performance/rules.html
Thursday, September 23, 2010
![Page 5: jQuery Way](https://reader034.fdocuments.in/reader034/viewer/2022052523/5558bdfcd8b42aa52a8b508a/html5/thumbnails/5.jpg)
Real Structure
Thursday, September 23, 2010
![Page 6: jQuery Way](https://reader034.fdocuments.in/reader034/viewer/2022052523/5558bdfcd8b42aa52a8b508a/html5/thumbnails/6.jpg)
jQuery: Start
Thursday, September 23, 2010
![Page 7: jQuery Way](https://reader034.fdocuments.in/reader034/viewer/2022052523/5558bdfcd8b42aa52a8b508a/html5/thumbnails/7.jpg)
jQuery: Start
=
Thursday, September 23, 2010
![Page 8: jQuery Way](https://reader034.fdocuments.in/reader034/viewer/2022052523/5558bdfcd8b42aa52a8b508a/html5/thumbnails/8.jpg)
jQuery: Start
=
<img /><script /><style />
Thursday, September 23, 2010
![Page 9: jQuery Way](https://reader034.fdocuments.in/reader034/viewer/2022052523/5558bdfcd8b42aa52a8b508a/html5/thumbnails/9.jpg)
DOMReady
Thursday, September 23, 2010
![Page 10: jQuery Way](https://reader034.fdocuments.in/reader034/viewer/2022052523/5558bdfcd8b42aa52a8b508a/html5/thumbnails/10.jpg)
jQuery - Selectors
$(‘selectors’)
Thursday, September 23, 2010
![Page 11: jQuery Way](https://reader034.fdocuments.in/reader034/viewer/2022052523/5558bdfcd8b42aa52a8b508a/html5/thumbnails/11.jpg)
jQuery - Selectors$(‘selectors’)
<input id=”txt-email” class=”.input-text” type=”text” name=”email” />
*http://api.jquery.com/category/selectors/
Thursday, September 23, 2010
![Page 12: jQuery Way](https://reader034.fdocuments.in/reader034/viewer/2022052523/5558bdfcd8b42aa52a8b508a/html5/thumbnails/12.jpg)
$(‘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
![Page 13: jQuery Way](https://reader034.fdocuments.in/reader034/viewer/2022052523/5558bdfcd8b42aa52a8b508a/html5/thumbnails/13.jpg)
$(‘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
![Page 14: jQuery Way](https://reader034.fdocuments.in/reader034/viewer/2022052523/5558bdfcd8b42aa52a8b508a/html5/thumbnails/14.jpg)
$(‘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
![Page 15: jQuery Way](https://reader034.fdocuments.in/reader034/viewer/2022052523/5558bdfcd8b42aa52a8b508a/html5/thumbnails/15.jpg)
$(‘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
![Page 16: jQuery Way](https://reader034.fdocuments.in/reader034/viewer/2022052523/5558bdfcd8b42aa52a8b508a/html5/thumbnails/16.jpg)
jQuery - What It Can Do?
• Event Handler
• Traversing
• Manipulating
• Helper
• Effect
• AJAX
Thursday, September 23, 2010
![Page 17: jQuery Way](https://reader034.fdocuments.in/reader034/viewer/2022052523/5558bdfcd8b42aa52a8b508a/html5/thumbnails/17.jpg)
jQuery - Event Handler
$(‘selectors’) .click( function() { ... } );.bind(‘click’, function() { ... } );
.click(someFunction);
*http://api.jquery.com/category/events/
Thursday, September 23, 2010
![Page 18: jQuery Way](https://reader034.fdocuments.in/reader034/viewer/2022052523/5558bdfcd8b42aa52a8b508a/html5/thumbnails/18.jpg)
jQuery - Traversing
$(‘selectors’) .find(‘selectors’);.filter(‘selectors’);.parent();.parents(‘selectors’).each(function(index, element) { ... })
*http://api.jquery.com/category/traversing/
Thursday, September 23, 2010
![Page 19: jQuery Way](https://reader034.fdocuments.in/reader034/viewer/2022052523/5558bdfcd8b42aa52a8b508a/html5/thumbnails/19.jpg)
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
![Page 20: jQuery Way](https://reader034.fdocuments.in/reader034/viewer/2022052523/5558bdfcd8b42aa52a8b508a/html5/thumbnails/20.jpg)
jQuery - Helper
$(‘selectors’) .hasClass(‘className’);.text(‘textContent’);.val(‘value’);.val() - Returns value
Thursday, September 23, 2010
![Page 21: jQuery Way](https://reader034.fdocuments.in/reader034/viewer/2022052523/5558bdfcd8b42aa52a8b508a/html5/thumbnails/21.jpg)
jQuery - Effect
$(‘selectors’) .show();.show(‘slow|fast’);.hide();.toggle().slideUp().slideDown().fadeIn().fadeOut()
*http://api.jquery.com/category/effects/
Thursday, September 23, 2010
![Page 22: jQuery Way](https://reader034.fdocuments.in/reader034/viewer/2022052523/5558bdfcd8b42aa52a8b508a/html5/thumbnails/22.jpg)
jQuery - AJAX
$.ajax(url: ‘ajax-path’,type: ‘post’,dataType: ‘json’,success: function(data) {
// ...}
)
Thursday, September 23, 2010
![Page 23: jQuery Way](https://reader034.fdocuments.in/reader034/viewer/2022052523/5558bdfcd8b42aa52a8b508a/html5/thumbnails/23.jpg)
jQuery - AJAX
$.post(‘ajax-path’, { name: val },success: function(data) {
// ...},‘json’
)
Thursday, September 23, 2010
![Page 24: jQuery Way](https://reader034.fdocuments.in/reader034/viewer/2022052523/5558bdfcd8b42aa52a8b508a/html5/thumbnails/24.jpg)
$(jQuery).stop();
Facebook: http://facebook.com/ferry.mulyono
Twitter: @ferrymulyono
Thursday, September 23, 2010