jQuery Way
0 likes810 views
This document discusses jQuery and its capabilities. It introduces jQuery as a JavaScript library for HTML documents. It describes how jQuery works with HTML, CSS, and JavaScript together as the "web triad". It then covers key jQuery concepts like DOM ready, selectors, events, traversing, manipulating, effects, AJAX, and more.
![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](https://image.slidesharecdn.com/jqueryway-100925124717-phpapp01/85/jQuery-Way-15-320.jpg)
jQuery Way
- 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