2.2 Not So Fast, jQuery

Welcome back to Learn jQuery in 30 Days. Today, we're going to be taking a look at jQuery's document.ready method. So let's consider an example where you need to load jQuery within the head. Maybe it's required for some applications. This will happen. Well, it might be possible that you will try to use one of the selectors that we referenced in the previous lesson up here within the head of our document. So for example, I'm going to use the dollar sign function to reference jQuery, and once again, I'm going to get a list item. But this time, let's do it differently. Because we know that we can use virtually any CSS selector, if I wanna grab first list item, I can do that with CSS alone, first-child. And now we're saying, get the list item that is the very first child of its parent, which is the ul. Now we will once again add a class, and we'll say emphasis. Once again, the next step is to create that class, and this time, we'll make the font weight bold, okay? That looks good to me, but what do you think will happen if we view this in the browser? Well, let's find out. I'll come back to Google Chrome and reload the page. And what? Nothing's being bold. Why isn't this taking effect? Well, let's first check the Chrome Developer Tools to see if we made a mistake. Once again, I can go to View > Developer > Developer Tools, or on my computer, I'll hit Cmd+Option+I. First, I'm gonna see were there any errors in the console? No, that looks fine. Next, I'm gonna go to Elements, ul, and what, why isn't that emphasis class being applied? And that's because we're trying to work with the DOM before it's been loaded. And this is very important for you to understand. The DOM will be loaded top to bottom essentially. So it's gonna go all the way up here and work its way down. So it will get to this script tag, and we're saying, hey, jQuery, go and fetch the very first list item that is a child of its parent. So it tries to do that, but wait a minute. We're only working with this much essentially, so we don't have a list item to work with. We haven't discovered this yet. So watch what happens if I simply take this, and once again, move it to the bottom, like so. Now if I come back and reload the page, now it's taking effect because at that point, the DOM is ready to be manipulated. So if we revert back a few steps, how can we keep the script tag at the top but still tell jQuery, don't do this until the first possible millisecond that we can work with the DOM? I want jQuery to wait until all of this is ready and then do it immediately. And we use what we call the document.ready method. So we'll do this at the top and say jQuery, and now, rather than referencing a specific CSS selector, I'm going to wrap the document. Now I'm going to say, when it's ready to be manipulated, and I'll use the ready method, then I want you to run a function. So we can either reference a function name, like so. And then you could create it, var function name, like so. Or you can pass an anonymous function, and that's what we will do in this case, function. Now when the document is ready to be manipulated within this callback function, we will execute whatever we need to. So now I can simply bring this out and paste it in like so. Let's try it again. Reload and now it's still working because it's wrapped within the ready method. So essentially, the way it works at a very low level is every nine or ten milliseconds, jQuery will determine whether the DOM is ready to be worked with. And we can use something called document.ready state to figure out the current state of the DOM. Now, it will run that over and over as quickly as possible, and most of the time, it will return loading, but as soon as it returns complete, we know, okay, we're ready to go execute this function because we know that at that point, all of this is ready to be worked with and manipulated. Now, jQuery also offers a shorthand. Rather than document.ready, we can use this syntax, jQuery, and then we simply pass a function to it, like so. If we were to take this out, paste it in, and I will comment this section out. Once again, reload the page, and we're getting the exact same effect. So how come? Well, once again, we're going to take a look at the jQuery source. Now, I'm going to assume you're relatively new to JavaScript as a whole. I hope that you've read maybe two or three chapters from a book, but you're more or less a work in progress, but just go along with me. Right here, we're creating jQuery and we're making it equal to a function that executes immediately. All of this is fine. Don't worry about it too much, but what I want you to pay attention to is right here. And this is what handles what we pass to the jQuery function. If this is still confusing to you, just think of it this way, function myFunc(). It's the exact same thing, but we're doing it like this, function jQuery, or dollar sign. And then we can reference that function in the same way that we would do myfunc, we would do it, jQuery, like so. We're simply referencing a function. Then, what we pass to that function, for example, ul, a CSS selector. jQuery needs to parse that and figure out what are we doing. Are we using a CSS selector? Are we using an HTML fragment? What are we working with? Now in this case, rather than a CSS selector, we're passing the jQuery function a function itself. So let's see how jQuery figures that out. First, it checks, is there no selector, if there's nothing past or null? Nope, that's not it. Was a DOM element passed? No. Was it body? It's going to do an optimization if we're simply trying to reference body. And you'll see it's simply translates to document.body. Otherwise, if it's a string, which would be in this case ul li, something like that. Let's keep going though. We don't want any of this just yet. Let's scroll down. Here we go. This is what we want, and this handles if we pass a function to jQuery. And in this case, check it out, shortcut for document.ready. So, if the selector we pass, which is this right here, that is the selector. If it's a function, in that case, we're gonna use the shorthand for referencing document.ready. So once again, this and this are identical. You can use whichever you prefer. A lot of people stick with the second version only because it's more readable. It's more descriptive. When the document is ready, then run this code. And that way, maybe somebody's who's not as familiar with jQuery won't be looking at this and thinking, huh, what's a function? What are we doing there? However, for your personal projects or if you completely know what you're doing, there's absolutely nothing wrong with you passing a function to jQuery. And that's how jQuery will execute code as quickly as possible after the DOM has been loaded.