Question

我有这个代码用于测试目的，它非常简单，当我在Firefox中打开它进行调试时，它不起作用，一切似乎都被加载和罚款，这很奇怪，对此有什么想法？。非常感谢

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Hover Over effect jQuery</title>
    <link rel="stylesheet" href="css/style.css">
    <script type="text/javscript" src="js/jquery-1.10.2.min.js">
      jQuery(document).ready(function($) {
        $("img").click(function(event) {
          $(this).fadeOut('slow');
        });
      });
    </script>
  </head>
  <body>
    <div class="viewport">
      <a href="#">
        <img src="images/renew.jpg">
      </a>

      <div class="caption"><span>Caption goes here</span>
      </div>
    </div>
  </body>
</html>

Answer 1

改变这个：

<script type="text/javscript" src="js/jquery-1.10.2.min.js">

        jQuery(document).ready(function($) {
            $("img").click(function(event) {
                $(this).fadeOut('slow');
            });
        });

      </script>

对此：

<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">

        jQuery(document).ready(function($) {
            $("img").click(function(event) {
                $(this).fadeOut('slow');
            });
        });

      </script>

使用src属性加载外部脚本时，如果请求成功，浏览器将忽略<script>标记的内容。解决方案很简单，只需添加另一个脚本标记。

您还应该删除<html>之前的<!DOCTYPE html>。这是毫无意义和错误的。此外，如果这是整个文档，则最后需要</html>。

Answer 2

代码无效的原因有两个问题。

当您尝试使用src属性加载外部脚本时，它将忽略脚本标记的内容。只需添加<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>代替:)。
您在创建脚本元素时拼错了JavaScript。修改拼写错误，它将在您正确包含jQuery库后修复代码。

一些更有帮助的提示：

确保您的html标记位于正确的位置。在您的代码中，您已经两次声明了html标记。确保您的顶部有<html>，最后有一个结束标记</html>。
<!DOCTYPE>声明位于文档的最顶部。

使用您的代码的示例：

<!DOCTYPE html>
<html>

<head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Hover Over effect jQuery</title>
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script type="text/javascript">

            jQuery(document).ready(function($) {
                $("img").click(function(event) {
                    $(this).fadeOut('slow');
                });
            });

          </script>


</head>
<body>
    <div class="viewport"><a href="#">
    <img src="robin.gif" ></a>

    <div class="caption"><span>Caption goes here</span></div></div>
</body> 
</html>

我希望这有帮助！

Answer 3

你可能正在使用纤薄的版本获得生产版本。 here

你也可以使用纤细的构造，它排除了ajax和效果   模块：

下载压缩的，生产的jQuery 3.3.1 slim build

下载未压缩的开发jQuery 3.3.1 slim build

jQuery不适用于fadeOut

3 个答案: