jQuery Tutorial - GeeksforGeeks

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.

Getting Started with jQuery

1. Download the jQuery Liberary

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 CDN in Code

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>

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.

jQuery Basic Example

In this example, we are using hover() and css() methods to change the style of heading content on mouse move over.

html

<!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"
                    );
                }
            );
        });