JQUERY

The purpose of jQuery is to make it much easier to use JavaScript on your website.

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:

 HTML/DOM manipulation
 CSS manipulation
 HTML event methods
 Effects and animations
 AJAX
 Utilities

Will jQuery work in all browsers?

The jQuery team knows all about cross-browser issues, and they have written
this knowledge into the jQuery library. jQuery will run exactly the same in all
major browsers.

document.getElementById("hello");

$(“#hello”);

document.getElementsByClassName("hello");

$(“.hello”);

document.getElementsByTagName("p");

$(“<p>”);

BASIC SYNTAX
1|Page
$(document).ready(function(){
console.log(“hiii how are you”);
})

Another way to implement jQuery

$(function(){
Console.log(“hello ji”);
)
<div>this is for you
<h1>Bhagwati Kaalika </h1>
<p>MahisasurMardini </p>
</div>
<script>
$(document).ready(function(){
let a = $('div').html();
console.log(a);
})

</script>

2|Page
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:
$().

3|Page
4|Page
 What are Events?
All the different visitors' actions that a web page can respond to
are called events.

An event represents the precise moment when something

happens.

Examples:

 moving a mouse over an element

 selecting a radio button
 clicking on an element

Mouse Events Keyboard Events Form Events Document/Window

Events

click keypress submit load

dblclick keydown change resize

mouseenter keyup focus scroll

mouseleave blur unload

5|Page
jQuery Syntax For Event Methods
$(document).ready()

The $(document).ready() method allows us to execute a function

when the document is fully loaded. This event is already
explained in the jQuery Syntax chapter.

click()

The click() method attaches an event handler function to an

HTML element.

The function is executed when the user clicks on the HTML

element.

The following example says: When a click event fires on

a <p> element; hide the current <p> element:

$("p").click(function(){
$(this).hide();
});

dblclick()

The dblclick() method attaches an event handler function to an

HTML element.

The function is executed when the user double-clicks on the HTML

element:

$("p").dblclick(function(){
$(this).hide();
});

mouseenter()

The mouseenter() method attaches an event handler function to an

HTML element.

6|Page
The function is executed when the mouse pointer enters the
HTML element:

$("#p1").mouseenter(function(){
alert("You entered p1!");
});
mouseleave()

The mouseleave() method attaches an event handler function to an

HTML element.

The function is executed when the mouse pointer leaves the

HTML element:

$("#p1").mouseleave(function(){
alert("Bye! You now leave p1!");
});

mousedown()

The mousedown() method attaches an event handler function to an

HTML element.

The function is executed, when the left, middle or right mouse

button is pressed down, while the mouse is over the HTML
element:

$("#p1").mousedown(function(){
alert("Mouse down over p1!");
});

mouseup()

The mouseup() method attaches an event handler function to an

HTML element.

The function is executed, when the left, middle or right mouse

button is released, while the mouse is over the HTML element:

7|Page
$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});

hover()

The hover() method takes two functions and is a combination of

the mouseenter() and mouseleave() methods.

The first function is executed when the mouse enters the HTML
element, and the second function is executed when the mouse
leaves the HTML element:

$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});

focus()

The focus() method attaches an event handler function to an

HTML form field.

The function is executed when the form field gets focus:

$("input").focus(function(){
$(this).css("background-color", "#cccccc");
});

blur()

The blur() method attaches an event handler function to an HTML

form field.
8|Page
The function is executed when the form field loses focus:

$("input").blur(function(){
$(this).css("background-color", "#ffffff");
});

The on() Method

The on() method attaches one or more event handlers for the
selected elements.

Attach a click event to a <p> element:

$("p").on("click", function(){
$(this).hide();
});

9|Page
jQuery hide() and show()
With jQuery, you can hide and show HTML elements with
the hide() and show() methods:

$("#hide").click(function(){
$("p").hide();
});

$("#show").click(function(){
$("p").show();
});

Syntax:

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

toggle()
You can also toggle between hiding and showing an element with
the toggle() method.

Shown elements are hidden and hidden elements are shown:

$("button").click(function(){
$("p").toggle();
});

Syntax:

$(selector).toggle(speed,callback);

10 | P a g e
jQuery Fading Methods
With jQuery you can fade an element in and out of visibility.

jQuery has the following fade methods:

 fadeIn()
 fadeOut()
 fadeToggle()
 fadeTo()

jQuery fadeIn() Method

