问题
I am getting this error message when trying to create a JQuery image slider.
Uncaught ReferenceError:$ is not defined
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>
My folder path to the JS folder for my website (locally) looks like this: 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!
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>
回答1:
The solution:
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) 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) Clear Your browser cache, It is the main culprit most of the times.
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');
}
Major Edit:
The reason for the error is fairly simple:
You have called the cycle method before the jquery is loaded.
call cycle plugin on DOM ready..
$(document).ready(function(){
$('#slider').cycle({
fx: 'scrollHorz',
speed: 'fast',
next: '#next',
prev: '#prev'
});
});
回答2:
2 issues.
Looks like your jQuery was not loaded properly.
You generally see this error
Uncaught ReferenceError:$ is not defined
when jQuery was not properly included on your page.
Try using jQuery from CDN and it should solve your problem
Replace
<script src="JS/jquery-1.10.1.min.js"></script>
with the one from 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
Next your script file is before the HTML . So need to contain the code in DOM Ready handler.
$(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.
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
Check Fiddle
回答3:
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.
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.
window.jQuery = window.$ = jQuery;
I see that by using http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js didn't work for me but I used 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>
回答4:
As an addition. If you are using $(Jquery) in your .js file. Logically all libs or frameworks should be before that .js file.
<script type="text/javascript" src="jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="app.js"></script>
回答5:
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).
来源：https://stackoverflow.com/questions/17050581/uncaught-referenceerror-is-not-defined