Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to link jQuery in HTML page?
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 –
<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 −
<!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.
24K+ Views
