让jQuery工作很困难

Question

我一直在用jQuery做实验，但是在下载了库之后，它似乎不起作用了。

我遵循了以下步骤：

• 我从http://jquery.com/download/ (更具体地说是http://code.jquery.com/jquery-1.9.1.min.js)下载了http://code.jquery.com/jquery-1.9.1.min.js 1.9.1
• 我将文件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; 
}

Answer 1

更改：

<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的同一个脚本标记中

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

Answer 3

我使用谷歌的托管版本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>

​