Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
So, now that we have downloaded jQuery and saved it to our hard drive, we are going to create a simple jQuery enabled page. And for the first jQuery example, we are going to keep things pretty simple. So our example page is going to do three things. It's going to include a reference to the jQuery library that we just downloaded and then we are going to write an event handler and that event handler is going to respond to the page loading up in the browser window and it will display an alert that indicates the event handler was in fact called and jQuery is therefore working and doing its thing.
So, before we do that, let's take a look at how you do this without jQuery. Typically, code that you want to have executed when the page is loaded is written something like what you see here. So what I have done is write a runOnLoad function and that displays an alert and you can see I am triggering that off the window.onload event. Now the problem with this is that the window's onload event only fires after all of the page content has been downloaded including any images that you have in the page.
It's also a lot harder to add multiple independent onload functions because if you want to have more than one function run on the window onload event, you have to cram them all into this one function here or you have to use the DOM event model to do that, which is different among browsers. Now jQuery provides a way to run the code when the DOM of the page is actually ready, regardless of whether all of the content such as images has been downloaded, and that's called the document.ready event.
It also makes it a lot easier to write modular independent on-load functions, and jQuery will just chain them together. So, let's see how to do this the jQuery way. To do this in jQuery, you write a document.ready event handler and it's written like the code you see here. So, this little dollar sign character, that's the jQuery object and you can write the dollar sign, you can write jQuery and call functions off of that. However, most of the jQuery code you'll probably see in practices written using this dollar sign character right here and that's where all of jQuery's functionality is accessed from.
You can write an independent function, give it a name, and then pass the name of that function here. I am just doing it this way because it's a bit more succinct and concise to do it this way. So, this function calls an alert. It says hey, the page just loaded. So, this code will now execute when the DOM of the page has loaded and is ready for use rather than just waiting for all the page content to finish downloading. And as I said before, another advantage of this approach is that you can call this document.ready function multiple times with individual functions that you want executed and jQuery will just chain each one together to be called in succession.
This is that Visual Studio documentation file that I talked about earlier. You don't need to download this if you are not using it. I just happen to be using it so I put it at the same level as the jQuery file. So, let's go into the folder for this chapter and you'll see a couple of example files. This one here is called FirstjQueryPage_ start and that's the beginning of this lesson. If you'd like, you can go ahead and jump ahead to look at the finished version to see how the code looks and run it in your browser or you can just follow along with me as we edit the file.
Okay, and inside the function, I am going to say alert ("The page just loaded!"). Okay, so now I am ready to preview this in the browser and again depending on the tool you are using, you know, this will be different for you or you can just go up to the file system and load the page up in the browser, but I am going to do it from right here. Choose View in Browser and you can see that the page comes up and sure enough the alert shows up, says "Hey, the page just loaded!" So, that's what happens in IE.
Let's go back and take a look at what happens in Firefox. Okay, so here I am going to go to back up and choose Browse With, and we have got Firefox right there. Say Browse and you can see that there's Firefox and the same thing happens. Okay, so that's pretty much all you need to do to write your first jQuery enabled page. You can see that what we did was we included a script reference to the library and wrote a simple function that executes on page loads and now we are ready to get into detailed involved jQuery coding.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 98399 Viewers
61 Video lessons · 85685 Viewers
71 Video lessons · 69614 Viewers
56 Video lessons · 101939 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.