Jquery文件未在浏览器上加载答案

【问题标题】：Jquery file not loading on browserJquery文件未在浏览器上加载
【发布时间】：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 脚本，两者都是必需的。

标签： javascript jquery html css dom

【解决方案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

【讨论】：