Scribd
Upload
41 views

Jquery: HTML Head Script

jQuery is a JavaScript library that simplifies HTML document traversal and manipulation, CSS animation, and Ajax interactions. It allows developers to select elements, hide and show them with methods like fadeIn() and slideDown(), animate elements, and chain multiple actions together. jQuery handles common JavaScript tasks and events like click handling, form validation, and AJAX interactions to simplify the development process.

Uploaded by

Mdv Prasad
Copyright
© © All Rights Reserved
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
41 views

Jquery: HTML Head Script

jQuery is a JavaScript library that simplifies HTML document traversal and manipulation, CSS animation, and Ajax interactions. It allows developers to select elements, hide and show them with methods like fadeIn() and slideDown(), animate elements, and chain multiple actions together. jQuery handles common JavaScript tasks and events like click handling, form validation, and AJAX interactions to simplify the development process.

Uploaded by

Mdv Prasad
Copyright
© © All Rights Reserved
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 5

JQUERY

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

Show and Hide P tag


<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/
jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function () {
$("#hide").click(function () { $("p").hide(); });
$("#show").click(function () { $("p").show(); });
});
</script>
</head>
<body>

<p>If you click on the "Hide" button, I will


disappear.</p>

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

<p>Demonstrate fadeIn() with different


parameters.</p>
<button>Click to fade in
boxes</button><br><br>

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

<div id="flip">Click to slide down panel</div>


<div id="panel">Hello world!</div>

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

You might also like