How to add jQuery code to HTML file ? - GeeksforGeeks

22 Jul, 2021

In this article, we will see how to add jQuery code to HTML file. You can easily add jQuery to HTML by using several methods, like adding jQuery from CDN or directly downloading jQuery files and including them into your projects. Several methods are discussed in this article.
Methods:
Download and include the jQuery file
Including jQuery from CDN.
Approach1: Download and include the jQuery file
Follow the information below to include jQuery in your HTML file.

Use this link to download the jQuery file from the official JQuery website. ( download compressed or uncompressed files according to your need).
After downloading, just move the downloaded file into the HTML file to which you want to add your jQuery.
Finally, use the below syntax to include jQuery in the HTML file. i.e add jQuery file name between script tags.

Use this link to download the jQuery file from the official JQuery website. ( download compressed or uncompressed files according to your need).
After downloading, just move the downloaded file into the HTML file to which you want to add your jQuery.
Finally, use the below syntax to include jQuery in the HTML file. i.e add jQuery file name between script tags.
<script type="text/javascript" src="jquery-3.5.1.min.js"> </script>
 
Example:
HTML
 

 
 










<!DOCTYPE html> 
<html> 
  <head> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> 
    </script> 
    <script> 
      $(document).ready(function () { 
        $("button").click(function () { 
          $("h2").html("Complete Portal for Geeks</b>"); 
        }); 
      }); 
    </script> 
  </head> 
  <body> 
    <center> 
      <h2>GeeksforGeeks</h2> 
      <button>Click here</button> 
    </center> 
  </body> 
</html> 






Output:
Approach 2: Follow the step below to include Jquery in the HTML file.

In this, you just need to add the link below with the script tag to your HTML file, whether CDN provided by Google or Microsoft.

Google CDN
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script>

Microsoft CDN
<script src=’http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.js’></script>




In this, you just need to add the link below with the script tag to your HTML file, whether CDN provided by Google or Microsoft.

Google CDN
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script>

Microsoft CDN
<script src=’http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.js’></script>



Google CDN
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script>

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script>
Microsoft CDN
<script src=’http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.js’></script>

<script src=’http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.js’></script>
Example:
HTML
 

 
 










<html> 
  <head> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
    </script> 
    <title>Added Jquery into HTML</title> 
  
    <style> 
      h1 { 
        color: green; 
      } 
    </style> 
  </head> 
  
  <body> 
    <center> 
      <h1>Welcome to GeeksforGeeks</h1> 
      <button id="trigger">Click me</button> 
      <h3 id="demo"></h3> 
  
      <script type="text/javascript"> 
        $(document).ready(function () { 
          $("#trigger").click(function () { 
            $("#demo").html("Complete portal for Geeks"); 
          }); 
        }); 
      </script> 
    </center> 
  </body> 
</html>






Output:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

HTML-Questions


jQuery-Methods


jQuery-Questions


Picked


HTML


JQuery


Web Technologies

Writing code in comment? 
                                    Please use ide.geeksforgeeks.org, 
                                    generate link and share the link here.
                                
REST API (Introduction)
HTML Cheat Sheet - A Basic Guide to HTML
Design a web page using HTML and CSS
Form validation using jQuery
Angular File Upload
JQuery | Set the value of an input text field
Form validation using jQuery
How to change selected value of a drop-down list using jQuery?
How to change the background color after clicking the button in JavaScript ?
How to fetch data from JSON file and display in HTML table using jQuery ?