1

我一直在 Codecademy 上尝试使用 jQuery，但是在下载该库后它似乎无法正常工作。

我按照以下步骤操作：

  • 我从http://jquery.com/download/下载了 jQuery 1.9.1 （更具体地说是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; 
}
4

3 回答 3

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>
于 2013-05-06T20:56:32.413 回答
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 的同一脚本标记中

于 2013-05-06T20:56:44.500 回答
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>

于 2013-05-06T21:09:22.377 回答