Introuction To jQuery

4,170 views

Published on

From DOM (Document Object Model) to HTML and CSS, with a MDC (Mozilla Developer Center) Re-introduction to JavaScript, to jQuery selectors, events and effects, plugins and comparison.

Published in: Technology

Introuction To jQuery

  1. 1. <ul><li>As a JavaScript library </li></ul><ul><ul><li>Shorthand & Utilities functions </li></ul></ul><ul><ul><li>Document Object Model </li></ul></ul><ul><ul><ul><li>Elements, Attributes, Styles, Events </li></ul></ul></ul><ul><ul><li>Effects / Animation </li></ul></ul><ul><ul><li>Asynchronous JavaScript And XML </li></ul></ul><ul><li>As an UI development framework </li></ul><ul><ul><li>Community Plugins </li></ul></ul><ul><ul><li>Widgets & Themes </li></ul></ul><ul><ul><li>Extending jQuery object </li></ul></ul>
  2. 3. View in browser (frontend / user interface) jQuery JavaScript (HTML + CSS) <ul><li>Document Object Model </li></ul><ul><li>A Re-introduction to JavaScript </li></ul><ul><li>$ /jQuery at first sight </li></ul><ul><li>CSS Selectors </li></ul><ul><li>jQuery Selectors </li></ul><ul><li>Traversing DOM </li></ul><ul><li>DOM Attributes </li></ul><ul><li>Event handling </li></ul><ul><li>AJAX / Firebug </li></ul><ul><li>Effects / jQuery UI </li></ul><ul><li>Plugins / jqGrid </li></ul><ul><li>Plugin: jQuery.fn. x </li></ul>
  3. 4. <ul><li>Basic requirement </li></ul><ul><ul><li>Language neutral & platform independent </li></ul></ul><ul><li>Document & content manipulation </li></ul><ul><ul><li>Can programmatically access & manipulate elements, attributes & content </li></ul></ul><ul><li>Event model </li></ul><ul><ul><li>All elements can generate events </li></ul></ul><ul><ul><li>Interface for binding events </li></ul></ul><ul><li>Stylesheet object model </li></ul><ul><ul><li>Selectors , rules and properties of individual style sheets can be added, removed and changed </li></ul></ul>
  4. 5. Document Object Model
  5. 6. <ul><li>“ The world’s most misunderstood programming language” by Douglas Crockford 2001 </li></ul><ul><li>LiveScript / JavaScript / JScript / ECMAScript </li></ul><ul><li>Name, Design Errors, Bad Books, Substandard </li></ul><ul><li>No concept of input or output </li></ul><ul><li>Host environment scripting </li></ul><ul><li>Can be Object-Oriented </li></ul><ul><li>Can have private variables & private methods </li></ul><ul><li>Can use classical inheritance & other code reuse patterns </li></ul>
  6. 11. $ /jQuery at first sight
  7. 12. jQuery as (an object-based) library <ul><li>document.getElementById(‘id’) </li></ul><ul><ul><li>$(‘#id’) </li></ul></ul><ul><li>document.getElementsByTagName(‘tag’) </li></ul><ul><ul><li>$(‘tag’) </li></ul></ul><ul><li>document.getElemtntsByClassName(‘cls’) </li></ul><ul><ul><li>$(‘.cls’) </li></ul></ul><ul><li>elm.style.display = ‘none’ </li></ul><ul><ul><li>$(elm).css(‘display’, ‘none’) </li></ul></ul><ul><ul><li>$(elm).hide() </li></ul></ul><ul><li>elm.className = ‘cls’ </li></ul><ul><ul><li>$(elm).addClass(‘cls’) </li></ul></ul><ul><ul><li>$(elm).removeClass(‘cls’) </li></ul></ul><ul><ul><li>$(elm).hasClass(‘cls’) </li></ul></ul><ul><ul><li>$(elm).toggleClass(‘cls’) </li></ul></ul>
  8. 13. CSS Selectors
  9. 14. jQuery Selectors
  10. 15. jQuery Selectors - Forms
  11. 17. Traversing DOM (with firebug)
  12. 18. Traversing DOM
  13. 19. DOM Attributes
  14. 21. Event handling
  15. 22. Event handling
  16. 23. Asynchronous JavaScript And XML
  17. 24. Asynchronous JavaScript And XML
  18. 25. Asynchronous JavaScript And XML
  19. 26. Utilities $.trim(' some text ');
  20. 27. Effects
  21. 31. Plugin: jQuery.fn. x
  22. 32. Plugin: jQuery.fn. x
  23. 33. <ul><li>As a JavaScript library </li></ul><ul><ul><li>Shorthand & Utilities functions </li></ul></ul><ul><ul><li>Document Object Model </li></ul></ul><ul><ul><ul><li>Elements, Attributes, Styles, Events </li></ul></ul></ul><ul><ul><li>Effects / Animation </li></ul></ul><ul><ul><li>Asynchronous JavaScript And XML </li></ul></ul><ul><li>As an UI development framework </li></ul><ul><ul><li>Community Plugins </li></ul></ul><ul><ul><li>Widgets & Themes </li></ul></ul><ul><ul><li>Extending jQuery object </li></ul></ul>

×