Jquery: HTML Head Script
Jquery: HTML Head Script
It is Subset of java, free, open-source software. It is a JavaScript library used simplify HTML
DOM tree traversal, manipulation and event handling, CSS animation, and Ajax.
Things in jquery
1. Show and Hide P tag. 2. Fade.
3. SlideDown and Slideup. 4. Animation.
5. Chaining.
Events
Mouse Events Keyboard Events Form Events Document/Window Events
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>
Wisdom Materials 1
Fade
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquer
y/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("button").click(function () {
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
});
</script>
</head>
<body>
<div id="div1"
style="width:80px;height:80px;display:none;ba
ckground-color:red;"></div><br>
<div id="div2"
style="width:80px;height:80px;display:none;ba
ckground-color:green;"></div><br>
<div id="div3"
style="width:80px;height:80px;display:none;ba
ckground-color:blue;"></div>
</body>
</html>
Wisdom Materials 2
SlideDown
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquer
y/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#flip").click(function () {
$("#panel").slideDown("slow");
});
});
</script>
<style>
#panel, #flip {
padding: 5px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}
#panel
{
padding: 50px;
display: none;
}
</style>
</head>
<body>
</body>
</html>
Slide Up
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3
.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#flip").click(function () {
Wisdom Materials 3
$("#panel").slideUp("slow");
});
});
</script>
<style>
#panel, #flip {
padding: 5px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}
#panel {
padding: 50px;
}
</style>
</head>
<body>
<div id="flip">Click to slide up panel</div>
<div id="panel">Hello world!</div>
</body>
</html>
Animation
<html>
<head>
<title>Animation</title>
</head>
<script
src="https://ajax.googleapis.com/ajax/libs/j
query/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("button").click(function () {
$("div").animate({ left: '250px' });
});
});
</script>
<body>
<button>Start Animation</button>
<div
style="background:#98bf21;height:100px;
width:100px;position:absolute;"></div>
</body>
</html>
Wisdom Materials 4
Chaining
<html>
<head>
<title>Animation</title>
</head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/
jquery.min.js"></script>
<script>
$(document).ready(function () {
$("button").click(function () {
$("div").animate({ left: '250px' });
});
});
</script>
<body>
<button>Start Animation</button>
<div
style="background:#98bf21;height:100px;width:100px;
position:absolute;"></div>
</body>
</html>
Wisdom Materials 5