Question

我对Javascript，HTML和CSS很有经验，但我之所以避免使用jQuery，只是因为我不熟悉它。

最后，我被迫面对它。我想要一些类似于Cookie Clickers＆＃34; + 1＆＃34;单击cookie（http://orteil.dashnet.org/cookieclicker/）时效果，@ shipshape给出了完美的解决方案。但是，我完全不知道在哪里实现jQuery以及如何链接它。

对于这个愚蠢的问题真的很抱歉，没有谷歌回答似乎真的帮助我。

谢谢你们！

＆＃13;

$('button').on('click', function() {
  var $newPlus = $('<div class="plus">+1</div>');
  $('#area').append($newPlus);
  setTimeout(function() {
    $newPlus.addClass('fade');
  }, 50);
  setTimeout(function() {
    $newPlus.remove();
  }, 650);
});

＆＃13;

#area {
  position: relative;
  padding: 70px;
}
#area .plus {
  position: absolute;
  left: 100px;
  top: 50px;
  opacity: 1;
  transition: top 300ms ease-out, opacity 600ms ease-in-out;
}
#area .plus.fade {
  top: 0px;
  opacity: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="area">
  <button>Plus One</button>
</div>

＆＃13;

Answer 1

将您的JS代码包装在$(document).ready(function() { //your code });中，您可以在其中引用页脚，正文或标题中的script标记！或者您可以引用如下文件：<script src="myscripts.js"></script>。

您需要在引用jQuery文件之后将其放入。

$(document).ready(function() {
  $('button').on('click', function() {
    var $newPlus = $('<div class="plus">+1</div>');
    $('#area').append($newPlus);
    setTimeout(function() {
      $newPlus.addClass('fade');
    }, 50);
    setTimeout(function() {
      $newPlus.remove();
    }, 650);
  });
});

Answer 2

您通常将jQuery脚本标记放在页面的<head>中（与其他脚本和样式表link标记一样），但它可以放在页面的任何位置。然后你的jQuery代码通常会在</body>中包含的脚本标记内部的某个部分（可以在文档末尾，$(document).ready()之前）。

脚本/文档准备就像这样。这是一个参考 - https://learn.jquery.com/using-jquery-core/document-ready/

<script>
  $(function() {
    // your jQuery code goes here
  });
</script>

将JQuery实现为HTML文档

2 个答案: