Your SlideShare is downloading. ×
0
JS Libraries and jQuery Overview
JS Libraries and jQuery Overview
JS Libraries and jQuery Overview
JS Libraries and jQuery Overview
JS Libraries and jQuery Overview
JS Libraries and jQuery Overview
JS Libraries and jQuery Overview
JS Libraries and jQuery Overview
JS Libraries and jQuery Overview
JS Libraries and jQuery Overview
JS Libraries and jQuery Overview
JS Libraries and jQuery Overview
JS Libraries and jQuery Overview
JS Libraries and jQuery Overview
JS Libraries and jQuery Overview
JS Libraries and jQuery Overview
JS Libraries and jQuery Overview
JS Libraries and jQuery Overview
JS Libraries and jQuery Overview
JS Libraries and jQuery Overview
JS Libraries and jQuery Overview
JS Libraries and jQuery Overview
JS Libraries and jQuery Overview
JS Libraries and jQuery Overview
JS Libraries and jQuery Overview
JS Libraries and jQuery Overview
JS Libraries and jQuery Overview
JS Libraries and jQuery Overview
JS Libraries and jQuery Overview
JS Libraries and jQuery Overview
JS Libraries and jQuery Overview
JS Libraries and jQuery Overview
JS Libraries and jQuery Overview
JS Libraries and jQuery Overview
JS Libraries and jQuery Overview
JS Libraries and jQuery Overview
JS Libraries and jQuery Overview
JS Libraries and jQuery Overview
JS Libraries and jQuery Overview
JS Libraries and jQuery Overview
JS Libraries and jQuery Overview
JS Libraries and jQuery Overview
JS Libraries and jQuery Overview
JS Libraries and jQuery Overview
JS Libraries and jQuery Overview
JS Libraries and jQuery Overview
JS Libraries and jQuery Overview
JS Libraries and jQuery Overview
JS Libraries and jQuery Overview
JS Libraries and jQuery Overview
JS Libraries and jQuery Overview
JS Libraries and jQuery Overview
JS Libraries and jQuery Overview
JS Libraries and jQuery Overview
JS Libraries and jQuery Overview
JS Libraries and jQuery Overview
JS Libraries and jQuery Overview
JS Libraries and jQuery Overview
JS Libraries and jQuery Overview
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

JS Libraries and jQuery Overview

2,160

Published on

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

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. JS Libraries & jQuery overview by Aleksandr Motsjonov [email_address]
  • 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. Demo – Teaser
  • 4. Chapter I – JS Libraries
  • 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. <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. 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. 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. 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. 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. 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. 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>
  • 15. Chapter II – What is jQuery Now You will know who and why need to choose jQuery.
  • 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>
  • 17. jQuery <ul><li>Inside the Code </li></ul><ul><li>Outside the Code </li></ul><ul><li>Additional Bonuses </li></ul>
  • 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>
  • 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>
  • 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>
  • 21. Additional Bonuses
  • 22. Additional Bonuses - Performance
  • 23.  
  • 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>
  • 25. Chapter III – Meet the jQuery Code
  • 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>
  • 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>
  • 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>
  • 29. $ - Examples
  • 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>
  • 31. Main methodology of jQuery Get ( Find ) some jQuery elem. Do something with it.
  • 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>
  • 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>
  • 34. Basic Selectors
  • 35. Hierarchy Selectors
  • 36. Basic Filters
  • 37. Content Filters
  • 38. Visibility Filters
  • 39. Attribute Filters
  • 40. Child Filters
  • 41. Forms
  • 42. Form Filters
  • 43. DOM Traversing <ul><li>Filtering </li></ul><ul><li>Finding </li></ul><ul><li>Chaining </li></ul>
  • 44. DOM Traversing - Filtering
  • 45. DOM Traversing - Finding
  • 46. Chaining
  • 47. Attributes
  • 48. DOM Manipulation append preppend after before appendTo preppendTo insertAfter insertBefore wrap wrap All wrap Inner replaceWith replaceAll
  • 49. DOM Manipulation
  • 50. CSS
  • 51. Positioning
  • 52. Height and Width
  • 53. Events
  • 54. Events
  • 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>
  • 56. Ajax
  • 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>
  • 58. Demo – Full Version
  • 59. The End.

×