• Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,351
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
33
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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