$ 在 onload 中不可用

Question

我无法理解在我的页面上使用 onload 时 $ 未被识别的错误。这就像我创建的示例页面一样，我需要在加载页面后调用函数。

Jquery Code

$(document).ready(function(){
 alert("loaded");
});

<html>

<head>
</head>

<body>

</body>
    <script src="../Jquery/contact.js"></script>
    <script src="../Jquery/jquery-1.12.0.min.js"></script>
    <script src="../Jquery/jquery-migrate-1.2.1.min.js"></script>
    <script src="../Jquery/jquery.SPServices-2014.01.min.js"></script>

    <link rel="stylesheet" type="text/css" href="../CSS/default.css"/>
    <link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap.css"/>
    <link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap-theme.css"/>
    <link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap-theme.min.css"/>



</html>

Answer 1

这里有两个问题：

将 script 或 link 标签作为 html 的直接子标签是无效的，所以它不能正常工作并不让我感到惊讶至少在某些浏览器上。您需要将它们放在 body 或 head 中。 only valid content of the html element 是单个 head 元素后跟单个 body 元素。

标准指导，例如在YUI Best Practices for Speeding Up your Website中是：
- 将 link 标签放入 head
- 将 script 标签放在 body 的底部，就在 </body> 结束标签之前
看起来您的 contact.js 文件立即调用 $()（不是响应事件）。如果是这样，那么 contact.js 必须在脚本列表中 after jQuery，以便在您的代码运行时加载 jQuery。

所以：

<html>

<head>
    <link rel="stylesheet" type="text/css" href="../CSS/default.css"/>
    <link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap.css"/>
    <link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap-theme.css"/>
    <link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap-theme.min.css"/>
</head>

<body>

    <script src="../Jquery/jquery-1.12.0.min.js"></script>
    <script src="../Jquery/jquery-migrate-1.2.1.min.js"></script>
    <script src="../Jquery/jquery.SPServices-2014.01.min.js"></script>
    <script src="../Jquery/contact.js"></script>

</body>
</html>

旁注：

您可能会查看脚本和 CSS 合并和缩小，以避免产生大量 HTTP 请求。
考虑在最顶部添加 <!doctype html> 以确保浏览器处于标准模式（而非 quirks 模式）。
考虑在 head 的顶部添加 <meta charset="UTF-8">（确保文件确实是 UTF-8，或者将其中的 "UTF-8" 更改为您实际使用的任何编码在文件中使用）。

Answer 2

感谢您的投入。所以基本上我有两个问题。我通过将 contact.js 移到底部并删除迁移插件解决了第一个问题。

$ 在 onload 中不可用

$ not available in onload

html

javascript

jquery

onload