Scribd
Upload
24 views4 pages

B65 WT Assignment7

Uploaded by

prathamesh.paigude23
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
24 views4 pages

B65 WT Assignment7

Uploaded by

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

Name: Prathamesh Paigude

Div: SY-IT-B
Roll no.: 65
PRN no.: 12311646
Subject: WT Assignment 7

1. jQuery HOME
Theory: jQuery is a fast, lightweight JavaScript library that simplifies HTML document
traversal, event handling, animation, and AJAX interactions for rapid web development.
2. jQuery Intro
Theory: jQuery simplifies JavaScript by offering easy-to-use methods for DOM manipulation,
event handling, and AJAX calls. It’s designed to “write less, do more.”
5. jQuery Syntax
Theory: The basic jQuery syntax is: $(selector).action(). The $ represents jQuery, selector is
used to find HTML elements, and action() is the method applied to them.
Example:
$(this).hide() - hides the current element.
$("p").hide() - hides all <p> elements.
$(".test").hide() - hides all elements with class="test".
$("#test").hide() - hides the element with id="test".

6. jQuery Selectors
Theory: jQuery selectors are used to find or select HTML elements. Selectors can target
elements by tag, ID, class, or attribute.
Eg:
#id Selector
.class Selector

7. jQuery Events
Theory: jQuery provides easy methods for event handling. Common events include click,
hover, keydown, and submit. Event methods allow you to bind actions to elements when
they are interacted with.

CODE :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>jQuery Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.highlight {
background-color: rgb(21, 255, 0);
}
</style>
</head>
<body>

<h1 id="main-heading">Welcome to jQuery</h1>


<p class="description">This is a paragraph that can be changed using
jQuery.</p>
<button id="changeText">Change Text</button>
<button id="toggleHighlight">Highlight</button>
<button id="hideDiv">Hide Div</button>

<div id="myDiv">This is a div that can be hidden using jQuery.</div>

<script>
$(document).ready(function() {
$("#changeText").click(function() {
$("#main-heading").text("jQuery in Action!");
});

// jQuery Selectors
$("#toggleHighlight").click(function() {
$(".description").toggleClass("highlight");
});
$("#hideDiv").click(function() {
$("#myDiv").hide();
});
});
</script>

</body>
</html>

Output :

You might also like