Question

有点新手jQuery并寻求有关如何将我的所有脚本保存在一个外部文件中的帮助，而不是将它们全部嵌套在document.ready（）;中。我希望能够仅从特定页面调用某些函数，并使用ready（）;处理其余函数。我不是100％确定从页面调用函数的最佳做法是：/ 谢谢。

Answer 1

如果您愿意，可以将所有脚本保存在一个文件中。如果您不需要操作DOM或与DOM交互，则可以在文件中使用普通JS函数，而不是在document.ready（）函数内部。然后，您可以将所有DOM操作和交互JS放在document.ready（）函数中。您还可以将JS放在$（window）.load（）函数中，以便在包含图像的页面上加载所有资源后运行代码。

示例：

$(window).load(function() { // code that will run once all resources and the DOM are loaded into the browser console.log("window loaded"); }); runOnScriptLoad(); function runOnScriptLoad() { // code that will run as soon as the JS file loads console.log("script loaded"); } $(document).ready(function () { // code that will run once the entire DOM is loaded into the browser console.log("DOM ready"); }); $(window).load(function() { // code that will run once all resources and the DOM are loaded into the browser console.log("window loaded"); });

示例页面 =＆gt; http://mikegrace.s3.amazonaws.com/forums/stack-overflow/example-dom-ready.html

在加载页面时打开firebug控制台，您将看到每次执行的顺序。

Answer 2

拥有多个document.readys

并没有错

我想为每个页面添加一个唯一的ID，并在执行之前让javascript检查该ID是否存在。您可以创建一个简单的包装函数来执行检查并等待document.ready：

var pageReady = function (id, callback) {
   $(function () {
      if ($(id).length) {
         callback();
      }
   });
};

然后，类似于document.ready，您可以：

pageReady("#home-page", function () {
   // Code will only run for home page here
});

pageReady("#search-page", function () {
   // Code will only run for search page here
});

请记住添加ID ...

<body id="home-page">

Answer 3

您可以使用多个dom。

我最喜欢的一种确定是否应该在页面上运行代码的方法是给主体一个唯一的类，然后使用它......

if ($('body').hasClass('contact')) {
   // Validate form, etc
}

Answer 4

虽然JavaScript在呈现页面时提供了用于执行代码的加载事件，但在完全接收到所有资产（如图像）之前，不会触发此事件。在大多数情况下，只要完全构造DOM层次结构，就可以运行脚本。传递给.ready（）的处理程序保证在DOM准备好后执行，因此这通常是附加所有其他事件处理程序并运行其他jQuery代码的最佳位置。使用依赖于CSS样式属性值的脚本时，在引用脚本之前引用外部样式表或嵌入样式元素非常重要。

http://api.jquery.com/ready/

Answer 5

在您的外部文件中，您可以拥有$(document).ready(function () { //code here; });或者，您可以将所有功能都放在外部文件中，然后只在您的页面上

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

调用外部jQuery函数没有document.ready（）;

5 个答案: