为什么我必须将我的整个代码放在$（function（）{/ * code goes here * /}）;?？

Question

所以我明白，如果我必须放置此代码

$("#MyButton").click(function(){/* code goes here */});

在外部.js文件中，我必须引用脚本

<script src="MyScript.js" type="text/javascript"></script>
</body>

在关闭body标签之前（而不是在head中），否则它不起作用，因为在MyScript.js之前必须完全加载DOM

但是我的整个代码包含在

中

$(function(){
    $("#MyButton").click(function(){/* code goes here */});
});

以某种方式使一切正常工作即使我现在将脚本放在HEAD中（而不是在关闭body标签之前，就像之前一样）!!

怎么回事？

Answer 1

因为$(f)是“执行功能 f 的快捷方式，当dom准备就绪时”

Answer 2

$(function(){ });

相当于

$(document).ready(function(){ });

因此在加载DOM时会触发它。更多信息here。

Answer 3

JS执行浏览器遇到的那一刻。如果将脚本放在head块中，则尚未加载所需的#Mybutton。就你的脚本而言，＃MyButton不存在。

但是当你执行$（function（））...版本时，它会告诉JQuery定义函数，但是在整个页面DOM加载之后不执行。此时，＃MyButton存在，脚本将按预期执行。

在现实世界中，你试图在面包烘焙完成之前制作三明治。通过使用这种特殊的符号，你要等到面包从烤箱里出来，然后开始涂抹黄油和芥末。