调用不带document.ready()的外部jQuery函数;

调用不带document.ready()的外部jQuery函数;,jquery,Jquery,对jQuery来说有点陌生,正在寻求帮助,了解如何将我的所有脚本保存在一个外部文件中,而不是全部嵌套在document.ready();。我希望能够仅从特定页面调用某些函数,并使用ready();;处理其余函数;。我也不确定从页面调用函数的最佳实践是什么:/ 谢谢 您可以使用多个dom就绪 我最喜欢的确定是否应该在页面上运行一些代码的方法之一是给主体一个uniquie类,然后使用这个 if ($('body').hasClass('contact')) { // Validate form

对jQuery来说有点陌生,正在寻求帮助,了解如何将我的所有脚本保存在一个外部文件中,而不是全部嵌套在document.ready();。我希望能够仅从特定页面调用某些函数,并使用ready();;处理其余函数;。我也不确定从页面调用函数的最佳实践是什么:/
谢谢

您可以使用多个dom就绪

我最喜欢的确定是否应该在页面上运行一些代码的方法之一是给主体一个uniquie类,然后使用这个

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

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


在外部文件中可以有
$(document).ready(函数(){//code here;})或者,您可以将所有函数都放在外部文件中,然后仅在页面上设置

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

如果愿意,可以将所有脚本保存在一个文件中。如果不需要操作DOM或与DOM交互,则可以在文件中而不是在document.ready()函数中使用普通JS函数。然后可以将所有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");
});
示例页面:=>


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

拥有多个document.ready没有什么错

我喜欢为每个页面添加一个唯一的ID,并在执行之前让javascript检查该ID是否存在。您可以创建一个简单的包装函数,用于执行检查并等待文档。就绪:

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">


我不知道你的意思。当DOM就绪时,您可以做任何事情。“还有?”亚历克斯为什么?只有在某些特定情况下,这才有用,因为它比文档就绪速度慢。@box9用于这些特定情况。速度上的差异并不是很大。@box9@Alex,差异完全取决于资源的大小和检索这些资源的internet连接速度。我不记得当时是什么情况,但有一次我不得不使用$(window.load(),它救了我。除此之外,我从未需要过它,但我认为分享它会很好。@Alex@Mike Grace我从来都不需要使用.load(),所以我只是想知道什么实际场景需要它。使用.load at on#9有一个很好的理由。这种方法似乎适合我的应用程序。看来我可以将所有函数嵌套在一个文档中。ready();并使用var pageReady调用这些页面上所需的函数。@geraddavis,请小心将所有函数都放在文档中。ready如果您关心性能,如果您不想在视图中使用JS(仅在site.JS中用于缩小),这是很有用的(并且有效的)。但有一个问题:每个页面加载都会调用主函数(其他所有页面也是如此)。。。性能怎么样。。?