Module 3 Notes

Web Programming(20CSI43) Module-3
Nagarjuna College of Engineering and Technology,

Bengaluru
Autonomous College Under VTU
Department of CSE (Data Science)
WEB PROGRAMMING (IC)

20CSI43
MODULE 3
JQuery
By
Prof. Likhith S R
Assistant. Professor
Dept. of CSE(DS), NCET
Dept. of CSE(Data Science), NCET 1 2021-22

Module - III
JQuery: Introduction, Selectors, Events, jQuery DOM Manipulation: jQuery HTML,
jQuery CSS, jQuery Event Model, jQuery Effects and Animations, jQuery Plugins.
jQuery Introduction
The purpose of jQuery is to make it much easier to use JavaScript on your website.
What is jQuery?
• jQuery is a lightweight, "write less, do more", JavaScript library.
• 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
Tip: In addition, jQuery has plugins for almost any task out there.
Why jQuery?
• There are lots of other JavaScript frameworks out there, but jQuery seems to be the
most popular, and also the most extendable.
• Many of the biggest companies on the Web use jQuery, such as:
1. Google
2. Microsoft
3. IBM
4. 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.6.0.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.6.0/
jquery.min.js"></script>
</head>
• Microsoft CDN:
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.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

• Notice 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
Tip: The jQuery team has also created an even shorter method for the document ready
event:
$(function(){
// jQuery methods go here...
});
• Use the syntax you prefer. We think that the document ready event is easier to
understand when reading the code.
How to Call a jQuery Library Functions?
• If you want an event to work on your page, you should call it inside the $
(document).ready() function.
• Everything inside it will load as soon as the DOM is loaded and before the page
contents are loaded.
• To do this, we register a ready event for the document as follows:

$(document).ready(function()
{
// do stuff when DOM is ready
});
The $() Factory Function
• All type of selectors available in jQuery, always start with the dollar sign and
parentheses:$(). The factory function $() makes use of the following three building
blocks while selecting elements in a given document:
S.N. Selector & Description
1 Tag Name Represents a tag name available in the DOM. For example $('p') selects all
paragraphs in the document
2 Tag ID Represents a tag available with the given ID in the DOM. For example $
('#someid') selects the single element in the document that has an ID of some-id.
3 Tag Class Represents a tag available with the given class in the DOM. For example $
('.some-class') selects all elements in the document that have a class of someclass.
The $() Factory Function

• All the above items can be used either on their own or in combination with other
selectors. All the jQuery selectors are based on the same principle except some
tweaking.
• NOTE: The factory function $() is a synonym of jQuery() function.
• So in case you are using any other JavaScript library where $ sign is conflicting with
some thing else then you can replace $ sign by jQuery name and you can use
function jQuery() instead of $().
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: $().
How to Use Selectors?

• The selectors are very useful and would be required at every step while using
jQuery.
• They get the exact element that you want from your HTML document.
• Following table lists down few basic selectors and explains them with examples
Selector & Description
1 Name
Selects all elements which match with the given element Name.
2 #ID
Selects a single element which matches with the given ID.
3 .Class
Selects all elements which matches with the given Class.
4 Universal (*)
Selects all elements available in a DOM.
5 Multiple Elements E, F, G
Selects the combined results of all the specified selectors E, F or G.
The element Selector

• Description The element selector selects all the elements that have a tag name of T.
• Syntax :Here is the simple syntax to use this selector −
$('tagname')
Parameters Here is the description of all the parameters used by this selector −
• tagname − Any standard HTML tag name like div, p, em, img, li etc.
Example:
• $('p') − Selects all elements with a tag name of p in the document.
• $('div') − Selects all elements with a tag name of div in the document.

$("button").click(function(){
$("p").hide();
});
});
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")
$("#test").hide();
});
});
.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")
$(".test").hide();
});
});
Other Examples

Syntax Description
$("*") 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
Selects all <a> elements with a target attribute value equal to

