Prac 9
9A)
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js">
</script>
<script>
$(document).ready(function () {
$("button").click(function () {
$('#myDiv').animate({
height: 200px',
width: 200px',
left: 500px'
});
});
});
</script>
<style>
.redDiv {
background-color: red;
height: 100px;
width: 100px;
position: absolute;
}
</style>
</head>
<body>
<h1>Demo: jQuery animate() method</h1>
<button>click</button>
<div id="myDiv" class="redDiv">
</div>
</body>
</html>
9A.2)
<!Doctype html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js">
</script>
<script>
$(document).ready(function () {
$("button").click(function () {
$("#p1").css({ "color": "red", "font-size": 50))
.slideUp(2000)
slideDown (2000);
});
});
</script>
</head>
<body>
<p id="p1">jQuery is fun!!</p>
<button>Click me</button>
</body>
</html>
9B)
<!Doctype html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js">
</script>
<script>
$(document).ready(function () {
$("button").click(function () {
$("p").hide("slow", function () {
alert("The paragraph is now hidden");
});
});
});
</script>
</head>
<body>
<button>Hide</button>
<p>This is a paragraph with little content.</p>
</body>
</html>
9C)
<!Doctype html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js">
</script>
<script>
$(document).ready(function () {
$("#btn1").click(function () {
$("p").prepend(" <b>Appended text</b>.");
});
$("#btn2").click(function () {
$("ol").append("<li>Appended item</li>");
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn1">Prepend
text</button>
<button id="btn2">Append list
items</button>
</body>
</html>
9C.2)
<!Doctype html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js">
</script>
<script>
$(document).ready(function () {
$("button").click(function () {
$("p").remove(".test");
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p class="test">This is another
paragraph.</p>
<p class="test">This is another
paragraph.</p>
<button>Remove all p elements with class="test"</button>
</body>
</html>
Comments
Post a Comment