未捕获的ReferenceError：$未定义

我在尝试创建JQuery图像滑块时收到此错误消息。

未捕获的ReferenceError：$未定义

这是我的新编码（请注意，我已将脚本移至页面，这是adobe建议的。）：

      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; }     
 
    $(function(){ $('#slider').cycle({ fx: 'scrollHorz', speed: 'fast', next: '#next', prev: '#prev' }); });    

我的网站（本地）的JS文件夹的文件夹路径如下所示：C：\ Users \ Andrew \ Desktop \ GCFS \ JS

我是编码世界的新手，但我想要实现的目标非常简单。 据我所知，我不需要有一个就绪函数，javascript应该自动运行。 谢谢您的帮助！

来自评论

当我尝试这个时它也失败了

     $(function() { $('#slider').cycle({ fx: 'scrollHorz', speed: 'fast', next: '#next', prev: '#prev' }); });  

Answer 1

解决方案：

1）使用Google CDN加载jQuery

2）就我所知的Cycle Plugin而言，它与jQuery v1.5-v1.7兼容，因为大多数方法都在jQuery 1.8+中被弃用。 这就是我在第1点中使用了Google CDN jquery的v1.5的原因。循环插件上的大多数示例都使用jquery 1.5。

3）清除你的浏览器缓存，它是大多数时候的主要罪魁祸首。

4）使用下面的代码检查jquery的加载

 if(typeof jQuery!=='undefined'){ console.log('jQuery Loaded'); } else{ console.log('not loaded yet'); } 

主要编辑：

错误的原因很简单：

您在加载jquery之前调用了循环方法。

DOM上的调用循环插件准备好了..

 $(document).ready(function(){ $('#slider').cycle({ fx: 'scrollHorz', speed: 'fast', next: '#next', prev: '#prev' }); }); 

Answer 2

2个问题。

看起来你的jQuery没有正确加载。

您通常会看到此错误

 Uncaught ReferenceError:$ is not defined 

当jQuery未正确包含在您的页面上时。

尝试使用CDN中的jQuery，它应该可以解决您的问题

更换

与来自cdn的那个

注意：如果从文件系统进行测试，则需要将http:添加到上述URL，否则将失败

接下来，您的脚本文件位于HTML之前。 所以需要在DOM Ready处理程序中包含代码。

 $(function() { $('#slider').cycle({ fx: 'scrollHorz', speed: 'fast', next: '#next', prev: '#prev' }); }); 

据我所知，在创建div Id时引用了“Slider”。

不它不是。 如果您的脚本刚好包含在正文之前，那么您可能不会将它包含在Ready处理程序中。 但在你的情况下它存在于头部。 因此，当脚本开始运行时， DOM仍然不存在该特定元素

检查小提琴

Answer 3

可能有两个问题：

1）JQuery可能没有正确加载。 您可以使用Chrome进行测试。 键入$或jQuery以检查它是否正确加载。

2）这是基于我在一些JQuery.js中的经验，这些JQuery.js将与其他JS库捆绑在一起，其中$将不被支持，并且您被迫使用jQuery而不是$在js文件中检查以下行你已经加载了你的项目。

 window.jQuery = window.$ = jQuery; 

我看到使用http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js对我不起作用，但我使用了http://code.jquery.com/jquery -1.7.2.min.js

下面是我编辑的代码中唯一的部分，它开始正常工作。

Answer 4

作为补充。 如果您在.js文件中使用$（Jquery）。 逻辑上所有的库或框架都应该在.js文件之前。

Answer 5

我有这个问题，但原因与上面报告的情况非常不同。 除了我以前的Android（2.2）之外，我的网站到处都是。 原来这个设备拒绝了code.jquery.com CDN上的https证书，所以它没有加载JQuery。 解决方法是从https Google CDN加载JQuery资源（使用上面其他人命名的URL）。