Scribd
Upload
48 views

Client CSS

Create an HTML document with four div tags containing text. Use jQuery to collect the text from the div tags on a click event, and set the collected text to an empty div tag with id="demo". Also change the empty div's style and add the color red.

Uploaded by

Akshat Chamoli
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
48 views

Client CSS

Create an HTML document with four div tags containing text. Use jQuery to collect the text from the div tags on a click event, and set the collected text to an empty div tag with id="demo". Also change the empty div's style and add the color red.

Uploaded by

Akshat Chamoli
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 47

INDEX

S. No. Experiment Page


No.
1 Create HTML document using given code. Write jQuery 8-9
code to collect text enclosed within all div tags (3 div tags
with text and one empty div tag) and then set the
collected text data into empty div tag having id = "demo"
without using any variable. The above said action should be
performed when user clicked anywhere on the document. After
setting text to empty div tag change its style just like other div tags
and in addition to that add color which should be red.

<div style="border:1px solid; width:20%">This is first div tag </div>


<div style="border:1px solid; width:20%">This is second div tag
</div>
<div style="border:1px solid; width:20%">This is third div tag
</div>
<div id="demo"></div>
<button id="action">Click Anywhere to Add One More Div
Tag</button>

2 Create HTML document using given code. Create three 10 - 13


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

3 Create HTML document using given code. Create an empty 14 - 16


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>

4 Create HTML document using given code. Find all those 16 - 18


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>

5 Create HTML document as mentioned below and then 18 - 19


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>
<span>second paragraph</span>
<p><span>third paragraph</span><a href="page1.html">go to
page1</a></p>
<button id='action'>Click to Perform Action</button>

6 Create HTML document as stated below and provide 20 - 22


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>
<a href="#" title="image2">Image 2</a>
<a href="#" title="image3">Image 3</a>
</p>
7 Create HTML document as mentioned below and switch 22 - 23
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>
8 Create HTML document as mentioned below and then 24 - 27
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='action'>Click to Perform Action</button>
<button id='action2' disabled='disabled'>Restore to
default</button>

9 Create HTML document as mentioned below and generate 27 - 30


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>
<tr id="row2"><td></td><td></td></tr>
<tr id="row3"><td></td><td></td></tr>
</table>
<button id='action'>Summary of Document</button>
10 Create HTML document as mentioned below and make a 30 - 31
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>

11 Create HTML document as mentioned below and wrap all those 32 - 33


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>

12 Create HTML document as mentioned below and then 33 - 35


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>
13 Create HTML document as mentioned below and find 35 - 38
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>
<div style="border:1px solid blue">
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>
14 Write jQuery code to receive value from text-box and 38 - 39
place it into already generated drop down control at the
bottom, second time at the top and third time after
second element.
15 Write jQuery code to demonstrate the following events: 39 - 44
[1]. Bind () and Unbind () technique.
[2]. Mouse-Over and Mouse-Out technique
[3]. Key-Up and Key-Down technique
16 Create HTML document as mentioned below and write 44 - 47
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>

Experiment 1:
Create HTML document using given code. Write jQuery code to collect text enclosed
within all div tags (3 div tags with text and one empty div tag) and then set the
collected text data into empty div tag having id = "demo" without using any variable.
The above said action should be performed when user clicked anywhere on the
document. After setting text to empty div tag change its style just like other div tags
and in addition to that add color which should be red.
 
<div style="border:1px solid; width:20%">This is first div tag </div>
<div style="border:1px solid; width:20%">This is second div tag </div>
<div style="border:1px solid; width:20%">This is third div tag </div>
<div id="demo"></div>
<button id="action">Click Anywhere to Add One More Div Tag</button>

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>Document</title>
</head>
<body>
<div style="border:1px solid; width:20%">This is first div tag </div>
<div style="border:1px solid; width:20%">This is second div tag </div>
<div style="border:1px solid; width:20%">This is third 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>
<a href="#"></a><br>
<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']
$(document).ready(()=> {
$("a").each(function(index){
$(this).attr('href', href[index]).text(text[index])
})
})
</script>
</body>
</html>
Page1.html
<!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>Document</title>
</head>
<body>
<h1>Page 1</h1>
<p>Welcome to page 1</p>
</body>
</html>
Page2.html
<!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>Document</title>
</head>
<body>
<h1>Page 2</h1>
<p>Welcome to page 2</p>
</body>
</html>

