Getting started with jQuery

In this lesson, you will learn how to include jQuery in your web pages to start working with.

Getting jQuery

jQuery is a very light-weight, CSS3 compatible JavaScript library. It comes in compressed and uncompressed versions of jQuery files.

The uncompressed file is best for development or debugging purposes. Due to being so light-weight (30kB) it saves bandwidth and improves the production process.

To use jQuery in your web pages, you will have to include the library as an external JavaScript file. Like any external JavaScript file, you need to link it using the script tag. However, due to its popularity, you have more choices when it comes to including jQuery in your web page.

Linking to the jQuery file on CDN server

The first method uses a CDN or Content Distribution Network, which means that some other server hosts the jQuery file and responds to the jQuery function requests. There are many CDN servers around the globe which hosts jQuery files including Microsoft, jQuery, and Google all let you include the jQuery file on your websites using their servers.

CDNs offer performance and storage benefits by using jQuery hosted on the servers spread across the globe. There is a pretty good chance that someone visiting your website has already saved the jQuery in their browser’s cache as many designers use these CDNs. This means the browser doesn’t need to re-download it when visiting your website, resulting in a significant performance increase.

You can find the list of available CDN at https://jquery.com/download/.

For Google CDN just go here.

Using the CDN link, you can include this in the code as:

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

Downloading jQuery file

If you still prefer to download the jQuery library file and save it at your server, you can do so. It has its own advantages of using the downloaded jQuery file, such as you have more control over the library. With CDN you may have to face the delay for the latest version to be uploaded.

To download the latest version of the jQuery library, visit https://jquery.com/download/. Right-click the link (compressed or uncompressed) and save the file anywhere you want on your site server.

Adding jQuery to a page

If you are using one of the CDN versions of jQuery, you can include the file using the following snippet.

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

This will include jQuery version 3.4.1. jQuery team has already stopped patches for older versions jQuery 1.x and 2.x.

In case you want to use the downloaded jQuery file, you have to include the library as an external js file. For example, say you have saved the jquery.js file in a folder name js under your site’s root directory, to use the file you will have to add the following script tag before the closing body tag.

<script scr=”js/jquery-3.4.1.min.js”></script>

Once you have included the jQuery file, you are ready to use jQuery functions in your website. The next step is to add jQuery programming.

<script>
$(document).read(function() {
//your code goes here
});
</script>

To write jQuery code in your web page, you have to use the regular <script> tags. Now, you must be wondering what $ means here or $(document).ready() is. The $ sign is a short form of writing jQuery which means that instead of writing jQuery(), you can write $(). The $(document).read() a function is jQuery’s built-in function that waits until the DOM tree is ready for the web page and once it is completed, it runs your script.

To animate, or manipulate an HTML element of a web page, JavaScript has to select the element first. However, JavaScript can’t select an HTML element until the web browser has completed its rendering. In other words, you need to wait till the DOM tree is completed to create the cool stuff with jQuery. That’s what the $(document).ready() function does.

It may seem confusing at the moment, just keep in mind that when putting your jQuery code in the web page, always include a .ready() function and put your code inside { and }

If you feel writing $(document).ready(function(){}) is too much for you, jQuery also gives an alternate way:

$(function(){
// your code goes here
});

Writing your first jQuery program

Open your favorite web editor. Write the following code and save it as helloworld.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example of Simple jQuery Powered Web Page</title>
<link rel="stylesheet" type="text/css" href="/examples/css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").css("color", "#00FF00");
});
</script>
</head>
<body>
<p> Hello world! </p>
</body>
</html>

Result

The code display Hello World in lime green color which was modified using jQuery function css(). jQuery first select an element p just like it would be selected in CSS and then call the function to change the color to #00FF00(hexcode value of lime color).

The purpose of this example was to give you an idea about how you can include jQuery on your web page and use its functions to manipulate web elements.