2013-05-06 111 views
1

我一直在使用Codecademy上的jQuery进行实验,但是在下载这个库之后它似乎没有工作。无法让jQuery工作

我按照这些步骤:

  • 我下载的jQuery 1.9.1从http://jquery.com/download/http://code.jquery.com/jquery-1.9.1.min.js更具体)
  • 我重命名的文件的jquery.js并把它放在同一个源文件夹作为我的HTML /脚本等
  • 我链接到它在我的HTML文件<script src='jquery.js'> </script>
  • 我的脚本使用jQuery不起作用。我尝试了一个基本的测试,以查看jQuery是否工作正常 - $(document).ready(function(){ alert("Hello jQuery"); });

有什么我错过了?

(我的代码工作地很好Codecademy网站,所以我认为这是不太可能在其他地方的问题,在我的程序)

编辑1:

(全部代码,对于那些要求: ))

HTML/jQuery的

<script src='jquery.js'> 
     $(document).ready(function() { 
      alert("Hello jQuery!"); 
      $('.matchtile').click(function() { 
       $(this).fadeTo('slow', 0); 
      }); 
      $('.button').click(function() { 
       fadeIn(); 
      }); 
     }); 

     function fadeIn(){ 
      $('.matchtile').fadeTo('slow', 1); 
     } 
    </script> 
    <title></title> 
</head> 
<body> 
    <div class="matchtile"></div> 
    <div class="matchtile"></div> 
    <div class="matchtile"></div> 
    <div class="matchtile"></div> 
    <div class="button"></div> 
</body> 

CSS

.matchtile { 
    border-radius: 100%; 
    background-color: #FF0000; 
    width: 30px; 
    height: 30px; 
    margin: 30px; 
} 

.button { 
    background-color: #663333; 
    width: 30px; 
    height: 30px; 
    border-radius: 10%; 
    margin: 30px; 
} 
+2

一定要在这里发布一些代码对SO ...它有助于得到正确的答案,很快:) – 2013-05-06 20:52:37

+0

看看你的Javascript控制台 - 你有任何错误?在Chrome中,这个CTRL + SHIFT + I – 2013-05-06 20:52:42

+0

我确实是:)而不是,我不是。 – Eilidh 2013-05-06 20:53:13

回答

2

变化:

<script src='jquery.js'> 
    $(document).ready(function() { 
     alert("Hello jQuery!"); 
     $('.matchtile').click(function() { 
      $(this).fadeTo('slow', 0); 
     }); 
     $('.button').click(function() { 
      fadeIn(); 
     }); 
    }); 

    function fadeIn(){ 
     $('.matchtile').fadeTo('slow', 1); 
    } 
</script> 

到:

<script src='jquery.js'></script> 

<script type='text/javascript'> 
    $(document).ready(function() { 
     alert("Hello jQuery!"); 
     $('.matchtile').click(function() { 
      $(this).fadeTo('slow', 0); 
     }); 
     $('.button').click(function() { 
      fadeIn(); 
     }); 
    }); 

    function fadeIn(){ 
     $('.matchtile').fadeTo('slow', 1); 
    } 
</script> 

您的jQuery代码不应该在加载实际jQuery.js的相同脚本标记中

+2

或者以更一般的术语来陈述规则,脚本元素可以直接指定一个'src'或_s包含JS,但不能同时包含两个。 – nnnnnn 2013-05-06 21:00:46

+0

作为答案的附加之一:当您在'script'标签内使用内联代码时,src属性将被忽略。这就是为什么链接的脚本没有任何内部的脚本标记打开和关闭的原因。 – RaphaelDDL 2013-05-06 21:03:21

2
<script src='jquery.js'></script> 
<script> 
$(document).ready(function() { 
     alert("Hello jQuery!"); 
     $('.matchtile').click(function() { 
      $(this).fadeTo('slow', 0); 
     }); 
     $('.button').click(function() { 
      fadeIn(); 
     }); 
    }); 

    function fadeIn(){ 
     $('.matchtile').fadeTo('slow', 1); 
    } 
</script> 
<title></title> 
</head> 
<body> 
<div class="matchtile"></div> 
<div class="matchtile"></div> 
<div class="matchtile"></div> 
<div class="matchtile"></div> 
<div class="button"></div> 
</body> 
+1

你应该解释你做了什么。 – j08691 2013-05-06 20:58:23

+0

就像我做的那样;)... – 2013-05-06 20:59:26

0

我使用Google托管版本的jQuery处理同一个示例,只是为了消除库位置作为潜在失败点。这只是正常,本地测试:

<html> 
<head> 
    <title></title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
    <script> 
     $(document).ready(function(){ 
      alert("Hello jQuery"); 
     }); 
    </script> 
</head> 
<body> 
</body>