Page3.html
<!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>Page 3</title>
</head>
<body>
<h1>Page 3</h1>
<p>Welcome to page 3</p>
</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>
<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>Document</title>
</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>
$(document).ready(()=> {
$("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>
<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>Document</title>
</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 src="jquery-3.4.1.js"></script>
<script>
$(document).ready(()=> {
$('#action').click(()=> {
$('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>
<span>second paragraph</span>
   <p><span>third paragraph</span><a href="page1.html">go to page1</a></p>
<button id='action'>Click to Perform Action</button>

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>Document</title>
<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>
<span>second paragraph</span>
<p><span>third paragraph</span><a href="page1.html">go to page1</a></p>
<button id='action'>Click to Perform Action</button>
<script src="./jquery-3.4.1.js"></script>
<script>
$(document).ready(()=> {
$('#action').click(()=> {
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>
<a href="#" title="image2">Image 2</a>
<a href="#" title="image3">Image 3</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" />
<title>Document</title>
</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>
<a href="#" title="image2" id="image2">Image 2</a>
<a href="#" title="image3" id="image3">Image 3</a>
</p>
<script src="./jquery-3.4.1.js"></script>
<script>
$(document).ready(() => {
$("a#image1").click(() => {
$("img").attr("src", "image1.png");
});
$("a#image2").click(() => {
$("img").attr("src", "image2.png");
});
$("a#image3").click(() => {
$("img").attr("src", "image3.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>
<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>Document</title>
<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 src="./jquery-3.4.1.js"></script>
<script>
$(document).ready(()=> {
$('#action').click(()=> {
$('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='action'>Click to Perform Action</button>
<button id='action2' disabled='disabled'>Restore to default</button>

Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-
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 src="jquery-3.4.1.js"></script>
<script>
$(document).ready(() => {
$("#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>
   <tr id="row2"><td></td><td></td></tr>
   <tr id="row3"><td></td><td></td></tr>
</table>
<button id='action'>Summary of Document</button>

Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-
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 src="jquery-3.4.1.js"></script>
<script>
$(document).ready(() => {
$("#action").click(() => {
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>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-
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 src="jquery-3.4.1.js"></script>
<script>
$(document).ready(() => {
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 charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>exp11</title>
</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 src="jquery-3.4.1.js"></script>
<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>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-
scale=1.0" />
<title>exp12</title>
</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 src="jquery-3.4.1.js"></script>
<script>
$(document).ready(() => {
$("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>
                <div style="border:1px solid blue">
                                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>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-
scale=1.0" />
<title>exp13</title>
</head>
<body>
<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>
<div style="border:1px solid blue">
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 src="jquery-3.4.1.js"></script>
<script>
$(document).ready(() => {
$("#action").click(() => {
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>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-
scale=1.0" />
<title>exp14</title>
</head>
<body>
<input type="text" id="text" value="this is the textbox" />
<script src="jquery-3.4.1.js"></script>
<script>
$(document).ready(() => {
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>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-
scale=1.0" />
<title>exp-a</title>
</head>
<body>
<button id="double-click">Double Click</button>
<button id="single-click">Single Click</button>
<script src="../jquery-3.4.1.js"></script>
<script>
$(document).ready(() => {
$("#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>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-
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 src="../jquery-3.4.1.js"></script>
<script>
$(document).ready(() => {
$("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>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-
scale=1.0" />
<title>exp-c</title>
</head>
<body>
<div>
Enter your name:
<input type="text" name="" id="" placeholder="Enter your name" />
</div>

<script src="../jquery-3.4.1.js"></script>
<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>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-
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 src="jquery-3.4.1.js"></script>
<script>
$(document).ready(() => {
$("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>

You might also like