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.
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 --> <script>src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script> </body> </html>
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.