$("a[target='_blank']")
"_blank"
Selects all <a> elements with a target attribute value NOT equal to
$("a[target!='_blank']")
"_blank"
Selects all <button> elements and <input> elements of

$(":button")
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
The term "fires/fired" is often used with events. Example: "The keypress event is fired, the
moment you press a key".
• Here are some common DOM events:
Mouse Events Keyboard Events Form Events Document/Window

Events
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload
jQuery Syntax For Event Methods

• 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!!
});
Commonly Used jQuery 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.
• 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:
$("#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:
blur()
The blur() method attaches an event handler function to an HTML form field.
The function is executed when the form field loses focus:
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();
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$("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 DOM Manipulation

• jQuery provides a number of methods to manipulate DOM in efficient way. You do
not need to write big and complex code to set or get the content of any HTML
element.
• jQuery provides methods such as attr(), html(), text() and val() which act as getters
and setters to manipulate the content from HTML documents.
Here are some basic operations which you can perform on DOM elements with the help of
jQuery standard library methods −
• Extract the content of an element
• Change the content of an element
• Adding a child element under an existing element
• Adding a parent element above an existing element
• Adding an element before or after an existing element
• Replace an existing element with another element
• Delete an existing element
• Wrapping content with-in an element
jQuery - Attributes Manipulation
Some of the more common attributes are −

• className
• tagName
• id
• href
• title
• rel
• src
• style
jQuery - Get Standard Attributes

• jQuery attr() method is used to fetch the value of any standard attribute from the
matched HTML element(s). We will use jQuery Selectors to match the desired
element(s) and then we will apply attr() method to get the attribute value for the
element.
<!doctype html>
<html> <head> <title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
{ $("button").click(function(){
alert( "Href = " + $("#home").attr("href"));
alert( "Title = " + $("#home").attr("title")); });
});
</script> </head>
<body> <p>Click the below button to see the result:</p>
<p><a id="home" href="index.htm" title="Tutorials Point">Home</a></p>
<button>Get Attribute</button>
</body> </html>
jQuery - Get Content

• jQuery provides html() and text() methods to extract the content of the matched
HTML element. Following is the syntax of these two methods:

$(selector).html();
$(selector).text();
• The jQuery text() method returns plain text value of the content where
as html() returns the content with HTML tags. You will need to use jQuery selectors
to select the target element.
<!doctype html> <html>

<head> <title>The jQuery Example</title>
<script>
{ $("#text").click(function()
{ alert($("p").text()); });
$("#html").click(function()
{ alert($("p").html()); });
});
</script> </head>
<body>
<p>The quick <b>brown fox</b> jumps over the <b>lazy dog</b></p>
<button id="text">Get Text</button> <button id="html">Get HTML</button>
</body>
</html>
jQuery - Set Content

• jQuery html() and text() methods can be used to set the content of the matched
HTML element. Following is the syntax of these two methods when they are used to
set the values:
$(selector).html(val, [function]);
$(selector).text(val, [function]);
• Here val is he HTML of text content to be set for the element. We can provide an
optional callback function to these methods which will be called when the value of
the element will be set.

• The jQuery text() method sets plain text value of the content where
as html() method sets the content with HTML tags.
<!doctype html>
<script>
{ $("#text").click(function(){
$("p").text("The quick <b>brown fox</b> jumps over the <b>lazy dog</b>");
});
$("#html").click(function(){
$("p").html("The quick <b>brown fox</b> jumps over the <b>lazy dog</b>"); });
}); </script>
</head>
<body>
<p>Click on any of the two buttons to see the result</p>
<button id="text">Set Text</button>
<button id="html">Set HTML</button>
</body>
</html>
Set Form Fields

• jQuery val() method is also used to set the value from any form field. Following is
simple syntax of this method when it is used to set the value.
$(selector).val(val);
• Here val is the value to be set for the input field. We can provide an optional
callback function which will be called when the value of the field will be set.
<!doctype html> <html> <head> <title>The jQuery Example</title>

