Project

ird div tag </div>
<div id="demo"></div>
<button id="action">Click Anywhere to Add One More Div Tag</button>
<script src="jquery-3.4.1.js"></script>
<script>
$(document).ready(()=> {
$('#action').click(()=> {
$('#demo').append($("div").text()).css({"color":"red", "border":"1px solid black",
"width":"20%"})
})
})
</script>
</body>
</html>
Experiment 2:
Create HTML document using given code. Create three empty hyperlinks with no
hypertext and then set their href property through jQuery iteration on wrapper set.
First hyperlink should be associated with Page1.html, second with Page2.html and
third with Page3.html. The above said action should be performed when DOM is
ready. Store the values of href into array and then use it. Hypertext of all links
should also be stored into another array.
<a href='#'></a>
<a href='#'></a>
<a href='#'></a>.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Experiment 2</title>
</head>
<body>
<a href="#"></a><br>
<script src="../jquery-3.4.1.js"></script>
<script>
var href = ['page1.html', 'page2.html', 'page3.html']
var text = ['page1', 'page2', 'page3']
$("a").each(function(index){
$(this).attr('href', href[index]).text(text[index])
})
})
</script>
</body>
</html>
Page1.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<h1>Page 1</h1>
<p>Welcome to page 1</p>
</body>
</html>
Page2.html
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>Page 2</h1>
</body>
</html>
Page3.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page 3</title>
</head>
<body>
<h1>Page 3</h1>
</body>
</html>
Experiment 3
Create HTML document using given code. Create an empty text-area along with a
button. The user can click on the button after writing something into text-area.
When the event fires it will add dynamically created div tag into body of document.
The text written in text-area should appear into div tag. The user is supposed to
ensure that user clicks after writing something into text-area otherwise show the
error message.

<textarea id="newText"></textarea>
<button id="action">Click to Add Div Tag</button>
Code:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div>Enter something:</div>
<textarea name="" id="message" cols="30" rows="10"></textarea><br>
<button>Click me</button>
<script src="./jquery-3.4.1.js"></script>
<script>
$("button").css({'background':'green', "border": "2px solid black",
"padding":"10px", "color":"white"}).click(()=> {
var text = $("#message").val()
if(!text) {
alert("Error: Please enter some text")
}else {
$("body").append("<div>"+text+"</div>")
}
})
})
</script>
</body>
</html>
Experiment 4
Create HTML document using given code. Find all those span tags using jQuery
that are enclosed within div tag and change their text as well as set their text color
to red. Finally enclose all those span tags into div tag programmatically which are
not already enclosed into div tag and are direct child of body element and also set
their border to green.

<div><span>first paragraph</span></div>
<span>second paragraph</span>
<div><span>third paragraph</span></div>
<button id='action'>Click to Perform Action</button>
Code:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div><span>first paragraph</span></div><br>
<span>second paragraph</span><br><br>
<div><span>third paragraph</span></div><br>
<button id="action">Click to perform action</button>
<script>
$('div').text('This text has been changed').css("color", "red")
$('body>span').wrap("<div></div>").css("border", "1px solid green")
})
})
</script>
</body>
</html>
Experiment 5
Create HTML document as mentioned below and then retrieve all direct child
elements of body into wrapper set. Then find all descendants (span only) of each
element available in wrapper set. Change the text and text-color of last descendent
(span) if number of descendant (span) is greater than or equals to one.

<head>
<style>
span , p {
border: 2px solid green
}
</style>
</head>
<body>
<div style="border:1px solid; width:30%"><span>span 1</span><span>span
2</span></div>
<p><span>third paragraph</span><a href="page1.html">go to page1</a></p>
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
span , p {
border: 2px solid green
}
</style>
</head>
<body>
<div style="border:1px solid; width:30%"><span>span 1</span><span>span
2</span></div>
<p><span>third paragraph</span><a href="page1.html">go to page1</a></p>
<script>
var spans = $('body>span')
if(spans) {
$('span:last').css('color','red').text('This text has changed')
}
})
})
</script>
</body>
</html>
Experiment 6
Create HTML document as stated below and provide functionality to change image
source based on the clicked hyperlink. Download three different PNG images and
rename them as image1.png, image2.png and image3.png. Store images into the
same folder.
<p style="border:2px solid; width:25%; margin-left:25%; margin-right:25%">

