The 2 Best Ways to Add jQuery to HTML

jQuery is one of the most popular Javascript libraries on the web today.

By adding jQuery to your HTML project, you can take advantage of the many built-in functions to enhance the user experience and add interactivity to your website.

Have you been wondering how to incorporatejQuery in your HTML files?

Well, don’t worry any more.

This post will teach all the various methods on How to Add jQuery to HTML.

It will also include code snippets to give you a better understanding and the advantages and disadvantages of each method.

How to Add jQuery to HTML

There are two main ways to include jQuery in an HTML document.

Download the jQuery library file and include it in your HTML code locally. You can do this by saving the file to your project directory and then adding the following script tag to your HTML file:

<script src="/path/to/jquery.js"></script>

1	<script src="/path/to/jquery.js"></script>

Include jQuery from a CDN (Content Delivery Network). This is a good option if you don’t want to host the jQuery library file yourself.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

1	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script src=“https://code.jquery.com/jquery-3.6.0.min.js”></script>

If you are developing your site using a Javascript library like React.JS, you can use a package manager like npm (Node Package Manager) to install jQuery as a dependency in your project.

You can then import jQuery into your project using the following code:

import $ from 'jquery';

1	import $ from 'jquery';

Additionally, you can use a build tool like Webpack or Browserify to bundle jQuery and other dependencies into a single file.

This method is quite useful in a situation where you are working on a large project with many dependencies.

1. Download the jQuery Library File and Include It in Your HTML Code Locally to add jQuery to HTML

The first method of adding jQuery to an HTML document involves downloading the jQuery library file and hosting it locally on your own server.

To get started, navigate to the official jQuery website and download the jQuery library file.

You will see several options like:

Download the compressed, production jQuery version
Download the uncompressed, development jQuery version

Download the map file for jQuery version

To keep things simple, Download the “uncompressed, development jQuery version.”

That will download a .js file on your local machine. Save this file in the same directory with your HTML file.

You can then include the file in your HTML document using a script tag like this:

<script type="text/javascript" src="/path/to/jquery.js"></script>

1	<script type="text/javascript" src="/path/to/jquery.js"></script>

The code snippet below shows how we included the jQuery library file in our HTML file.

<!DOCTYPE html>
<html lang="en">
  <head>
    <script type="text/javascript" src="jquery-3.6.3.js"></script>
  </head>
  <body>
    <h1>Hello there web users</h1>
    <p>Welcome to MASCHITUTS</p>
  </body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

<h1>Hello there web users</h1>

<p>Welcome to MASCHITUTS</p>

</body>

</html>

Advantages of Using a Locally Hosted jQuery Library File

One advantage of this method is that it allows you to host the jQuery library file yourself, which can be useful if you don’t want to rely on a CDN (Content Delivery Network).

This can be particularly useful if you are working on a project that needs to be self-contained or that needs to be accessible offline.

Another advantage of this method is that it allows you to use a specific version of the jQuery library that you have tested and knows works well with your project.

This can be important if you are working on a large project that depends on a specific version of jQuery.

Finally, hosting the jQuery library file locally can also be a good option if you are concerned about the reliability or performance of external CDNs.

By hosting the file yourself, you can have more control over how it is delivered to your users.

2. Include jQuery from a CDN (Content Delivery Network) to add jQuery to HMTL

Using a CDN (Content Delivery Network) to include jQuery in your HTML file is a simple and efficient way to use the library.

A CDN is a network of servers that are distributed around the globe.

The purpose of a CDN is to deliver content to users more quickly and efficiently by serving the content from a server that is geographically closer to the user.

To include jQuery from a CDN, use the HTML script tag as shown below.

<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>

1	<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>

The code snippet below shows how we included the jQuery library from a CDN in our project.

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://code.jquery.com/jquery-3.6.3.js"></script>
  </head>
  <body>
    <h1>Hello there web users</h1>
    <p>Welcome to MASCHITUTS</p>
  </body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

<h1>Hello there web users</h1>

<p>Welcome to MASCHITUTS</p>

</body>

</html>

Note: You should always use the minified version of jQuery when including it in your website for production, as it is smaller and faster to download. You can find these versions on the official jQuery releases webpage.

