jquery - JavaScript 未捕获引用错误 : jQuery is not defined; Uncaught ReferenceError: $ is not defined

标签 jquery jquery-ui referenceerror

这是我的 fiddle ,http://jsfiddle.net/4vaxE/35/

它在我的 fiddle 中工作得很好。

但是,当我将其转移到 Dreamweaver 时,它无法运行。我在编码中发现了这两个错误。

  1. Uncaught ReferenceError :jQuery 未定义
  2. 未捕获引用错误 $ 未定义

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

这是我在 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>

最佳答案

因为您需要将 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>

关于jquery - JavaScript 未捕获引用错误 : jQuery is not defined; Uncaught ReferenceError: $ is not defined,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24946616/

相关文章:

如果其他失败,jQuery 加载默认图像

javascript - 仅使用 show ("slow"为附加文本设置动画)

jquery-ui - Qunit 中 jQuery 小部件的单元测试

javascript - 在 javascript 中使用的引用在 catch-Block 中不可用

javascript - TypeError 和 ReferenceError 的区别

javascript - Blur() 与 onblur()

jquery - 如何在容器 div 内拥有具有固定页眉和页脚的可滚动正文?

javascript - jQuery 1.10.2 和 jQuery UI 1.10.3

javascript - if (a) {} 抛出未捕获的 ReferenceError

javascript - jQuery ajax 的问题