1. 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 .
4. What is jQuery?
• jQuery is a lightweight, "write less, do more",
• The purpose of jQuery is to make it much easier to use
• The jQuery library contains the following features:
HTML event methods
Effects and animations
5. Why jQuery?
• 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
– 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
8. Using jQuery
• Adding jQuery to Your Web Pages
There are several ways to start using jQuery on your
web site. You can:
Download the jQuery library from jQuery.com
Include jQuery from the file
9. The Document Ready Event
• You might have noticed that all jQuery methods in our examples, are inside a
document ready event:
• This is to prevent any jQuery code from running before the document is finished
loading (is ready).
document, in the head section.
// jQuery methods go here...
10. jQuery Selectors
• jQuery selectors allow to select and manipulate HTML
• jQuery selectors are used to "find" (or select) HTML elements
based on their id, classes, types, attributes, values of
attributes and much more. It's based on the existing CSS
Selectors, and in addition, it has some own custom selectors.
• All selectors in jQuery start with the dollar sign
11. The #id Selector
The jQuery #id selector uses the id attribute of an HTML tag to find the specific element.
An id should be unique within a page, so you should use the #id selector when you want
to find a single, unique element.
To find an element with a specific id, write a hash character, followed by the id of the
The element Selector
jQuery element selector selects elements based on the element name.
You can select all <p> elements on a page like this:
The .class Selector
The jQuery class selector finds elements with a specific class.
To find elements with a specific class, write a period character, followed by the name of the
12. What are Events?
• All the different visitor's actions that a web page can respond
to are called events.
• An event represents the precise moment when something
moving a mouse over an element
selecting a radio button
clicking on an element
14. jQuery Validation
16. jQuery Animations
• Built in
• See also:
– Easing Plug-in
– jQuery User Interface: http://ui.jquery.com
17. Who’s using jQuery?
• Bank of America
18. 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
19. Contact Us
Emarald Mall (Big Bazar Building)
Mavoor Road, Kozhikode,
Ph: + 91 – 495 40 25 550
NC Complex, Near Bus Stand
Ph: + 91 – 495 40 25 550
Start up Village