我的jQuery不起作用

时间:2012-12-09 18:07:42

标签: jquery

我第一次尝试jQuery。此代码取自W3schools。在这里,如果你点击按钮,你应该看到3个方框。我没有更改代码中的任何内容,除了头部我已经更改了src。我正在使用Firefox。

    <html>
        <head>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
    $(document).ready(function(){
    $("button").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
  });
});
</script>
</head>

<body>
<p>Demonstrate fadeIn() with different parameters.</p>
<button>Click to fade in boxes</button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>

</body>
</html>

1 个答案:

答案 0 :(得分:0)

更改你的src =“http:// ....因为它没有得到Jquery文件。

<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("#div1").fadeIn();
                $("#div2").fadeIn("slow");
                $("#div3").fadeIn(3000);
            });
        });
    </script>
</head>
<body>
    <p>
        Demonstrate fadeIn() with different parameters.</p>
    <button>
        Click to fade in boxes</button>
    <br>
    <br>
    <div id="div1" style="width: 80px; height: 80px; display: none; background-color: red;">
    </div>
    <br>
    <div id="div2" style="width: 80px; height: 80px; display: none; background-color: green;">
    </div>
    <br>
    <div id="div3" style="width: 80px; height: 80px; display: none; background-color: blue;">
    </div>
</body>
</html>