Jquery文件未在浏览器上加载
Posted
技术标签:
【中文标题】Jquery文件未在浏览器上加载【英文标题】：Jquery file not loading on browser 【发布时间】：2018-08-29 22:06:01 【问题描述】：当我在谷歌浏览器上打开 html 文件时。它只是一个空白页。什么都没有加载。如果我取出 .js 文件，它会加载应用了 .css 的内容，但绝不会加载 .js 文件。无论我将 .js 文件放在还是放在它的末尾，它仍然没有显示任何内容。我正在使用 jquery btw 并下载了文件。所有文件都在同一个文件夹中。如果有区别，还尝试了 jquery-3.3.1.min.js 和 jquery-migrate-1.4.1.js。希望有人可以提供帮助。谢谢！
HTML：
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="testing.css">
</head>
<body>
<div id="products">
<h1 class="ui-widget-header">Blocks</h1>
<div class="ui-widget-content">
<ul>
<li data-id="1" class="credit"> 10000$ </li>
<li data-id="2" class="debit"> -10000$ </li>
<li data-id="3" class="credit"> 10000$ </li>
<li data-id="4" class="credit"> -10000$ </li>
<li data-id="5" class="credit"> Bank </li>
<li data-id="6" class="debit"> Loan </li>
</ul>
</div>
</div>
<div id="shoppingCart1" class="shoppingCart">
<h1 class="ui-widget-header">Credit Side</h1>
<div class="ui-widget-content">
<ol>
<li class="placeholder">Add your items here</li>
</ol>
</div>
</div>
<div id="shoppingCart2" class="shoppingCart">
<h1 class="ui-widget-header">Debit side</h1>
<div class="ui-widget-content">
<ol>
<li class="placeholder">Add your items here</li>
</ol>
</div>
</div>
<script type="text/javascript" src="jquery-migrate-1.4.1.js"></script>
<script type="text/javascript" src="testing.js"></script>
</body>
</html>
.JS
$("#products li").draggable(
appendTo: "body",
helper: "clone"
);
$("#shoppingCart1 ol").droppable(
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
accept: ".credit",
drop: function(event, ui)
var self = $(this);
self.find(".placeholder").remove();
var productid = ui.draggable.attr("data-id");
if (self.find("[data-id=" + productid + "]").length) return;
$("<li></li>",
"text": ui.draggable.text(),
"data-id": productid
).appendTo(this);
// To remove item from other shopping cart do this
var cartid = self.closest('.shoppingCart').attr('id');
$(".shoppingCart:not(#" + cartid + ") [data-id=" + productid + "]").remove();
).sortable(
items: "li:not(.placeholder)",
sort: function()
$(this).removeClass("ui-state-default");
);
// Second cart
$("#shoppingCart2 ol").droppable(
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
accept: ".debit",
drop: function(event, ui)
var self = $(this);
self.find(".placeholder").remove();
var productid = ui.draggable.attr("data-id");
if (self.find("[data-id=" + productid + "]").length) return;
$("<li></li>",
"text": ui.draggable.text(),
"data-id": productid
).appendTo(this);
// To remove item from other shopping chart do this
var cartid = self.closest('.shoppingCart').attr('id');
$(".shoppingCart:not(#" + cartid + ") [data-id=" + productid + "]").remove();
).sortable(
items: "li:not(.placeholder)",
sort: function()
$(this).removeClass("ui-state-default");
);
.CSS
h1 padding: .2em; margin: 0;
#products float:left; width:200px; height: 600px; margin-right: 20px;
#products ul list-style: disc; padding: 1em 0 1em 3em;
.shoppingCart width: 200px; margin: 20px; float: left;
.shoppingCart ol margin: 0; padding: 1em 0 1em 3em; list-style-type: decimal;
【问题讨论】：
能不能给个不工作的版本？当前包含迁移但不包含 jquery 此外，可拖动和可放置方法也不是核心 jquery。这些是 jquery ui 插件，您必须包含 jquery ui 文件才能使用它们。参考。 jqueryui.com 所以你包含 jquery，然后是 migrate，然后是 jquery ui，最后是你的自定义逻辑。 在你的 head 标签而不是 body 标签中添加 jquery 脚本。当浏览器加载 HTML 页面时。它加载 jquery 库并准备好使用您编写的脚本。 现在就试试吧。 @supritshah1289 这是核心库。使用同一个CDN，也可以得到jquery ui include，如<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">。由于使用 jquery ui 方法的 OPs 脚本，两者都是必需的。
【参考方案1】：
使用
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
因为jquery-migrate 不包含完整的jquery 代码。
当然你可以包含本地脚本。
【讨论】：
我尝试使用 jsfiddle，如果我使用不同版本的 jquery，它会以某种方式在那里工作。但是当我尝试 1.9.1 cdn 时，它仍然没有做与在 jsfiddle 中时相同的事情，这里是示例：jsfiddle.net/cq0z8tzh/1【参考方案2】：问题：
-
您的 HTML 文件没有指向 jquery 和 jquery UI 的 CDN 链接。他们需要相同的顺序。首先，你需要jquery CDN和第二个jquery UI cdn
您在 testing.js 文件中使用 jquery，但您没有 document.ready 功能。
解决方案： 1.为jquery和jquery UI添加cdn链接 2. 在 document.ready 函数中包装你的 javascript 代码。 这是MDN document
Solution
【讨论】：
以上是关于Jquery文件未在浏览器上加载的主要内容，如果未能解决你的问题，请参考以下文章