JavaScript Uncaught ReferenceError: jQuery is not defined;未捕获的 ReferenceError：$ 未定义 [重复]

Posted

技术标签:

【中文标题】JavaScript Uncaught ReferenceError: jQuery is not defined;未捕获的 ReferenceError：$ 未定义 [重复]【英文标题】：JavaScript Uncaught ReferenceError: jQuery is not defined; Uncaught ReferenceError: $ is not defined [duplicate] 【发布时间】：2014-09-16 18:29:09 【问题描述】：

这是我的小提琴，http://jsfiddle.net/4vaxE/35/

它在我的小提琴中运行良好。

但是，当我将它转移到dreamweaver 时，它无法工作。我在编码中发现了这两个错误。

    未捕获的 ReferenceError：未定义 jQuery 未捕获的引用错误 $ 未定义

之前看过这两个错误相关的文章，按照提供的方法尝试解决，还是不行，请问如何解决？

这是我在 Dreamweaver 中的完整代码

<body>
    <div class="buttons" style="background-color: rgba(0,0,0,.8);">
    <a class="button" id="showdiv1">Div 1</a>
    <a class="button" id="showdiv2">Div 2</a>
    <a class="button" id="showdiv3">Div 3</a>
    <a class="button" id="showdiv4">Div 4</a>
    </div>

    <div id="div1">1</div>
    <div id="div2">2</div>
    <div id="div3">3</div>
    <div id="div4">4</div>
</div>
<script language="javascript" type="text/javascript" script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>

<script language="JavaScript" type="text/javascript">
var selectedEffect="explode";
var options =  percent: 100 ;
$('#showdiv1').click(function () 
    $('div[id^=div]').hide();

    $('#div1').show( selectedEffect, options, 500, callback );
);
$('#showdiv2').click(function () 
    $('div[id^=div]').hide();
    $('#div2').show( selectedEffect, options, 500, callback );
);

$('#showdiv3').click(function () 
    $('div[id^=div]').hide();
    $('#div3').show( selectedEffect, options, 500, callback );
);

$('#showdiv4').click(function () 
    $('div[id^=div]').hide();
    $('#div4').show( selectedEffect, options, 500, callback );
);

function callback() 
      setTimeout(function() 
        $( "#effect:visible" ).removeAttr( "style" ).fadeOut();
      , 1000 );
    ;
</script>
</body>
</html>

CSS

<style type="text/css">

.button 
    cursor:pointer;
    display:inline-block;
    margin:10px;
    clip: rect(auto,auto,auto,auto);


#div1 
    background:aqua;
    padding:20px;
    width:100px;
    text-align:center;
    display:none;

#div2 
    background:blue;
    padding:20px;
    width:100px;
    text-align:center;
    display:none;

#div3 
    background:orange;
    padding:20px;
    width:100px;
    text-align:center;
    display:none;


#div4 
    background:green;
    padding:20px;
    width:100px;
    text-align:center;
    display:none;

a 
    color:aqua;
    -webkit-filter: grayscale(1.0);

a:hover 
    color:red;
    -webkit-filter: grayscale(0.0);

</style>

【问题讨论】：

在&lt;script&gt; 标记的中间有一个流浪的script，它会加载你的jQuery UI 代码。 【参考方案1】：

因为您需要将 jQuery 库添加到您的文件中：

jQuery UI 只是 jQuery 的一个插件，这意味着 首先你需要包含 jQuery 库 → 然后是 UI。

<script src="path/to/your/jquery.min.js"></script>
<script src="path/to/your/jquery.ui.min.js"></script>

【讨论】：

非常感谢~它的工作~！ 谢谢你救了我亲爱的 (Y) LOL 我一直认为 UI 是 jquery 导入，并且想知道为什么我一直收到此错误。仔细阅读文件名 我遇到了同样的问题，正如你所说的（Roko），我已经按照相同的顺序排列了 url（首先是 jquery，然后是 jquery-ui），但是使用 Google CDN 并且效果很好！ &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt; &lt;script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"&gt;&lt;/script&gt; @MubarakZade 是的。您需要确保事先存在 window.jQuery 或 window.$ - 以便 UI 库正常工作。如果在您专门调用 UI 的文件中，并且如果 console.log(window.jQuery) 为您提供 undefined，则您需要修复订单。【参考方案2】：

您没有包含 jquery 库。在 jsfiddle 中它已经存在了。只需将此行包含在您的 head 部分中即可。

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

【讨论】：

非常感谢~它的工作~【参考方案3】：

你的脚本标签构造有一个错误，这个：

<script language="JavaScript" type="text/javascript" script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>

应该是这样的：

<script language="JavaScript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>

您的脚本标签中间丢失了一个“脚本”字样。 此外，您应该删除 http:// 以让浏览器决定是使用 HTTP 还是 HTTPS。

更新

但是您的主要错误是您包含 jQuery UI（仅）您必须首先包含 jQuery！ jQuery UI 和 jQuery 一起使用，而不是分开使用。 jQuery UI 依赖于 jQuery。 您应该将此行放在 jQuery UI 之前：

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

【讨论】：

额外的属性没有任何作用，协议相关的 URL 只是一个细节。 在本地测试 jQuery（即没有服务器）时，不要使用相关协议。 @user2864740 在您使用使用 http 和更高版本 https 的网站之前，这很好，但浏览器突然阻止了您的 http 资源 (jquery)。 @JoãoPinho如果/当它出现时，那将是一个不同的问题。 （有些人可能会争辩说，资源应该仅是 HTTP 或 HTTPS，而不是两者。） @j08691 嗯……这是为什么呢？您认为通过我的千兆家庭网络连接，您的 7200rpm 硬盘驱动器比网络缓存文件更快吗？！ :)

以上是关于JavaScript Uncaught ReferenceError: jQuery is not defined;未捕获的 ReferenceError：$ 未定义 [重复]的主要内容，如果未能解决你的问题，请参考以下文章

Ubuntu Uncaught ReferenceError 中的 Javascript 错误：$ 未定义

Uncaught Error: Bootstrap's JavaScript requires jQuery

Javascript Uncaught TypeError：AccountID不是一个函数

Uncaught Error: Bootstrap's JavaScript requires jQuery

JavaScript报错Uncaught SyntaxError: Invalid shorthand property initializer

javascript Uncaught TypeError：无法读取null的属性'firstChild'[重复]