Question

我正在尝试做一个简单的jQuery教程，但它不起作用。

<html>                                                                  
 <head>                    
    <title></title>
    <script type="text/javascript" src="jquery-1.3.2.js">                                         
        $(function() {
            $('a').click(function() {
            $('#box').fadeOut();
        });
    });                                    
</script>           
<style type="text/css">
        #box
    {   background: red;
        width: 300px;
        height: 300px;
    }
</style>

</head>                                                                 
<body>                                
    <div id="box" ></div>
        <a href="#">Click Me</a>

</body>                                                                    
</html>

我复制并粘贴了jquery文件名：jquery-1.3.2

我看不出有什么问题？我正在使用Firefox。

Answer 1

将您的点击事件代码放在不同的脚本块中。

    <script type="text/javascript" src="jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(function() {
            $('a').click(function() {
                    $('#box').fadeOut();
            });
    }); 
    </script>

您提交的错误让我记得Degrading Script Tags

引用外部资源的脚本标记（通过src属性）不再能够执行标记本身嵌入的脚本。

Answer 2

首先，确保目录中有jquery-1.3.2.js。

然后，更改脚本标记：

<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
            $('a').click(function() {
                    $('#box').fadeOut();
            });
    });
</script>

Answer 3

您需要非常小心地将代码的不同部分放在哪里才能工作。

看一下对我有用的代码。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Fade Out Red Box</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <style type="text/css">
  #box
  {
    background: red;
    width: 300px;
    height: 300px;
  }
  </style>
</head>

<body>
  <div id="box"></div>
  <a href="#">Click me</a>

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

  <script type="text/javascript">
    $(document).ready(function(){
      $("a").click(function() {
        $("#box").fadeOut("slow");
      });
    });
  </script>
</body>
</html>

简单的jQuery教程将无法正常工作

3 个答案: