未捕获的ReferenceError：$未定义 [英] Uncaught ReferenceError: $ is not defined
问题描述
尝试创建JQuery图像滑块时收到此错误消息。
I am getting this error message when trying to create a JQuery image slider.
未捕获的ReferenceError：$未定义
Uncaught ReferenceError:$ is not defined
<这是我的新编码（请注意，我已将脚本移至页面，这是adobe建议的。）：
Here is my NEW coding (NOTE that I have moved the script to the of the page, this was suggested by 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>
我的网站（本地）JS文件夹的文件夹路径如下所示：
C：\ Users \ Andrew\Desktop\GCFS \ JS
My folder path to the JS folder for my website (locally) looks like this: C:\Users\Andrew\Desktop\GCFS\JS
我是编码世界的新手，但我想要实现的目标相当简单。据我所知，我不需要有一个就绪函数，javascript应该自动运行。
感谢您的帮助！
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!
来自评论
当我尝试这个时它也失败了
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>
推荐答案
解决方案：
1）使用Google CDN加载jQuery
1) Use Google CDN to load jQuery
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
2）就我所知的Cycle Plugin而言，它与jQuery v1.5-兼容v1.7因为大多数方法都在jQuery 1.8+中弃用了。这就是我在第1点中使用了Google CDN jquery的v1.5的原因。循环插件中的大多数示例都使用jquery 1.5。
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.
3）清除浏览器缓存，它是大多数时候的主要罪魁祸首。
3) Clear Your browser cache, It is the main culprit most of the times.
4）使用下面的代码检查加载jquery
4) PLease check the loading of jquery using the code below
if(typeof jQuery!=='undefined'){
console.log('jQuery Loaded');
}
else{
console.log('not loaded yet');
}
主编辑：
错误的原因非常简单：
在加载jquery之前调用了循环方法。
You have called the cycle method before the jquery is loaded.
在DOM上调用循环插件..
call cycle plugin on DOM ready..
$(document).ready(function(){
$('#slider').cycle({
fx: 'scrollHorz',
speed: 'fast',
next: '#next',
prev: '#prev'
});
});
这篇关于未捕获的ReferenceError：$未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