<script>

$(document).ready(function() {
$("#b1").click(function(){
$("#name").val("Zara Ali"); });
$("#class").val("Class 12th"); }); });
</script> </head>
<body>
<p>Name: <input type="text" id="name" value=""/></p>
<p>Class: <input type="text" id="class" value=""/></p>
<button id="b1">Set Name</button>
<button id="b2">Set Class</button>
</body>
</html>
jQuery - Replacement Elements

• The jQuery replaceWith() method can be used to replace a complete DOM element
with another HTML or DOM element. Following is the syntax of the method:
$(selector).replaceWith(val);
• Here val is what you want to have instead of original element. This could be HTML
or simple text.

<script>
$("p").replaceWith("<h1>This is new heading</h1>"); });
$("h1").replaceWith("<h2>This is another heading</h2>");
}); });
</script> </head>
<body>
<p>Click below button to replace me</p>
<button id="b1">Replace Paragraph</button>

<button id="b2">Replace Heading</button>

</body>
</html>
jQuery - CSS Classes
• jQuery provides three methods addClass(), removeClass() and toggleClass() to
manipulate CSS classes of the elements.
jQuery - Adding CSS Classes
• jQuery provides addClass() method to add a CSS class to the matched HTML
element(s). Following is the syntax of the addClass() method:
$(selector).addClass(className);
$(selector).addClass("Class1 Class2");
• This method takes a parameter which is one or more space-separated classes to be
added to the class attribute of each matched element. More than one class may be
added at a time, separated by a space, to the set of matched elements,
• Please note that addClass() method does not replace an existing class, rather it
simply adds the class, appending it to any which may already be assigned to the
elements

<script>
$( ".hello" ).addClass("big" );
$( ".goodbye" ).addClass("small" ); }); });
</script>
<style> .big{ font-weight: bold; font-size:20px; } .small{ font-weight: normal; font-
size:10px; }
</style>
</head>
<body>
<div class="container">
<h2>jQuery addClass() Method</h2>
<div class="hello">Hello</div>

<div class="goodbye">Goodbye</div> </div> <br>

<button>Add Class</button>
</body> </html>
jQuery - Removing CSS Classes

• jQuery provides removeClass() method to remove an existing CSS class from the
matched HTML element(s). Following is the syntax of the removeClass() method:
$(selector).removeClass(className);
removed from the class attribute of each matched element.
• More than one class may be removed at a time, separated by a space, from the set of
matched elements, like so:
$(selector).removeClass("Class1 Class2");

<script>
$( ".hello" ).removeClass("big" );
$( ".goodbye" ).removeClass("small" ); }); });
</script>
<style> .big{ font-weight: bold; font-size:20px; } .small{ font-weight: normal; font-
size:10px; } </style>
</head>
<body>
<h2>jQuery removeClass() Method</h2>
<div class="hello big">Hello</div>
<div class="goodbye small">Goodbye</div>
</div> <br>
<button>Remove Class</button>
</body> </html>

jQuery - Toggle CSS Classes

• jQuery provides toggleClass() method to toggle an CSS class on the matched HTML
element(s). Following is the syntax of the toggleClass() method:
$(selector).toggleClass(className);
toggled. If an element in the matched set of elements already has the class, then it is
removed; if an element does not have the class, then it is added.

<script>
$( ".hello" ).toggleClass("big" ); }); }); </script>
<style> .big{ font-weight: bold; font-size:20px; } </style> </head>
<body>
<h2>jQuery toggleClass() Method</h2>
<div class="hello big">Hello</div>
<div class="goodbye">Goodbye</div>
</div> <br>
<button>Toggle Class</button>
</body>
</html>
jQuery - CSS Properties

• jQuery provides css() method to manipulate CSS properties of the matched elements.
• JQuery css() method does not modify the content of the jQuery object but they are
used to get and set CSS properties on DOM elements.
jQuery - Get CSS Properties

• jQuery css() method can be used to get the value of a CSS property associated with
the first matched HTML element. Following is the syntax of the css() method:

$(selector).css(propertyName);
<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script>
alert("Background color = " + $("div").css("background-color"));
});
});
</script>
<style>
button{margin:10px;width:150px;cursor:pointer}
div{ margin:10px;padding:12px; width:125px;}
</style>
</head>
<body>
<p>Click the below button to see the result:</p>
<div style="background-color:#9c9cff;">Blue</div>
<div style="background-color:#93ff93;">Green</div>
<button>Get CSS Property</button>

</body>
</html>
jQuery - Set CSS Properties

jQuery css() method can be used to set the value of one or more CSS properties associated
with the matched HTML element. Following is the syntax of the css() method:

$(selector).css(propertyName, value);
• Here both the parameters are required, propertyName represents a CSS property
name where as value represents a valid value of the property.
<!doctype html>
<html>
<head>
<script>
var color = $("div").css("background-color");
$("p").css("color", color);
});
});
</script>
<style>
</style>
</head>
<body>
<button>Set CSS Property</button>

</body>
</html>
jQuery - Set Multiple CSS Properties
• You can apply multiple CSS properties on the matched elements using a single
jQuery method css(). You can apply as many properties as you like in a single call.

• Following is the syntax of the css() method to set multiple CSS properties:
$(selector).css({propertyName1:value1, propertyName2:value2,...});
<!doctype html>
<html>
<head>
<script>
$("div").css({"background-color":"#fb7c7c", "font-size": "25px"});
});
});
</script>
<style>
</style>
</head>
<body>
<button>Set CSS Property</button>

</body>
</html>
jQuery Effects
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);
• 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
$("p").hide(1000);
});
<!DOCTYPE html>
<html>
<head>
<script>
$("#hide").click(function(){
$("#p2").hide();
});
$("#show").click(function(){
$("#p2").show();
});
});

$("#w").click(function(){
$("#p1").hide(1000);
});
});
</script>
</head>
<body>
<p id="p2">If you click on the "Hide" button, I will disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
<br>
<br>
<div>
<button id="w">Hide1</button>
<p id="p1">This is a paragraph with little content.</p>

<p >This is another small paragraph.</p>
</div>
</body>
</html>
jQuery Effects - Fading

• 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:
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
<!DOCTYPE html>
<html>
<head>
<script>
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
});
</script>
</head>
<body>
<p>Demonstrate fadeIn() with different parameters.</p>
<button>Click to fade in boxes</button><br><br>

<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></
div><br>

<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></

div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></
div>
</body>
</html>
jQuery fadeOut() Method

• The jQuery fadeOut() method is used to fade out a visible element.
Syntax:
$(selector).fadeOut(speed,callback);
completes.
• The following example demonstrates the fadeOut() method with different
parameters:
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
<!DOCTYPE html>
<html>
<head>
<script>
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});

});
</script>
</head>
<body>
<p>Demonstrate fadeOut() with different parameters.</p>
<button>Click to fade out boxes</button><br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>

<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>
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);
completes.
• The following example demonstrates the fadeToggle() method with different
parameters:
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
<!DOCTYPE html>
<html>

<head>
<script>
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
});
</script>
</head>
<body>
<p>Demonstrate fadeToggle() with different speed parameters.</p>
<button>Click to fade in/out boxes</button><br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>

<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
</body>
</html>
jQuery fadeTo() Method

• The jQuery fadeTo() method allows fading to a given opacity (value between 0 and
1).
Syntax:
$(selector).fadeTo(speed,opacity,callback);
• The required speed parameter specifies the duration of the effect. It can take the
• The required opacity parameter in the fadeTo() method specifies fading to a given
opacity (value between 0 and 1).
• The optional callback parameter is a function to be executed after the function
completes.
• The following example demonstrates the fadeTo() method with different parameters:
$("#div1").fadeTo("slow", 0.15);
});
<!DOCTYPE html>
<html>
<head>
<script>
});
});
</script>
</head>
<body>
<p>Demonstrate fadeTo() with different parameters.</p>

