Scribd
Upload
28 views

CHAPTER - 3 - LECTURE NOTES - ON - Jquery

Uploaded by

padmasini chintanpalli
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
28 views

CHAPTER - 3 - LECTURE NOTES - ON - Jquery

Uploaded by

padmasini chintanpalli
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 43

jQuery Introduction

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:
● HTML
● CSS
● JavaScript

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.
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
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

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 a CDN, like Google

Downloading jQuery
There are two versions of jQuery available for downloading:

Production version - this is for your live website because it has been
minified and compressed
Development version - this is for testing and development
(uncompressed and readable code)
Both versions can be downloaded from jQuery.com.

The jQuery library is a single JavaScript file, and you reference it with the
HTML <script> tag (notice that the <script> tag should be inside the <head>
section):
<head>
<script src="jquery-3.5.1.min.js"></script>
</head>

jQuery CDN
If you don't want to download and host jQuery yourself, you can include it
from a CDN (Content Delivery Network).
Google is an example of someone who host jQuery:

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.mi
n.js"></script>

</head>

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()


● A $ sign to define/access jQuery
● A (selector) to "query (or find)" HTML elements
● A jQuery action() to be performed on the element(s)

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".

The Document Ready Event


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.
Here are some examples of actions that can fail if methods are run before
the document is fully loaded:
● Trying to hide an element that is not created yet
● Trying to get the size of an image that is not loaded yet

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

Example
When a user clicks on a button, all <p> elements will be hidden:
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<button>Click me to hide paragraphs</button>


</body>
</html>
OUTPUT:

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")

Example
When a user clicks on a button, the element with id="test" will be hidden:
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"><
/script>

<script>
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
</script>
</head>
<body>

<h2>This is a heading</h2>

<p>This is a paragraph.</p>
<p id="test">This is another paragraph.</p>

<button>Click me</button>

</body>
</html>
OUTPUT:
Examples of jQuery Selectors
Syntax Description

$("*") Selects all elements

$(this) Selects the current HTML element

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

$("[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

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


jQuery Event Methods
jQuery is tailor-made to respond to events in an HTML 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

Here are some common DOM events:


Mouse Events Keyboard Form Events Document/Window
Events Events
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload

Commonly Used jQuery Event Methods


$(document).ready()
The $(document).ready() method allows us to execute a function when the
document is fully loaded.
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:

Example:
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html>
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:
Example:
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"><
/script>
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you double-click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>

</body>
</html>
The on() Method
The on() method attaches one or more event handlers for the selected
elements.
Attach a click event to a <p> element:

Example:
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").on({
mouseenter: function(){
$(this).css("background-color", "lightgray");
},
mouseleave: function(){
$(this).css("background-color", "lightblue");
},
click: function(){
$(this).css("background-color", "yellow");
}
});
});
</script>
</head>
<body>
<p>Click or move the mouse pointer over this paragraph.</p>
</body>
</html>

jQuery Effects - Hide and Show


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

Example:
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"><
/script>

<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p>If you click on the "Hide" button, I will disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>
OUTPUT:

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

$(selector).show(speed,callback);
The optional speed parameter specifies the speed of the hiding/showing,
and can take the following values: "slow", "fast", or milliseconds.
The optional callback parameter is a function to be executed after
the hide() or show() method completes.
The following example demonstrates the speed parameter with hide():
Example:
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"><
/script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000);
});
});
</script>
</head>
<body>
<button>Hide</button>
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</body>
</html>
jQuery toggle()
You can also toggle between hiding and showing an element with
the toggle() method.
Shown elements are hidden and hidden elements are shown:
Example:
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"><
/script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggle(1000);
});
});
</script>
</head>
<body>
<button>Toggle between hiding and showing the paragraphs</button>
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</body>
</html>
jQuery Effects - Sliding

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);
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
sliding completes.
The following example demonstrates the slideDown() method:
Example:
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"><
/script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown("slow");
});
});
</script>
<style>
#panel, #flip {
padding: 5px;
text-align: center;
background-color: green;
border: solid 1px pink;
}

#panel {
padding: 50px;
display: none;
}
</style>
</head>
<body>
<div id="flip">Click to slide down panel</div>
<div id="panel">Hello world!</div>
</body>
</html>
OUTPUT:

jQuery slideUp() Method


The jQuery slideUp() method is used to slide up an element.
Syntax:
$(selector).slideUp(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
sliding completes.
The following example demonstrates the slideUp() method:
Example:
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"><
/script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideUp("slow");
});
});
</script>
<style>
#panel, #flip {
padding: 5px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}

#panel {
padding: 50px;
}
</style>
</head>
<body>
<div id="flip">Click to slide up panel</div>
<div id="panel">Hello world!</div>
</body>
</html>
OUTPUT:

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.

Syntax:
$(selector).slideToggle(speed,callback);
The optional speed parameter can take the following values: "slow", "fast",
milliseconds.
The optional callback parameter is a function to be executed after the
sliding completes.
The following example demonstrates the slideToggle() method:
Example:
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"><
/script>

<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle(2500);
});
});
</script>
<style>
#panel, #flip {
padding: 10px;
text-align: center;
background-color: lightgray;
border: solid 1px red;
}

#panel {
padding: 50px;
display: none;
}
</style>
</head>
<body>
<div id="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div>
</body>
</html>

jQuery Effects - Animation


With jQuery, you can create custom animations.
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.
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:
Example:
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"><
/script>

<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left: '250px'});
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position, and cannot be
moved. To manipulate the position, remember to first set the CSS position
property of the element to relative, fixed, or absolute!</p>

<div style="background:#98bf21; height:100px; width:100px;


position:absolute; "></div>
</body>
</html>

OUTPUT:
jQuery animate() - Manipulate Multiple Properties
Notice that multiple properties can be animated at the same time:
Example:
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"><
/script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
});

});
});
</script>
</head>
<body>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position, and cannot be
moved. To manipulate the position, remember to first set the CSS position
property of the element to relative, fixed, or absolute!</p>

<div
style="background:#98bf21;height:100px;width:100px;position:absolute;"
></div>

</body>
</html>
OUTPUT:
jQuery Method Chaining
Until now we have been writing jQuery statements one at a time (one after
the other).
However, there is a technique called chaining, that allows us to run
multiple jQuery commands, one after the other, on the same element(s).
To chain an action, you simply append the action to the previous action.

The following example chains together the css(), slideUp(),

and slideDown() methods. The "p1" element first changes to red, then it
slides up, and then it slides down:
Example:
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"><
/script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#p1").css("color", "red").slideUp(100).slideDown(2000);
});
});
</script>
</head>
<body>
<p id="p1">jQuery is fun!!</p>
<button>Click me</button>

</body>
</html>
jQuery bind()
The jQuery bind() event is used to attach one or more event handlers for
selected elements from a set of elements. It specifies a function to run when
the event occurs.
It is generally used together with other events of jQuery.
Syntax:
$(selector).bind(event,data,function,map)

Parameters of jQuery bind() event


Parameter Description
Event It is a mandatory parameter. It specifies one or more events
to attach to the elements. If you want to add multiple events
they they must be separated by space.
Data It is an optional parameter. It specifies additional data to pass
along to the function.
Function It is a mandatory parameter. It executes the function to run
when the event occurs.
Map It specifies an event map which contains one or more events
or functions attached to the element.

Example of jQuery bind() event

<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"><
/script>
<script>
$(document).ready(function(){
$("p").bind("click", function(){
alert("This paragraph was clicked.");
});
});
</script>
</head>
<body>
<p>Click on the statement.</p>
</body>
</html>

jQuery unbind() method


The unbind() method in jQuery is used to remove the event handlers from
the selected elements. We can also use this method to remove all or specific
event handlers. It can also be used to stop specified functions.
Syntax
$(selector).unbind(event,function,eventObj)
Parameter values
This method accepts three optional parameter values that are defined as
follows.
event: It is an optional parameter. It specifies one or more events to
remove from the elements. If we want to remove multiple events, they
must be separated by space.
function: It is also an optional parameter. This parameter specifies the
function's name to unbind from the specified element or event.
eventObj: It is also an optional parameter. It comes from the event binding
function.
When we use the unbind() method without using any arguments, the
method will remove all event handlers attached to the element.

Example1
In this example, there are two h3 heading elements and a button. On
hovering the elements with text Hover me, the mouseover event will be
attached to them.
Here, we are using the unbind() function to unbind the mouseover event.
We can check the working of the unbind() method by first hovering
an h3 element and then clicking the given button. On hovering, the style of
h3 heading will get changed, and when we click the given button, the
hovering will not affect another h3 element.
<!DOCTYPE html>
<html>
<head>
<script src =
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("h3").bind("mouseover",function(){
$(this).css({"background-color": "pink", "font-size":
"25px"}).text("Hovered");
});
$("#b3").click(function(){
$("h3").unbind("mouseover");
});
});
</script>
</head>
<body>
<h2> It is an example of using the jQuery unbind() method. </h2>
<p> Move the cursor over the below heading to attach the mouseover
event. </p>
<h3> Hover me </h3>
<button id = "b3"> Remove event </button>
<h3> Hover me </h3>
</body>
</html>

How to detect copy, paste and cut behavior with jQuery


