Welcome to the second lesson on jQuery for absolute beginners. This course assumes you already have a basic understanding of html and css and a little bit of JavaScript. We also assume you have read the previous tutorial, if not you can check it here.
The previous lesson simply covered what jQuery is and how to add it to our webpages. We glossed over some important information for the sake of time and simplicity. In this tutorial we will cover them in some details.
CDN (Content Delivery Network)
This simply means another website hosting resources (e.g. images and files), thereby making them available for use to anyone who requests it. Because of its popularity, Google, Microsoft and also jQuery itself host it on their servers around the world. There are a couple of benefits. For example if someone in Australia visits your site, he’ll receive the jQuery file from a server that’s closer to him than your web server, which means he’ll get the file faster and your site will appear to load fast.
What this means for you is that you no longer have to download the jQuery file and add it to your folder but only have to add a link on your page to the CDN you want to use e.g if using Google’s CDN your script tag would look like this
<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js”> </script>
That’s all you need to do. But the flip side is that you and your visitors need to have an Internet connection for it to work.
COMPRESSED & UNCOMPRESSED
Also called Minified and Unminified. Usually when hosting your website you want all your files to be as small as possible so that your website will load quickly. What a compressed or minified jQuery file is, is a jQuery file which has been made as very small in bytes. This is achieved by removing all spaces and comments between codes making it almost impossible to read. That was what we saw on the webpage when we clicked the download link in the last lesson. A compressed file is usually referred to as Production-ready. Take a look at the jquery.js file you have. It is a compressed file.
An uncompressed jQuery file is one that has a lot of white space (e.g. tabs, line-breaks etc.) and comments to enable the developer read and understand the code. As a result they usually end up being quite large. Because it is meant for the developer to go through, it is referred to as the development version. So it should only be used during the development phase of your website if ever.
If you are not going to study it for educational purposes (and as a beginner you most likely wont), you do not ever need to use the uncompressed jQuery file.
You can easily know which is a compressed jQuery file. It has a “.min.js” suffix.
$(document).ready()
The $(document).ready() function is a jQuery function used to ensure that your code runs at the appropriate time. What it does is that it waits until the HTML of your page loads before running your code. A lot of what you want to do with JavaScript is to manipulate the contents of your webpage e.g. making an image slideshow, hide a section, change a div’s background etc. Well how do you do that if the html isn’t yet loaded on the webpage? Remember that the html has to be first downloaded and this might take a while depending on some factors. Also when a browser encounters any JavaScript code, it stops everything else and runs it. Now imagine the browser running your code that’s manipulating some html tags when the tags aren’t even on the page yet!
Let me illustrate:
Going back to our previous example:
What happens when we move the jQuery code to the top before the div tag and remove the $(document).ready() function.
What happened? Nothing.
In another case where we return the script tag to its previous position, still without $(document).ready():
When you save and refresh, your code actually works. That’s because the browser has parsed the html before it got to your code. But this is very bad practice. As long as you are using jQuery to manipulate content on your webpage you should always use $(document).ready().
What $(document).ready is essentially doing is telling the browser; “Hey Mr. Browser, don’t read through my mind yet until you’ve loaded all the html and contents because I can’t do anything with them if they aren’t physically present” and the browser replies; “Oh sure, no problem”. I hope you get the point.
Note: Any script tag that relies on the jQuery file must always be put after it i.e. the link to the jQuery file must be before any programming that relies on it.
Also all your programming code should come after any CSS style sheets. Usually jQuery references styles from a style sheet.
There is also a shorter version of $(document).ready():
$(function() {
// your jQuery code here here
});
Versions
The jQuery version you downloaded is the latest version i.e. version “3.0.0.” In the near future it might have changed to 3.11.0, 3.2.1 or 4.0.0 etc.
The jQuery team is always working to make sure that jQuery works well. When new bugs are discovered they try to fix them. Also new versions of web browsers come out with new capabilities, so the team has to react to these. New features are sometimes added to jQuery to make it work better and faster.
You can tell if a version is a major update. For example “2.0.0” and “3.0.0”.
For versions such as “1.4.0”, these are referred to as dot releases. They usually offer new functions, update of older functions to work better, etc. The last number, like the final 0 in jQuery 1.11.0, usually refers to some sort of bug fix for the previous version.
I hope you have a better understanding now of all that we covered.
In the next lesson, we will dive into CSS selectors, which forms the basis of content manipulation and traversal in jQuery.