The jQuery fadeIn() method is used to fade in a hidden element.

Syntax:

$(selector).fadeIn(speed,callback);

The optional speed parameter specifies the duration of the effect.

It can take the following values: "slow", "fast", or milliseconds.

The optional callback parameter is a function to be executed after

the fading completes.

The following example demonstrates the fadeIn() method with

different parameters:

$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});

11 | P a g e
jQuery fadeOut() Method
The jQuery fadeOut() method is used to fade out a visible
element.

Syntax:

$(selector).fadeOut(speed,callback);

The optional speed parameter specifies the duration of the effect.

It can take the following values: "slow", "fast", or milliseconds.

The optional callback parameter is a function to be executed after

the fading completes.

The following example demonstrates the fadeOut() method with

different parameters:

$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});

jQuery fadeToggle() Method

The jQuery fadeToggle() method toggles between
the fadeIn() and fadeOut() methods.

If the elements are faded out, fadeToggle() will fade them in.

If the elements are faded in, fadeToggle() will fade them out.

Syntax:

$(selector).fadeToggle(speed,callback);

12 | P a g e
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});

jQuery fadeTo() Method

The jQuery fadeTo() method allows fading to a given opacity
(value between 0 and 1).

Syntax:

$(selector).fadeTo(speed,opacity,callback);
$("button").click(function(){
$("#div1").fadeTo("slow", 0.15);
$("#div2").fadeTo("slow", 0.4);
$("#div3").fadeTo("slow", 0.7);
});

jQuery Sliding Methods

With jQuery you can create a sliding effect on elements.

jQuery has the following slide methods:

 slideDown()
 slideUp()
 slideToggle()

jQuery slideDown() Method

The jQuery slideDown() method is used to slide down an element.

Syntax:

$(selector).slideDown(speed,callback);

13 | P a g e
jQuery slideUp() Method
The jQuery slideUp() method is used to slide up an element.

Syntax:

$(selector).slideUp(speed,callback);

jQuery slideToggle() Method

The jQuery slideToggle() method toggles between
the slideDown() and slideUp() methods.

If the elements have been slid down, slideToggle() will slide them
up.

If the elements have been slid up, slideToggle() will slide them
down.

$(selector).slideToggle(speed,callback);

jQuery stop() Method

The jQuery stop() method is used to stop an animation or effect
before it is finished.

The stop() method works for all jQuery effect functions, including
sliding, fading and custom animations.

Syntax:

$(selector).stop(stopAll,goToEnd);

The optional stopAll parameter specifies whether also the

animation queue should be cleared or not. Default is false, which
means that only the active animation will be stopped, allowing
any queued animations to be performed afterwards.

14 | P a g e
The optional goToEnd parameter specifies whether or not to
complete the current animation immediately. Default is false.

So, by default, the stop() method kills the current animation

being performed on the selected element.

The following example demonstrates the stop() method, with no

parameters:

Example
$("#stop").click(function(){
$("#panel").stop();
});

jQuery Callback Functions

JavaScript statements are executed line by line. However, with
effects, the next line of code can be run even though the effect is
not finished. This can create errors.

To prevent this, you can create a callback function.

A callback function is executed after the current effect is finished.

Typical syntax: $(selector).hide(speed,callback);

Examples

The example below has a callback parameter that is a function

that will be executed after the hide effect is complete

$("button").click(function(){
$("p").hide("slow", function(){
alert("The paragraph is now hidden");
});
});

Add New HTML Content

15 | P a g e
We will look at four jQuery methods that are used to add new content:

 append() - Inserts content at the end of the selected elements

 prepend() - Inserts content at the beginning of the selected elements
 after() - Inserts content after the selected elements
 before() - Inserts content before the selected elements

jQuery append() Method

The jQuery append() method inserts content AT THE END of the selected
HTML elements

$("p").append("Some appended text.");

jQuery prepend() Method

The jQuery prepend() method inserts content AT THE BEGINNING of the
selected HTML elements.

$("p").prepend("Some prepended text.");

jQuery after() and before()

Methods
The jQuery after() method inserts content AFTER the selected
HTML elements.

The jQuery before() method inserts content BEFORE the selected

HTML elements.

$("img").after("Some text after");

$("img").before("Some text before");

16 | P a g e
Remove Elements/Content
To remove elements and content, there are mainly two jQuery
methods:

 remove() - Removes the selected element (and its child

elements)
 empty() - Removes the child elements from the selected
element

