javascript - 关于jquery中$(function(){}）的使用。

Question

各位大侠，我js的小白，我最近在设计一个简单的网站，在网站抄了一些jq的代码。
我发现有些代码段的开头是$(function(){。。。。。}),那我就按照这种格式写在$(function(){。。。}）里面，如$(function(){$('#denglu_submit').click(function(){。。。。
但我还看见有的代码段中没有$(function(){}),而直接是$('#denglu_submit').click(function(){。。。等内容，我试验了一下，两种好像都可以运行。那我就不知道有什么区别了？

Answer 1

1. 如果你把两种方式都放到html页面结构下面的话，写不写$(function(){})都行，都是等到页面加载完后执行（别忘了html是从上到下解析加载的）。

2. 但是如果你都放在页面结构上面的话区别就大了，$(function(){})为网页加载完后执行，没有$(function(){})直接写的话是按html页面从上到下的顺序执行，也就是是说如果js代码执行时间比较长（如获取大量数据），那下面的html内容得等到js执行完后才会加载显示。这显然不合理。应该是让html内容先显示完才对。

3. 所以我们一般写代码还是加上$(function(){})为好，这样就算js代码出错了或执行时间比较久，页面主要内容也可以加载完成，不会影响用户浏览网页。而且保险最好把代码放到页面结构下面，这样也是为了保证页面加载完整（毕竟html是按从上到下的顺序解析加载的）。

---

其它小知识 $(function(){})为网页加载完后执行，好像和原生js的window.onload = function() {}一样，其实有区别，前者是加载完结构（不包括图片）后执行，后者是加载完结构（包含图片）后才执行。

Answer 2

$(function(){})这个是js加载完毕后并且dom结构加载完毕后才执行里面的的逻辑。

$('#denglu_submit').click(function(){。。。}) 这个是js加载完毕后就执行。

Answer 3

$(function(){...})这里面的内容是等页面的节点或引用的文件都加载完了，再执行。这样可以确保页面节点已经加载完了，里面选择器对应的节点也有了。

$('#denglu_submit').click(function(){...})，这个是等加载到这里的时候就执行了，执行的时候并不知道#denglu_submit有没有加载到页面上。如果页面没有这个节点，那么对应的事件是没有反应的。
你可以试着把这两段段代码都放到head里面去运行下，就知道区别了！

Answer 4

你知道window.onload么。这个比onload早执行

Answer 5

首先，我来回答一下吧，$是函数名，举个例子：

$ = function() {
alert('good');
}
$();

这样子就定义来一个函数叫做$并执行来；你可以自己测试一下；
然后

$(function() {})

此处在这个$函数里传递来一个参数，这个参数是一个匿名的函数（没有名称的函数，也叫做闭包）；
那么假设

$ = function(fun) {
fun();
}
$(function() { alert("good"); } );

最后执行来就是和上面的一样，但是会更灵活，你可以传递任意想执行的函数进去执行；
而在此处：

$('#denglu_submit').click(function(){alert("good");});

其实是给$方法传递来一个字符串'#denglu_submit'进去，然后给$里的click函数传递来一个匿名函数进去，整个函数设计类似于这样：

$ = function(a) {
    alert(a);
    return $;
}
$.click = function(fun) { fun(); }; 
$("hello").click(function() {alert("fun")});

当然，jquery肯定更复杂。