Open In App

jQuery Tutorial

Last Updated : 20 Mar, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. Elaborating on the terms, it simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Ajax interactions, and cross-browser JavaScript development. jQuery Tutorial provides basic to advanced-level concepts for beginners and working professionals.

In this jQuery tutorial, you’ll explore the essentials of building dynamic and interactive web pages using jQuery. Beginning with the basics, you’ll grasp concepts like DOM manipulation and event handling. Advancing to more advanced topics such as AJAX, animations, and plugins, you’ll gain proficiency in creating engaging web experiences.

jQuery Tutorials

What is jQuery

jQuery is a fast, small, and feature-rich JavaScript library that simplifies complex tasks like DOM manipulation, event handling, andon . It streamlines web development by providing a concise syntax and powerful utilities for creating interactive and dynamic web pages.

Reason to learn jQuery

  • HTML and CSS manipulation: jQuery facilitates easy modification of HTML elements and styles using its simplified syntax and methods.
  • DOM manipulation: jQuery simplifies traversing, selecting, and modifying DOM elements, enhancing front-end development efficiency.
  • Event handling: jQuery offers methods to handle various events like clicks and keypresses, enabling interactive user experiences.
  • AJAX implementation: jQuery simplifies asynchronous data retrieval and interaction with servers, enhancing the responsiveness of web applications.

How to use jQuery with HTML ?

There are several ways to start using it on your website.

  • 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.
  • CDN (Content Delivery Network): You can also include jQuery directly from a CDN, such as the one provided by Google or jQuery’s official CDN. This method doesn’t require you to download any files; you just need to include a <script> tag with the CDN link in your HTML file.

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"
                        );
                    }
                );
            });
        </script>
    </head>

    <body>
        <h1>GeeksforGeeks</h1>
    </body>
</html>

Output:

jQuery Basic Example

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.

Disadvantages of jQuery

  • While jQuery has an impressive library in terms of quantity, depending on how much customization you require on your website. The functionality may be limited thus using raw javascript may be inevitable in some cases.
  • The JQuery javascript file is required to run the commands, while the size of this file is relatively small (25-100KB depending on the server). It is still a strain on the client computer and maybe your web server as well if you intend to host the script on your own web server.

Learn More About jQuery Tutorial

jQuery Tutorial Complete References

Interview Questions and Answers (2024)

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.

Recent Articles on jQuery



Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads