This document provides an introduction to jQuery, covering topics such as features, selectors, animations, events, manipulating HTML/CSS, traversing, and Ajax. It explains that jQuery is a free and open-source JavaScript library that simplifies tasks like DOM manipulation, event handling, animations, and Ajax interactions to facilitate rapid web development. Key jQuery concepts discussed include selectors, common animation effects, event handling, manipulating HTML and CSS, traversing DOM elements, and methods for loading remote data via Ajax.

1. An Introduction to jQuery
Pooja Saxena

2. Topics to cover
2
 Introduction
 Features
 Selectors
 Animations
 Events
 Manipulating HTML/CSS
 Traversing
 Ajax

3. What is jQuery?
3
 Is a free , open Javascript library
 Founded in 2006 with the motto - Write
Less - Do More
 What it does - Simplifies the task of
creating highly responsive web pages
 Not at all related to Java
 Works across modern browsers
 Can be enabled in your page by
including reference to jQuery library file
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">

4. Typical Usage
4
 HTML/DOM manipulation
 CSS manipulation
 Event handling
 Animating
 Traversing
 Ajax interactions for rapid web
development

5. Selectors
jQuery selectors start with the dollar sign and − $().
$() is a synonym of jQuery()
 Name -Selects all elements which match with the given
element Name.
 #ID -Selects a single element which matches with the given
ID.
 .Class -Selects all elements which match with the given
Class.
 Universal (*) - Selects all elements available in a DOM.
 Multiple Elements E, F, G - Selects the combined results of all
the specified selectors E, F or G.
5

6. Animations
 jQuery provides several techniques for adding animation to a
web page to craft sophisticated custom effects.
 Frequently used effects are built into jQuery as methods that
you can call on any jQuery object.
◦ .show() Show the selected elements.
◦ .hide() Hide the selected elements.
◦ .fadeIn() Animate the opacity of the selected elements to
100%.
◦ .fadeOut() Animate the opacity of the selected elements to 0%.
◦ .slideDown() Display the selected elements with a vertical sliding
motion.
◦ .slideUp() Hide the selected elements with a vertical sliding
motion.
◦ .toggle() Show or hide the selected elements with a vertical
sliding motion, depending on whether the elements are currently
visible.
6

7. Events
 What are Events?
◦ An event represents the precise moment
when some action happens that can be
detected by your Web Application
 Examples:
◦ Mouse click
◦ Web page loading
◦ Mouse over an element
◦ Submitting an HTML form
◦ A keystroke on your keyboard. Etc.
7

8. Manipulating HTML/CSS
8
 JQuery provides methods to manipulate DOM/CSS in efficient
way.
 Almost all methods acts as getter or setter for HTML
element's attribute
 DOM manipulation includes
◦ Add, Remove or modify any element or its attribute
 CSS manipulation includes
◦ Altering any of the style properties of DOM elments

9. Traversing
9
 Used to filter out elements from a document based on given
conditions.
 Some common methods which are used for traversing are :-
◦ children() Returns all direct children of the selected element
◦ closest() Returns the first ancestor of the selected element
◦ each() Executes a function for each matched element
◦ eq() Returns an element with a specific index number of the
selected elements
◦ find() Returns descendant elements of the selected element
◦ first() Returns the first element of the selected elements
◦ last() Returns the last element of the selected elements
◦ next() Returns the next sibling element of the selected element
◦ parent() Returns the direct parent element of the selected element
◦ prev() Returns the previous sibling element of the selected element

10. Ajax
 $.get( url, [data], [callback], [type] )
◦ Requests data from the server with an HTTP GET request.
 $.getJSON( url, [data], [callback] )
◦ Load JSON data using an HTTP GET request.
 $.post( url, [data], [callback], [type] )
◦ Requests data from the server using an HTTP POST request.
 $.ajax( options )
◦ Load a remote page using an HTTP request. Can be called for
get/post/put/delete requests
 serialize( )
◦ Called on forms usually before sending request to server. It creates a URL
encoded text string by serializing form values.
 serializeArray( )
◦ Serializes all forms and form elements like the .serialize() method but
returns a JSON data structure for you to work with.
10

11. Examples
https://jsfiddle.net/1jrvtwcq/20/