JQuery 不工作，但在 JSFiddle 上工作答案

【问题标题】：JQuery isn't working but works on JSFiddleJQuery 不工作，但在 JSFiddle 上工作
【发布时间】：2017-08-15 04:02:37
【问题描述】：

老实说，我已经尝试了所有方法，并且我已经为此工作了几天，但是 JQuery 无法在 Dreamweaver 中处理我的代码。我联系了他们，这是一个编码问题。当我将代码复制到 JSFiddle 时，它可以工作，但不适用于我的 HTML。这是 JSFiddle 链接：https://jsfiddle.net/mufeeza/36cmxwxc/

这是我在 HTML 中链接它的方式：

<script src="jquery-latest.js"></script> 
<script type="text/javascript" src="/resources/js/home.js"></script>

这是 JS 文件：

$('#contact').on('mouseenter', function () {
    "use strict";
    $('body').css('background-image', 'url("https://image.ibb.co/fmOqzv/Contact.png")');
    $('.intro').css('opacity', '0');
});

$('#contact').on('mouseleave', function () {
    "use strict";

    $('body').css('background-image', 'url(http://www.solidbackgrounds.com/images/2560x1440/2560x1440-white-solid-color-background.jpg)');
    $('.intro').css('opacity', '1');
});

$('#design').on('mouseenter', function () {
    "use strict";

    $('body').css('background-image', 'url("https://image.ibb.co/d2Dqzv/Portfolio.png")');
    $('.intro').css('opacity', '0');

});

$('#design').on('mouseleave', function () {
    "use strict";

    $('body').css('background-image', 'url(http://www.solidbackgrounds.com/images/2560x1440/2560x1440-white-solid-color-background.jpg)');
    $('.intro').css('opacity', '1');
});

$('#develop').on('mouseenter', function () {
    "use strict";

    $('body').css('background-image', 'url("https://image.ibb.co/mSQPuv/develop.png")');
    $('.intro').css('opacity', '0');

});

$('#develop').on('mouseleave', function () {
    "use strict";
    $('body').css('background-image', 'url(http://www.solidbackgrounds.com/images/2560x1440/2560x1440-white-solid-color-background.jpg)');
    $('.intro').css('opacity', '1');
});

【问题讨论】：

也许你在加载 jQuery 文件之前加载了你的 js 文件，总是先加载 jQuery 文件。
尝试从 CDN 替换你的 jquery 看看会发生什么：我的其他想法将是您通往 src 的道路是一个错过

标签： javascript jquery html css

【解决方案1】：

默认情况下，JsFiddle 将您的 JavaScript 代码包装在窗口 onload 事件处理程序中 (window.onload=function(){...)。您可以这样做，将其包装在 $(document).ready(function() { call 中，或将其移动到文档末尾，在结束正文元素 (</body>) 之前加载。

【讨论】：

将它移到 HTML 文档的末尾有效！谢谢你:)

【解决方案2】：

Jquery 在执行时需要寻找 HTML 节点。

如果你的 Jquery 文件包含在 HTML 的<head> 中，Jquery 需要等到所有的 HTML 加载完毕才能找到 HTML 节点，所以你需要告诉 Jquery 在 DOM 加载后执行，要么通过将你的函数包装在

$(document).ready(function() {
  //jQuery code here 
});

或

$(function(){ 
  //jQuery code here 
});

如果Jquery包含在HTML底部</body>标签之前，意味着它将在HTML加载后执行，不需要告诉Jquery等待。

【讨论】：