PRACTICAL 4: To create a JQuery Programs
1.Develop the jQuery program with a scrip�ng tag.
• $(“p.first”)
<!DOCTYPE html>
<html lang="en">
<head>
<title>3</title>
<script src="jquerylatest.js"></script>
</head>
<body>
<p style="background-color: beige;">This is a first para</p>
<p>This is a second para</p>
<button id="hide">Hide first para</button>
<button id="show">Show first para</button>
<script>
$("#hide").click(function(){
$("p:first").hide();
});
$("#show").click(function(){
$("p:first").show();
});
</script>
</body>
</html>
OUTPUT:
Hide Para
Show Para
• $(“ul li:first”)
<!DOCTYPE html>
<html lang="en">
<head>
<title>1</title>
<script src="jquerylatest.js"></script>
</head>
<body>
<ul><li style="background-color: pink;">This is a first list</li></ul>
<ul><li style="background-color: greenyellow;">This is a second
list</li></ul>
<button id="hide">Hide First list</button>
<button id="show">Show First list</button>
<script>
$("#hide").click(function(){
$("ul li:first").hide();
});
$("#show").click(function(){
$("ul li:first").show();
});
</script>
</body>
</html>
OUTPUT:
Hide List
Show List
• $(“ul li:first-child”)
<!DOCTYPE html>
<html lang="en">
<head>
<title>2</title>
<script src="jquerylatest.js"></script>
</head>
<body>
<ul><li style="background-color: aquamarine;">This is a first
list</li></ul>
<ul><li style="background-color: salmon;">This is a first
list</li></ul><ul><li style="background-color: bisque;">This is a first
list</li></ul>
<button id="hide">Hide List</button>
<button id="show">Show List</button>
<script>
$("#hide").click(function(){
$("ul li:first-child").hide();
});
$("#show").click(function(){
$("ul li:first-child").show();
});
</script>
</body>
</html>
OUTPUT:
Hide List
Show List
• $(“[href]”)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script src="jquerylatest.js"></script>
</head>
<body>
<a href="https://www.google.com" id="MyLink">Visit the example</a>
<button id="changeLink">Change the Link Color</button>
<script>
$("#changeLink").click(function(){
$("a[href='https://www.google.com']");
});
</script>
</body>
</html>
OUTPUT:
2.Develop the jQuery program with event methods.
• KEYBOARD EVENTS
<!DOCTYPE html>
<html>
<head>
<title>Keyboard Events</title>
<script src="jquerylatest.js"></script>
<script>
$(document).ready(function () {
$("input").keydown(function () {
$("input").css("background-color", "pink");
});
$("input").keyup(function () {
$("input").css("background-color", "red");
});
$("input").keypress(function () {
$("input").css("background-color", "yellow");
});
});
</script>
</head>
<body>
Enter your name: <input type="text">
</body>
</html>
OUTPUT:
1. KeyDown
2. KeyUp
3. KeyPress
• MOUSE EVENTS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mouse Event</title>
<script src="jquerylatest.js"></script>
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).fadeout();
});
$("#heading").mouseleave(function(){
$(this).hide();
});
$("input").focus(function(){
$(this).css("background-color","red");
});
$("#heading1").mouseenter(function(){
$(this).css("color","yellow");
});
});
</script>
</head>
<body>
<h2 id="heading">Welcome to jQuery</h2>
<h2 id="heading1">Welcome to javascript</h2>
<p>This is a program</p>
<form>
<input type="text" name="name">
<button id="btn">Click me</button>
</form>
</body>
</html>
OUTPUT:
• SLIDE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slide</title>
<script src="jquerylatest.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#div1").slideUp();
});
$("#btn2").click(function(){
$("#div1").slideDown();
});
$("#btn3").click(function(){
$("#div1").slideToggle();
});
});
</script>
</head>
<body>
<h2 id="heading">Welcome to jQuery</h2>
<p>This is the element</p>
<div id="div1" style="background-color: yellow;">This is a div
element</div>
<button id="btn1">slideUp</button>
<button id="btn2">slideDown</button>
<button id="btn3">slideToggle</button>
</body>
</html>
OUTPUT:
Slide Up and Toggle
Slide Down
• STOP
<!DOCTYPE html>
<html>
<head>
<title>Stop</title>
<script src=jquerylatest.js></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown(5000);
});
$("#stop").click(function(){
$("#panel").stop();
});
});
</script>
<style>
#panel, #flip {
padding: 5px;
font-size: 18px;
text-align: center;
background-color: beige;
color: black;
border: solid 1px salmon;
border-radius: 3px;
}
#panel {
padding: 50px;
display: none;
}
</style>
</head>
<body>
<button id="stop">Stop sliding</button>
<div id="flip">Click to slide down panel</div>
<div id="panel">Hello world!</div>
</body>
</html>
OUTPUT:
A�er stopping the sliding
