Introduction to jQuery
View Tutorial Contents
What Is jQuery?
Why Learn jQuery?
- jQuery allows you to easily manipulate the HTML and the DOM.
- jQuery allows you to easily manipulate the CSS.
- jQuery allows you to easily attach functions to HTML events.
- jQuery allows you to easily add effects and animations to web pages.
- jQuery allows you to easily add Ajax to your web pages and applications.
- jQuery code will also run the same across all major web browsers.
What Should You Know Before Learning jQuery
Before you learn jQuery you should at least be familiar with the basic concepts of:
How To Add jQuery To Your Web Pages
There are two ways to add jQuery to your web pages. You can:
- Link to a jQuery file hosted on a Google CDN or a Microsoft CDN.
- Download one of the jQuery libraries and place it on your website like any other file.
NOTE: CDN stands for Content Delivery Network.
NOTE: It is a best practice to link to a jQuery file hosted on a Google CDN or a Microsoft CDN for live websites.
When a user visits a website that links to a jQuery file hosted on either a Google CDN or a Microsoft CDN, it will store it in cache, this leads to a faster load time any other time when visiting other websites that link to a jQuery file hosted on either a Google CDN or a Microsoft CDN.
Also, when linking to a jQuery file hosted on either a Google CDN or a Microsoft CDN, the web browser will automatically download the file from the closest CDN available.
Linking To A jQuery File From A CDN
Below are the links to the jQuery Google CDN and Microsoft CDN hosted files.
The jQuery 2.x file version is the same as the jQuery 1.x file version, except that it does NOT support Internet Explorer 6, 7 or 8. It is generally recommended that you use the jQuery 1.x file version because IE 8 is relatively common, unless you do not care about your jQuery working on IE 8.
Google CDN jQuery 1.x snippet:
Google CDN jQuery 2.x snippet:
Microsoft CDN jQuery version 1.11.3
jQuery version 2.1.4
If you chose to link to one of the Google CDN or Microsoft CDN hosted jQuery files, at this point your HTML file should look something like this:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Your Page Title</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> </head> <body> </body> </html>
Downloading jQuery To Your Website
You can download the latest jQuery version from jquery.com/download/.
There are two versions:
- The compressed, production version.
- The uncompressed, development version.
The compressed, production version has minified and compressed, so use this version for live websites.
The uncompressed, development version is used for development and debugging.
The jQuery file is referenced with the HTML <script> tag in the <head> section like the example below.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Your Page Title</title> <script src="js/jquery-1.11.3.min.js"></script> </head> <body> </body> </html>