17

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

未捕获的 ReferenceError:$ 未定义

这是我的新编码(请注意,我已将脚本移至页面的,这是 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">&nbsp;</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">&nbsp;</th>
  </tr>
  <tr>
    <th width="5%" align="left" scope="col">&nbsp;</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">&nbsp;</th>
  </tr>
</table>
<p>&nbsp;</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>

我的网站(本地)的 JS 文件夹的文件夹路径如下所示:C:\Users\Andrew\Desktop\GCFS\JS

我是编码世界的新手,但我想要实现的目标相当简单。据我所知,我不需要准备好函数,并且 javascript 应该自动运行。谢谢您的帮助!

来自评论

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

<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>
4

6 回答 6

24

解决方案:

1)使用谷歌CDN加载jQuery

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

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' 
    });  
});
于 2013-06-11T18:40:02.700 回答
9

2个问题。

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

您通常会看到此错误

Uncaught ReferenceError:$ is not defined

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

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

代替

<script src="JS/jquery-1.10.1.min.js"></script>

来自cdn的

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

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

接下来你的脚本文件在HTML. 所以需要在DOM Ready处理程序中包含代码。

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

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

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

检查小提琴

于 2013-06-11T17:56:15.870 回答
4

可能有两个问题:

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

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

下面是我编辑的代码中唯一的部分,它开始对我很好。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
于 2013-06-11T18:12:14.293 回答
3

作为补充。如果您在 .js 文件中使用 $(Jquery)。从逻辑上讲,所有库或框架都应位于该 .js 文件之前。

<script type="text/javascript" src="jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="app.js"></script>
于 2015-04-14T09:45:20.467 回答
0

我用 google 上的 Jquery 库的链接替换了我的头文件,并且每次都为我加载该页面时,它立即工作。

    <script type="text/JavaScript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
于 2021-11-26T11:36:45.100 回答
0

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

于 2016-02-15T18:49:52.657 回答