javascript - 关于jquery中$(function(){})的使用。
typecho
typecho 2017-06-26 10:51:00
0
5
1029

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

typecho
typecho

Following the voice in heart.

全部回复(5)
过去多啦不再A梦
  1. 如果你把两种方式都放到html页面结构下面的话,写不写$(function(){})都行,都是等到页面加载完后执行(别忘了html是从上到下解析加载的)。

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

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


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

女神的闺蜜爱上我

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

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

阿神

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

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

phpcn_u1582

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

给我你的怀抱

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

$ = 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肯定更复杂。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板