Uncaught ReferenceError: $ is not defined when jquery.js is at the end of document
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16063969/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Uncaught ReferenceError: $ is not defined when jquery.js is at end of document
提问by Ila
I have a project where all the JS files are referenced in the footer, as is recommended for speed of page loading, including the link to the Jquery file. This code produces an "Uncaught ReferenceError", I assume because Jquery has not been defined before my script is called:
我有一个项目，其中在页脚中引用了所有 JS 文件，这是为了提高页面加载速度而推荐的，包括指向 Jquery 文件的链接。这段代码产生一个“未捕获的引用错误”，我假设是因为在调用我的脚本之前尚未定义 Jquery：
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
</head>
<body>
<p>
<a href="#" data-toggle="popover" title="first popover" id="example">hover over me</a>
</p>
<script type="text/javascript">
$(function(){
$('#example').popover({ trigger:'hover' });
})
</script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</body>
</html>
If I move the Jquery link to the header, then the code runs fine, but this will slow the page loading time.
如果我将 Jquery 链接移动到标题，则代码运行良好，但这会减慢页面加载时间。
Is there a better way to declare my function so that it does not throw this UncaughtReference error, or is keeping the Jquery link in the head the best solution?
有没有更好的方法来声明我的函数，以便它不会抛出此 UncaughtReference 错误，或者将 Jquery 链接保留在头部是最佳解决方案？
采纳答案by brenjt
It is because you are trying to use jQuerybefore jQueryhas been loaded. You need to put libs like jQueryin the head of your document
那是因为您在尝试使用jQuery之前jQuery已加载。您需要将库放在jQuery文档的头部
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
Generally your scripts go at the end of the document near the close body tag and libraries such as the ones you are using go at the <head>
通常，您的脚本位于靠近正文标记和库（例如您正在使用的库）附近的文档末尾 <head>
回答by cpres
I like keeping jquery at the bottom, you'll just need to make sure the entire DOM is loaded first, and to check that without jQuery as that's not usable yet. Try using this instead:
我喜欢将 jquery 保留在底部，您只需要确保首先加载整个 DOM，并在没有 jQuery 的情况下检查它，因为它尚不可用。尝试改用这个：
document.addEventListener("DOMContentLoaded", function(event) {
$(function(){
$('#example').popover({ trigger:'hover' });
});
});
回答by kyle.stearns
You need to include jQuery before referencing the jQuery library.
在引用 jQuery 库之前，您需要包含 jQuery。
Change to this:
改成这样：
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript">
$(function(){
$('#example').popover({ trigger:'hover' });
});
</script>
Also note that it is a good idea to include jQuery and other JavaScript in the footer of your document to ensure that page rendering is not delayed.
另请注意，最好在文档的页脚中包含 jQuery 和其他 JavaScript，以确保页面呈现不会延迟。
回答by Badjem79
Recently on jsTree site I've seen another technique
最近在 jsTree 网站上我看到了另一种技术
at the top (in the HEAD tag) you set just this:
在顶部（在 HEAD 标签中）你只设置了这个：
<script>window.$q=[];window.$=window.jQuery=function(a){window.$q.push(a);};</script>
Now you can do <script>$(function () { /* your $() calls here */ });</script>whenever and wherever you want...
现在你可以<script>$(function () { /* your $() calls here */ });</script>随时随地做你想做的...
at the end include jquery.js as usal and then the last script is:
最后像往常一样包含 jquery.js 然后最后一个脚本是：
<script>$.each($q,function(i,f){$(f)});$q=null;</script>
hope this is usefull to someone...
希望这对某人有用...
回答by cfs
Scripts get executed from the top to bottom of the document in order, so You are trying to reference the the jQuery library before it is loaded.
脚本按顺序从文档的顶部到底部执行，因此您正在尝试在加载之前引用 jQuery 库。
To solve this, you can either put your own scripts in a separate file and import them after the jQuery library or put your script tag below the jQuery import.
为了解决这个问题，您可以将您自己的脚本放在一个单独的文件中并在 jQuery 库之后导入它们，或者将您的脚本标记放在 jQuery 导入的下方。
