1. jQuery Download & Installation Guide
Looking to start with jQuery? This comprehensive tutorial covers everything you need to know about how to download jQuery, its installation, and getting up and running in minutes. Whether you prefer a CDN, npm, yarn, or manual download, we’ll walk you through each step in detail.
1.1. Why Download jQuery?
- To include jQuery in your website, you need to download or link it so your code can use its functions.
- Without downloading or linking jQuery, your scripts that depend on it will not work.
- It helps you start development quickly without building everything from scratch.
1.2. Choosing the Right jQuery Version
Before you download, decide which jQuery version suits your project:
- Stable 3.x series: Modern, ES5+ baseline, security fixes (recommended for new projects).
- 2.x series: Drops IE6–8, slightly smaller file (legacy support fading).
- 1.x series: Supports very old browsers (only if you must support IE6–8).
Most developers choose the latest 3.x minified build for new sites.
2. Download jQuery
2.1. Download jQuery Via CDN
Using a CDN is the easiest way to get started with jQuery instead of downloading or download the script from CDN to a file and load into your project. Copy and paste one of these into your HTML’s <head>:
Option1: jQuery CDN Visit
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
Option2: Google CDN Visit
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
Option3: Microsoft CDN Visit
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.7.1.js"></script>
Option4: CDNJS Visit
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
Option5: jsDelivr Visit
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
Faster Loading with Google's CDN
When you use Google’s hosted jQuery, visitors often already have it cached from other websites. This means your pages load quicker. Plus, CDN servers deliver the file from a nearby location, reducing wait times even more.
2.2. Manual jQuery Download
If you prefer to host jQuery yourself, follow these steps to download the script instead of using CDN:
- Visit the official jQuery download page.
- Under “Production,” click Download the compressed, production jQuery 3.x or latest version (a .min.js file).
- Save jquery-x.x.x.min.js into your project’s js/ folder.
- Add the downloaded jQuery script to your HTML, either inside the <head> or, preferably, just before the closing </body> tag.
You can also download the uncompressed version (jquery-x.x.x.js) for easier debugging.
2.3. Install jQuery with npm or Yarn
For modern workflows, use a package manager like npm or Yarn to get started with jQuery development. This method handles jQuery installation in Node.js projects:
Install jQuery Via npm
npm install jquery
Install jQuery Via Yarn
yarn add jquery
Import jQuery
After installing via npm or Yarn, import jQuery in your JavaScript modules as below. This approach is ideal for bundlers like Webpack, Rollup, or Parcel.
import $ from 'jquery';
3. Using jQuery in Your Project
After downloading or installing, use the jQuery script in your projects as below:
3.1. Verify jQuery Installation
Once you have added jQuery to your project by any of the above methods, you can verify if its loaded in your project by following the method.
Type in Console to Verify jQuery installation
console.log('jQuery version:', jQuery.fn.jquery);
Output
jQuery version: x.x.x
3.2. Essential Guidelines
- Load Order: Always include jQuery before any plugin or custom script that depends on it.
- Ready Handler: Wrap your code in $(document).ready(() => { /* your code */ }); to ensure the DOM is loaded.
- Min vs. Slim Builds: The “slim” version (jquery-x.x.x.slim.min.js) excludes AJAX and effects, although it is smaller in size but less feature‑rich.
3.3. Troubleshooting Common Issues
While using jQuery in your code, you may encounter these common issues.
- “$ is not defined”: Ensure your jQuery is loaded in your project, and check for typos in the URL.
- Version Mismatch: If plugins require older versions, you may need to host multiple jQuery builds using jQuery.noConflict().
- Cached CDN Failure: Provide a local fallback:
Local Fallback
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>window.jQuery || document.write('<script src="project/js/jquery-3.6.4.min.js"></script>');
</script>
Quick Tip
For best performance, serve jQuery from a reputable CDN and enable HTTP/2 on your server to allow parallel asset loading.
4. Conclusion & Next Steps
You’ve learned how to download and install jQuery via CDN, manual download, and npm/Yarn. Now you’re ready for the next tutorials, exploring plugins, and building interactive UI components. Check out our jQuery Syntax guide to start getting familiar with it!