JS Libraries and jQuery Overview
Download as PPT, PDF2 likes1,123 views
This document provides an overview of JavaScript libraries and jQuery. It discusses reasons for using JS libraries like cross-browser compatibility and less code. jQuery is introduced as a popular library that simplifies DOM manipulation, events, Ajax and animation. The document then demonstrates various jQuery functions for selecting elements, traversing the DOM, handling events, and making Ajax requests.
![JS Libraries & jQuery overview by Aleksandr Motsjonov [email_address]](https://image.slidesharecdn.com/jquery-090529092356-phpapp01/85/JS-Libraries-and-jQuery-Overview-1-320.jpg)
JS Libraries and jQuery Overview
- 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
- 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
- 22. Additional Bonuses - Performance
- 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
- 36. Basic Filters
- 37. Content 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.