Before you get started programming with jQuery, you need to understand what the jQuery wrapper is and how it applies to the DOM. A wrapper, in most programming languages, is something that wraps something else to extend the functionality, most often an object. To put this in perspective, the jQuery wrapper attaches itself to the DOM by using selectors and allows you to extend the DOM. jQuery doesn't actually off er any new methods; it just takes methods that already exist in native JavaScript and makes them much easier to interact with.
The power of the wrapper is being able to extend the DOM with much less code than native JavaScript. The following code is an example of the jQuery selector statement:
$.(selector)
jQuery has many event methods to choose from, but one very important one is called the document.ready() event handler method, which executes only after the DOM is fully loaded. In its simplest form, a method is just another way of describing a function, but in other OOP (object-oriented programming) languages, methods have increased benefits compared to functions. The power behind jQuery is in manipulating the DOM; therefore, you want to make sure the DOM is ready before you do anything with it.
The document.ready() event handler method allows you to put all of your JavaScript jQuery code within this event to make sure the code is executed when the DOM is ready. This event is similar to the JavaScript onLoad event, except the document.ready() event handler method only fires after the DOM has loaded. The following code is an inline example of how to set up the document ready event handler method:
<html>
<head>
<title>My jQuery Example</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"
type="text/javascript"></script>
<script type="text/javascript"></>
$(document).ready(function() {
//script goes here
});
</script>
</head>
<body>
</body>
</html>
You should get in the habit of setting up the document.ready() event handler and any other custom jQuery code in an external file. This is the method I prefer because it keeps all your code separate in its own JavaScript include. I usually call my external file with all of my jQuery code, jquery.function.js, and always make sure it's included last, after all jQuery core library file(s).
You can also use a shortened version of the document.ready() event handler method when you are trying to optimize the size of the jQuery functions file for increased performance, such as for a mobile application. The shortened version is set up like this:
<html>
<head>
<title>My jQuery Example</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
//script goes here
});
</script>
</head>
<body>
</body>
</html>
To explain the jQuery wrapper, I need to walk you through how to set up the document. ready() statement. The first step involves setting up a selector that is preceded by the dollar sign ($), which is the alias for accessing the jQuery itself. You pass the selector between the two parentheses; in this case, I'm passing the document selector for the DOM. The alias and the selector make up the jQuery wrapper.
$(document)
The ready event gets attached after the selector statement and is interchangeable with other
events.
.ready()
The function is the piece that holds the code, which is applied after the DOM is loaded and ready and does not include graphics. The function is placed within the parentheses of the ready event because you are passing the function you want to be run to the ready event:
.ready(function() {
//jQuery DOM code goes here
alert("The DOM is fully loaded and ready");
});
The window.load function is very similar to the document.ready() function, except that it also waits for all of the graphics on the page to load before executing any jQuery code:
$(window).load {
//jQuery Code Goes Here
alert("The window has been loaded");
});
$(window).load {
//jQuery Code Goes Here
alert("The window has been loaded");
});
0 comments:
Post a Comment