Prac 8
Always Remember
Step 1: Create a folder on your Desktop.
Step 2: Open Google Chrome and type “jQuery download”.
Step 3: Select the first option in search engine showing with the URL
https://jquery.com/download/ open the site.
Step 4: Right Click on the Download jQuery button and choose the option
“Save as link” by providing Respective folder which you created.
Step 5: “jquery-3.7.1.min.js’’ file save in your Created folder.
Step 6: Now Create your code file with (.html extension and All files) in the
same folder you created earlier.
Step 7: While writing a code in the code file syntax <script src=>
in that paste the full name of the downloaded jQuery file in
<script src= “jquery- 3.7.1.min.js”>
Step 8: Then only it will execute jQuery properties locally when run the code
file
8A)<!DOCTYPE HTML>
<html>
<head>
<script src="jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<h1>Welcome Back!</h1>
<p><u>Click Here<u></p>
</body>
</html>
8B)
<!DOCTYPE HTML>
<script src="jquery-3.7.1.min.js"> </script>
<script>
$(document).ready(function(){
<html> <head> }); });
$("button").click(function(){
$("#p1").hide();
</script>
</head>
<body>
<h1><center>Welcome to the Tourland.</center></h1>
<p><i><center>"The world is a book, and those who do not travel read only one page"-Saint Augustine<center></i></p>
<p id="pl">"Lets together explore the World!"</p>
<button><b>Click Here</b></button>
</body> </html>
8C)
<!DOCTYPE html>
<html>
<head> <title>jQuery Fading and Sliding</title>
<script src="jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="fadeBox" style="width:200px;height:100px; background: lightblue;display:none;">
<b><center>Successfully Submitted!</center></b>
</div>
<button id="fadeInBtn">Fade In</button>
<button id="fadeOutBtn">Fade Out</button>
<br><br>
<div id="slideBox" style="width:200px;height:100px; background: lightgreen; display:none;">
<b><center>Notification<center></b>
<button id="slideDownBtn">Slide Down</button>
</div>
<button id="slideUpBtn">Slide Up</button>
<script>
$(document).ready(function() {
// Fading
$("#fadeInBtn").click(function() { $("#fadeBox").fadeIn(); });
$("#fadeOutBtn").click(function() { $("#fadeBox").fadeOut(); });
// Sliding
$("#slideDownBtn").click(function() {
$("#slideBox").slideDown(); });
$("#slideUpBtn").click(function() { $("#slideBox").slideUp(); }); });
</script>
</html>
</body>
Comments
Post a Comment