Note: This article assumes you have a basic understanding of HTML and CSS. If HTML or CSS is new to you, we recommend you learn HTML and CSS basics before attempting to use jQuery. See w3schools’ HTML tutorials or their CSS tutorials for some helpful pointers on getting started learning HTML or CSS.
Getting Your HTML Ready for jQuery
jQuery was created specifically to select HTML elements and apply actions to them. These actions can be anything from hiding elements to causing an action when an element is clicked.
To tell the HTML document that you are using jQuery, you need to call the jQuery library. You can do this two different ways.
Note: This library must be referenced before you any jQuery code.
Add jQuery Library CDN
This is the easier option. All you have to do is tell your HTML document to pull the library from a link to the jQuery Library CDN.
There are many different versions and CDNs. You can go to jQuery CDN – Latest Stable Versions to see jQuery CDNs. To implement, just find the version you would like to use and click the most desirable option: uncompressed, minified, slim, or slim minified. This will give you the link you need to add to your HTML document in order to call the jQuery library.
You can also visit the Other CDNs article for jQuery CDNs from Google, Microsoft, etc. They will also give you a link you can use.
Add your chosen link right before the closing </body> element.
<!doctype html> <html lang=“en”> <head> <title>Example</title> <link rel=“stylesheet” href=“css/style.css”> </head> <body> <!-- Add HTML body here --> src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script> </body> </html>
Note: The integrity and crossorigin attributes verify that the third-party servers have not been altered or manipulated.
It is recommended not to reference the jQuery library any higher in the code because it might interfere with loading the HTML document.
Download jQuery Library
Downloading the jQuery library is more challenging. Go to the jQuery website, choose a method for downloading, and follow their steps to download the jQuery library to your server. Once you have downloaded and set up your jQuery library, be sure to reference it before the closing </body> element in your HTML document.
<!doctype html> <html lang=“en”> <head> <title>Example</title> <link rel=“stylesheet” href=“css/style.css”> </head> <body> <!-- Add HTML body here --> <script src="js/jquery.min.js"></script> </body>
It is recommended not to reference the jQuery library any higher because it might interfere with loading the HTML document.