Advantages of Including jQuery from a CDN

Improved performance: Using a CDN can improve the performance of your website by serving the jQuery library file from a server that is geographically closer to the user. This can result in faster download times and a better user experience.

Reduced burden on your server: When you include jQuery from a CDN, you don’t have to host the library file on your own server. This can reduce the load on your server and improve its performance.
Cached by the browser: When a user visits a website that includes jQuery from a CDN, their browser will download the jQuery library file and store it in its cache. If the same user visits your website the library file will already be stored in the cache and won’t need to be downloaded again.
Simplicity: Including jQuery from a CDN is a simple process that requires only a single script tag in your HTML file. There is no need to download and host the library file yourself.

Always up to date: When you include jQuery from a CDN, you will always be using the latest version of the library. This can be important if you want to take advantage of the latest features and bug fixes.

Where Do You Write the jQuery Script in HTML

Now that you have a good understanding of how to add jQuery to HTML, you might be wondering, where you will write your jQuery code.

Method 1: Use HTML Script Tags

This is the simplest way of writing your jQuery code inside your HTML file. Use the HTML <script> tags to enclose your jQuery code anywhere inside your webpage as shown below.

<script>
  $(document).ready(function() {
    // your jQuery code goes here
  });
</script>

$(document).ready(function() {

// your jQuery code goes here

});

</script>

Note: Where you place the <script> element in your HTML file will determine when the jQuery code is executed. It’s generally a good idea to place the <script> element at the end of the <body> element, so that the rest of the page can load first.

See the code snippet below.

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://code.jquery.com/jquery-3.6.3.js"></script>
  </head>
  <body>
    <h1>Hello there web users</h1>
    <p>Welcome to MASCHITUTS</p>

    <script>
      $(document).ready(function () {
        $("p").hide();
      });
    </script>
  </body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

<h1>Hello there web users</h1>

<p>Welcome to MASCHITUTS</p>

$(document).ready(function () {

$("p").hide();

});

</script>

</body>

</html>

Method 2: Write the jQuery Code in an External File and Link it to your HTML.

You can include jQuery in your HTML file by linking to it in the same way you would link to any other regular javascript file.

For example, create a file called “index.js” in your project file and link it to your HTML as shown below.

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://code.jquery.com/jquery-3.6.3.js"></script>
  </head>
  <body>
    <h1>Hello there web users</h1>
    <p>Welcome to MASCHITUTS</p>

    <script src="index.js"></script>
  </body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

<h1>Hello there web users</h1>

<p>Welcome to MASCHITUTS</p>

</body>

</html>

You can now write your jQuery code in the index.js file to manipulate your HTML elements.

How do I make sure that the jQuery code is executed after the page has finished loading?

To make sure that the jQuery code is executed after the page has finished loading, you can wrap your code in the jQuery ready function.

This function is called when the DOM (Document Object Model) is fully loaded and ready for manipulation.

For example:

$(document).ready(function() {
  // your jQuery code here
});

$(document).ready(function() {

// your jQuery code here

});

How do I know if jQuery is working on my page?

To verify that jQuery is working on your page, you can use the $ symbol to access the jQuery object. If jQuery is working, this will return the jQuery object.

If jQuery is not working, this may cause an error or return undefined.

You can use the code snippet below to check whether jQuery is working on your page.

if (typeof $ === "undefined") {
  console.log("jQuery is not working");
} else {
  console.log("jQuery is working");
}

if (typeof $ === "undefined") {

console.log("jQuery is not working");

} else {

console.log("jQuery is working");

}

The 2 Best Ways to Add jQuery to HTML

How to Add jQuery to HTML

1. Download the jQuery Library File and Include It in Your HTML Code Locally to add jQuery to HTML

Advantages of Using a Locally Hosted jQuery Library File

2. Include jQuery from a CDN (Content Delivery Network) to add jQuery to HMTL

Advantages of Including jQuery from a CDN

Where Do You Write the jQuery Script in HTML

Method 1: Use HTML Script Tags

Method 2: Write the jQuery Code in an External File and Link it to your HTML.

How do I make sure that the jQuery code is executed after the page has finished loading?

How do I know if jQuery is working on my page?

Archives

Categories