Introduction to jQuery

By - Ankit Singh, Aman Sharma

 What is jQuery?

• Definition:
jQuery is a fast, lightweight, and feature-rich JavaScript library.

• Purpose:
Simplifies HTML document traversal and manipulation, event
handling, and animation.
Why Use jQuery?
• Cross-browser compatibility:
jQuery handles the differences between browsers.
• Simplified syntax:
Reduces the amount of code needed for common tasks.
• AJAX support:
Makes asynchronous requests and updates easier.
 Getting Started
• Include jQuery:
<script src =
"https://code.jquery.com/jquery-3.6.0.min.js"></script>

• Basic Syntax :
$(document).ready(function() {
// jQuery code here
});
 Selectors
 Basic Selector:
$("elementSelector").action();
 ID Selector:
$("#idSelector").action();
 Class Selector:
$(".classSelector").action();
DOM Manipulation
 Change HTML Content:
$("#myElement").html("New content");
 Change Attribute Values:
$("#myElement").attr("attribute", "new value");
 Add or Remove Classes:
$("#myElement").addClass("newClass");
$("#myElement").removeClass("oldClass");
 Event Handling
 CLICK EVENT:

$(" #MYBUT TON ").CLICK(FUNC TION () {

// CODE TO EXECUTE ON BUT TON CLICK
});

 HOVER EVENT:

$(" #MYELEMENT ").HOVER(

FUNC TION () {
// CODE TO EXECUTE ON HOVER
},
FUNC TION () {
// CODE TO EXECUTE WHEN HOVER ENDS
}
);
Effects and Animations
 Show/Hide Elements:
$("#myElement").show();
$("#myElement").hide();

 Fade Effects:
$("#myElement").fadeIn();
$("#myElement").fadeOut();

 Animations:
$("#myElement").animate({ opacity: 0.5, height: "50%" }, 1000);
AJAX • Asynchronous JavaScript and XML (AJAX)
• Load Data from Server:
$.ajax({
url: "example.com/data",
method: "GET",
success: function(data) {
// Handle the data
},
error: function(error) {
// Handle errors
}
});
 Conclusion

jQuery simplifies JavaScript and enhances web

development.

Widely used in the industry for its ease of use and versatility.
Thank You