jQuery Tutorial
jQuery Introduction jQuery Getting Started jQuery Syntax jQuery Selectors jQuery Events
jQuery Effects
jQuery Hide/Show jQuery Fade jQuery Slide jQuery Animation jQuery stop() jQuery Callback jQuery Chaining
jQuery Manipulation
jQuery Get/Set jQuery Add jQuery Remove jQuery CSS Classes jQuery css() jQuery Dimensions
jQuery Traversing
jQuery Traversing jQuery Ancestors jQuery Descendants jQuery Siblings jQuery Filtering
jQuery AJAX
jQuery AJAX Intro jQuery Load jQuery Get/Post jQuery AJAX Events
jQuery Misc
jQuery noConflict() jQuery Filters
jQuery References
jQuery Reference jQuery Selectors jQuery Events jQuery Effects jQuery HTML/CSS jQuery Traversing jQuery AJAX jQuery Miscellaneous jQuery Properties

jQuery Getting Started

In this chapter you will learn how to incorporate jQuery into your web pages.


Adding jQuery to Your Web Pages

There are two ways to use jQuery:

  • Download the jQuery library from jQuery.com
  • Include jQuery from a CDN, like Google

Downloading jQuery

To get started, first download a copy of jQuery and include it in your document.

There are two versions of jQuery available for downloading:

  • Compressed version - This is for your live website because it has been minified and compressed
  • Uncompressed version - This is for testing and development (uncompressed and readable code)

Both versions can be downloaded from: https://jquery.com/download/.

Once you've downloaded the jQuery file you can see it has .js extension, because the jQuery is just a JavaScript library, therefore you can include the jQuery file in your HTML document with the <script> element just like you include normal JavaScript files.

Always include the jQuery file before your custom scripts; otherwise, the jQuery APIs will not be available when your jQuery code attempts to access it.


Including jQuery from CDN

If you don't want to download and host jQuery yourself, you can include it from a CDN (Content Delivery Network).

Both Google and Microsoft provides content deliver for the latest version.

To use jQuery from Google or Microsoft, use one of the following:

Google CDN:
Run code
Microsoft CDN:
Run code

CDNs can offer a performance benefit by hosting jQuery on servers spread across the globe. This also offers an advantage that if the visitor to your webpage has already downloaded a copy of jQuery from the same CDN, it won't have to be re-downloaded.

Advantage of using the jQuery CDN:

Many users already have downloaded jQuery from Google or Microsoft when visiting another site. As a result, it will be loaded from cache when they visit your site, which leads to faster loading time. Also, most CDN's will make sure that once a user requests a file from it, it will be served from the server closest to them, which also leads to faster loading time.