How to Incorporate the jQuery ready() Function

A common problem when programming JavaScript is that the JavaScript program will run before the page is loaded. You can access HTML elements on a page. This means you can also access things like images, forms, and whatever else you want, on a web page. The problem comes in when you try to access something on the page before the browser has it loaded. jQuery offers ways around this.

jQuery has a function called ready() that waits for the page to be, well, ready. Not quite everything is available (for example, some images still may be loading), but the HTML elements are ready to be worked with when the ready() function is called.

When you program with jQuery, it's typical to place your code inside of the ready() function so that you can ensure that all the stuff on the page is ready for you to use in your program. Really, there's not that much to this, so try not to overthink it.

An example would help illustrate! This listing shows an HTML page with JavaScript inside of the jQuery ready() function.

<!doctype html>
<html>
<head>
<title>jQuery</title>
<script type="text/javascript" 
   src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.1.min.js">
</script>
</head>
<body>
<h1>Adding jQuery</h1>
<script type="text/javascript">
$(document).ready(function() {
        alert("hi");
});
</script>
</body>
</html>

When viewed through a browser, the result is an alert.

image0.jpg

This code has two areas of interest. The first is the <script> element itself:

<script type="text/javascript" 
   src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.1.min.js">
</script>

This includes jQuery from Microsoft's CDN into the page.

The next area of interest is within the <body>, specifically, the <script> within the body:

<script type="text/javascript">
$(document).ready(function() {
        alert("hi");
});
</script>

This code calls the jQuery ready() function, part of the document object. Notice the special syntax with the dollar sign and parentheses. This is what tells the browser and JavaScript that what follows is going to be jQuery, so processing is handed over to jQuery. And because jQuery has a function called ready(), it knows what to do.

You use $() all over the place with jQuery; it's what tells jQuery that it should pay attention.

Inside of the jQuery ready() function there's this code:

function() {
    alert("hi");
}

You know all about functions already so this isn't anything new. Or is it? If this is a function, where's the function name? For most uses of jQuery, you'll see similar syntax to what you see here, with a function with no name like this one and then code within it.

When you see this syntax, function(), with no name, it's called an anonymous function. For the most part, you don't need to know much about anonymous functions until you get much deeper into JavaScript programming. For what you're doing here, just know that this is the typical syntax that you use when you use jQuery.

Within the function an alert is displayed. No surprise here — it's the standard alert() function you've been using throughout the book. But what's happening here is important: You're using jQuery together with JavaScript inside of the same script.

  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
Advertisement

Inside Dummies.com

Dummies.com Sweepstakes

Win $500. Easy.