![{ // JavaScript Object Notation name: value, key: obj, array: [true,1, ' string '," str " ,[],{a:null}] }](https://image.slidesharecdn.com/introuctiontojquery-091125000017-phpapp02/85/Introuction-To-jQuery-9-320.jpg)
Introuction To jQuery
- 1. As a JavaScript library Shorthand & Utilities functions Document Object Model Elements, Attributes, Styles, Events Effects / Animation Asynchronous JavaScript And XML As an UI development framework Community Plugins Widgets & Themes Extending jQuery object
- 3. View in browser (frontend / user interface) jQuery JavaScript (HTML + CSS) Document Object Model A Re-introduction to JavaScript $ /jQuery at first sight CSS Selectors jQuery Selectors Traversing DOM DOM Attributes Event handling AJAX / Firebug Effects / jQuery UI Plugins / jqGrid Plugin: jQuery.fn. x
- 4. Basic requirement Language neutral & platform independent Document & content manipulation Can programmatically access & manipulate elements, attributes & content Event model All elements can generate events Interface for binding events Stylesheet object model Selectors , rules and properties of individual style sheets can be added, removed and changed
- 6. The world’s most misunderstood programming language - Douglas Crockford 2001 LiveScript / JavaScript / JScript / ECMAScript Name, Design Errors, Bad Books, Substandard No concept of input or output Host environment scripting Can be Object-Oriented: prototype new delete Can have private variables & private methods Can use classical inheritance & other code reuse patterns
- 9. { // JavaScript Object Notation name: value, key: obj, array: [true,1, ' string '," str " ,[],{a:null}] }
- 11. $ /jQuery at first sight
- 12. jQuery as (an object-based) library document.getElementById(‘id’) $(‘#id’) document.getElementsByTagName(‘tag’) $(‘tag’) document.getElementsByClassName(‘cls’) $(‘.cls’) elm.style.display = ‘none’ $(elm).css(‘display’, ‘none’) $(elm).hide() // .show() elm.className = ‘cls’ $(elm).addClass(‘cls’) $(elm).removeClass(‘cls’) $(elm).hasClass(‘cls’) $(elm).toggleClass(‘cls’)
- 13. CSS Selectors
- 14. jQuery Selectors
- 15. jQuery Selectors - Forms
- 17. Traversing DOM (with firebug)
- 18. Traversing DOM
- 19. DOM Attributes
- 21. Event handling
- 22. Event handling
- 23. Asynchronous JavaScript And XML
- 24. Asynchronous JavaScript And XML
- 25. Asynchronous JavaScript And XML
- 26. Utilities $.trim(' some text ');
- 27. Effects
- 33. As a JavaScript library Shorthand & Utilities functions Document Object Model Elements, Attributes, Styles, Events Effects / Animation Asynchronous JavaScript And XML As an UI development framework Community Plugins Widgets & Themes Extending jQuery object