Intro
What is jQuery? Like Bootstrap, jQuery is a web api Library. It was created to simplify the JavaScript coding. The jQuery website defines it as:
- jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
so it is essentially a open source library that will simplify our JavaScript coding. And like Bootstrap, jQuery needs to be downloaded and installed into your web project.
Installation
Like Bootstrap, we want to utilize the jQuery CDN. So we need to go to the Download Page, and scroll down the page to the jQuery CDN section. You'll see different CDN versions but the one used most often is the Google version. This is the version we want to use because if it is more widely used, then there is a greater chance that the library will already be "cached" on client computers, which speeds up our webpage loading.
So, we'll click on the Google CDN link and you'll see the most recent versions of their CDN. At this point in time, the latest version is 3.7.1 so that's the version we're going to use.
Now you'll notice that the CDN is a <script>, just like JavaScript. So we'll install it the same way as JavaScript, which is to insert the <script> tag and the bottom of the HTML page, right before the closing <body> tag. Here is the current <script> element:
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
However: It is important to note that the jQuery <script> element must be placed before any JavaScript elements, at the bottom of the HTML document. The reason for this is that if you have the JavaScript elements first, it will try to run jQuery code before the jQuery script tag has actually downloaded and cached. So the page won't know what to do with the jQuery code and will have errors.
jQuery Ready
We learned in our JavaScript lessons that we could actually load our Js <script> elements into the "head" section of our HTML document. But we don't because it may cause problems in the way the page loads and runs.
The same is true for jQuery. If we load our jQuery <script> element into the"head" section, it is possible that the page will finish downloading, before jQuery has had enough time to download and cache it's library. This will result in the jQuery code not working. But there is a fix.
Let's say we have a page with an <h1> element:
- <h1>H1 Heading Element</h1>
We could write some jQuery code in a Js file to change the color of the <h1> text:
- $("h1").css("color", "blue");
This is valid jQuery code, but if we loaded the jQuery <script> element into our "head" section, this code will not work, because the script will try to run the jQuery code, before it has been downloaded and cached. But, as mentioned above, there is a fix.
We can use the jQuery method ready, which forces the page to finish downloading and caching the jQuery CDN before it runs the jQuery code. Here's the syntax that goes into your .js file:
- $ ( document ) . ready ( function() {
- $ ( "h1" ) . css ( "color", "blue" );
- });
What this does is force the page wait until jQuery is ready, before running any jQuery scripts.
Note: this should only be necessary if you are installing the jQuery CDN into the "head" section of the page. Installing your jQuery and JavaScript "scripts" at the bottom of the webpage, before the closing <body> element, does the exact same thing as ready. Remember, jQuery first, then the JavaScript <script>'s.