$(function(){})的作用， js文件放底部

来源：互联网发布：知你莫如我编辑：程序博客网时间：2024/04/28 02:42

转载自：https://zhidao.baidu.com/question/807876639619633612.html

jQuery语句必须放在$(function(){});里面吗

发现写个jQuery放在其它里面就是没有反应,必须放在$(function(){}):里面才会起作用,或者其他地方的jQuery必须被$(function(){}):调用,难道其他地方不行?

匿名 | 浏览 2756 次问题未开放回答 |举报

2017-06-27 10:13最佳答案

不是必须的。

1

2

3

$(function(){
//TODO:这里的内容表示js只有在<a href="https://www.baidu.com/s?wd=DOM&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1dBrH7BujFBm1-BrHf1uhwW0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3Erj0LrjTvPWn4PWD4PWn1PWDz" target="_blank" class="baidu-highlight">DOM</a>元素全部加载结束后才会执行
});

如上面注释中说明的，js在浏览器渲染页面时是按照在文档中出现的顺序来顺序执行的。因此如果js文件在<header>部分引入，那么文件中的js代码会在dom元素渲染完毕前就执行。假设js代码中有类似$('#elementId').click(function(){...});这样的语句，那么就会因为dom没有渲染完，导致根本找不到elementId这个对象，从而导致事件绑定失败。

但是，如果我们把js的内容放到$(function(){...});里面，这里面的代码会等到文档内容全部渲染完毕才执行。事件就能够成功绑定了。

所以我们一般在写代码时，通常会注意两点

1、借用$(function(){});包括js内容

2、将需要引入的js文件放在dom的底部引入

<html>
    <head>
        ....
    </head>
    <body>
        <div>...</div>
        <div>...</div>
        <script src="/script/test.js">
    </body>
</html>

阅读全文

0 0