jQuery Way
                               Right path to Javascript and jQuery




Thursday, September 23, 2010
Web Triad

                               Javascript         HTML




                                            CSS




...
Web Triad

                                jQuery

                               Javascript         HTML




            ...
Structure




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




Thursday, Septemb...
Real Structure




Thursday, September 23, 2010
jQuery: Start




Thursday, September 23, 2010
jQuery: Start

                                    =




Thursday, September 23, 2010
jQuery: Start

                                     =

                                  <img />
                         ...
DOMReady




Thursday, September 23, 2010
jQuery - Selectors


                           $(‘selectors’)


Thursday, September 23, 2010
jQuery - Selectors
                                         $(‘selectors’)
 <input                 id=”txt-email” class=”....
jQuery - Selectors
                                         $(‘selectors’)
 <input                 id=”txt-email” class=”....
jQuery - Selectors
                                          $(‘selectors’)
 <input                 id=”txt-email” class=”...
jQuery - Selectors
                                            $(‘selectors’)
 <input                 id=”txt-email” class...
jQuery - Selectors
                                            $(‘selectors’)
 <input                 id=”txt-email” class...
jQuery - What It Can Do?

                    • Event Handler
                    • Traversing
                    • Manip...
jQuery - Event Handler
                $(‘selectors’) .click( function() { ... } );
                                .bind(...
jQuery - Traversing
                $(‘selectors’) .find(‘selectors’);
                                   .filter(‘selectors...
jQuery - Manipulating
                $(‘selectors’) .addClass(‘className’);
                               .removeClass(‘...
jQuery - Helper
                $(‘selectors’) .hasClass(‘className’);
                                  .text(‘textConten...
jQuery - Effect
                $(‘selectors’) .show();
                                 .show(‘slow|fast’);
             ...
jQuery - AJAX
                $.ajax(
                  url: ‘ajax-path’,
                  type: ‘post’,
                ...
jQuery - AJAX

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

                Facebook: http://facebook.com/ferry.mulyono
                Twitter: @ferrymulyono




...
Upcoming SlideShare
Loading in...5
×

jQuery Way

1,445

Published on

Starting jQuery path the right way

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,445
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
36
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

jQuery Way

  1. 1. jQuery Way Right path to Javascript and jQuery Thursday, September 23, 2010
  2. 2. Web Triad Javascript HTML CSS Thursday, September 23, 2010
  3. 3. Web Triad jQuery Javascript HTML CSS Thursday, September 23, 2010
  4. 4. Structure *http://developer.yahoo.com/performance/rules.html Thursday, September 23, 2010
  5. 5. Real Structure Thursday, September 23, 2010
  6. 6. jQuery: Start Thursday, September 23, 2010
  7. 7. jQuery: Start = Thursday, September 23, 2010
  8. 8. jQuery: Start = <img /> <script /> <style /> Thursday, September 23, 2010
  9. 9. DOMReady Thursday, September 23, 2010
  10. 10. jQuery - Selectors $(‘selectors’) Thursday, September 23, 2010
  11. 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. 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. 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. 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. 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. 16. jQuery - What It Can Do? • Event Handler • Traversing • Manipulating • Helper • Effect • AJAX Thursday, September 23, 2010
  17. 17. jQuery - Event Handler $(‘selectors’) .click( function() { ... } ); .bind(‘click’, function() { ... } ); .click(someFunction); *http://api.jquery.com/category/events/ Thursday, September 23, 2010
  18. 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. 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. 20. jQuery - Helper $(‘selectors’) .hasClass(‘className’); .text(‘textContent’); .val(‘value’); .val() - Returns value Thursday, September 23, 2010
  21. 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. 22. jQuery - AJAX $.ajax( url: ‘ajax-path’, type: ‘post’, dataType: ‘json’, success: function(data) { // ... } ) Thursday, September 23, 2010
  23. 23. jQuery - AJAX $.post(‘ajax-path’, { name: val }, success: function(data) { // ... }, ‘json’ ) Thursday, September 23, 2010
  24. 24. $(jQuery).stop(); Facebook: http://facebook.com/ferry.mulyono Twitter: @ferrymulyono Thursday, September 23, 2010
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×