jQuery is a lightweight, free, and open-source JavaScript library that simplifies manipulating the Document Object Model (DOM), handling events, and creating dynamic web experiences. The main purpose of jQuery is to simplify the usage of JavaScript on websites. jQuery simplifies complex JavaScript tasks with single-line methods, it makes your code more readable and maintainable. By learning jQuery, you can significantly improve the interactivity and responsiveness of your web pages.
In this jQuery tutorial, you'll learn all the basic to advanced concepts of jQuery such as DOM manipulation and event handling, AJAX, animations, plugins, etc.
Table of Content
What is jQuery?
jQuery is a lightweight, “write less, do more” JavaScript library that simplifies web development. It provides an easy-to-use API for common tasks, making it much easier to work with JavaScript on your website. It streamlines web development by providing a concise syntax and powerful utilities for creating interactive and dynamic web pages.
Features of jQuery
Here are some key points about jQuery:
- DOM Manipulation: jQuery simplifies HTML DOM tree traversal and manipulation. You can easily select and modify elements on your web page.
- Event Handling: Handling user interactions (such as clicks or mouse events) becomes straightforward with jQuery.
- CSS Animations: You can create smooth animations and effects using jQuery.
- AJAX (Asynchronous JavaScript and XML): jQuery simplifies making asynchronous requests to the server and handling responses.
- Cross-Browser Compatibility: jQuery abstracts browser-specific inconsistencies, ensuring your code works consistently across different browsers.
- Community Support: A large community of developers actively contributes to jQuery, ensuring continuous updates and improvements.
- Plugins: jQuery has a wide range of plugins available for various tasks.
Ways to include jQuery
1. Download jQuery:
You can download the jQuery library from the official website jquery.com and include it in your project by linking to it using a <script> tag, and host it on your server or local filesystem.
2. Include the jQuery Library:
1. Using jQuery Library Content Delivery Network (CDN) in your HTML project.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>2. Once the library is included, you can write jQuery code within <script> tags. jQuery code typically follows a specific syntax:
<script> $(document).ready(function() { // Your jQuery code here });</script>The $(document).ready(function() { ... }) function ensures your code executes only after the document is fully loaded, preventing errors.
Example:
In this example, we are using hover() and css() methods to change the style of heading content on mouse move over.
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script>
$(document).ready(function () {
$("h1").hover(
function () {
$(this).css(
"color",
"green"
);
},
function () {
$(this).css(
"color",
"aliceblue"
);
}
);
});
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
</body>
</html>
Output:
Learn More About jQuery Tutorial
- Introduction
- Syntax
- Design and Implement Calculator
- Create an Image Slider
- Design a Tic-Tac-Toe Game
- Create a To-Do List
- Create followspot effect
- Custom Image Magnifier Design
- Create a Responsive Image Gallery
- Create a Simple Map
jQuery Tutorial Complete References
- Selectors Complete Reference
- Event Methods Complete Reference
- Effects Complete Reference
- HTML/CSS Methods Complete Reference
- Traversing Complete Reference
- AJAX Complete Reference
- Properties Complete Reference
- Plugins Complete Reference
- Questions
jQuery Interview Questions and Answers (2024)
Advantages of jQuery
- Wide range of plug-ins that allows developers to create plug-ins on top of the JavaScript library.
- Large development community.
- It is a lot easier to use compared to standard javascript and other javascript libraries.
- It lets users develop Ajax templates with ease. Ajax enables a sleeker interface where actions can be performed on pages without requiring the entire page to be reloaded.
- Being Light weight and a powerful chaining capabilities makes it more strong.
jQuery Cheat Sheet
The jQuery Cheat Sheet provides a quick reference guide for developers, summarizing common jQuery methods, selectors, events, and syntax, making it easier to write and understand jQuery code efficiently.