如何将来自 jsfiddle.net 的代码放入我的网站？答案

【问题标题】：How do I put codes from jsfiddle.net into my website?如何将来自 jsfiddle.net 的代码放入我的网站？
【发布时间】：2016-09-11 19:43:29
【问题描述】：

我一直在尝试在我的网页底部创建一个小框，它会在滚动时展开/弹出，然后在鼠标移开时再次关闭。

我发现这个post 带有指向 jsfiddle.net 的链接（我一直在摆弄它），并创建了一些在 JSFiddle 上查看时完全符合我想要的东西。但是当我在我的网站上弹出它时，我无法让它运行（我认为这可能与 onLoad 设置有关，但我真的不确定）。

这是我在 JSFiddle 中创建的：

$('#box').hover(function() {
  $(this).animate({
    height: '220px'
  }, 150);
}, function() {
  $(this).animate({
    height: '20px'
  }, 500);
});

#box {
  position: absolute;
  width: 300px;
  height: 20px;
  left: 33%;
  right: 33%;
  min-width: 32%;
  bottom: 0;
  background-color: #000000;
}

<div id="box"></div>

这在 JSFiddle 中运行良好，但当我尝试将代码插入我的文件并将它们链接在一起时却不行。如果我将 JSFiddle 中的下拉框从 onLoad 或 onDomReady 更改为其他任何内容，它就会停止工作，但代码不会改变。所以我认为我必须为此添加其他内容。

正如您可能猜到的那样，我在 JavaScript 方面完全是个新手，所以我很肯定我做的不对。

谁能告诉我如何保存 JavaScript 代码并将其链接到我的网页，这样它就可以像在 JSFiddle 上一样工作？

【问题讨论】：

该 JavaScript 需要 jQuery 库，该库默认加载在 jsFiddle 上。确保您已将其包含在您自己的页面中。
附带说明，您应该查看 w3schools.com 并查看他们的 JavaScript 教程。它可能会帮助您了解 JavaScript 及其工作原理。
@Moses 不，这是个坏建议。请参阅w3fools.com 了解原因。我建议改为jqfundamentals.com。
@lonesomeday 哇，你完全正确。我从来没有意识到 w3schools 的文档有多么糟糕和过时（自从我第一次学习 css 以来，我还没有真正使用过它）。
另见JQuery works in JS fiddle, but not on my website?和Same code on jsfiddle but won't run on my server?

【解决方案1】：

您正在立即运行此代码，而不是等待 DOM 准备好。这意味着元素#box 可能还不存在。

jsFiddle 会自动执行此过程以使您的代码更简洁。当您将代码放入自己的网站时，您需要自己做。非常简单：只需将代码放入a callback to the ready event on the document：

$(document).ready(function() {
    // put your Javascript here
});

或者，一个快捷方式：

$(function(){
    // put your Javascript here
});

这些在语义和功能上是等效的。

【讨论】：