There are different methods to install jQuery, but here we can discuss mainly two ways to install jQuery inside the web page.
There are two methods that are most popular to add jQuery inside the web page.
Please keep in mind that, there are two versions of jQuery for downloading. These are the production version and development version.
Production version- This is very useful for a live website since it is minified and compressed hence its size reduces and performance increases.
Development version - This is useful for testing and development. It will be uncompressed and readable code.
You can download both version from Jquery.com .
Once, jQuery is downloaded then save it with the .js extension. Please keep in mind that, jQuery is the library of Javascript hence it should be saved with the .js extension.
Downloaded jQuery file can be added inside the HTML web page using <script> elements.
Please keep in mind that the <script> tag should be placed either inside the <head> section or just before the closing </body> tag.
Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery Installation</title>
<script src="../code-support/library/jquery/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
There are different organizations that provide jquery CDN links. These providers are Google, Microsoft, StackPath, etc.
It is very beneficial since it reduces the loading time because these companies are hosted Jquery CDN on multiple servers across the globe and when someone requests these files then they will be served from the nearest server. That is the actual reason for performance improvement.
General Syntax
<head>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Started With jQuery</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