jQuery remove() Method

The jQuery remove() method removes the selected element(s) and
its child elements.

$("#div1").remove();

jQuery empty() Method

The jQuery empty() method removes the child elements of the
selected element(s)

$("#div1").empty();

17 | P a g e
jQuery Manipulating CSS
jQuery has several methods for CSS manipulation. We will look at
the following methods:

 addClass() - Adds one or more classes to the selected

elements
 removeClass() - Removes one or more classes from the
selected elements
 toggleClass() - Toggles between adding/removing
classes from the selected elements
 css() - Sets or returns the style attribute
.important {
font-weight: bold;
font-size: xx-large;
}

.blue {
color: blue;
}

jQuery addClass() Method

The following example shows how to add class attributes to
different elements. Of course you can select multiple elements,
when adding classes:

$(“button”).click(function(){
$(“h1, h2, p”).addClass(“blue”);
$(“div”).addClass(“important”);
});

jQuery removeClass() Method

18 | P a g e
The following example shows how to remove a specific class
attribute from different elements:

$("button").click(function(){
$("h1, h2, p").removeClass("blue");
});

jQuery toggleClass() Method

The following example will show how to use the
jQuery toggleClass() method. This method toggles between
adding/removing classes from the selected elements:

$("button").click(function(){
$("h1, h2, p").toggleClass("blue");
});

jQuery Animations - The animate()

Method
The jQuery animate() method is used to create custom
animations.

Syntax:

$(selector).animate({params},speed,callback);

The required params parameter defines the CSS properties to be

animated.

The optional speed parameter specifies the duration of the effect.

It can take the following values: "slow", "fast", or milliseconds.

The optional callback parameter is a function to be executed after

the animation completes.
19 | P a g e
The following example demonstrates a simple use of
the animate() method; it moves a <div> element to the right, until
it has reached a left property of 250px:

$("button").click(function(){
$("div").animate({left: '250px'});
});

Animate() - Manipulate Multiple

Properties
Notice that multiple properties can be animated at the same time:

$("button").click(function(){
$("div").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
});
});

Animate() - Using Relative Values

It is also possible to define relative values (the value is then
relative to the element's current value). This is done by putting
+= or -= in front of the value:

$("button").click(function(){
$("div").animate({
left: '250px',
height: '+=150px',
width: '+=150px'
});
});

20 | P a g e
Animate() - Using Pre-defined
Values
You can even specify a property's animation value as " show",
"hide", or "toggle":

$("button").click(function(){
$("div").animate({
height: 'toggle'
});
});

Animate() - Uses Queue

Functionality
By default, jQuery comes with queue functionality for animations.

This means that if you write multiple animate() calls after each
other, jQuery creates an "internal" queue with these method calls.
Then it runs the animate calls ONE by ONE.

So, if you want to perform different animations after each other,

we take advantage of the queue functionality:

$("button").click(function(){
var div = $("div");
div.animate({height: '300px',
opacity: '0.4'}, "slow");
div.animate({width: '300px',
opacity: '0.8'}, "slow");
div.animate({height: '100px',
opacity: '0.4'}, "slow");
div.animate({width: '100px',

21 | P a g e
opacity: '0.8'}, "slow");
});

Get Content - text(), html(), and

val()
Three simple, but useful, jQuery methods for DOM manipulation
are:

 text() - Sets or returns the text content of selected

elements
 html() - Sets or returns the content of selected elements
(including HTML markup)
 val() - Sets or returns the value of form fields
The following example demonstrates how to get content with the
jQuery text() and html() methods:

$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});

Get Attributes - attr()

The jQuery attr() method is used to get attribute values.

The following example demonstrates how to get the value of the

href attribute

$("button").click(function(){
alert($("#w3s").attr("href"));
});

22 | P a g e
23 | P a g e
Set Content - text(), html(), and
val()
We will use the same three methods from the previous page
to set content:

 text() - Sets or returns the text content of selected

elements
 html() - Sets or returns the content of selected elements
(including HTML markup)
 val() - Sets or returns the value of form fields
The following example demonstrates how to set content with the
jQuery text(), html(), and val() methods:

$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});

Set Attributes - attr()

The jQuery attr() method is also used to set/change attribute
values.

The following example demonstrates how to change (set) the

value of the href attribute in a link:

$("button").click(function(){
$("#w3s").attr("href", "https://www.w3schools.com/jqu
ery/");
});
24 | P a g e
25 | P a g e