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.
jQuery Presentation - JavaScript Library for DOM Manipulation
1.
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
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