jQuery Presentation - JavaScript Library for DOM Manipulation
•Download as PPTX, PDF•
0 likes•381 views
This document provides an overview of jQuery, a popular JavaScript library. It discusses what jQuery is, why it's useful, and some basic ways to use it. Specifically, jQuery is a lightweight JavaScript library that simplifies tasks like DOM manipulation, event handling, Ajax interactions and animation. It supports cross-browser compatibility and has a simple, CSS-like syntax. The document provides examples of how jQuery can be used to select elements, add/remove classes, handle events, and create basic animations.
Recommended
More Related Content
What's hot
What's hot (18)
Viewers also liked
Similar to jQuery Presentation - JavaScript Library for DOM Manipulation
Similar to jQuery Presentation - JavaScript Library for DOM Manipulation (20)
More from baabtra.com - No. 1 supplier of quality freshers
More from baabtra.com - No. 1 supplier of quality freshers (20)
Recently uploaded
Recently uploaded (20)
jQuery Presentation - JavaScript Library for DOM Manipulation
- 2. Disclaimer: This presentation is prepared by trainees of baabtra as a part of mentoring program. This is not official document of baabtra –Mentoring Partner Baabtra-Mentoring Partner is the mentoring division of baabte System Technologies Pvt . Ltd
- 4. What is jQuery? • JavaScript Library • Functionality – DOM scripting & event handling – Ajax – User interface effects – Form validation
- 5. Why jQuery? • Lightweight – 14kb (Minified and Gzipped) • Cross-browser support (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+) • CSS-like syntax – easy for developers/non- developers to understand • Active developer community • Extensible - plugins
- 6. JQuery • Powerful JavaScript library – Simplify common JavaScript tasks – Access parts of a page • using CSS or XPath-like expressions – Modify the appearance of a page – Alter the content of a page – Change the user’s interaction with a page – Add animation to a page – Provide AJAX support – Abstract away browser quirks
- 7. A Few Examples • Forms • Chatboxes • Menus • Dropdowns • Sliders • Tabs • Slideshows • Games
- 9. Using jQuery • Download the .JS file (23KB otal, minified) • Use the jQuery file hosted on Google’s Code servers <html> <head> <script type="text/javascript" src="jquery.js"> </script> <script type="text/javascript"> </script> </head> <body> <a href="http://jquery.com/">jQuery</a> </body> </html>
- 10. Basic JQuery • Selecting part of document is fundamental operation • A JQuery object is a wrapper for a selected group of DOM nodes • $() function is a factory method that creates JQuery objects • $(“dt”) is a JQuery object containing all the “dt” elements in the document
- 11. Basic JQuery • .addClass() method changes the DOM nodes by adding a ‘class’ attribute – The ‘class’ attribute is a special CSS construct that provides a visual architecture independent of the element structures • $(“dt”).addClass(“emphasize”) will change all occurrences of <dt> to <dt class=“emphasize”> • See also .removeClass()
- 12. Basic JQuery • To make this change, put it in a function and call it when the document has been loaded and the DOM is created function doEmph(),$(“dt”).addClass(“emphasize”)- <body onLoad=“doEmph()”> • We had to alter the HTML (bad) • Structure and appearance should be separated! • Also, onLoad waits until all images etc are loaded. Tedious.
- 13. JQuery Selectors • CSS p element name #ididentifier .class classname p.class element with class p aanchor as any descendant of p p > a anchor direct child of p
- 14. JQuery Events • bind(eventname, function) method – ‘click’ – ‘change’ – ‘resize’ • $(“a*@href+”).bind(‘click’,function(){ $(this).addClass(‘red’);-);
- 15. jQuery Animations • Animations • Built in – fadeIn() – fadeOut() – hide() – show() – slideDown() – slideUp() – toggle() – slideToggle() – fadeTo() – animate() • See also: – Easing Plug-in – jQuery User Interface: http://ui.jquery.com
- 16. Who’s using jQuery? • Google • Dell • Bank of America • Mozilla • Drupal • NetFlix • NBC • Digg
- 17. If this presentation helped you, please visit our page facebook.com/baabtra and like it. Thanks in advance. www.baabtra.com | www.massbaab.com |www.baabte.com
- 18. Contact Us Emarald Mall (Big Bazar Building) Mavoor Road, Kozhikode, Kerala, India. Ph: + 91 – 495 40 25 550 NC Complex, Near Bus Stand Mukkam, Kozhikode, Kerala, India. Ph: + 91 – 495 40 25 550 Start up Village Eranakulam, Kerala, India. Email: info@baabtra.com