我可以在单个 html 页面中多次使用 jquery 的 $(document).ready() 吗？
我有 一个 html 页面名为“text.html”
<html>
<body>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="js/Photos.js"></script>
<script type="text/javascript" src="js/Animations.js"></script>
</body>
</html>
Photos.js 和 Animations.js 都以“$(document).ready()”开头，如下所示
//Javascript File Photos.js
$(document).ready(function() {
//My code here ....
});
//Javascript File Animations.js
$(document).ready(function() {
//My code here ....
});
如果我使用 多个 有关系吗 $(document).ready(function() { in a single html page??
谢谢，提前
i have one html page named "text.html"
<html>
<body>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="js/Photos.js"></script>
<script type="text/javascript" src="js/Animations.js"></script>
</body>
</html>
Both Photos.js and Animations.js start with "$(document).ready()" like this
//Javascript File Photos.js
$(document).ready(function() {
//My code here ....
});
//Javascript File Animations.js
$(document).ready(function() {
//My code here ....
});
Does it matter if i use multiple $(document).ready(function() { in a single html page??
Thanks, in advance
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
您可以使用任意多个，但为了便于阅读，最好将其保留为一个。
还可以考虑使用简写
$(function() { ... });You can use as many as you would like, but its best to keep it to one for readability.
Also consider using short hand
$(function() { ... });不，没关系。
然而，一切都可以包含在同一个之中。
编辑：
查看我的答案在此线程中获取有关您的评论的详细说明：
在正文中而不是在标头中链接 javascript 文件会导致问题吗？
No, it does not matter.
However, everything can be contained within the same one.
EDIT:
See my answer in this thread for a detailed explanation regarding your comment:
Will linking javascript files in the body rather than in the header cause a problem?
是的，这很重要。
jQuery 函数针对同一件事被多次调用，从而浪费时间和内存。
对于您编写的代码和插件，您应该始终尝试仅使用一个
$(document).ready()或$(window).load()，但您会找到许多以该调用开头的插件，就像您指出的那样。编辑
如果您确实无法抗拒多次使用 $(document).ready() ，至少尝试在第一次使用时将文档的引用存储在变量中，所以您不必每次都检查文档对象，如下所示：
至少您可以节省一些函数调用。
Yes, it matters.
The jQuery function is being called more than once for the same thing, thus wasting time and memory.
For code and plugins you write, you should always try to use only one
$(document).ready()or$(window).load(), but you will find many plugins starting with that call like you pointed out.Edit
If you really can't resist about using $(document).ready() more than once, at least try to store the reference to the document in a variable the first time you use it, so you don't have to check every time for the document object, like this:
At least you'll save some function calls.
一点也不。它们都会触发同一事件。没关系。 :)
Not in the slightest. They're both just going to trigger on the same event. That's fine. :)
不，没关系，在某些（阅读：很多）情况下这是正确的方法。但是，就像总是，我喜欢给出一些（有用的）指针：
正如您在评论中提到的，从技术上讲，在
之前添加文件调用确实意味着，您基本上不需要使用$(document).ready()我个人会尽可能避免，因为 jQuery 并不像 JS 那样严格（意思是：大多数脚本都可以在没有$( 的情况下工作）。 document).ready())。[编辑：我的这部分答案不准确，请参阅下面的评论] 另外，在页脚中添加 jquery 并不明智。 ，甚至在
从技术上讲，这并没有错，但如果您正在处理类似 cms 的软件或某些模板功能，那么您希望所有页面都包含 jQuery，或者您可以直接调用。这是我的旧知识。既然你想在页脚中调用 Photos.js 和 Animations.js，我认为它们不是合适的插件。如果你想让你的代码更紧凑，那么将它们组成正确的插件。然后，您可以在页眉中添加插件并拥有单个页脚文件，将插件分配给元素（阅读：激活它们。）这里有一个关于如何创建自己的插件的快速教程。
另外，如果您有多个 JS 文件，则必须将其包含到页面中。然后，您可以使用
$.getScript()使代码更加简洁。您必须像往常一样首先添加 jQuery，但调用其他文件可以在一个No it doesn't matter and in some (read: many) cases is the correct way to do. However, like always, I like to give some (useful) pointers:
As you mentioned in a comment, technically adding the file-call before
</body>does mean, that you basically don't need to use$(document).ready(). I personally try to avoid as much as I can, since jQuery isn't that strict as JS alone (meaning: most of scripts work without$(document).ready()).[EDIT: This part of my answer is not accurate, please see comments below] Also, it is not wise to add the jquery inside in the footer, or even in the
<body>. It is technically not incorrect, but if you are dealing with a cms-like software or some template feature, then you want all the pages to have jQuery included. OR you can just call it my oldschool knowledge.Since you want to call the Photos.js and Animations.js in the footer, I assume, they are not proper plugins. If you want to make your code tighter, then compose them into correct plugin. Then you can add the plugins in the header and have single footer file, in what you assign the plugins to elements (read: activate them.) Here is a quick tutorial on how to create your own plugins.
Also, if you have multiple JS files, that must get included to the page. Then you could make your code neater by using
$.getScript(). You must add jQuery first like always, but calling the other files can be done in one<script>tag. Looks neater and it seems to be a little faster as well (at least in your own head.) I give you a little example: