Practical 8 - Programs on Basic jQuery
A. jQuery Basic, jQuery Events
Aim:- To Implement jQuery Basic and jQuery Events
1)Write a jquery to change the text contents of the element on
button click.
Code:-
<!doctype html>
<html>
<head>
<title>My Program</title>
<script
src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script
>
<script>
$(document).ready(function() {
$("button").click(function(){
document.write("Hello,World");
})
});
</script>
</head>
<body>
<p>Hey there! Welcome to jQuery</p>
<button>Click Me</button>
</body>
</html>
Output:-
2. Write a jquery to select elements by classname, id& element
name.
Code:-
<!doctype html>
<html>
<head>
<title>My Program</title>
<script
src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script
>
<script>
$(document).ready(function() {
$(".class1").css("background", "red");
$("#id1").css("background", "magenta");
$("h1").css("background", "yellow")
});
</script>
</head>
<body>
<p class="class1">CSS Selectors:Class</p>
<h1>CSS Selectors:Element</h1>
<p id="id1">CSS Selectors:id</p>
</body>
</html>
Output:-
3. Write a jquery to show the use of
click(),hover(),on(),off(),trigger() events
Code:-
<!doctype html>
<html>
<head>
<title>My Program</title>
<script
src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script
>
<script>
$(document).ready(function()
{
$("#b1").hover(function()
{
document.write("Hello World");
});
$("p").on("click", function()
{
$(this).css("background-color", "pink");
});
$("#b2").click(function()
{
$("p").off("click");
});
$("#b3").on("click",function()
{
$("#t1").hide();
});
$("input").select(function()
{
$("input").after("Text marked!");
});
$("#b4").on("click",function()
{
$("input").trigger("select");
});
});
</script>
</head>
<body>
<button id="b1">hover</button><br/>
<p> Hello in Mulund College Of Commerce!</p>
<p>TYIT Student</p>
<button id="b2">off</button><br/><br/>
<p id="t1">Hello World</p>
<br/>
<button id ="b3">on</button><br/><br/>
<input type="text" value="Hello World" /><br/><br/>
<button id="b4">trigger</button>
</body>
</html>
Output:-
B. jQuery Selectors, jQuery Hide and Show effects.
Aim:- To implement jQuery Selectors, jQuery Hide and Show
effects
1)Write a jQuery to create animated show hide effects
Code:-
<!doctype html>
<html>
<head>
<title>Online jQuery Editor</title>
<script
src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script
>
<script>
$(document).ready(function() {
$("#b1").click(function(){
$("p").hide();
});
$("#b2").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p>SIES(Nerul)College of Arts Science &Commerce</p>
<button id="b1">Hide</button>
<button id="b2">Show</button>
</body>
</html>
Output:-
2) Write a jQuery to create a simple toggle effect
Code:- with toggle
<!doctype html>
<html>
<head>
<title>Online jQuery Editor</title>
<script
src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script
>
<script>
$(document).ready(function() {
$("button").click(function(){
$("p").toggle();
});
});
</script>
</head>
<body>
<p>Lorem ipsum dolor sit amet,consector adipiscing elit, sed
do
eiusmod tempor incididunt ut labore et dolore magna
aliqua</p>
<button>Toggle between hide() and show()</button>
</body>
</html>
Output:-
C. jQuery fading effects, jQuery Sliding effects.
Aim:- To Implement jQuery fading effects and jQuery Sliding
effects
1) Write a jQuery to create fade-in and fade-out effects
Code:-
<!doctype html>
<html>
<head>
<title>Online jQuery Editor</title>
<script
src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script
>
<script>
$(document).ready(function() {
$(".btn1").click(function(){
$("p").fadeOut();
});
$(".btn2").click(function(){
$("p").fadeIn();
});
});
</script>
</head>
<body>
<p> SIES(Nerul) College of Arts, Science & Commerce</p>
<button class="btn1">Fade Out</button>
<button class="btn2">Fade In</button>
</body>
</html>
Output:-
2) Write a jQuery to create a simple toggle effect on fade-in and
fade-out.
<!doctype html>
<html>
<head>
<title>Online jQuery Editor</title>
<script
src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script
>
<script>
$(document).ready(function() {
$(".toggle-btn").click(function(){
$("p").fadeToggle();
});
});
</script>
</head>
<body>
<button type="button" class="toggle-btn">Click</button>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
</body>
</html>
Output:-
3). Write a jQuery to create slide-up and slide-down effect.
Code:-
<!doctype html>
<html>
<head>
<title>Online jQuery Editor</title>
<script
src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script
>
<script>
$(document).ready(function() {
$(".up-btn1").click(function(){
$("p").slideUp();
});
$(".down-btn2").click(function(){
$("p").slideDown();
});
});
</script>
</head>
<body>
<p> SIES(Nerul) College of Arts, Science & Commerce</p>
<button type="button" class="up-btn1">Slide up</button>
<button type="button" class="down-btn2">Slide down</button>
</body>
</html>
Output:-
4). Write a jQuery to toggle slide-up and slide-down effect.
Code:-
<!doctype html>
<html>
<head>
<title>Online jQuery Editor</title>
<script
src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script
>
<script>
$(document).ready(function() {
$(".toggle-btn").click(function(){
$("p").slideToggle();
});
});
</script>
</head>
<body>
<button type="button" class="toggle-btn">Click</button>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
</body>
</html>
Output:-
Practical 9:- jQuery Advanced
A. jQuery Animation effects, jQuery Chaining
Aim:- To implement jQuery Animation effects and jQuery
Chaining
1) Write a jQuery to create an animation effect
Code:-
<!doctype html>
<html>
<head>
<title>Online jQuery Editor</title>
<script
src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script
>
<style>
img{
position:relative;/*Required to move element*/
}
</style>
<script>
$(document).ready(function() {
$("button").click(function(){
$("img").animate({left:300});
});
});
</script>
</head>
<body>
<button>Start Animation</button><br/>
<img
src="https://images.unsplash.com/photo-1604085572504-a392ddf
0d86a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8
b3JhbmdlJTIwZmxvd2VyfGVufDB8fDB8fHww&w=1000&q=80"
alt="Flower" height="270px" width="240px" />
</body>
</html>
Output:-
2)Write a jQuery to create an animation effect using multiple css
properties.
Code:-
<title>Online jQuery Editor</title>
<script
src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script
>
<style type="text/css">
.box{
width:100px;
height:100px;
background:#9d7ede;
margin-top:30;
border-style:solid;
border-color:#6f40ce;
}
</style>
<script>
$(document).ready(function() {
$("button").click(function(){
$(".box").animate({
width:"300px",
height:"300px",
marginLeft:"150px",
borderWidth:"10px",
opacity:0.5
});
});
});
</script>
</head>
<body>
<button type="button">Start Animation</button>
<div class="box"></div>
</body>
</html>
Output:-
3)Write a jQuery to perform Method chaining
Code:-
<!doctype html>
<html>
<head>
<title>Online jQuery Editor</title>
<script
src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script
>
<script>
$(document).ready(function() {
$("button").click(function(){
$("#p1").css("color",
"red").slideUp(2000).slideDown(2000);
});
});
</script>
</head>
<body>
<p id="p1">Welcome to jQuery!</p>
<button>Click me</button>
</body>
</html>
Output:-
B. jQuery Callback, jQuery Get and Set Contents
Aim:- To implement jQuery Callback, jQuery Get and Set
Contents
1) Write a jQuery effect method with Callback function
Code:-
<!doctype html>
<html>
<head>
<title>My Program</title>
<script
src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script
>
<script>
$(document).ready(function() {
$("button").click(function(){
$("p").hide("slow", function(){
alert("The paragraph is now hidden");
});
});
});
</script>
</head>
<body>
<button>Click</button>
<p>This is paragraph</p>
</body>
</html>
Output:-
2)Write a jQuery to get and set text contents of the elements.
Code:-
<title>My Program</title>
<script
src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script
>
<script>
$(document).ready(function() {
$(".b1").click(function(){
var str=$("p").text();
alert(str);
});
$(".b2").click(function(){
$("p").text("This is demo text.");
});
});
</script>
</head>
<body>
<button class="b1">Get All Paragraph's Text.</button>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button class="b2">Set All Paragraph's Text</button>
<p>This is a test paragraph.</p>
<p>This is another test paragraph.</p>
</body>
</html>
Output:-
3)Write a jQuery to get and set HTML contents of the elements
Code:-
<!doctype html>
<html>
<head>
<title>Online jQuery Editor</title>
<script
src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script
>
<script>
$(document).ready(function() {
$(".b1").click(function(){
var str=$("p").html();
alert(str);
});
$(".b2").click(function(){
$("body").html("<p>Hello World<p>");
});
});
</script>
</head>
<body>
<button class="b1">Get Paragraph's</button>
<p>The quick<b>brown fox</b>jumps over the lazy dog.</p>
<button class="b2">Write Message</button>
</body>
</html>
Output:-
4) Write a jQuery to get and set value of attribute of an element.
Code:-
<!doctype html>
<html>
<head>
<title>Online jQuery Editor</title>
<script
src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script
>
<script>
$(document).ready(function() {
$(".b1").click(function(){
var str=$("img#jquery").attr("alt");
alert(str);
});
$(".b2").click(function(){
$('input[type="checkbox"]').attr("checked","checked");
});
});
</script>
</head>
<body>
<button class="b1">Get Link's HREF
Attribute</button><br/><br/>
<img id="jquery"
src="https://th.bing.com/th/id/OIP.ofw3TU4aVP-v2XEizJ0eJwHaE
o?w=358&h=185&c=7&r=0&o=5&pid=1.7" alt="jquery"
heigth="290px"
width="250px"/><br/><br/>
<p><input type="checkbox"/> I agree with terms and
conditions.</p>
<button class="b2">Check</button>
</body>
</html>
Output:-
C. jQuery Insert Content, jQuery Remove Elements and Attribute
Aim:- To implement jQuery Insert Content, jQuery Remove
Elements and Attribute
1)Write a jQuery to Insert HTML element at the beginning and
end of the element.
Code:-
<!doctype html>
<html>
<head>
<title>Online jQuery Editor</title>
<script
src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script
>
<script>
$(document).ready(function() {
$(".b1").click(function(){
$("p").prepend("<strong>Note:</strong> ");
});
$(".b2").click(function(){
$("#container").append("This is demo text.");
});
});
</script>
</head>
<body>
<button class="b1">Insert Text at Begin</button>
<p>Welcome in Jquery</p>
<button class="b2">Insert Text at End</button>
<div id="container">
<p>Mulund College of Commerce</p>
</div>
</body>
</html>
Output:-
2)Write a jQuery to Insert multiple HTML elements at the
beginning and end of the elements.
Code:-
<!doctype html>
<html>
<head>
<title>Online jQuery Editor</title>
<script
src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script
>
<script>
$(document).ready(function() {
$(".b1").click(function(){
var newHeading="<h1>Important Note:</h1>";
var newParagraph=document.createElement("p");
newParagraph.innerHTML="<em>Hello World</em>";
$("body").append(newHeading,newParagraph);
});
});
</script>
</head>
<body>
<button class="b1">Insert Contents</button>
<p>Hello Everyone welcome to SIES(Nerul)College of
Arts,Science and Comerce</p>
</body>
</html>
Output:-
3)Write a jQuery to insert multiple HTML elements before and
after the elements.
Code:-
<!doctype html>
<html>
<head>
<title>Online jQuery Editor</title>
<script
src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script
>
<script>
$(document).ready(function() {
$(".b1").click(function(){
var newHeading="<h1>Important Note 1:</h1>";
var newParagraph=document.createElement("p");
newParagraph.innerHTML="<em>Switch off the pc before
leaving the lab</em>";
$("p").before(newHeading, newParagraph);
});
$(".b2").click(function(){
var newHeading="<h1>Important Note 2:</h1>";
var newParagraph=document.createElement("p");
newParagraph.innerHTML="<em>Switch off the light before
leaving the class</em>";
$("body").append(newHeading,newParagraph);
});
});
</script>
</head>
<body>
<button class="b1">Insert Contents Begin</button>
<p>Hello Everyone welcome to SIES(Nerul)College of
Arts,Science and Commerce</p>
<button class="b2">Insert content After</button>
</body>
</html>
Output:-
4)Write a jQuery to remove the content of the element
Code:-
<!doctype html>
<html>
<head>
<title>Online jQuery Editor</title>
<script
src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script
>
<script>
$(document).ready(function() {
$(".btn").click(function(){
$("div#demo").remove();
});
});
</script>
</head>
<body>
<div id="demo">
<p>Inside Div Element</p>
</div>
<p>Outside Div Element</p>
<button class="btn">Hide the elements inside div</button>
</body>
</html>
Output:-
5)Write a jQuery to remove the parent element of an HTML
element from the page.
Code:-
<!doctype html>
<html>
<head>
<title>Online jQuery Editor</title>
<script
src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script
>
<script>
$(document).ready(function() {
$("button").click(function(){
$("p").unwrap();
});
});
</script>
<style>
div{
background-color:yellow;
}
article{
background-color:pink;
}
</style>
</head>
<body>
<div>
<p>This is a paragraph inside a div element.</p>
</div>
<article>
<p>This is paragraph inside an article element.</p>
</article>
<button>Remove the parent element of each p
element</button>
</body>
</html>
Output:-
6)Write a jQuery to remove attribute of the HTML elements.
Code:-
<!doctype html>
<html>
<head>
<title>Online jQuery Editor</title>
<script
src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script
>
<script>
$(document).ready(function() {
$("button").click(function(){
$("p").removeAttr("style");
});
});
</script>
<style>
div{
background-color:yellow;
}
article{
background-color:pink;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p style="font-size: 120%; color:red">This is a paragraph.</p>
<p style="font-weight:bold;color:blue">This is another
paragraph</p>
<button>Remove attribute for all p element</button>
</body>
</html>
Output:-
7)Write a jQuery to add and remove css classes from the HTML
element.
Code:-
<!doctype html>
<html>
<head>
<title>Online jQuery Editor</title>
<script
src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script
>
<script>
$(document).ready(function() {
$("button").click(function(){
$("p").removeClass("intro");
});
});
</script>
<style>
.intro{
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p class="intro">This is a paragraph.</p>
<p class="intro">This is another paragraph</p>
<button>Remove the "intro" from all p elements</button>
</body>
</html>
Output:-
8)Write a jQuery to set the duration in slide toggle effect.
Code:-
<!doctype html>
<html>
<head>
<title>Online jQuery Editor</title>
<script
src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script
>
<script>
$(document).ready(function() {
$(".b1").click(function(){
$(".box").slideToggle(1500);
});
});
</script>
</head>
<body>
<button type="button" class="b1">Slide Toggle</button>
<hr/>
<div class="box">
<div class="box-inner">
Hello Good Morning Welcome to TYIT
</div>
</div>
</body>
</html>
Output:-
9)Write a jQuery to remove the HTML elements from the page
Code:-
<!doctype html>
<html>
<head>
<title>My Program</title>
<script
src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script
>
<script>
$(document).ready(function() {
$("button").click(function(){
$("#div1").remove();
});
});
</script>
</head>
<body>
<div
id="div1"
style="
height: 100px;
width: 300px;
border:1px solid black;
background-color:#bcf0f5;">
This is some text in the div
<p>This is a paragraph in the div.</p>
<p>This is another paragraph in the div.</p>
</div>
<br/>
<button>Remove div element</button>
</body>
</html>
Output:-