<button>Click to fade boxes</button><br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>

<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
</body>
</html>
jQuery Effects - Sliding
• 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 callback parameter is a function to be executed after the sliding
completes.
• The following example demonstrates the slideDown() method:
$("#flip").click(function(){
$("#panel").slideDown();
});
<!DOCTYPE html>
<html>
<head>
<script>

$("#panel").slideDown("slow");
});
});
</script>
<style>
#panel, #flip {
padding: 5px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}
#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>
jQuery slideUp() Method

• The jQuery slideUp() method is used to slide up an element.
Syntax:
$(selector).slideUp(speed,callback);


completes.
• The following example demonstrates the slideUp() method:
$("#panel").slideUp();
});
<!DOCTYPE html>
<html>
<head>
<script>
$("#panel").slideUp("slow");
});
});
</script>
<style>
#panel, #flip {
padding: 5px;
text-align: center;
}
#panel {
padding: 50px;
}
</style>
</head>
<body>
<div id="flip">Click to slide up panel</div>

</body>
</html>
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);
• The optional speed parameter can take the following values: "slow", "fast",
milliseconds.
completes.
• The following example demonstrates the slideToggle() method:
$("#panel").slideToggle();
});
<!DOCTYPE html>
<html>
<head>
<script>
$("#panel").slideToggle("slow");
});
});
</script>
<style>
#panel, #flip {
padding: 5px;
text-align: center;
}

#panel {
padding: 50px;
display: none;
}
</style>
</head>
<body>
<div id="flip">Click to slide the panel down or up</div>
</body>
</html>
jQuery Effects - Animation
• jQuery animate() method to create custom animations on a web pages or any other
jQuery (Javascript) Application
jQuery animate() Method
• The jQuery animate() method is used to create custom animations by changing the
CSS numerical properties of a DOM element, for example, width, height, margin,
padding, opacity, top, left, etc.
• Following is a simple syntax of animate() method:
$(selector).animate({ properties }, [speed, callback] );
$("div").animate({left: '250px'});
});
<!DOCTYPE html>
<html>
<head>
<script>
$("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>
jQuery animate() - Manipulate Multiple Properties
• Notice that multiple properties can be animated at the same time:
$("div").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
});
});
<!DOCTYPE html>
<html>
<head>
<script>
$("div").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
});
});
});
</script>
</head>

<body>
</body>
</html>
jQuery 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:
$("div").animate({
left: '250px',
height: '+=150px',
width: '+=150px'
});
});
<!DOCTYPE html>
<html>
<head>
<script>
$("div").animate({
left: '250px',
height: '+=150px',
width: '+=150px'
});
});
});
</script>
</head>
<body>

</body>
</html>
jQuery animate() - Using Pre-defined Values
• You can even specify a property's animation value as "show", "hide", or "toggle":
$("div").animate({
height: 'toggle'
});
});
jQuery 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:
var div = $("div");
div.animate({height: '300px', opacity: '0.4'}, "slow");
div.animate({width: '300px', opacity: '0.8'}, "slow");
});
<!DOCTYPE html>
<html>
<head>
<script>
var div = $("div");


});
});
</script>
</head>
<body>
</body>
</html>
Ex2;
<!DOCTYPE html>
<html>
<head>
<script>
var div = $("div");
div.animate({left: '100px'}, "slow");
div.animate({fontSize: '3em'}, "slow");
});
});
</script>
</head>
<body>

<div
style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>
</body>
</html>
Animate-toggel
<!DOCTYPE html>
<html>
<head>
<script>
$("div").animate({
height: 'toggle'
});
});
});
</script>
</head>
<body>
<p>Click the button multiple times to toggle the animation.</p>
</body>
</html>
jQuery - Plugins

