Getting Started with jQuery

In order to use jQuery, you need to include the jQuery libary in your web page.

The jQuery library comes as a downloadable .js file. You need to include this file in any document that needs to run jQuery. Alternatively you can link to a CDN such as Google's.

Download jQuery

If you choose this option, you can download jQuery from the jQuery website.

Compressed and uncompressed copies are available. The compressed copy is more suitable for production sites, as it is smaller and uses less bandwidth. The uncompressed version can be used for development or debugging. However, unless you plan to change/check the jQuery library itself, the compressed copy should be fine for both production and development.

Be sure to place the file in a directory within your website, then link to it using the script element.

Like this:

<script src="jquery.js"></script>

However, it's usually a good idea to keep the file name the same as when you downloaded it, as it contains the jQuery version. Also, most sites have a separate folder for their javascript files so you'll need to use the full path in this case.

So your HTML document might look something like this:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Example</title>
    <script src="/js/jquery-3.1.1.min.js"></script>
    <script>
      // Your jQuery code goes here
    </script>
  </head>
  <body>

    <!-- 
    HTML content goes here 
    You can also put jQuery code here
    -->

  </body>
</html>

The scripts don't necessarily need to go in the document head element. They can go in the body element if required.

Using a Content Delivery Network (CDN)

Alternatively you can use a content delivery network (CDN) to deliver your jQuery. The examples in this tutorial use this option.

Here's an example of linking to jQuery on Google Hosted Libraries:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

So your HTML document might look something like this:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script>
      // Your jQuery code goes here
    </script>
  </head>
  <body>

    <!-- 
    HTML content goes here 
    You can also put jQuery code here
    -->

  </body>
</html>

The Microsoft Ajax Content Delivery Network also hosts jQuery, so that's another option.

About CDNs

Using a content delivery network (CDN) can help improve performance of your jQuery (and website as a whole).

When users visit your website, it's likely that their browser will have already downloaded jQuery from another website (seeing as jQuery is so popular). If any of those sites uses the same CDN that you use (and the same jQuery version), it will probably be in their browser cache. This means their browser won't need to download it again — it can use the local, cached version. This effectively speeds up your site, as it is one less resource to download.

But even if it's not stored in their cache and they have to download it, most CDNs will ensure the file is downloaded from the server closest to the user. Again, this speeds up the load time.