jQuery Way
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

jQuery Way

on

  • 1,767 views

Starting jQuery path the right way

Starting jQuery path the right way

Statistics

Views

Total Views
1,767
Views on SlideShare
1,756
Embed Views
11

Actions

Likes
0
Downloads
33
Comments
0

2 Embeds 11

http://ferrymulyono.com 9
http://localhost 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

jQuery Way Presentation 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