<img style="margin-left:25%;margin-right:25%" height=80 width=80/><br>
<a href="#" title="image1">Image 1</a>
</p>
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-
scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
</head>
<body>
<p
style="
border: 2px solid;
width: 25%;
margin-left: 25%;
margin-right: 25%;
"
>
<img
style="margin-left: 25%; margin-right: 25%;"
height="80"
width="80"
/><br />
<a href="#" title="image1" id="image1">Image 1</a>
</p>
<script>
$(document).ready(() => {
$("a#image1").click(() => {
$("img").attr("src", "image1.png");
});
});
});
});
</script>
</body>
</html>
Experiment 7
Create HTML document as mentioned below and switch the CSS class applied on
DIV tag whenever user clicked on the button.
<head>
<style>
.oldClass {background-color: cyan;border: 2px solid green;}
.newClass {background-color: yellow;border: 2px solid red;}
</style>
</head>
<body>
<div id="myDiv" class="oldClass">This is a demo text to understand<br>
How to change CSS class at runtime.
</div>
<button id="action">Click to Change Class</button>
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.oldClass {
background-color: cyan;
border: 2px solid green;
}
.newClass {
background-color: yellow;
border: 2px solid red;
}
</style>
</head>
<body>
<div id="myDiv" class="oldClass">This is a demo text to understand<br>
How to change CSS class at runtime.
</div>
<button id="action">Click to Change Class</button>
<script>
$('div#myDiv').addClass('newClass')
})
})
</script>
</body>
</html>
Experiment 8
Create HTML document as mentioned below and then find even li elements from
each ordered list and warp it into <h2> tag. Finally apply CSS (text as red color) on
these elements. Apply the same technique on odd li elements but this time CSS
should be different (text as green color). Perform the desired operation whenever
user clicked on the button. There should be one more button labeled as "Restore to
default". It should help to revert to original setting. Make sure when you click on
"perform action" button it should perform action and enable another button
labeled as "revert to default" and disable itself immediately. When you click on
"revert to default" it should enable the button labeled as "click to perform action"
and disable itself immediately.

<ol style="border: 1px solid black; width:25%">
<li>Apples <li>Oranges <li>Bananas <li>Peach
</ol>
<ol style="border: 1px solid black; width:25%">
<li>Mango <li>Gauva <li>Lemon <li>Kiwi
</ol>
<button id='action2' disabled='disabled'>Restore to default</button>
Code:
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0" />
<title>exp8</title>
</head>
<body>
<ol style="border: 1px solid black; width: 25%;">
<li>Apples</li>
<li>Oranges</li>
<li>Bananas</li>
<li>Peach</li>
</ol>
<ol style="border: 1px solid black; width: 25%;">

<li>Mango</li>
<li>Gauva</li>
<li>Lemon</li>
<li>Kiwi</li>
</ol>
<button id="action">Click to Perform Action</button>

<button id="action2" disabled="disabled">Restore to default</button>
<script>
$("#action").click(() => {
$("ol li:even").wrap("<h2></h2>").css("color", "red");
$("ol li:odd").wrap("<h2></h2>").css("color", "green");
$("#action").attr("disabled", "disabled");
$("#action2").removeAttr("disabled");
});
$("#action2").click(() => {
$("ol li:even").unwrap().css("color", "");
$("ol li:odd").unwrap().css("color", "");
$("#action").removeAttr("disabled");
});
});
</script>
</body>
</html>
Experiment 9
Create HTML document as mentioned below and generate the table that shows
total number of DIV tags, total number of hidden DIV tags and Ids of all hidden
DIV tags. Use native JavaScript arrays & looping wherever possible. The desired
action should be performed when user clicked the button. Before generating the
table you are supposed to make it visible through jQuery.

<div id="div1" style='display:none; border: 1px solid black'>
<div id="inner_div">This is nested div tag, My parent div is hidden</div>
</div>
<div id="div2" style='border: 1px solid black'>I am second div </div>
<div id="div3" style='border: 1px solid black'>
I am third div and i am parent
<div id="div4" style="display:none;border: 1px solid black">I am nested in
second div </div>
</div>
<table border=1 style='display:none;background-color:#917213' id='summary'>
<tr id="row1"><td></td><td></td></tr>
</table>
<button id='action'>Summary of Document</button>
Code:
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0" />
<title>exp9</title>
</head>
<body>
<div id="div1" style="display:none; border: 1px solid black">
<div id="inner_div">This is nested div tag, My parent div is
hidden</div>
</div>
<div id="div2" style="border: 1px solid black">I am second div</div>
<div id="div3" style="border: 1px solid black">
I am third div and i am parent
<div id="div4" style="display:none;border: 1px solid black">
I am nested in second div
</div>
</div>
<table
border="1"
style="display:none;background-color:#917213;color:#fff"
id="summary"
>
<tr id="row1">
<td></td>
<td></td>
</tr>
<tr id="row2">
<td></td>
<td></td>
</tr>
<tr id="row3">
<td></td>
<td></td>
</tr>
</table>
<button id="action">Summary of Document</button>

<script>
let x = $("div").length;
let y = $("div:visible").length;
let z = $("div:hidden").length;
$("#summary").css("display", "");
$("#row1 td:first").text("Total");
$("#row1 td:last").text(x);
$("#row2 td:first").text("Visible");
$("#row2 td:last").text(y + " ");
$("#row3 td:first").text("Hidden");
$("#row3 td:last").text(z + " ");
});
});
</script>
</body>
</html>
Experiment 10
Create HTML document as mentioned below and make a wrapper set that includes
descendants of div tag having id = 'main'. Finally exclude all descendants from
wrapper set whose class is set as 'lazy-css'. After this show the text written in
remaining elements in wrapper set. You are supposed to solve this problem using
filter method having anonymous function.

<div class='main' style='border:2px solid blue'>
<div class='lazy-css'>This is lazy css</div>
<div class='smart-css'>This is smart css</div>
<div class='lazy-css'>This is lazy css</div>
</div>
Code:
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0" />
<title>exp10</title>
</head>
<body>
<div class="main" style="border:2px solid blue">
<div class="lazy-css">This is lazy css</div>
<div class="smart-css">This is smart css</div>
<div class="lazy-css">This is lazy css</div>
</div>
<script>
alert(
$(".main")
.children()
.filter(":not(.lazy-css)")
.text()
);
});
</script>
</body>
</html>
Experiment 11
Create HTML document as mentioned below and wrap all those elements with strong tag
that contains the word "jquery" in the text. Use filter method.
<p>jQuery is really smart</p>
<div>This is a sample document</div>
<blockquote>To save time use jQuery</blockquote>
<button id='action'>Check Status</button>
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<p>jQuery is really smart</p>
<div>This is a sample document</div>
<blockquote>To save time use jQuery</blockquote>
<button id="action">Check Status</button>
<script>
$(function ($) {
$("#action").click(function () {
let pattern = /jQuery/;
$("body")
.children()
.filter(function () {
return pattern.test($(this).text());
})
.wrap("<strong></strong>");
});
});
</script>
</body>
</html>
Experiment 12
Create HTML document as mentioned below and then generate wrapper set for all
span tags. After that find all parents of each element available in wrapper set and
find its number of parents as well as show the IDs of all parents.

<div id='1'>
<span>This is span TAG </span>
<div id='2'>
<div id='3'>
<span>This is also span TAG</span>
</div>
</div>
</div>
Code:
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0" />
</head>
<body>
<div id="1">
<span>This is span TAG </span>
<div id="2">
<div id="3">
<span>This is also span TAG</span>
</div>
</div>
</div>
<script>
$("span").each(function() {
alert(
"The length of the parent of span is " + $
(this).parent().length
);
alert(
"The id of the parent of span is " +
$(this)
.parent()
.attr("id")
);
});
});
</script>
</body>
</html>
Experiment 13
Create HTML document as mentioned below and find selected item from both
radio groups on click event.
<form id='form1'>
<div style="border:1px solid blue">
Teacher<input type='radio' name='group-1' value='Teacher'/>
Business<input type='radio' name='group-1' value='Business'/>
Sports<input type='radio' name='group-1' value='Sports'/>
</div>
Start Sports<input type='radio' name='group-2' value='Star
Sports'/>
Discovery<input type='radio' name='group-2'
value='Discovery'/>
National Geographic<input type='radio' name='group-2'
value='National Geographic'/>
</div>
<button id='action'>Find Selected</button>
</form>
Code:
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0" />
</head>
<body>
<form id="form1">
Teacher<input type="radio" name="group-1"
value="Teacher" />
Business<input type="radio" name="group-1"
value="Business" />
Sports<input type="radio" name="group-1" value="Sports" />
</div>
Start Sports<input type="radio" name="group-2" value="Star
Sports" />
Discovery<input type="radio" name="group-2"
value="Discovery" />
National Geographic<input
type="radio"
name="group-2"
value="National Geographic"
/>
</div>
<button id="action">Find Selected</button>
</form>
<script>
let val1 = $('input[name="group-1"]:checked').val();
let val2 = $('input[name="group-2"]:checked').val();
alert(val1);
alert(val2);
});
});
</script>
</body>
</html>
Experiment 14
Write jQuery code to receive value from text-box and place it into already generated
drop down control at the bottom, second time at the top and third time after second
element.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0" />
</head>
<body>
<input type="text" id="text" value="this is the textbox" />
<script>
let x = $("input[type='text']").val();
$(
"<select size=5><option value=''>" + x +
"</option></select>"
).appendTo("body");
$("select").prepend("<option value=''>" + x + "</option>");
$("select").append("<option value=''>" + x + "</option>");
$("select option:eq(2)").attr("selected", "selected");
});
</script>
</body>
</html>
Experiment 15
Write jQuery code to demonstrate the following events:
[1]. Bind () and Unbind () technique.
Code[1]:
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0" />
<title>exp-a</title>
</head>
<body>
<button id="double-click">Double Click</button>
<button id="single-click">Single Click</button>
<script>
$("#double-click").bind("dblclick", () => {
alert("You doubled clicked to this button");
$("#double-click").unbind("dblclick");
});
$("#single-click").bind("click", () => {
alert("You clicked this button");
$("#single-click").unbind("click");
});
});
</script>
</body>
</html>
[2]. Mouse-Over and Mouse-Out technique

Code[2]:
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0" />
<title>exp-b</title>
<style>
div {
background-color: red;
height: 5rem;
margin: auto;
}
div p {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-size: 2rem;
color: #fff;
}
</style>
</head>
<body>
<div><p>You hover out me</p></div>
<script>
$("div").mouseover(() => {
$("p")
.text("You hover over me")
.css("color", "#111");
$("div").css("background", "yellow");
});
$("div").mouseout(() => {
$("p")
.text("You hover out me")
.css("color", "#fff");
$("div").css("background", "red");
});
});
</script>
</body>
</html>
[3]. Key-Up and Key-Down technique

Code[3]:
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0" />
<title>exp-c</title>
</head>
<body>
<div>
Enter your name:
<input type="text" name="" id="" placeholder="Enter your name" />
</div>
<script>
$(document).ready(function() {
$("input").keydown(function() {
$("input").css("background-color", "yellow");
});
$("input").keyup(function() {
$("input").css("background-color", "pink");
});
});
</script>
</body>
</html>
Experiment 16
Create HTML document as mentioned below and write jQuery to implement
Delegation Event Model. If the user clicks on list item then show an alert window
indicating that the user just clicked on the list item and also show its index position. If
the user clicks on hyper-link then show an alert window indicating that the user just
clicked on hyper-link along with the value of href attribute. Then you should ask the
user "Are you sure you want to leave this web page ?". If user replies yes then leave
the page otherwise stop the propagation and prevent the default operation of event
at once.
<ul>
<li id='L1'>This is first item.<a href='http://www.yahoo.com'>Go to
Yahoo.com</a>
<li id='L2'>This is second item.<a href='http://www.flipkart.com'>Go to
flipkart.com</a>
<li id='L3'>This is Third item.<a href='http://www.amazon.com'>Go to
amazon.com</a>
</ul>
Code:
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0" />
<title>Exp16</title>
</head>
<body>
<ul>
<li id="L1">
This is first item.<a href="http://www.yahoo.com">Go to
Yahoo.com</a>
</li>
<li id="L2">
This is second item.<a href="http://www.flipkart.com"
>Go to flipkart.com</a
>
</li>
<li id="L3">
This is Third item.<a href="http://www.amazon.com">Go to
amazon.com</a>
</li>
</ul>
<script>
$("li").click(function() {
let index = $(this).index();
alert("Index of the Element Clicked: " + index);
});
$("a").click(function(e) {
alert($(this).attr("href"));
let answer = confirm(
"Are you sure you want to leave this web page ?"
);
e.stopPropagation();
if (!answer) {
e.preventDefault();
}
});
});
</script>
</body>
</html>

Project

Uploaded by

Document Information

Original Description:

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

Project

Uploaded by

Copyright:

Available Formats

ird div tag </div>

<p style="border:2px solid; width:25%; margin-left:25%; margin-right:25%">

<ol style="border: 1px solid black; width: 25%;">

<button id="action">Click to Perform Action</button>

<button id="action">Summary of Document</button>

[2]. Mouse-Over and Mouse-Out technique

[3]. Key-Up and Key-Down technique

You might also like