jQuery Tutorials

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 the terms, jQuery simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Ajax interactions, and cross-browser JavaScript development.

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:

Why to use jQuery?

jQuery helps us to do the following:



  • It helps us to manipulate HTML and CSS
  • It helps us to manipulate DOM (Document Object Model) elements
  • Provides event methods to trigger and respond to an events on a html page such as mouse click, keypress etc.
  • Implements AJAX calls.

Using jQuery (JS) library on HTML page: There are several ways to start using jQuery on your website.

  • Use the Google-hosted/Microsoft-hosted content delivery network (CDN) to include a version of jQuery. or
  • Download own version of jQuery from jQuery.com and host it on own server or local filesystem.

Learn more about jQuery:

Interview Questions:

Complete Reference:

Recent Articles on jQuery

Please write comments if you find anything incorrect, or you want to share more information about the topic discussed above.

My Personal Notes arrow_drop_up