JS Libraries and jQuery Overview

  • 2,041 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,041
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

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