<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"><
/script>
<style>
span{
color:blue;
}
</style>
<script>
$(document).ready(function() {
$("#textA").bind({
copy : function(){
$('#message').text('copy behaviour detected!');
},
paste : function(){
$('#message').text('paste behaviour detected!');
},
cut : function(){
$('#message').text('cut behaviour detected!');
}
});
});
</script>
</head>
<body>
<h1>Detect Cut, Copy and Paste with jQuery</h1>
<form action="#">
<label>Text Box : </label>
<input id="textA" type="text" size="50" value="Copy, paste or cut any
text here" />
</form>
<span id="message"></span>
</body>
</html>
OUTPUT:

jQuery Traversing - Filtering


The first(), last(), eq(), filter() and not() Methods
The most basic filtering methods are first(), last() and eq(), which allow
you to select a specific element based on its position in a group of elements.
Other filtering methods, like filter() and not() allow you to select elements
that match, or do not match, a certain criteria.
jQuery first() Method
The first() method returns the first element of the specified elements.
The following example selects the first <div> element:
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"><
/script>

<script>
$(document).ready(function(){
$("div").first().css("background-color", "yellow");
});
</script>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<p>This is a paragraph.</p>

<div style="border: 1px solid black;">


<p>A paragraph in a div.</p>
<p>Another paragraph in a div.</p>
</div>
<br>

<div style="border: 1px solid black;">


<p>A paragraph in another div.</p>
<p>Another paragraph in another div.</p>
</div>
<br>

<div style="border: 1px solid black;">


<p>A paragraph in another div.</p>
<p>Another paragraph in another div.</p>
</div>
</body>
</html>
OUTPUT:

jQuery last() Method


The last() method returns the last element of the specified elements.
The following example selects the last <div> element:
Example:
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"><
/script>
<script>
$(document).ready(function(){
$("div").last().css("background-color", "yellow");
});
</script>
</head>
<body>

<h1>Welcome to My Homepage</h1>

<p>This is a paragraph.</p>

<div style="border: 1px solid black;">


<p>A paragraph in a div.</p>
<p>Another paragraph in a div.</p>
</div>
<br>

<div style="border: 1px solid black;">


<p>A paragraph in another div.</p>
<p>Another paragraph in another div.</p>
</div>
<br>

<div style="border: 1px solid black;">


<p>A paragraph in another div.</p>
<p>Another paragraph in another div.</p>
</div>

</body>
</html>
OUTPUT:

jQuery eq() method


The eq() method returns an element with a specific index number of the
selected elements.
The index numbers start at 0, so the first element will have the index
number 0 and not 1. The following example selects the second <p> element
(index number 1):
Example:
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"><
/script>

<script>
$(document).ready(function(){
$("p").eq(2).css("background-color", "yellow");
});
</script>
</head>
<body>

<h1>Welcome to My Homepage</h1>

<p>My name is Donald (index 0).</p>


<p>Donald Duck (index 1).</p>
<p>I live in Duckburg (index 2).</p>
<p>My best friend is Mickey (index 3).</p>
</body>
</html>

OUTPUT:
jQuery filter() Method
The filter() method lets you specify a criteria. Elements that do not match
the criteria are removed from the selection, and those that match will be
returned.
The following example returns all <p> elements with class name "intro":
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"><
/script>

<script>
$(document).ready(function(){
$("p").filter(".intro").css("background-color", "yellow");
});
</script>
</head>
<body>

<h1>Welcome to My Homepage</h1>

<p>My name is Donald.</p>


<p class="intro">I live in Duckburg.</p>
<p class="intro">I love Duckburg.</p>
<p>My best friend is Mickey.</p>

</body>
</html>

OUTPUT:

jQuery not() Method


The not() method returns all elements that do not match the criteria.
Tip: The not() method is the opposite of filter().
The following example returns all <p> elements that do not have class
name "intro":
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"><
/script>

<script>
$(document).ready(function(){
$("p").not(".intro").css("background-color", "yellow");
});
</script>
</head>
<body>

<h1>Welcome to My Homepage</h1>

<p>My name is Donald.</p>


<p class="intro">I live in Duckburg.</p>
<p class="intro">I love Duckburg.</p>
<p>My best friend is Mickey.</p>
</body>
</html>
OUTPUT:
Form Validation With jQuery
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"><
/script>

<script>
$(document).ready(function() {
$("#basic-form").validate({
rules: {
name : {
required: true,
minlength: 3
},
age: {
required: true,
number: true,
},
email: {
required: true,
email: true
},

}
});
});
</script>
</head>
<body>

<form id="basic-form" action="" method="post">


<p>
<label for="name">Name <span>(required, at least 3
characters)</span></label>
<input id="name" name="name" minlength="3" type="text" required>
</p>
<p>
<label for="age">Age <span>(required)</span></label>
<input id="age" type="number" name="age" required>
</p>
<p>
<label for="email">E-Mail <span>(required)</span></label>
<input id="email" type="email" name="email" required>
</p>
<p>
<input class="submit" type="submit" value="SUBMIT">
</p>
</form>
</body>
</html>

You might also like