jQuery无法在任何浏览器中运行

Question

这是我的jquery代码，我在app.js内部：

$(".spoiler p").hide();
$(".spoiler").append("<button>Reveal Spoiler!</button>");

我用html链接它：

<script src="app.js" type="text/javascript" charset="utf-8"></script>
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

但它不起作用...请告诉我该怎么做？

Answer 1

明确的问题编号1：

您的脚本app.js正在使用jQuery，它在执行时尚未加载。 }必须在 jQuery文件后加载。

app.js

明确的问题编号2：

您使用通用互联网方案synax（ CISS ）（<script src="//code.jquery.com/jquery-1.12.0.min.js"></script> <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script src="app.js"></script> ）在生产中很好，因为它允许通过加载原始页面的任何方案加载文件。例如，如果您的网站可能通过 //: 或 http加载，则您无需进行任何特殊编码弄清楚是否应该使用https或http来加载外部文件。浏览器使用用于加载页面的任何内容，并且您不会收到混合安全警告。

然而，问题是您（根据您的评论）通过https协议（即本地）加载原始页面。因此，浏览器也尝试在本地加载两个jQuery文件，因为您使用的CISS指示浏览器使用与原始页面相同的方案。

如果您需要使用CISS，则需要在从服务器提供页面时进行开发（有多种选项可以在本地计算机上运行服务器以进行开发）。

但是，如果您不打算在生产系统中混合安全方案，那么最简单的解决方案是通过file://或http加载外部文件，而不是允许浏览器确定它。

https

可能的问题编号3：

您的脚本<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script> <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script src="app.js"></script> 正在您搜索的元素出现之前执行。文件app.js的脚本标记应放在文档的底部，和/或app.js内的代码应包含在app.js或{{1}的快捷方式中}：

$(document).ready()

奖金信息

这与手头的问题无关。只是对建议的代码批评

重新查询DOM以获取相同的元素可能会非常重要。而不是这样做：

存储对元素的引用并在需要时使用它：

$()

或者，使用jQuery的链接：

$(function () {
    $(".spoiler p").hide();
    $(".spoiler").append("<button>Reveal Spoiler!</button>");
});

Answer 2

如果您在本地开发环境（即file://）中加载页面，则隐式路径//不起作用，您必须显式声明原点（即http://）

要了解更多原因，请阅读：Is it valid to replace http:// with // in a <script src="http://...">?。