jQuery加载

遇到的三种写法

在项目中，虽然大家都是使用jQuery，但是不同人有不同的写法。对此，很疑问它们之间的区别以及在开发时如何选择？

第一种

第二种

第三种

在第一种中，$(document).ready() 里的代码是在页面内容都加载完才执行的。
第二种情况只是第一种的简写形式。第一种和第二种情况，

<script src="/static/js/test.js"></script>

可以写在JSP文件里任何符合语法的地方。结果都一样。
第三种则引用到时就执行js文件里的代码，如果此时执行代码中调用的加载的代码或者未创建的DOM，则会有问题。比如：如下图一样加入下面代码：

<script src="/static/js/test.js"></script>

点击按钮，则没有效果（打印Test）。
如果再按下图一样加入下面代码：

<script src="/static/js/test.js"></script>

点击按钮，则有效果（打印Test）。这是因为放到页面最后面，等于页面内容加载完再执行一样，和ready效果一样。

总结

刚开始做项目时，用的第三种写法。现在才知道一直没有问题，是因为每次都把js文件引用放在页面最后面。总结：页面加载script标签时就会执行里面的代码，所以必须确保代码中的DOM对象已经加载。