How to link jQuery in HTML page?

jQueryWeb DevelopmentFront End Technology

What is jQuery?

jQuery is a fast and concise JavaScript library primarily designed with a nice motto − Write less, do more. The main purpose of this library is to make it easier to use JavaScript on our website. jQuery simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery wraps many lines of JavaScript code into methods that we can call with a single line of code.

How to link jQuery?

There are two ways to link jQuery in an HTML page -

  • By downloading the jQuery library locally  - you can download the jQuery file on your local machine and include it in the HTML page.

  • By including the jQuery from a CDN - you can add the jQuery library into your HTML page directly from a Content Delivery Network (CDN).

1. By downloading the jQuery library locally

  • Download the latest version of jQuery library from the official website https://jquery.com/download/. You can download any of the four types of available jQuery versions- uncompressed, minified, slim and slim & minified.

  • Now put the downloaded jquery-3.6.0.min.js file in a directory of your website, e.g. /jquery.

  • We can link jQuery in an HTML page by using a script tag and providing the downloaded jQuery library file address as the src attribute. The jquery-3.6.0.min.js can be added like below.

<head>
<script type="text/javascript" src="/jquery/jquery-3.6.0.min.js"></script>
</head>

Let’s understand with the help of a complete example.

Example

In the example below we include jQuery library in our HTML page as follows –

 Live Demo

<html>
   <head>
      <title>The jQuery Local Example</title>
      <script type="text/javascript" src="/jquery/jquery-3.6.0.min.js">
      </script>
      <script type="text/javascript">
         $(document).ready(function() {
            document.write("Hello, World! We are using jQuery from local machine");
         });
      </script>
   </head>
   <body>
      <h1>Hello</h1>
   </body>
</html>

Output

This will produce the following result -

Hello, World! We are using jQuery from local machine

2. By including the jQuery from a CDN

We can link the jQuery library in our HTML page directly from a Content Delivery Network. There are different CDNs that provide the latest version of the jQuery library. For Example, Google, Microsoft, Cloudflare CDNs, and jQuery’s own CDN.

Let’s understand how to link jQuery from these CDNs each with help of examples.

Example #1 − Link jQuery from Google CDN

We can link jQuery in an HTML page by using a script tag and providing a jQuery Google CDN address as the src attribute. The jquery.min.js can be added like below.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Here, in the example below we link the jQuery library in our HTML page as follows −

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            height: 100px;
            width: 100px;
            background-color: red;
            border-radius: 5px;
            border: 2px solid blue;
            margin-left: 50px;
            margin-top: 50px;
            display: none;
         }
      </style>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
      <script>$(document).ready(function() {
            $('div').fadeIn('slow');
         });
      </script>
   </head>
   <body>
      <div></div>
   </body>
</html>

Output

Here the fadeIn() method changes the opacity, for selected elements, from hidden to visible. It is to specify the speed of the fading effect, which can be slow or fast.

Example #2 − Link jQuery from Microsoft CDN

We can link jQuery in an HTML page by using a script tag and providing a jQuery Microsoft CDN address as the src attribute. The jquery-3.6.0.js can be added like below.

<script src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.0.js'></script>

Here, in the example below we link the jQuery library from Microsoft CDN in our HTML page −

 Live Demo

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>jQuery from Microsoft AJAX CDN</title>
   <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.6.0.min.js"></script>
   <script>
      function domReady() {
         $('#btn').click( showMessage );
      }
      function showMessage() {
         $('#message').fadeIn('slow');
      }
      $( domReady );
   </script>
</head>
<body>
   <button id="btn">Show Message</button>
   <div id="message" style="display:none">
      <p> Hello, World! We are using jQuery from Microsoft CDN. </p>
   </div>
</body>
</html>

Output

When you click on the “Show Message” button, the message will be displayed.

Example #3: Link jQuery from Cloudflare CDN

We can also use Cloudflare CDN to link the jQuery library to our HTML page. To link jQuery in an HTML page we add jQuery Cloudflare CDN address to the src attribute of the script tag. The jquery.min.js can be added like below.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" ></script>

Here, in the example below we link the jQuery library from Cloudflare CDN in your HTML page −

<html>
   <head>
      <title>jQuery Google CDN</title>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" ></script>
      <script>
         $(document).ready(function() {
            document.write("Hello, World! We are using jQuery from Cloudflare CDN.");
         });
      </script>
   </head>
   <body>
      <h1>Hello</h1>
   </body>
</html>

Output

This will produce the following result -

Hello, World! We are using jQuery from Cloudflare CDN.

Example #4 − Link jQuery from jQuery CDN

We can also use jQuery CDN to link the jQuery library in our HTML page. To link jQuery in an HTML page we add the jQuery CDN address to the src attribute of the script tag. We also have to add integrity and crossorigin to the script. We can directly copy the script code from the jQuery website. jquery-3.6.0.min.js can be added like below-

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

Here, in the example below we link the jQuery library from jQuery CDN in your HTML page −

<html>
   <head>
      <title>jQuery Google CDN</title>
      <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="crossorigin="anonymous"></script>
      <script>
         $(document).ready(function() {
            document.write("Hello, World! We are using jQuery from jQuery CDN.");
         });
      </script>
   </head>
   <body>
      <h1>Hello</h1>
   </body>
</html>

Output

This will produce the following result -

Hello, World! We are using jQuery from jQuery CDN.
raja
Published on 05-Dec-2017 18:07:19

Advertisements