Lab Q1. 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.
Solution
<html>
<head>
<script src="C:\Users\honour\Downloads\-[Link]"></script>
<script>
$(document).ready(function () {
$("#action").click(function () {
$("#demo")
.text($("div").text())
.css({ color: "red", border: "1px solid black",width:
"20%" });
});
});
</script>
</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 here to add one more Div tag</button>
</body>
</html>
Lab Q2. 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>
Solution
<html>
<head>
<script src="C:\Users\honour\Downloads\-[Link]"></script>
</head>
<body>
<textarea></textarea>
<DIV></DIV>
<button>add div tag</button>
<script>
$(function() {
$("button").click(function() {
var x=$("textarea").val();
if(x=="")
alert("Put text ");
else
$("div").text(x);
});
});
</script>
</body>
</html>
Lab Q3. 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.
<div><span>third paragraph</span></div>
<button id='action'>Click to Perform Action</button>
Solution
<html>
<head>
<style>
.main * {
display: block;
border: 2px solid lightgrey;
padding: 5px;
margin: 15px;
.green {
border: 2px dashed green;
</style>
<script src="C:\Users\Honour\Downloads\-[Link]"></script>
<script>
$(document).ready(function () {
$("#btn").click(function () {
$("div").find("span).text("Hello World").css({ color: "red" });
$("body")
.children("span")
.wrap("<dic></div>")
.css({ .css({ border: "2px dashed green" });
});
});
</script>
</head>
<body class="main">
<div><span>first para</span></div>
<span>second para</span>
<div><span>third para</span></div>
<button id="btn">Click</button>
</body>
</html>
Lab Q 4. Create Html document using given code, create three empty hyperlinks with no
hypertext and then set their href property through jQuery iteration on wrapper text. The
above action is valid when DOM is ready
Solution
<html>
<head>
<script src="C:\Users\honour\Downloads\-[Link]"></script>
</head>
<body>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<script>
$(document).ready(function()
$('a').each(function (index,value)
{
var pagenum=parseInt(index+1);
var link="page"+pagenum+".html";
$(this).text("page"+pagenum).attr("href".link);
}};
}};
</script>
</body>
</html>
Lab Q 5: Create html document as mentioned below and find selected item from both radio
groups on click event .
Solution
<html>
<head>
<script src="C:\Users\honour\Downloads\-[Link]"></script>
</head>
<body>
<form id='form1'>
<div style-"bordere: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> (function ($)
$("action").click(function()
alert($("input (name-'group-1':checked").val());
alert($("input (name-'group-2':checked").val());
}};
}} (jQuery);
</script>
</script>
</body>
</html>
Lab Q [Link] HTML document as mentioned below and then find even li elements from
each ordered list and wrap them into <h2> .finally apply css on these elements. Apply same
technique to odd li but this time css should be different .
Solution
<html>
<head>action</head>
<body>
<ol style="border: 1px solid black; width:25%">
<li>Apples <li>Oranges <li>Banana <li>Peach
</ol>
<ol style="border: 1px solid black; width:25%">
<li>Mango <li>Guava <li>Lemon <li>kiwi
</ol>
<button id='action'> click to perform action</button>
<input type="reset" id='action2' disabled='disabled' value="Restore to default">
<script src="C:\Users\honour\Downloads\-[Link]"></script>
<script>
$(document).ready(function()
var default1=$("ol:first").html();
var default2=$("ol:last").html();
$("#action").click(function()
$("#action2").prop("disabled",false);
$("#action").prop("disabled",true);
$("li").filter(":even").wrap("<h2>").css("color","red");
$("li").filter(":odd").css("color","green");
}};
$("action2").click(function()
$("#action2").prop("disabled",true);
$("#action").prop("disabled",false);
$("ol:first").html(default1);
$("ol:last").html(default2);
}};
</script>
</body>
</html>
Lab Q 7: Create HTML document as mentioned below and generate the table that shows the
total number of div tags ,total number of hidden div tags .
Solution
<html>
<head>
<title>traverse children</title>
<script src="C:\Users\honour\Downloads\-[Link]"></script>
<script>
$(document).ready(function()
$("button").click(function()
var x=$("div").length;
var y=$("div:hidden").length;
var z=$("div:visible").length;
$("table").removeAttr("style");
$("#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>
</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"
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>
</body>
</html>
Lab Q 8. Create a HTML document as mentioned below and write jQuery to implement
Delegation model if the user click on the list of item then show an alert window that the
user clicked the list item if user click the item than show the alert window indicating that user
just click the along the value of href attribute.
Solution
<html>
<head>
<script src="C:\Users\honour\Downloads\-[Link]"></script>
</head>
<body>
<ul>
<li> id=''L1'>This is first item. <a href='[Link] Go to yahoo</a>
<li> id=''L2'>This is second item. <a href='[Link] Go to flipkart</a>
<li> id=''L3'>This is third item. <a href='[Link] Go to amazon</a>
</ul>
<script>
(function ($)
$("li").each(function(i)
$(this).click(function (event)
alert("user just clicked on the list item"+(i+1));
}};
}};
}}(jQuery);</script>
</body>
</html>
Q9 : create HTML document as mentioned below and switch css class applied div tag
whenever user on the button.
Solution:
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title> Experiment 5</title>
<style>
.oldclass {
background-color: burlywood;
border: 4px dotted red:
.newClass {
background-color: cadetblue;
border: 4px dashed chartreuse;
padding: 20px;
</style>
<script src="C:\Users\honour\Downloads\-[Link]"></script>
<script>
$(document).ready(function () {
$("button").click(function () {
$("#myDiv").toggleClass("newClass");
});
});
</script>
</head>
<body>
<div id="myDiv" class="oldClass">
No pain ,no gain.
</div>
<button>switch class</button>
</body>
</html>
Q 10Make a accordin in jquery for sports news section .it will open the news when click on
the section and display the complete news.
Solution:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Accordion - Default functionality</title>
<link rel="stylesheet" href="//[Link]/ui/1.12.1/themes/base/[Link]">
<link rel="stylesheet" href="/resources/demos/[Link]">
<script src="[Link]
<script src="[Link]
<script>
$( function() {
$( "#accordion" ).accordion();
} );
</script>
</head>
<body>
<div id="accordion">
<h3>Section 1</h3>
<div>
<p>
VIVO Indian Premier League 2021 season in the United Arab Emirates (U.A.E) considering the
monsoon season in India in the months of
September-October this year,' said a statement from the BCCI
</p>
</div>
<h3>Section 2</h3>
<div>
<p>
I think the biggest one is 'Who is going to be standing behind the stumps with the gloves on?',"
added Ponting, who himself has been part of the Australia's coaching staff for T20 cricket and
was the assistant in 2019 World Cup.
</p>
</div>
<h3>Section 3</h3>
<div>
<p>
the 53-year-old German said. “Even the good things when they happened this year
didn’t feel too good because too many bad things happened. The injuries were a subject that
followed us through the whole year and that was really tough to take.”
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
<h3>Section 4</h3>
<div>
<p>
Ponting also feels that unearthing a reliable middle or lower-order batsman who can keep
wickets could kill two birds with one stone.
</p>
</div>
</div>
</body>
</html>
[Link] a Jquery code to and generate a list and choose from them .also include a button in
it .
Solution :
<html>
<head>
<html>
<head>
<script src="C:\Users\honour\Downloads\-[Link]"></script>
</head>
<body>
<h3> welcome </h3>
<h4>hey ,choose any of the number</h4>
<input type = "checkbox">red
<input type = "checkbox">black
<input type = "checkbox">yellow
<input type = "checkbox">blue
<input type = "checkbox">green
<p> thanks for choosing. </p>
<button> Click me </button>
<script>
$(document).ready(function(){
$("button").click(function() {
$("input").odd().attr("checked", true);
});
});
</script>
</body>
</html>
14:write a Code to generate multiple div tags included in the body tag displaying the
paragraph element.
Solution:
<html>
<head>
<style>
.main *{
border: 2px solid black;
padding:10px;
margin: 15px;
</style><script src="C:\Users\honour\Downloads\-[Link]"></script>
<script>
function fun (){
$(document).ready(function(){
$("p").parentsUntil("#div1", "div, ul").css({ "border": "3px dashed blue"});
});
</script>
</head>
<body class = "main"> body
<div id = "div1"> div1
<ul> ul<div id = "div2"> div2
<h4> Heading h4
<div id ="div3"> div3
<p> Paragraph element </p>
</div>
</ul>
</div>
<button onclick ="fun()"> click me </button>
</body>
</html>
15: write an html code including a unordered list of items and implement using a jquery
function
Solution :
<html>
<head>
<script src="C:\Users\honour\Downloads\-[Link]"></script>
</head>
<body>
<h3> hey </h3>
<h4> list </h4>
<ul>
<li> one</li>
<li> two</li>
<li> three </li>
<li> four </li>
</ul>
<p> the list </p>
<button> Click the button </button>
<script>
$(document).ready(function(){
$("button").click(function() {
$("li").odd().css("background-color", "yellow");
});
});
</script>
</body>
</html>