jQuery | Introduction

18 May, 2021
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.Note: The only library available today that meets the needs of both designer types and programmer types is jQuery.
jQuery is widely famous with its philosophy of “Write less, do more.” This philosophy can be further elaborated as three concepts:
Finding some elements (via CSS selectors) and doing something with them (via jQuery methods) i.e. locate a set of elements in the DOM, and then do something with that set of elements.
Chaining multiple jQuery methods on a set of elements
Using the jQuery wrapper and implicit iteration
Using jQuery (JS) library on HTML pageThere are several ways to start using jQuery on your web site.
Use the Google-hosted/ Microsoft-hosted content delivery network (CDN) to include a version of jQuery.Download own version of jQuery from jQuery.com and host it on own server or local filesystem.
Use the Google-hosted/ Microsoft-hosted content delivery network (CDN) to include a version of jQuery.
Download own version of jQuery from jQuery.com and host it on own server or local filesystem.
Note: All jQuery methods are inside a document-ready event to prevent any jQuery code from running before the document is finished loading (is ready).
Basic syntax for any jQuery function is:
$(selector).action()
A $ sign is to define/access jQuery
A (selector) is to “query (or find)” HTML elements in html page
A jQuery action() is the action to be performed on the selected element(s)
Example:
<!DOCTYPE html><html>    <head>        <script src=                "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">      </script>        <script>            $(document).ready(function () {                $("h2").click(function () {                    $(this).hover();                });            });        </script>    </head>    <body>        <center>            <h2 style="color: green;">              GeeksforGeeks          </h2>        </center>    </body></html>
Output:
Why jQuery?Some of the key points which support the answer for why to use jQuery:
It is incredibly popular, which is to say it has a large community of users and a healthy amount of contributors who participate as developers and evangelists.
It normalizes the differences between web browsers so that you don’t have to.
It is intentionally a lightweight footprint with a simple yet clever plugin architecture.
Its repository of plugins is vast and has seen steady growth since jQuery’s release.
Its API is fully documented, including inline code examples, which in the world of JavaScript libraries is a luxury. Heck, any documentation at all was a luxury for years.
It is friendly, which is to say it provides helpful ways to avoid conflicts with other JavaScript libraries.
Advantages:
Wide range of plug-ins. jQuery allows developers to create plug-ins on top of the JavaScript library.
Large development community
It has a good and comprehensive documentation
It is a lot more easy to use compared to standard javascript and other javascript libraries.
JQuery 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 jQuery more strong.
Disadvantages:
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 JQuery 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 JQuery script on your own web server.
jQuery-Basics
JavaScript
JQuery
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
Hide or show elements in HTML using display property
Difference Between PUT and PATCH Request
JQuery | Set the value of an input text field
How to change selected value of a drop-down list using jQuery?
Form validation using jQuery
How to add options to a select element using jQuery?
How to Dynamically Add/Remove Table Rows using jQuery ?