未捕获的引用错误：$ 未定义错误答案

【问题标题】：Uncaught reference error: $ is not defined error未捕获的引用错误：$ 未定义错误
【发布时间】：2013-10-27 16:24:39
【问题描述】：

我从教程中获取了这段代码，在 javascript/jQuery 中制作了一个自动推进的幻灯片，它在 jsfiddle 中运行得非常好。但是，当我将所有内容都带入 Dreamweaver 时，它似乎就停止了工作。一切都在那里，我已经链接了所有相关文件（.js 和 .css）以及 jQuery 库。出于某种原因，尽管它根本不起作用。这是代码。

HTML

<div class="fadeIn">
            <img src="image1.png" height="500" width="800"/>
            <img src="image2.png" height="500" width="800"/>
            <img src="image3.png" height="500" width="800"/>
            <img src="image4.png" height="500" width="800"/>
        </div>

CSS

.fadeIn {
    position: relative;
    width: 800px;
    height: 500px;
}

.fadeIn img {
    position: absolute;
    left:0;
    top:0;
}

Javascript/jQuery

$(function(){
    $('.fadeIn img:gt(0)').hide();
    setInterval(function(){
    $('.fadeIn :first-child').fadeOut()
        .next('img').fadeIn()
        .end().appendTo('.fadeIn');
    }, 3000);
});

这是标题

<script src="SlideShow.js" type="text/javascript"></script>
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="SlideShow.css">

【问题讨论】：

控制台有错误吗？
请包含您的 Html 的头部，它必须是源错误
在本地范围内定义之前，您不能调用 $。见答案。

标签： javascript jquery html css slideshow

【解决方案1】：

确保您正在运行当前版本的 jquery。将其包含在 head 部分中

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function(){
    $('.fadein img:gt(0)').hide();
    setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 3000);
});
</script>

如果您在 chrome 上右键单击、检查元素、控制台、错误，请检查控制台日志是否有错误。

代码对我来说看起来不错，并且也可以正常工作。

【讨论】：

Chrome 中的控制台显示“未捕获的引用错误：$ 未定义”
我按照你的建议包含了 jQuery 库，但仍然没有。

【解决方案2】：

经过快速尝试，我设法重现了您提到的错误。如果你的函数有外部 js 文件，它依赖于其他 JS 库，你必须先加载那个库，然后再用你的函数依赖 JS 文件。

例如，这是行不通的：

<script src="slideshow.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

因为，JS解释器对$ before的搜索甚至被加载和定义了。

但是，这会起作用：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="slideshow.js"></script>

【讨论】：

【解决方案3】：

hmmm 你需要确保首先加载所有内容做到这一点，你可以做到

window.onload = function() {
    $(function(){
    　　　　('.fadeIn img:gt(0)').hide();
    　　　　setInterval(function(){
    　　　　$('.fadeIn :first-child').fadeOut()
        　　.next('img').fadeIn()
        　　.end().appendTo('.fadeIn');
    　　　　}, 3000);
　　});

}

这意味着在 dom 加载完所有脚本之后，它会执行你的函数。

【讨论】：