Do I need to have every Javascript function in application.js wrapped in $(function() {}?
My application.js has this on the outside:
$(function() {
// My functions are in here, and some of the开发者_高级运维m even work.
}
I cut and pasted until I got something that worked, now I'm learning jQuery in earnest. A little backward, I know.
What is the purpose of that code above, $(function() { }?
It's a shortcut for:
$(document).ready(function () {
});
What that means is that once the DOM is fully loaded, your script will run. Which means that any parts of your script that rely on certain DOM nodes existing will work. If you had your .js file at the top of the page, it would execute before the DOM nodes existed, which means that you'd be trying to work with something that wasn't there. $(document).ready() allows you to defer execution of your code until the page is ready.
So, for example, say you had the following JavaScript, loaded in a script tag in the head:
$('a').click(function () {
alert("You can't leave!!!");
return false;
});
That tries to add a click handler to all <a> tags, but there aren't any <a> tags yet, so it won't do anything. If you wrap it in $(document).ready() it looks like this:
$(document).ready(function () {
$('a').click(function () {
alert("You can't leave!!!");
return false;
});
});
Now it will only get executed when the document is ready.
To answer the question in the title, no, you don't have to wrap everything in $(document).ready() - just the code that relies on there being a DOM fully loaded.
No, you only need to have those statements that you want executed when the page first loads inside $(function(){});
All of the functions can be defined elsewhere.
Basically waht that does in run the code when the body is loaded
Let me explain in a little more detail.
When the page loads up the browser loads from the first line to the last line, When you load jQuery in your <head> tag, this gets loaded before the <body> as the <head> is above the body
Take this example:
<!DOCTYPE html>
<html>
<head>
<script type="x" source="jquery.js" />
<script type="x">
$("#my_id").remove();
</script>
</head>
<body>
<div id="my_id"></div>
</body>
</html>
as you can see the first resource thats loaded is the jquery.js, and the line below where i have the jQuery code wil lexecute because jquery has been loaded, so the $() exists.
the problem is that the jquery code is looking for the that does not exists, because the DOM hasn't parsed it yet.
what the following syntax is used for is so that when you send the "Anonymous Function" to jquery, it stores it until the document has been fully loaded, therefore <div> will exists and the command executes successfully.
$(function(){
})
theres a few ways to write this, the main way is like so:
$(document).ready(function(){
//Code here will only be run upon document ready.
});
But the way i prefer to do things is:
mysite = {}; //Creates a "namespace / Object" for me to work within
mysite.dialog = function(title,message){/*blah*/}
mysite.init = function(){
//Code here is for the Document Ready state.
mysite.dialog("hey","the document has been loaded");
}
And then i store this in my Application.js file, and include after jquery.js
then within my document, run the following command.
$(document).ready(mysite.init);
加载中,请稍侯......
精彩评论