Introduction to JQuery


The purpose of jQuery is to make it much easier to use JavaScript on

your website.


Before you start studying jQuery, you should have a basic knowledge of:

1. HTML 2.CSS 3.JAVASCRIPT

Q) What is jQuery?


jQuery is a lightweight, "write less, do more", JavaScript library.


The purpose of jQuery is to make it much easier to use JavaScript on

your website.
1 / 25

jQuery takes a lot of common tasks that require many lines of JavaScript

code to accomplish, and wraps them into methods that you can call with a

single line of code.


jQuery also simplifies a lot of the complicated things from JavaScript, like

AJAX calls and DOM manipulation.


The jQuery library contains the following features:

1. HTML/DOM manipulation 2.CSS manipulation

3.HTML event methods 4.Effects and animations

5. AJAX 6.Utilities

2 / 25
Q) Why jQuery?


There are lots of other JavaScript libraries out there, but

jQuery is probably the most popular, and also the most

extendable.


Many of the biggest companies on the Web use jQuery, such

as:

Google Microsoft

IBM Netflix

3 / 25
4 / 25
jQuery Syntax:

The jQuery syntax is tailor-made for selecting HTML

elements and performing some action on the element(s).


Basic syntax is : $(selector).action()

Where,

1. A $ sign to define/access jQuery

2. A (selector) to "query (or find)" HTML elements

3. A jQuery action() to be performed on the element(s) 5 / 25

 Examples:


$(this).hide() - hides the current element.


$("p").hide() - hides all <p> elements


$(".test").hide() - hides all elements with class="test".


$("#test").hide() - hides the element with id="test".

6 / 25

You might have noticed that all jQuery methods in our examples, are inside a document

ready event:

$(document).ready(function(){

// jQuery methods go here...

});


This is to prevent any jQuery code from running before the document is finished loading

(is ready).


It is good practice to wait for the document to be fully loaded and ready before working

with it. This also allows you to have your JavaScript code before the body of your

document, in the head section.

7 / 25
 JQuery Selectors

jQuery selectors allow you to select and manipulate HTML

element(s).


jQuery selectors are used to "find" (or select) HTML elements based

on their name, 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 and parentheses: $().

8 / 25
1.The element Selector :

The jQuery element selector selects elements based on the element name.


You can select all <p> elements on a page like this: $("p")


When a user clicks on a button, all <p> elements will be hidden:

Example :

$(document).ready(function(){

$("button").click(function(){

$("p").hide();

});
9 / 25
});
 2.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 HTML element: $("#test")

10 / 25
Example :


When a user clicks on a button, the element with id="test" will be

hidden:

$(document).ready(function(){

$("button").click(function(){

$("#test").hide();

});

});

11 / 25
3.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 class: $(".test")


When a user clicks on a button, the elements with class="test" will be hidden:

Example :

$(document).ready(function(){

$("button").click(function(){

$(".test").hide();

});

});
12 / 25
$("*") Selects all elements

$(this) Selects the current HTML element

$("p.intro") Selects all <p> elements with class="intro"

$("p:first") Selects the first <p> element

$("ul li:first") Selects the first <li> element of the first <ul>

$("ul li:first-child") Selects the first <li> element of every <ul>

$("[href]") Selects all elements with an href attribute

$("a[target='_blank']") Selects all <a> elements with a target

attribute value equal to "_blank"

$(":button") Selects all <button> elements and <input>

elements of type="button"

$("tr:even") Selects all even <tr> elements

13 / 25
$("tr:odd") Selects all odd <tr> elements
 JQuery Attributes
●
The attr() method in jQuery is used to set or return the attributes and
values of the selected elements.

Syntax:

●
To return the value of an attribute: $(selector).attr(attribute)

●
To set the attribute and value: $(selector).attr(attribute, value)

●
To set attribute and value using a function:

$(selector).attr(attribute, function(index, currentvalue))

●
To set multiple attributes and values:

$(selector).attr({attribute:value, attribute:value,14.....})
/ 25
 Event Handlers
1.Click method() :
●
In jQuery, most DOM events have an equivalent jQuery method.

●
To assign a click event to all paragraphs on a page, you can do
this: $("p").click();

●
The next step is to define what should happen when the event
fires. You must pass a function to the event:

$("p").click(function(){

// action goes here!!

});
15 / 25
 2.Blur method() :
●
jQuery blur() is an inbuilt method that is used to remove focus from
the selected element. This method starts the blur event or it can be
attached a function to run when a blur event occurs.

Syntax : $(selector).blur(function) // $(selector).blur()

3.Change method() :
●
The jQuery change() method is used to detect changes in the value
of form elements like <input>, <select>, or <textarea>. It triggers a
specified function when a user modifies the input or selects a
different option.

Syntax : $(selector).change(function)

Parameters : It accepts an optional parameter “function”.

●
16 / 25
 4.dblclick() :
●
jQuery dblclick() is an inbuilt method that is used to trigger the
double-click event to occur. This method occurs when the selected
element will be double-clicked.

Syntax: $(selector).dblclick(args);

●
Here “selector” is the selected element.

Parameters:

●
It accepts an optional parameter “args” which specifies a function
that does a specific task after double clicking.

17 / 25
 Style Methods
●
Suppose you are building a website or game where you need the user
interface to be interactive. In such cases styles can play a huge role.

●
We can apply styles on elements by using either the JQuery CSS Classes or
the JQuery .css() method.

●
Approach 1: Using JQuery CSS Classes. This approaches consists of
using methods such as the addClass() method, removeClass() method and
the toggleClass() method. These methods works similar to the
classList.addClass() method and classList.removeClass() method. We can
create some classes with some css rules and add or remove them using
JQuery as per the requirement.

Syntax : $("#poll").removeClass("safe").addClass("danger"); //
18 / 25
$("#poll").toggleClass("danger");
Approach 2: Using the JQuery css() method: In this method,
instead of creating separate classes inside the stylesheet, you
can directly set styles from javascript itself. The css() method
can be used to either return a single property based on the given
property or set a single or multiple CSS properties.

Syntax: // Assigning a single CSS property

$("#phone").css("background", "red");

// Assigning multiple properties

$("#phone").css({"background": "red", "font-size": "16px"});

19 / 25
 Traversing the DOM
Traversing methods :

Methods Description

●
add() Adds elements to the set of matched elements

●
addBack() Adds the previous set of elements to the
current set

●
andSelf() Deprecated in version 1.8. An alias for addBack()

●
children() Returns all direct children of the selected element

●
closest() Returns the first ancestor of the selected element

●
contents() Returns all direct children of the selected
element (including text and comment nodes)
20 / 25
●
each() Executes a function for each matched element

●
end() Ends the most recent filtering operation in the current chain,
and return the set of matched elements to its previous state

●
eq() Returns an element with a specific index number of the
selected elements

●
filter() Reduce the set of matched elements to those that match the
selector or pass the function's test

●
find() Returns descendant elements of the selected element

●
first() Returns the first element of the selected elements

●
has() Returns all elements that have one or more elements inside of
them 21 / 25
●
is() Checks the set of matched elements against a
selector/element/jQuery object, and return true if at
least one of these elements matches the given arguments

●
last() Returns the last element of the selected elements

●
map() Passes each element in the matched set through a
function, producing a new jQuery object Containing the
return values

●
next() Returns the next sibling element of the selected element

●
nextAll() Returns all next sibling elements of the selected element

●
nextUntil() Returns all next sibling elements between two given
arguments

●
not() Returns elements that do not match a certain criteria
22 / 25
●
offsetParent() Returns the first positioned parent element

●
parent() Returns the direct parent element of the selected element

●
parents() Returns all ancestor elements of the selected element

●
parentsUntil() Returns all ancestor elements between two given
arguments

●
prev() Returns the previous sibling element of the selected
element

●
prevAll() Returns all previous sibling elements of the selected element

●
prevUntil() Returns all previous sibling elements between two given
arguments

●
Siblings() Returns all sibling elements of the selected element

●
slice() Reduces the set of matched elements to a subset specified by a
range of indices 23 / 25
 JQuery Effects
●
jQuery effects add an X factor to your website interactivity. jQuery provides a
trivially simple interface for doing various kind of amazing effects like show,
hide, fade-in, fade-out, slide-up, slide-down, toggle etc. jQuery methods allow
us to quickly apply commonly used effects with a minimum configuration.

●
Some of the Jquery effects given below for creating animations :

Method Description

●
animate() Runs a custom animation on the selected elements

●
clearQueue() Removes all remaining queued functions from the selected
elements

●
delay() Sets a delay for all queued functions on the selected elements

●
dequeue() Removes the next function from the queue, and then executes
24 / 25
the function
●
fadeIn() Fades in the selected elements

●
fadeOut() Fades out the selected elements

●
fadeTo() Fades in/out the selected elements to a given opacity

●
fadeToggle() Toggles between the fadeIn() and fadeOut() methods

●
finish() Stops, removes and completes all queued animations
for the selected elements

●
hide() Hides the selected elements

●
queue() Shows the queued functions on the selected elements

●
show() Shows the selected elements

●
slideDown() Slides-down (shows) the selected elements

●
slideToggle() Toggles between the slideUp() and slideDown() methods

●
slideUp() Slides-up (hides) the selected elements

●
stop() Stops the currently running animation for the selected elements
25 / 25
●
toggle() Toggles between the hide() and show() methods