jQuery 未捕获的 ReferenceError: $ 未定义
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17050581/
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
提问by MasterFuel
I am getting this error message when trying to create a JQuery image slider.
尝试创建 JQuery 图像滑块时收到此错误消息。
Uncaught ReferenceError:$ is not defined
未捕获的 ReferenceError:$ 未定义
Here is my NEW coding (NOTE that I have moved the script to the of the page, this was suggested by adobe.) :
这是我的新编码（请注意，我已将脚本移至页面的 ，这是 adobe 建议的。）：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Green Cold-Formed Steel | Home</title>
<style type="text/css">
body,td,th {
font-family: Tahoma, Geneva, sans-serif;
font-size: 10px;
color: #000;
text-align: left;
}
body {
background-color: #999;
}
a:link {
color: #999;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #060;
}
a:hover {
text-decoration: underline;
color: #FFF;
}
a:active {
text-decoration: none;
}
h1 {
font-size: 14px;
color: #060;
}
h2 {
font-size: 12px;
color: #999;
}
h3 {
font-size: 9px;
color: #FFF;
}
#next {
background-image: url(Assets/slideshow/r_arrow.png);
background-repeat: no-repeat;
background-position: center center;
display: block;
float: right;
height: 500px;
width: 100px;
position: relative;
z-index: 99;
}
#slideshowwrapper {
display: block;
height: 500px;
width: 1000px;
margin: auto;
}
#container {
background-color: #FFC;
display: block;
float: left;
height: 500px;
width: 1000px;
overflow: auto;
}
#prev {
background-image: url(Assets/slideshow/L_arrow.png);
background-repeat: no-repeat;
background-position: center center;
display: block;
float: left;
height: 500px;
width: 100px;
position: relative;
z-index: 99;
}
#slider {
display: block;
float: left;
height: 500px;
width: 1000px;
overflow: hidden;
position: absolute;
}
#NavBar {
display: block;
height: 50px;
width: auto;
position: relative;
padding-bottom: 5px;
float: none;
vertical-align: middle;
}
</style>
</head>
<body bgcolor="#999999" text="#000000">
<table width="100%" height="583" border="0" cellspacing="0" cellpadding="0px">
<tr>
<th height="132" align="left" scope="col"> </th>
<th scope="col"><div class="spacer" id="spacer"></div>
<div class="Header" id="header"><a href="index.html"><img src="Assets/Logo/GFCS_Logo_NoBckgnd.png" width="288" height="108" alt="GCFS"></a></div>
<hr></th>
<th scope="col"> </th>
</tr>
<tr>
<th width="5%" align="left" scope="col"> </th>
<td width="85%" align="left" valign="top" scope="col">
<div class="Navigation Bar" id="NavBar"><img src="Assets/navigation/navbutton_static_green.png" width="100" height="50" alt="Navi_Home"> <img src="Assets/navigation/navbutton_static_green.png" width="100" height="50" alt="Navi_Solutions"> <img src="Assets/navigation/navbutton_down.png" width="100" height="50" alt="navi_down"></div>
<div id="slideshowwrapper">
<div id="container">
<div class="controller" id="prev"></div>
<div id="slider">
<img src="Assets/slideshow/hyatt_apts.png" width="1000" height="500" alt= "Hyatt Apartments">
<img src="Assets/slideshow/mccommas.png" width="1000" height="500" alt="McCommas">
<img src="Assets/slideshow/park_4200.png" width="1000" height="500" alt="Park 4200">
<img src="Assets/slideshow/quail_run.png" width="1000" height="500" alt="Quail Run">
<img src="Assets/slideshow/roofdale.png" width="1000" height="500" alt="Roofdale Roof">
<img src="Assets/slideshow/tri_truss.png" width="1000" height="500"> </div>
<div class="controller" id="next"></div>
</div>
</div></td>
<th width="10%" scope="col"> </th>
</tr>
</table>
<p> </p>
<script type="text/javascript" src="JS/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="JS/jquery.cycle.all.js"></script>
<script>
$(function(){
$('#slider').cycle({
fx: 'scrollHorz',
speed: 'fast',
next: '#next',
prev: '#prev'
});
});
</script>
</body>
</html>
My folder path to the JS folder for my website (locally) looks like this: C:\Users\Andrew\Desktop\GCFS\JS
我的网站（本地）JS 文件夹的文件夹路径如下所示：C:\Users\Andrew\Desktop\GCFS\JS
I am new to the coding world, but what I am trying to achieve is fairly simple. As far as I know I do not need to have a ready function and the javascript should run automatically. Thank you for your assistance!
我是编码世界的新手，但我想要实现的目标相当简单。据我所知，我不需要准备好函数，javascript 应该会自动运行。谢谢您的帮助！
From comment
来自评论
When I tried this it also failed
当我尝试这个时它也失败了
<title>Green Cold-Formed Steel | Home</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="JS/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(function() {
$('#slider').cycle({ fx: 'scrollHorz', speed: 'fast', next: '#next', prev: '#prev' });
});
</script>
回答by writeToBhuwan
The solution:
解决方案：
1) Use Google CDN to load jQuery
1) 使用 Google CDN 加载 jQuery
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
2) As far as I know about the Cycle Plugin, It is compatible with jQuery v1.5-v1.7 because most of the methods were deprecated in jQuery 1.8+ . This is the reason I've used v1.5 of Google CDN jquery in point 1. Most of the examples on cycle plugin use jquery 1.5.
2) 据我所知 Cycle Plugin，它与 jQuery v1.5-v1.7 兼容，因为大多数方法在 jQuery 1.8+ 中被弃用。这就是我在第 1 点使用 Google CDN jquery v1.5 的原因。循环插件的大多数示例都使用 jquery 1.5。
3) Clear Your browser cache, It is the main culprit most of the times.
3）清除浏览器缓存，它是大多数时候的罪魁祸首。
4) PLease check the loading of jquery using the code below
4）请使用下面的代码检查jquery的加载
if(typeof jQuery!=='undefined'){
console.log('jQuery Loaded');
}
else{
console.log('not loaded yet');
}
Major Edit:
主要编辑：
The reason for the error is fairly simple:
错误的原因很简单：
You have called the cycle method before the jquery is loaded.
您在加载 jquery 之前调用了循环方法。
call cycle plugin on DOM ready..
DOM 上的调用循环插件准备好了..
$(document).ready(function(){
$('#slider').cycle({
fx: 'scrollHorz',
speed: 'fast',
next: '#next',
prev: '#prev'
});
});
回答by Sushanth --
2 issues.
2 题。
Looks like your jQuery was not loaded properly.
看起来您的 jQuery 未正确加载。
You generally see this error
您通常会看到此错误
Uncaught ReferenceError:$ is not defined
when jQuery was not properly included on your page.
当 jQuery 未正确包含在您的页面中时。
Try using jQuery from CDN and it should solve your problem
尝试使用 CDN 中的 jQuery，它应该可以解决您的问题
Replace
代替
<script src="JS/jquery-1.10.1.min.js"></script>
with the one from cdn
与 CDN 中的一个
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
NOTE:if you test from file system, you need to add the http:to the above URL or it will fail
注意：如果您从文件系统进行测试，则需要将其添加http:到上述 URL 中，否则将失败
Next your script file is before the HTML. So need to contain the code in DOM Readyhandler.
接下来你的脚本文件在HTML. 所以需要在DOM Ready处理程序中包含代码。
$(function() {
$('#slider').cycle({
fx: 'scrollHorz',
speed: 'fast',
next: '#next',
prev: '#prev'
});
});
As far as I know 'Slider' was referenced when I created the div Id.
据我所知，在创建 div Id 时引用了“滑块”。
No it is not. If your script was included just before the body , then you may not enclose it in the Ready handler. But in your case it is present in the head. So when the script starts running that particular element is still not present in the DOM
不它不是。如果您的脚本刚好包含在 body 之前，则您可能不会将其包含在 Ready 处理程序中。但在你的情况下，它存在于头部。因此，当脚本开始运行时，该特定元素仍然不存在于DOM
回答by Raghav
There might be two issues:
可能有两个问题：
1) The JQuery might not have got loaded properly.
You could test it using Chrome. Key in $ or jQuery to check if it is loaded properly.
1) JQuery 可能没有正确加载。您可以使用 Chrome 对其进行测试。键入 $ 或 jQuery 以检查它是否正确加载。
2) This is based on my experience in some JQuery.js which would have got bundled with other JS libraries, where $ will not be supported and you are forced to use jQuery instead of $ Check out for the below line in the js file that you have loaded in your project.
2）这是基于我在一些 JQuery.js 中的经验，这些 JQuery.js 会与其他 JS 库捆绑在一起，其中 $ 将不受支持，您被迫使用 jQuery 而不是 $ 检查 js 文件中的以下行您已加载到您的项目中。
window.jQuery = window.$ = jQuery;
I see that by using http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.jsdidn't work for me but I used http://code.jquery.com/jquery-1.7.2.min.js
我看到使用http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js对我不起作用，但我使用了http://code.jquery.com/jquery -1.7.2.min.js
Below is the only part in your code that I edited and it started working fine for me.
下面是我编辑的代码中唯一的部分，它开始对我来说工作正常。
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
回答by Sergii Lisnychyi
As an addition. If you are using $(Jquery) in your .js file. Logically all libs or frameworks should be before that .js file.
作为补充。如果您在 .js 文件中使用 $(Jquery)。从逻辑上讲，所有库或框架都应该在该 .js 文件之前。
<script type="text/javascript" src="jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="app.js"></script>
回答by Frank Carnovale
I had this problem but the cause was very different to scenarios reported above. My site was working everywhere except on my older Android (2.2). Turned out this device was rejecting the https certificate at the code.jquery.com CDN, so it was not loading JQuery. The fix was to load JQuery resources from the https Google CDN instead (using URLs named by others above).
我遇到了这个问题，但原因与上面报告的情况大不相同。除了我的旧 Android (2.2) 之外，我的网站在任何地方都可以运行。原来这个设备拒绝了 code.jquery.com CDN 上的 https 证书，所以它没有加载 JQuery。修复方法是从 https Google CDN 加载 JQuery 资源（使用上面其他人命名的 URL）。
