jQuery Get Started


To get started, grab a copy of jQuery and include it in your project. jQuery is available for download in two Versions: compressed and uncompressed.

The uncompressed file is ideal for development or debugging, but the minimized and compressed file is ideal for production as it saves valuable bandwidth and increases speed due to the smaller file size.

jQuery may be downloaded from here:  https://jquery.com/download/

Because jQuery is just a JavaScript library, you can include it in your HTML document with the <script> element like you would any other JavaScript file once you've downloaded it. Always include the jQuery file before your custom script; Otherwise, your jQuery code will not be able to use the jQuery APIs.

Example

Preview

Using jQuery from the CDN

If you don't want to download and host jQuery yourself, you can include it in your document using a publicly available CDN (Content Delivery Network) connection. CDNs can improve speed by reducing loading times because they host jQuery on multiple servers around the world, and when a user requests a file, it is served from the server closest to them.

This also has the advantage that if a visitor to your webpage has downloaded a copy of jQuery from the same CDN while visiting other sites, they will not need to download it again because it is already in the browser's cache.

StackPath provides the CDN for jQuery.

Syntax


Create Your First jQuery-Enabled Web Page

Now that you understand the purpose of the jQuery library and how to include it in your document, it's time to use it. In this part, we will use jQuery to change the background color of the header text from black to red.

Example

Preview

In the previous example, we performed a simple jQuery action by changing the color of the header, i.e. <h1> element, when the document was ready, which is known as the document ready event. In the next chapters, we will learn about jQuery selectors, events and methods.