Practical 7.
a) Aim: jQuery Basic, jQuery Events
Solution:
I. Write a Jquery to Change text contents of the elements on button click.
Code:
<!doctype html>
<html>
<head>
<title>Online jQuery Editor</title>
<script src="jquery.js"></script>
<script>
$(document).ready(function() {
{
$("button").click(
function() {
document.write("hello world");
}
);
}
});
</script>
</head>
<body>
<p>Hello! Welcome in Jquery Language!!</p>
<button>Click me</button>
</body>
</html>
-----------------------------------------------------------------------------------
-----------------------------------------------------------
II. Write a Jquery to Select elements by class name,id and element name.
Code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery.js"></script>
<script>
$(document).ready(function () {
$(".class1").css("background", "#ADF7F7");
$("#id1").css("background", "#DEC7FF");
$("h2").css("background", "#C5F0D0");
});
</script>
</head>
<body>
<p class="class1">Hello!</p>
<p id="id1">Students</p>
<h2>welcome in jquery Language!!</h2>
</body>
</html>
-----------------------------------------------------------------------------------
-----------------------------------------------------------
III. Write a Jquery to show the use of Click(), hover(), on(), trigger(), off()
events.
Code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery.js"></script>
<script>
$(document).ready(function () {
$("#b1").hover(function () {
document.write("hello world");
});
$("p").on("click", function () {
$(this).css("background-color", "pink");
});
$("#b2").click(function () {
$("p").off("click");
});
$("#b3").on("click", function () {
$("#t1").hide();
});
$("input").select(function () {
$("input").after(" Text marked!");
});
$("#b4").click(function () {
$("input").trigger("select");
});
});
</script>
</head>
<body>
<button id="b1">hover</button><br />
<p>hello welcome in Mulund college of commerce!!</p>
<p>TYIT students</p>
<button id="b2">off</button><br /><br />
<p id="t1">Hello world</p>
<br />
<button id="b3">on</button><br /><br />
<input type="text" value="Hello World" /><br /><br />
<button id="b4">trigger</button>
</body>
</html>
-----------------------------------------------------------------------------------
---------------------------------------------------
Practical 7.b)
Aim: jQuery Selectors, jQuery Hide and Show effects.
I. Write a Jquery to Create animated show hide effect.
Code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery.js"></script>
<script>
$(document).ready(function () {
$("#b1").click(function () {
$("p").hide();
});
$("#b2").click(function () {
$("p").show();
});
});
</script>
</head>
<body>
<p>Mulund College Of Commerce</p>
<button id="b1">Hide</button>
<button id="b2">Show</button>
</body>
</html>
-----------------------------------------------------------------------------------
----------------------------------------------------------
II. Write a Jquery to create a simple toggle effect.
Code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery.js"></script>
<script>
$(document).ready(function () {
$("button").click(function () {
$("p").toggle();
});
});
</script>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<button>Toggle between hide() and show()</button>
</body>
</html>
-----------------------------------------------------------------------------------
----------------------------------------------------------
Practical 7.c)
Aim: jQuery fading effects, jQuery Sliding effects
I. Write a Jquery to create fade-in and fade-out effect.
Code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery.js"></script>
<script>
$(document).ready(function () {
$(".btn1").click(function () {
$("p").fadeOut();
});
$(".btn2").click(function () {
$("p").fadeIn();
});
});
</script>
</head>
<body>
<p>SIES college of arts science and commerce</p>
<button class="btn1">Fade out</button>
<button class="btn2">Fade in</button>
</body>
</html>
-----------------------------------------------------------------------------------
------------------------------------------------------------
II. Write a Jquery to Create fade toggle effect.
Code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery.js"></script>
<script>
$(document).ready(function () {
$(".toggle-btn").click(function () {
$("p").fadeToggle();
});
});
</script>
</head>
<body>
<button type="button" class="toggle-btn">click</button>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
-----------------------------------------------------------------------------------
-----------------------------------------------------------
III. Write a Jquery to Create slide-up and slide-down effect.
Code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery.js"></script>
<script>
$(document).ready(function () {
$(".up-btn").click(function () {
$("p").slideUp();
});
$(".down-btn").click(function () {
$("p").slideDown();
});
});
</script>
</head>
<body>
<button type="button" class="up-btn">Slide Up Paragraphs</button>
<button type="button" class="down-btn">Slide Down
Paragraphs</button>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
-----------------------------------------------------------------------------------
-----------------------------------------------------------
IV. Write a Jquery to Create slide toggle effect.
Code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery.js"></script>
<script>
$(document).ready(function () {
$(".toggle-btn").click(function () {
$("p").slideToggle();
});
});
</script>
</head>
<body>
<button type="button" class="toggle-btn">Slide Toggle
Paragraphs</button>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
-----------------------------------------------------------------------------------
-----------------------------------------------------------
