Skip to main content

Setting up the jQuery Library

In this tutorial, you will learn how to set up the jQuery library for your web projects. jQuery, as you may know, is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, and animation much simpler with an easy-to-use API that works across a multitude of browsers. By incorporating jQuery into your projects, you can write less code while accomplishing more.

What You'll Need​

  1. A text editor to write your HTML, CSS, and JavaScript. You can use any text editor of your choice. Some popular ones include Sublime Text, Atom, and Visual Studio Code.
  2. A modern web browser to view your HTML file. This tutorial assumes you are using Google Chrome, but the process should be similar for other browsers.

Downloading jQuery​

There are two versions of jQuery available for downloading:

  1. Production version - This is for your live website because it has been minified and compressed.
  2. Development version - This is for testing and development (uncompressed and is readable code).

You can download jQuery from the official website. Here's a direct link to the download page: jQuery Download

For the purpose of this tutorial, we will be using the minified version, which is the production version.

After you've downloaded jQuery, you should have a file named jquery-version.min.js in your download folder.

Setting Up jQuery​

Once you have downloaded the jQuery file, the next step is to include it in your HTML file. Here's how you can do it.

Create a new HTML file in your text editor and save it with a .html extension. In the HTML file, you can include the jQuery file with the <script> tag. The src attribute should point to the location of your jQuery file.

Here's an example of how it should look:

<!DOCTYPE html>
<html>
<head>
  <script src="jquery-version.min.js"></script>
</head>
<body>

</body>
</html>

Make sure you replace jquery-version.min.js with the name of your actual jQuery file.

Verifying the Setup​

To verify if jQuery has been included correctly, you can write a simple jQuery code in your HTML file.

Here's an example:

<!DOCTYPE html>
<html>
<head>
  <script src="jquery-version.min.js"></script>
  <script>
    $(document).ready(function(){
      console.log('jQuery is working!');
    });
  </script>
</head>
<body>

</body>
</html>

This code will log jQuery is working! to the console when the document is ready. To view the console, right-click anywhere on your web page, select Inspect, and then switch to the Console tab. If jQuery has been set up correctly, you should see jQuery is working! in the console.

And that's it! You have successfully set up the jQuery library for your project. With jQuery correctly set up, you can now begin to take advantage of the powerful features it offers to make your web development easier and more efficient.