Did all that JavaScript seem a little too complicated for not much gain? Good! We'll take all those concepts and make them much easier to use with jQuery.
First, you need to include jQuery in your web projects. There are two different formats in which jQuery is available: development and production formats.
The development file is larger because it's annotated in a way that makes it easier for developers to understand what's going on in the code. There are code comments, useful whitespace to separate sections, and more. These annotations interspersed among the code make it easier to integrate jQuery smartly, like having tips directly within the code. The file containing the jQuery development format is simplyjquery-1.12.2.js (the numbers may be different if you use a different jQuery version).
The production format is smaller and therefore faster to use on your live web pages. Most of the annotations you'd find in the development format have been removed, since the end "user" will be a web page and not a human being who would benefit from additional remarks about the code. The file containing the jQuery production format isjquery-1.12.2.min.js. The only difference in the file name is .min meaning the contents is compressed.
Download both files here: https://jquery.com/download/
In sum:
Use the development format when you're working on your project so you see the helpful comments and annotations.
Use the production format once you make your project live on the web so it performs better.
Including the files
You also have two options for including jQuery files (whether development or production) within your code. The first is a classic scenario: you download a copy of either the development or production format and include it with your project files. Again, you download the files here: https://jquery.com/download/
Reference it in your HTML as follows:
<script src="folder_name/jquery-1.12.0.js"></script>You'd also have to put the file on the same server where you're hosting your website.
I recommend the second option, however, which is to include jQuery via CDN (content delivery network). The jQuery files are hosted on servers worldwide, so you don't have to put them on yours! This means better performance and the possibility that a user already has the file in their local memory ("cached") from a visit to another website using the same version of jQuery. Win-win!
If you include jQuery in this way, you'll include the following script in your HTML:
<script src="//code.jquery.com/jquery-1.12.0.min.js">A boilerplate HTML document ends up looking like this:
<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<p>Page content here</p>
<!-- include jQuery via CDN -->
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<!-- your own file in your project folder -->
<script src="js/javascript_file_that_where_you_write_your_jquery.js"></script>
</body>
</html>