Open In App

jQuery Introduction

Last Updated : 26 Jul, 2024
Comments
Improve
Suggest changes
Like Article
Like
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). jQuery simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Ajax interactions, and cross-browser JavaScript development.

Table of Content

The jQuery is the only library available today that meets the needs of both designer types and programmer types. jQuery is widely famous for 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

How to Add jQuery to HTML Page?

There are two methods to use jQuery in your HTML page.

The easiest method to include jQuery in your HTML page is by using a CDN link. CDN links hosted the jQuery files to the servers that can be easily used without downloading the files.

Include jQuery CDN link to the HTML page using <script> tag inside the head section of the page.

Syntax:

HTML 
<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>jQuery Page</title>
  
    <!-- jQuery CDN Link -->
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
  	</script>
</head>
  
<body>
    <!-- Page Content -->
</body>

</html>

2. Download the jQuery Files Locally and use Them

Visit the jQuery Official Website and download the latest version of jQuery. Then include the downloaded jQuery file into your project. Place the jquery.min.js file in a directory within your project, such as js/. Next, use <script> tag inside the <head> section to add jQuery file into your web page.

Syntax:

HTML 
<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>jQuery Page</title>
  
    <!-- Local jQuery -->
    <script src="js/jquery.min.js"></script>
</head>
  
<body>
    <!-- Page Content -->
</body>

</html>

Basic Syntax for jQuery Function

In jQuery, the syntax for selecting and manipulating HTML elements is written as:

$(selector).action()

Where -

  • $ - This symbol is used to access jQuery. It’s a shorthand for the jQuery function.
  • (selector) - It specifies which HTML elements you want to target. The selector can be any valid CSS selector, such as a class, ID, or tag name.
  • .action() - It represents the action or method that you want to perform on the selected elements. Common actions include manipulating CSS properties, handling events, or performing animations.

For Example - Selects all <p> elements on the page and hides them.

$('p').hide();

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).

jQuery Basic Example

Create a basic HTML page with a <button> and a <p> element. When the user clicks the button, the content of the paragraph will be hidden.

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
    <title>My First jQuery Example</title>

    <!-- Include jQuery from CDN Link -->
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
    </script>
</head>

<body>
    <p id="message">Hello, World!</p>
    
    <button id="hideButton">
        Hide Message
    </button>

    <!-- jQuery Script -->
    <script>
        $(document).ready(function() {
            $('#hideButton').click(function() {
                $('#message').hide();
            });
        });
    </script>
</body>

</html>

Output:

jQuery-Basic-Example


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 of Using jQuery in a Project

  • 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 of Using jQuery in a Project

  • 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.

Next Article
jQuery Syntax

S
Shivam.Pradhan
Improve
Article Tags :
Practice Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox