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.
jQuery is a Javascript library that serves to make Javascript easier to use. It’s like an abbreviated form of Javascript. Instead of writing out Javascript, you can use a short jQuery action instead.
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.
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 --> <script>src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script> </body> </html>
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.
jQuery is an open-source software permissive under an MIT license. jQuery is not a product of Pair Networks, Inc., and Pair Networks provides no warranty for jQuery. Please note that there are many levels of javascript libraries available. Please consult with your IT professional for advice and guidance on an appropriate library. This specific product may or may not meet your needs. Pair Networks, Inc. is providing support for this tutorial for your convenience and is not responsible for jQuery's performance. Please read carefully the terms and scope of services for any online service or product you are considering purchasing or using.