Q.
1) Solve the following: Animation: jQuery allows easy
animation of elements like hiding,
1) What you should know before learning
showing, fading, and sliding.
jQuery?
AJAX: jQuery makes it easier to load
Before learning jQuery, you should have a
data from a server asynchronously
basic understanding of the following:
without refreshing the page.
HTML (HyperText Markup
Cross-Browser Compatibility: jQuery
Language): Know the structure of a
handles browser inconsistencies and
web page, elements, and their
ensures code works across different
attributes.
browsers.
CSS (Cascading Style Sheets):
3) What is the use of jQuery Selector?
Understanding how to style
elements, including properties like jQuery Selectors are used to select HTML
colors, fonts, and layout. elements and perform actions on them.
They are based on CSS selectors but provide
JavaScript: Familiarity with
a more efficient and powerful way to select
JavaScript basics like variables,
and manipulate elements.
functions, loops, and conditionals, as
jQuery is a JavaScript library. Basic Selectors: Select elements by
ID (#id), class (.class), or element
DOM (Document Object Model):
type (div, p, etc.).
Understand how web pages are
structured and how to interact with Attribute Selectors: Select elements
elements in the DOM. based on their attributes ($
("[type='text']")).
2) Why is jQuery required?
Pseudo-class Selectors: Select
jQuery is a fast, small, and feature-rich
elements based on their state
JavaScript library that makes it easier to
(:first, :last, :hidden, etc.).
handle tasks like:
Example:
DOM Manipulation: jQuery provides
simple methods to select, modify, javascript
and update HTML elements.
Copy
Event Handling: jQuery simplifies
$('#myButton').click(function() {
the process of adding event listeners
(e.g., clicks, mouse movements, alert('Button clicked!');
etc.).
});
4) What is an event in jQuery?
An event in jQuery refers to a user action or The animate() method in jQuery allows you
interaction with an element, such as a to create custom animations by changing
mouse click, keypress, hover, etc. jQuery CSS properties over a specified duration. It
makes it easy to attach event handlers to can be used to animate things like height,
HTML elements to perform actions when width, opacity, etc.
these events occur.
Example:
Example:
javascript
javascript
Copy
Copy
$('#box').animate({
$('#myButton').click(function() {
width: '200px',
alert('Button clicked!');
height: '100px'
});
}, 1000);
5) What is traversing in jQuery?
This animates the width and height of the
Traversing refers to the process of element with the ID box over 1 second
navigating through the DOM tree in jQuery (1000 milliseconds).
to find and select elements relative to a
7) What is the use of jQuery remove()
specified element. jQuery provides several
method?
methods for traversing, such as:
The remove() method in jQuery is used to
.parent(): Get the parent element.
remove selected elements from the DOM.
.children(): Get the child elements. This method also removes all attached data
and event handlers from the elements.
.siblings(): Get all sibling elements.
Example:
.find(): Find elements inside the
selected element. javascript
Example: Copy
javascript $('#myDiv').remove(); // Removes the
element with ID 'myDiv'
Copy
$('#myDiv').children().css('color', 'red');
Q.2) Attempt any FIVE of the following:
6) What is the use of jQuery animate()
method? 1) Write a jQuery code to scroll the web
page from bottom to top and vice versa.
javascript javascript
Copy Copy
// Scroll to bottom $(document).ready(function() {
$('#scrollBottom').click(function() { $(document).bind("contextmenu",
function(e) {
$('html, body').animate({ scrollTop: $
(document).height() }, 1000); e.preventDefault(); // Disable right-click
}); });
});
// Scroll to top 4) Write a jQuery code to check whether
jQuery is loaded or not.
$('#scrollTop').click(function() {
javascript
$('html, body').animate({ scrollTop: 0 },
1000); Copy
}); if (window.jQuery) {
Here, #scrollBottom and #scrollTop are the alert("jQuery is loaded!");
IDs of buttons or elements that trigger the
} else {
scrolling actions.
alert("jQuery is not loaded!");
2) Write jQuery code to disable the right-
click menu on an HTML page. }
javascript 5) Write jQuery code to fix broken images
automatically.
Copy
javascript
$(document).ready(function() {
Copy
$(document).on('contextmenu',
function(e) { $('img').on('error', function() {
return false; // Disables right-click $(this).attr('src', 'path/to/default-
context menu image.jpg'); // Set a default image if the
original one is broken
});
});
});
6) Write jQuery code to disable a link.
3) Write a jQuery code to disable right-click
of the mouse on the page. javascript
Copy 2) Explain any two commonly used event
methods in jQuery.
$('a').click(function(e) {
.click(): This method attaches an
e.preventDefault(); // Prevent the default
event handler to the click event of
action (navigation)
an element. It is commonly used to
alert('Link disabled!'); trigger actions when an element
(like a button or link) is clicked.
});
javascript
Copy
Q.3) Attempt any One of the following:
$('#button').click(function() {
1) How is jQuery installed (added) in web
pages? alert("Button clicked!");
There are two ways to add jQuery to a web });
page:
.hover(): This method attaches event
Via CDN (Content Delivery handlers for both mouseenter and
Network): This method involves mouseleave events, which are
linking to a hosted version of jQuery triggered when the mouse pointer
from a CDN. enters or leaves an element.
html javascript
Copy Copy
<script $('#element').hover(function() {
src="https://code.jquery.com/jquery-
$(this).css('color', 'red');
3.6.0.min.js"></script>
}, function() {
Locally (Download and Include): You
can download the jQuery file from $(this).css('color', 'black');
the official website and store it
});
locally. Then, include it in your HTML
file. 3) Explain fading methods in jQuery.
html jQuery provides several fading methods to
create smooth transitions involving the
Copy
opacity of elements:
<script src="path/to/jquery-
3.6.0.min.js"></script>
.fadeIn(): Gradually increases the
opacity of an element from 0 to
100% (makes the element visible).
javascript
Copy
$('#element').fadeIn(1000); // 1000
milliseconds (1 second)
.fadeOut(): Gradually decreases the
opacity of an element from 100% to
0% (makes the element invisible).
javascript
Copy
$('#element').fadeOut(1000); // 1000
milliseconds (1 second)
.fadeTo(): Changes the opacity of an
element to a specific level without
affecting other properties like
display or visibility.
javascript
Copy
$('#element').fadeTo(1000, 0.5); // Fades to
50% opacity
