在特定页面上使用jQuery（放在页面底部）

由于性能方面的原因，我在页面底部加载了jQuery脚本（就在关闭body标签之前）。在特定页面上使用jQuery（放在页面底部）

我的问题是如何启用页面特定的脚本？我不想把所有的东西放在$（document）.ready方法中（同样是出于性能的考虑）。

更新：我使用模板系统，所以我把jQuery加载到模板中。这种方式jQuery调用不会被识别，即使我把它们放在特定页面的末尾，因为jQuery没有被加载。

2009-10-13 Strudel

你真的不明白你在问什么吗？你需要一些实时支持来解决这个问题吗？然后我建议你访问http://chat.stackoverflow.com/rooms/17/javascript，并提及这篇文章的URL（作为一条消息，只需粘贴这个窗口的URL），并且你不明白'$ （document）.ready（）' – jcolebrand 2010-12-20 21:33:51

这使您可以调用jQuery插件方法在身体和加载页面底部的jQuery插件headjs

来源

2010-12-20 18:37:10 Strudel

嗨@Strudel，我很困惑你的答案**。你能否多加一点努力来解释这个链接是什么意思？你的意思是你接受答案是什么？ – jcolebrand 2010-12-20 21:31:24

嗨@drachenstern，对于蹩脚的答案感到抱歉。这使您可以调用正文中的jQuery插件方法，并将jQuery插件加载到页面底部。 – Strudel 2011-03-24 13:10:24

还有[labjs]（http://labjs.com/）项目。 – iurii 2013-10-16 08:05:23

只是有一个页面特定$(document).ready()。

来源

2009-10-13 08:11:02 slikts

谢谢你的回答。我更新了这个问题。 – Strudel 2009-10-13 08:37:35

$(document).ready()多次使用时不会被覆盖，因此您可以加载2个脚本文件，这两个脚本文件都会添加在文档加载时运行的功能。

来源

2009-10-13 08:19:21 kaba

感谢您的回答。我更新了这个问题。 – Strudel 2009-10-13 08:36:41

我不是100％确定你在问什么，但如果这是我的想法，答案是你不能吃你的蛋糕，也不能吃。

看起来你已经将jQuery移动到了页面的按钮上，但是有一些你想使用JavaScript的页面元素，但是不想等待document.ready的所有内容？也许类似于以下内容？

<html> 
<body> 
    <ul id="maybe-some-menu-that-needs-js-initialization-for-example"> 
    ... 
    </ul> 
    <script> 
    /* javascript goes here that uses jquery for the above menu (or whatever) 
    AND you don't want to wait for document.ready for this to happen */ 
    </script> 
    ... 
    <script src="including jquery here"></script> 
    <script src="including other scripts here"></script> 
</body> 
</html>

如果是这样的话，那么请参考我从一开始就说道。你必须将jQuery（至少是库，不一定是你所有的其他JavaScript）移回到页面的顶部。无论是或不是我们jQuery的东西，你不想等待document.ready。

编辑：如果您想根据您所在的页面执行操作，那么有两种方法，每种更好，最优选最后选择。

使用location.pathname确定你所需要的功能。
通过其功能将您的JavaScript组织到单独的模块化文件中，并仅包含特定页面所需的那些文件。

来源

2009-10-13 08:59:27

我知道这是无法完成的，但有没有其他方法可以在特定页面上执行操作？ – Strudel 2009-10-13 09:40:00

^^类似if（page_003）然后调用method3？ – Strudel 2009-10-13 09:41:09

这里是我的意思的例子：http://www.artzstudio.com/2009/04/jquery-performance-rules/#eliminate-query-waste – Strudel 2009-10-13 11:06:50

使用$(document).ready，它在页面中的位置并不重要，因为它只会在DOM完成加载时执行。应该在$(document).ready之内的唯一代码是在DOM加载时需要设置的代码，例如，事件处理程序，DOM完成加载后要运行的任何效果/动画等。其他函数不需要位于$(document).ready中，例如用于对数组进行排序的函数，在引发事件时调用的命名函数等

正如已经指出的，你可以在页面上有多个$(document).ready函数，因为你正在做的是指定一个函数（named或anonymous）来执行事件（一个jQuery事件）被提出。

编辑：

这篇文章，您已经链接到comments on this answer提供和例子你想达到的目标。举个例子，你有以下设置一个JavaScript文件中声明的全局变量

var myPageLibrary = { 
    homePage : { 

     init : function() { 
      $(document).ready(function() { 
       /* page specific functions that need to run, 
        for exmaple, binding event handlers, etc */ 
      }); 
     } 
    }, 
    aboutPage : { 
     init : function() { 
      $(document).ready(function() { 
       /* page specific functions that need to run, 
        for exmaple, binding event handlers, etc */ 
      }); 
     } 
    } 
} 

/* you might have functions here that are bound to events. 
    Here is an example */ 

function showSubMenu(e) { 
    $(e.target).next('div').show(); 
} 

function hideSubMenu(e) { 
    $(e.target).next('div').hide(); 
}

然后在网页上，您将有以下结构（本例使用的主页）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
<title>This is my Home Page</title> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script src="path-to-myPageLibrary.js"></script> 
<script type="text/javascript"> 
    myPageLibrary.homePage.init(); 
</script> 
</head> 
<body> 
    <!-- Page content --> 
</body> 
</html>

与第一引用jQuery脚本文件，然后myPageLibrary脚本文件，随后脚本块调用myPageLibrary.homePage.init();

来源

2009-10-13 09:09:47

我知道这个。问题是如果你把jQuery库放在页面的底部。这样jQurey代码将不会被识别，如果它在上面的任何地方。 – Strudel 2009-10-13 09:43:55

是的，在使用它的任何代码之前，需要引用jQuery脚本。对于作为全局对象属性的任何JavaScript函数（就像jQuery一样），这是一样的 - 在使用它之前需要声明它 – 2009-10-13 09:59:06

我非常喜欢你的PageLibrary方法，谢谢。 – mcaaltuntas 2010-03-14 19:34:06

您是否试过“@section script”？它会自动添加页面末尾的代码，因此您可以拥有页面特定的jQuery脚本。

@section scripts { 
<script> 
jQuery(document).ready(function() { 
//put your jQuery codes here 
}); 
</script> 
}

来源

2011-06-09 20:02:00 CapLockAlt

这个问题没有提到有关使用ASP.NET的任何内容，“@ section”将特定于其中 – acjay 2012-11-20 02:31:06

如果我理解正确，您需要在页面中间放置一些调用jquery的JavaScript代码。但你的jQuery包含在身体的底部。你可以通过在window.load事件中调用jquery来做到这一点。此事件在所有异步脚本已加载并执行后触发。例如：

<body> 
    <script> 
     $("#myElem").val(); // fails, "$" not defined 
     window.addEventListener("load", function(evt) { 
      $("#myElem").val(); // ok, jquery is loaded 
     }); 
    </script> 
    <span id="myElem>hi</span> 
    <script src="//cdn.jquery.com"></script> 
</body>

来源

2016-09-15 04:39:25

在特定页面上使用jQuery（放在页面底部）

回答

相关问题