JS Libraries & jQuery overview by Aleksandr Motsjonov [email_address]
Agenda <ul><li>Demo  –   Teaser </li></ul><ul><li>Chapter I  – JS Libraries </li></ul><ul><li>Chapter II  – What is jQuery...
Demo  – Teaser
Chapter I  –   JS Libraries
JS Libraries <ul><li>Reasons.  Why JS Libraries in the first place? </li></ul><ul><li>Lot of them.  Question of choose . <...
<ul><li>Less  code </li></ul><ul><li>More  free time </li></ul><ul><li>More  money left </li></ul><ul><li>Easier  to write...
Why JS Libraries? <ul><li>JS Lib as  cross browser  abstraction layer </li></ul><ul><ul><li>Less  headache </li></ul></ul>...
Why JS Libraries? <ul><li>No  need to  reinvent the wheel. </li></ul><ul><ul><li>Methods like selectByClassName </li></ul>...
Which one to choose? <ul><li>There is a lot of JS Libraries.  (pull) </li></ul><ul><ul><li>Who uses JS libs? </li></ul></u...
Choose of JS Library <ul><li>Everyone have right to choose  whatever  she likes. </li></ul><ul><li>I respect other libs an...
Choose of JS Library <ul><li>Different needs – different JS libs. </li></ul><ul><ul><li>Working with  DOM </li></ul></ul><...
Choose of JS Library <ul><li>Why  I choose  jQuery? </li></ul><ul><ul><li>Honestly I’ve been starting with  Prototype  =) ...
 
Last things about JS libs <ul><li>ECMAScript  5.0 </li></ul><ul><li>Google  AJAX Libraries API </li></ul><ul><ul><li>http:...
Chapter II  –   What is jQuery Now You will know  who  and  why  need to  choose jQuery.
What is jQuery? <ul><li>jQuery  is a fast and concise JavaScript Library that simplifies HTML document traversing, event h...
jQuery <ul><li>Inside  the Code </li></ul><ul><li>Outside  the Code </li></ul><ul><li>Additional  Bonuses </li></ul>
What jQuery has Inside Code? <ul><li>DOM  Manipulation </li></ul><ul><ul><li>Node/Attributes Modification </li></ul></ul><...
Outside code  - Popularity <ul><li>Who  Uses jQuery? </li></ul><ul><ul><li>Most popular sites:  Google, Amazon, IBM, Twitt...
Outside code  - Popularity <ul><li>Big Community </li></ul><ul><ul><li>3200  messages in Google Groups </li></ul></ul><ul>...
Additional Bonuses
Additional Bonuses  - Performance
 
Additional Bonuses <ul><li>Browser Compatibility </li></ul><ul><ul><li>F ire f ox 2.0+ </li></ul></ul><ul><ul><li>I nterne...
Chapter III  – Meet the jQuery Code
Deep into the Code <ul><li>CSS  Query </li></ul><ul><li>D OM </li></ul><ul><li>E vents </li></ul><ul><li>A jax </li></ul><...
Basics <ul><li>jQuery  Object  concept </li></ul><ul><ul><li>Almost everything in jQuery  is   jQuery Objects.  Every jQue...
$ is the Mother of jQuery <ul><li>$  - is shorthand for  jQuery  object/function – main object, which need to be called to...
$ - Examples
CSS as Query language for DOM tree <ul><li>jQuery (like many other JS Libraries) uses CSS  as Query language  to get DOM e...
Main methodology of jQuery Get  ( Find ) some jQuery elem. Do  something with it.
CSS  Support  <ul><li>CSS  1 </li></ul><ul><li>CSS  2 </li></ul><ul><li>CSS   3  (subset) </li></ul><ul><li>Custom  CSS  s...
CSS Selectors in Action <ul><li>Basic </li></ul><ul><li>Hierarchy </li></ul><ul><li>Basic Filters </li></ul><ul><li>Conten...
Basic Selectors
Hierarchy Selectors
Basic Filters
Content Filters
Visibility Filters
Attribute Filters
Child Filters
Forms
Form Filters
DOM Traversing <ul><li>Filtering </li></ul><ul><li>Finding </li></ul><ul><li>Chaining </li></ul>
DOM Traversing  - Filtering
DOM Traversing  - Finding
Chaining
Attributes
DOM Manipulation append preppend after before appendTo preppendTo insertAfter insertBefore wrap wrap All wrap Inner replac...
DOM Manipulation
CSS
Positioning
Height and Width
Events
Events
Ajax <ul><li>Function:  success, beforeSend, complete, dataFilter, error, xhr  </li></ul><ul><li>Boolean:  async, cache, i...
Ajax
Other <ul><li>Effects </li></ul><ul><ul><li>show(), hide(), slideDown(), fadeIn(), animate() </li></ul></ul><ul><li>Utilit...
Demo  – Full Version
The  End.
Upcoming SlideShare
Loading in...5
×

JS Libraries and jQuery Overview

2,181

Published on

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

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

No notes for slide

JS Libraries and jQuery Overview

  1. 1. JS Libraries & jQuery overview by Aleksandr Motsjonov [email_address]
  2. 2. Agenda <ul><li>Demo – Teaser </li></ul><ul><li>Chapter I – JS Libraries </li></ul><ul><li>Chapter II – What is jQuery </li></ul><ul><li>Chapter III – Deep into the Code </li></ul><ul><li>Demo – Full Version </li></ul>
  3. 3. Demo – Teaser
  4. 4. Chapter I – JS Libraries
  5. 5. JS Libraries <ul><li>Reasons. Why JS Libraries in the first place? </li></ul><ul><li>Lot of them. Question of choose . </li></ul><ul><li>Some interesting stuff . </li></ul>
  6. 6. <ul><li>Less code </li></ul><ul><li>More free time </li></ul><ul><li>More money left </li></ul><ul><li>Easier to write </li></ul>Why JS Libraries?
  7. 7. Why JS Libraries? <ul><li>JS Lib as cross browser abstraction layer </li></ul><ul><ul><li>Less headache </li></ul></ul><ul><ul><li>Less bugs </li></ul></ul><ul><ul><li>Less time spend </li></ul></ul><ul><ul><li>More money left </li></ul></ul>
  8. 8. Why JS Libraries? <ul><li>No need to reinvent the wheel. </li></ul><ul><ul><li>Methods like selectByClassName </li></ul></ul><ul><ul><li>All other utility methods already written (Plug-ins) </li></ul></ul>
  9. 9. Which one to choose? <ul><li>There is a lot of JS Libraries. (pull) </li></ul><ul><ul><li>Who uses JS libs? </li></ul></ul><ul><ul><li>jQuery? </li></ul></ul>
  10. 10. Choose of JS Library <ul><li>Everyone have right to choose whatever she likes. </li></ul><ul><li>I respect other libs and criticism about jQuery. </li></ul>
  11. 11. Choose of JS Library <ul><li>Different needs – different JS libs. </li></ul><ul><ul><li>Working with DOM </li></ul></ul><ul><ul><li>OOP Abstraction </li></ul></ul><ul><ul><li>UI Toolkit </li></ul></ul><ul><ul><li>Ajax framework </li></ul></ul><ul><ul><li>General Purpose </li></ul></ul>
  12. 12. Choose of JS Library <ul><li>Why I choose jQuery? </li></ul><ul><ul><li>Honestly I’ve been starting with Prototype =) </li></ul></ul><ul><ul><li>http://www.rsdn.ru/article/inet/jQuery.xml </li></ul></ul>
  13. 14. Last things about JS libs <ul><li>ECMAScript 5.0 </li></ul><ul><li>Google AJAX Libraries API </li></ul><ul><ul><li>http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js </li></ul></ul>
  14. 15. Chapter II – What is jQuery Now You will know who and why need to choose jQuery.
  15. 16. What is jQuery? <ul><li>jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. </li></ul><ul><li>Write less, do more. </li></ul><ul><li>http://jquery.com/ </li></ul><ul><li>Author : John Resig </li></ul><ul><li>Last Release: v. 1.3.2 </li></ul><ul><li>Size (production): 19kb </li></ul>
  16. 17. jQuery <ul><li>Inside the Code </li></ul><ul><li>Outside the Code </li></ul><ul><li>Additional Bonuses </li></ul>
  17. 18. What jQuery has Inside Code? <ul><li>DOM Manipulation </li></ul><ul><ul><li>Node/Attributes Modification </li></ul></ul><ul><ul><li>Traversing </li></ul></ul><ul><li>CSS Queries </li></ul><ul><li>A jax </li></ul><ul><li>Simple Visual Effects </li></ul><ul><li>Utility methods </li></ul><ul><li>Custom Plug-ins development </li></ul>
  18. 19. Outside code - Popularity <ul><li>Who Uses jQuery? </li></ul><ul><ul><li>Most popular sites: Google, Amazon, IBM, Twitter, Dell, NBC, BBC, Digg, Intel, Oracle, Slashdot, Technorati, SourceForge, GitHub, Science, New York Post, FeedBurner, … </li></ul></ul><ul><ul><li>OpenSource projects: Mozilla, WordPress, Drupal, Trac, Joomla, Symfony, Zend Framework, PEAR, … </li></ul></ul>
  19. 20. Outside code - Popularity <ul><li>Big Community </li></ul><ul><ul><li>3200 messages in Google Groups </li></ul></ul><ul><ul><li>2600 Plug-ins in central repository </li></ul></ul><ul><ul><li>Countless number of tutorials and articles  </li></ul></ul><ul><li>Books </li></ul>
  20. 21. Additional Bonuses
  21. 22. Additional Bonuses - Performance
  22. 24. Additional Bonuses <ul><li>Browser Compatibility </li></ul><ul><ul><li>F ire f ox 2.0+ </li></ul></ul><ul><ul><li>I nternet E xplorer 6.0+ </li></ul></ul><ul><ul><li>S afari 3+ </li></ul></ul><ul><ul><li>O pera 9+ </li></ul></ul><ul><ul><li>C hrome 1+ </li></ul></ul><ul><ul><li>Known Issues in (FF 1.o, IE 1-5, Safari 1-2, Opera 1-8, lynx =) </li></ul></ul><ul><li>jQuery Loves other Libraries =) </li></ul><ul><ul><li>noConflict() </li></ul></ul><ul><ul><li>Don’t touch standard Objects (Object, String, itc.) </li></ul></ul>
  23. 25. Chapter III – Meet the jQuery Code
  24. 26. Deep into the Code <ul><li>CSS Query </li></ul><ul><li>D OM </li></ul><ul><li>E vents </li></ul><ul><li>A jax </li></ul><ul><li>O ther </li></ul>
  25. 27. Basics <ul><li>jQuery Object concept </li></ul><ul><ul><li>Almost everything in jQuery is jQuery Objects. Every jQuery method you call from such objects. </li></ul></ul><ul><ul><li>Almost every method return jQuery object. You can make chains with it. </li></ul></ul>
  26. 28. $ is the Mother of jQuery <ul><li>$ - is shorthand for jQuery object/function – main object, which need to be called to use jQuery. $ can be called with 4 types of arguments: </li></ul><ul><ul><li>HTML Text. For creating new DOM element (returns jQuery object) </li></ul></ul><ul><ul><li>CSS Selector. For searching and retrieving existing DOM elements. </li></ul></ul><ul><ul><li>DOM element. For wrapping it with jQuery to get jQuery object. </li></ul></ul><ul><ul><li>Function. Shorthand for document onDOMLoad event handler. </li></ul></ul>
  27. 29. $ - Examples
  28. 30. CSS as Query language for DOM tree <ul><li>jQuery (like many other JS Libraries) uses CSS as Query language to get DOM elements. </li></ul><ul><li>Main method to make CSS Queries is $(), but there is also methods , which arguments also CSS statement. </li></ul><ul><li>$() could return 0 , 1 or many elements, which match CSS statement. No exceptions. </li></ul>
  29. 31. Main methodology of jQuery Get ( Find ) some jQuery elem. Do something with it.
  30. 32. CSS Support <ul><li>CSS 1 </li></ul><ul><li>CSS 2 </li></ul><ul><li>CSS 3 (subset) </li></ul><ul><li>Custom CSS selectors </li></ul>
  31. 33. CSS Selectors in Action <ul><li>Basic </li></ul><ul><li>Hierarchy </li></ul><ul><li>Basic Filters </li></ul><ul><li>Content Filters </li></ul><ul><li>Visibility Filters </li></ul><ul><li>Attribute Filters </li></ul><ul><li>Child Filters </li></ul><ul><li>Forms </li></ul><ul><li>Form Filters </li></ul>
  32. 34. Basic Selectors
  33. 35. Hierarchy Selectors
  34. 36. Basic Filters
  35. 37. Content Filters
  36. 38. Visibility Filters
  37. 39. Attribute Filters
  38. 40. Child Filters
  39. 41. Forms
  40. 42. Form Filters
  41. 43. DOM Traversing <ul><li>Filtering </li></ul><ul><li>Finding </li></ul><ul><li>Chaining </li></ul>
  42. 44. DOM Traversing - Filtering
  43. 45. DOM Traversing - Finding
  44. 46. Chaining
  45. 47. Attributes
  46. 48. DOM Manipulation append preppend after before appendTo preppendTo insertAfter insertBefore wrap wrap All wrap Inner replaceWith replaceAll
  47. 49. DOM Manipulation
  48. 50. CSS
  49. 51. Positioning
  50. 52. Height and Width
  51. 53. Events
  52. 54. Events
  53. 55. Ajax <ul><li>Function: success, beforeSend, complete, dataFilter, error, xhr </li></ul><ul><li>Boolean: async, cache, ifModified, processData, global </li></ul><ul><li>String, Object: contentType, data, dataType, jsonp, password, scriptCharset, type, url, username </li></ul>
  54. 56. Ajax
  55. 57. Other <ul><li>Effects </li></ul><ul><ul><li>show(), hide(), slideDown(), fadeIn(), animate() </li></ul></ul><ul><li>Utilities </li></ul><ul><ul><li>jQuery.support, .each(), .map(), .inArray(), .unique(), .isFunction(), .isArray() </li></ul></ul><ul><ul><li>.get(i), .eq(i), .index() </li></ul></ul>
  56. 58. Demo – Full Version
  57. 59. The End.
  1. A particular slide catching your eye?

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

×