Chapter 4:-
1) Id Selector:-
<!DOCTYPE html>
<html>
<head>
<script src="[Link]
[Link]"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
</script>
</head>
<body>
<p id="test">If you click on me, I will disappear.</p>
<button>Hide id</button>
</body>
</html>
2) Class Selector:-
<!DOCTYPE html>
<html>
<head>
<script src="[Link]
[Link]"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
</script>
</head>
<body>
<p class="test">Hide the class</p>
<button>Hide class</button>
</body>
</html>
3) Blur Event:-
<!DOCTYPE html>
<html>
<head>
<script src="[Link]
[Link]"></script>
<script>
$(document).ready(function(){
$("input").blur(function(){
alert("This input field has lost its focus.");
});
});
</script>
</head>
<body>
<input type="text">
</body>
</html>
4) Focus Event:-
<!DOCTYPE html>
<html>
<head>
<script src="[Link]
[Link]"></script>
<script>
$(document).ready(function(){
$("input").focus(function(){
$("span").css("display",
"inline").fadeOut(2000);
});
});
</script>
</head>
<body>
<input type="text">
<span>Enter text</span>
</body>
</html>
5) Show Hide Example:-
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src =
"[Link]
3/[Link]"></script>
<script type = "text/javascript" language =
"javascript">
$(document).ready(function() {
$("#show").click(function () {
$(".mydiv").show( 1000 );
});
$("#hide").click(function () {
$(".mydiv").hide( 1000 );
});
});
</script>
<style>
.mydiv{ margin:10px;padding:12px;
border:2px solid #666; width:100px;
height:100px;}
</style>
</head>
<body>
<div class = "mydiv">
This is a SQUARE
</div>
<input id = "hide" type = "button" value =
"Hide" />
<input id = "show" type = "button" value =
"Show" />
</body>
</html>
6) Slideup Sliude down:-
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src =
"[Link]
3/[Link]"></script>
<script type = "text/javascript" language =
"javascript">
$(document).ready(function() {
$("#down").click(function(){
$(".target").slideDown( 'slow', function(){
$(".log").text('Slide Down Transition
Complete');
});
});
$("#up").click(function(){
$(".target").slideUp( 'slow', function(){
$(".log").text('Slide Up Transition
Complete');
});
});
});
</script>
<style>
p {background-color:#bca; width:200px;
border:1px solid green;}
</style>
</head>
<body>
<p>Click on any of the buttons</p>
<button id = "up"> Slide Up </button>
<button id = "down"> Slide Down</button>
<div class = "target">
<img src = "../images/[Link]" alt =
"jQuery" />
</div>
<div class = "log"></div>
</body>
</html>
7) Fadein Fadeout:-
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src =
"[Link]
[Link]"></script>
<script type = "text/javascript" language =
"javascript">
$(document).ready(function() {
$("#in").click(function(){
$(".target").fadeIn( 'slow', function(){
$(".log").text('Fade In Transition Complete');
});
});
$("#out").click(function(){
$(".target").fadeOut( 'slow', function(){
$(".log").text('Fade Out Transition
Complete');
});
});
});
</script>
<style>
p {background-color:#bca; width:200px;
border:1px solid green;}
</style>
</head>
<body>
<p>Click on any of the buttons</p>
<button id = "out"> Fade Out </button>
<button id = "in"> Fade In</button>
<div class = "target">
<img src = "../images/[Link]" alt = "jQuery" />
</div>
<div class = "log"></div>
</body>
</html>
8) Click Event:-
<!DOCTYPE html>
<html>
<head>
<script src="[Link]
[Link]"></script>
<script>
$(document).ready(function(){
$("p").click(function(){
alert("The paragraph was clicked.");
});
});
</script>
</head>
<body>
<p>If you click on me, the alert box is open.</p>
</body>
</html>
9) Double Click event:-
<!DOCTYPE html>
<html>
<head>
<script src="[Link]
[Link]"></script>
<script>
$(document).ready(function(){
$("p").dblclick(function(){
alert("The paragraph was double-clicked");
});
});
</script>
</head>
<body>
<p>Double click on this paragraph.</p>
</body>
</html>