Scribd
Upload
26 views

Assignment

Uploaded by

nainwalrohan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
26 views

Assignment

Uploaded by

nainwalrohan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

Name: Rajas Bagga

Course: BCA B4
Sap Id: 500126194
Roll No: 146
Experiment 1
1.Write a jQuery to disable the right click menu in
html page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<script>
$(document).bind("contextmenu",function(e){ return false; });
</script>

</head>
<body>

</body>
</html>

Output:
There is nothing as output, just the thing is that the right
click menu won’t open on right mouse click.

2. Write a jQuery to click on a image to scroll to the


top of the page.
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('img').click(function () {
$('html, body').animate({ scrollTop: 0 }, 'slow');
return false;
});
});
</script>
</head>

<body style="background-color: black;">

<center>
<br><br><br><br><br><br><br><br>
<h1 style="color:white">Welcome to THE POLAR BEAR CONCERT</h1>
<br><br><br><br><br><br><br><br><br><br>
<img width="500px" height="500px" src="1.jpeg" alt="">
<img width="500px" height="500px" src="2.jpeg" alt="">
<img width="500px" height="500px" src="3.jpeg" alt="">
<img width="500px" height="500px" src="4.jpeg" alt="">
</center>

</body>

</html>
3. Write a jQuery to change the color of any
paragraph to red on mouseover event.

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<script>
$(document).ready(function () {
$("p").hover(function () {
$(this).css("color", "gold");
},
$("p").hover(function () {
$(this).css("color", "black");
})
);
}
);
</script>

</head>

<body style="background-color: red;">

<center>
<p style="font-size: 25px; font-weight: bold;">
sarva-dharmān parityajya
mām ekaṁ śaraṇaṁ vraja
ahaṁ tvāṁ sarva-pāpebhyo
mokṣayiṣyāmi mā śucaḥ</p>
</center>

</body>

</html>

4. Display and hide message shown in the div tag on


click of the buttons
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<title>Document</title>

<script>
$(document).ready(function () {
$("#b1").click(function() {
$("div").hide();
});

$("#b2").click(function() {
$("div").show();
})
});
</script>

</head>

<body>
<center>
<div>
<h1>YOU CAN'T SEE ME</h1>
</div>
</center>

<button id="b1">Hide</button>
<button id="b2">See</button>

</body>
</html>
Experiment 2
1. Write a jQuery to add a class to an element.
2. <!DOCTYPE html>
3. <html lang="en">
4. <head>
5. <meta charset="UTF-8">
6. <meta name="viewport" content="width=device-width, initial-
scale=1.0">
7. <title>Document</title>
8. <script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js">
</script>
9.
10. <script>
11. $(document).ready(function () {
12. $("button").click(function() {
13. $("p").addClass("fein");
14. $("p").text("This is element with class");
15. })
16. })
17. </script>
18.
19. <style>
20. .fein {
21. background-color: red;
22. }
23. </style>
24. </head>
25. <body>
26. <p>This is element without class</p>
27. <button>Add class</button>
28. </body>
29. </html>
2. Write a jQuery to access the position of an
element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
let left = $("p").position().left;
let top = $("p").position().top;
alert(`Left: ${left}, top: ${top}`);
});
})
</script>
</head>
<body>
<p>This is an element</p>
<button>Get position</button>
</body>
</html>

3. Create a jQuery animation to manipulate multiple


CSS properties like padding, color etc
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("button").click(function () {
$("p").animate({
padding: '20px',
marginLeft: '50px',
height: 'toggle',
opacity: 0.7
}, 1000);
});
})
</script>
</head>

<body>
<p style="font-size: 25px; font-weight: bold;">This is an element</p>
<button>Animate</button>
</body>

</html>

You might also like