From the course: jQuery for Web Designers

Set up functions - jQuery Tutorial

From the course: jQuery for Web Designers

Start my 1-month free trial

Set up functions

“

- [Voiceover] Over the next several videos we'll go over some essential concepts that you'll use constantly in your own jQuery code, and just as importantly, what you'll be reading in code others have written. JavaScript is a language that you read as well as write, and you could almost think of jQuery as a dialect of JavaScript, a particular idiom within the greater language. So here I have an html file loaded in my browser. It doesn't have a lot going on, obviously, it's pretty simple. And then I have a script file that's loaded at the bottom of this, it's an external file. And we'll open that in our favorite text editor. As you can see it is currently totally blank. Now the primary function of jQuery is to operate on DOM elements that we select from our active document, but we can't do that until those DOM elements have been successfully loaded and understood by the browser. Now if we were going to do this with plain JavaScript we might do something like document.addEventListener and then use the Dom Content Loaded event, and then have our function that actually does stuff. This work fine as long as your browser actually supports that event properly. And the fact is, that a lot of browsers have weird compatibility issues, especially if you're not supporting only the very most modern browsers. So jQuery has another way of doing this. The dollar sign is the jQuery object as its normally aliased. It could also be spelled out as jQuery like this. So what we do, canonically, is use the jQuery function which is just named the dollar sign, and then inside that we pass our function where the action is going to take place. So it'll look like this. So in other words, it's a named function called dollar sign, or jQuery, and then the one parameter passed to it is a function, and inside that function we know that the DOM has been loaded. This function will not fire until the DOM is ready. So as of jQuery 3, this is the canonical way that you do this. There are other ways that it's been phrased in the past that I want to show you as well. So one of those is to select the document first. So you pass in document as the parameter in to jQuery, thereby making a selection of the document, and then you'd use this method called ready, and its parameter would be the function where all the action takes place. So you see this a lot in older jQuery code. But as I say, the current way is to do it like this. And once you've done that inside the function you can start to write whatever you want to do. So in this case we can just pass in a console.log. Now we are ready! The other thing that I like to do inside every function that I set up is turn on strict mode. By just writing the string use strict like this. This will save you from accidentally creating global variables, or doing other things that can cause weird problems in your JavaScript code. So now I'll save this and switch back to the browser. So now I'm going to reload and then open the JavaScript console here in the developer menu in Chrome. So there it is, now we are ready. And that function fired only as soon as the DOM was fully processed and ready to go. So that's it, this is what your ready function will look like. Everything that you write in jQuery will be embedded in a function that looks pretty much just like this. I also encourage you to use strict mode to help avoid errors.

Contents