• A plug-in is piece of code written in a standard JavaScript file. These files provide
useful jQuery methods which can be used along with jQuery library methods.
• There are plenty of jQuery plug-in available which you can download from
repository link at https://jquery.com/plugins.
• How to use Plugins
• To make a plug-in's methods available to us, we include plug-in file very similar to
jQuery library file in the <head> of the document.
• We must ensure that it appears after the main jQuery source file, and before our
custom JavaScript code.
<script type = "text/javascript" src = "https://www.tutorialspoint.com/jquery/jquery-
3.6.0.js"> </script>
<script src = "jquery.plug-in.js" type = "text/javascript"></script>
<script src = "custom.js" type = "text/javascript"></script>
<script type = "text/javascript" language = "javascript">
{
.......your custom code.....
});
</script>
</head>
<body> ............................. </body>
</html>
jQuery - Plugins
• jQuery - PagePiling.js
• jQuery - Flickerplate.js
• jQuery - Multiscroll.js
• jQuery - Slidebar.js
• jQuery - Rowgrid.js
• jQuery - Alertify.js
• jQuery - Progressbar.js
• jQuery - Slideshow.js
• jQuery - Drawsvg.js

• jQuery - Tagsort.js
• jQuery - LogosDistort.js
• jQuery - Filer.js
• jQuery - Whatsnearby.js
• jQuery - Checkout.js
• jQuery - Blockrain.js
• jQuery - Producttour.js
• jQuery - Megadropdown.js
• jQuery - Weather.js

Module 3 Notes

Uploaded by

Copyright:

Available Formats

Module 3 Notes

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Module 3 Notes

Uploaded by

Copyright:

Available Formats

Web Programming(20CSI43) Module-3

Nagarjuna College of Engineering and Technology,

WEB PROGRAMMING (IC)

Dept. of CSE(Data Science), NCET 1 2021-22

Adding jQuery to Your Web Pages

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

The Document Ready Event

// jQuery methods go here...

Dept. of CSE(Data Science), NCET 4 2021-22

S.N. Selector & Description

The $() Factory Function

Dept. of CSE(Data Science), NCET 5 2021-22

How to Use Selectors?

Selector & Description

The element Selector

Dept. of CSE(Data Science), NCET 6 2021-22

Dept. of CSE(Data Science), NCET 7 2021-22

$("*") 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-child") Selects the first <li> element of every <ul>

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

Selects all <a> elements with a target attribute value equal to

Selects all <button> elements and <input> elements of

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

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

jQuery Event Methods

Mouse Events Keyboard Events Form Events Document/Window

click keypress submit load

dblclick keydown change resize

mouseenter keyup focus scroll

mouseleave blur unload

jQuery Syntax For Event Methods

Commonly Used jQuery Event Methods

Dept. of CSE(Data Science), NCET 10 2021-22

The on() Method

Dept. of CSE(Data Science), NCET 11 2021-22

jQuery DOM Manipulation

jQuery - Attributes Manipulation

Some of the more common attributes are −

Dept. of CSE(Data Science), NCET 12 2021-22

jQuery - Get Standard Attributes

jQuery - Get Content

Dept. of CSE(Data Science), NCET 13 2021-22

<!doctype html> <html>

jQuery - Set Content

Dept. of CSE(Data Science), NCET 14 2021-22

Set Form Fields

<!doctype html> <html> <head> <title>The jQuery Example</title>

Dept. of CSE(Data Science), NCET 15 2021-22

jQuery - Replacement Elements

<!doctype html> <html> <head> <title>The jQuery Example</title>

Dept. of CSE(Data Science), NCET 16 2021-22

<button id="b2">Replace Heading</button>

<!doctype html> <html> <head> <title>The jQuery Example</title>

Dept. of CSE(Data Science), NCET 17 2021-22

<div class="goodbye">Goodbye</div> </div> <br>

jQuery - Removing CSS Classes