将 jQuery click()、hide() 和 fadeIn() 翻译成原生 JS答案

【问题标题】：Translate jQuery click(), hide() and fadeIn() to native JS将 jQuery click()、hide() 和 fadeIn() 翻译成原生 JS
【发布时间】：2017-02-25 01:16:57
【问题描述】：

所以，我正在努力加快我的页面速度（通过避免一些请求）并想知道是否有人知道如何保持以下代码正常工作而无需加载整个 JQuery 库：

$("#div1").click(function () {
    $("#div2).hide();
    $("#div3").fadeIn();
})

当然，这段代码需要一个 JQuery 库才能工作，但它比我的页面本身要重。

有没有办法在某个地方从库中选择所需的代码并将其插入内联（在我的 html 中）？

谢谢，

【问题讨论】：

您可能能够从 Rollup 或 Webpack 2 等捆绑器中删除一些带有 tree shaking 的 jQuery 代码。但如果确实需要考虑，请删除 jQuery 并使用 vanilla DOM 事件处理程序和 CSS。
你可以使用jquery cdn。
你确定加载 jquery 的时间比你的页面长吗？我想你可以通过参考谷歌的 jquery 来做链接
@AKZhang 你可以参考google的jquery库而不是在你自己的网站上保留一个副本，但是客户端在遇到引用时仍然需要加载整个jquery文件。您不想在尝试执行代码时往返于 google 站点。 OP所说的是jquery.js文件比他的整个页面重，这实际上是一个常见问题。
2 秒从 CDN 加载？这似乎很奇怪。

标签： javascript jquery

【解决方案1】：

这仅适用于单个选择器，不能同时用于多个元素，并且不适用于任何其他 jQuery 函数。对于您的情况，它将允许替换，因此您不需要额外的库。

$ = function(selector) {
    return document.querySelector(selector);
}
HTMLElement.prototype.hide = function() {
    this.style.visibility = "hidden";
    this.style.opacity = 0;
}
HTMLElement.prototype.fadeIn = function() {
    this.style.display = "block";
    this.style.visibility = "visible";
    this.style.opacity = 1;
}

对于fadeIn() 动画，您可以将CSS 属性添加到您的元素。这设置为 400 毫秒，就像 jQuery 的效果一样： transition: opacity .4s ease;

【讨论】：

好吧，我认为上面的响应做到了！
太棒了！如果您有任何其他问题或需要任何帮助，请告诉我

【解决方案2】：

这是一个使用 CSS 进行淡入淡出和纯 Javascript 来触发更改的示例：

document.getElementById('div1').onmousedown = function() {
  addClass('div2', 'hide');
  addClass('div3', 'show');
}

function addClass(id, className) {
  var el = document.getElementById(id);
  if (el.classList)
    el.classList.add(className);
  else
    el.className += ' ' + className;
}

#div2.hide {
  display: none;
}

#div3 {
  opacity: 0;
  transition: 0.3s opacity ease;
}

#div3.show {
  opacity: 1;
}

<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>

【讨论】：

【解决方案3】：

CSS3 @keyframes 是一种无需 jQuery 即可完成您想做的事情的简洁方式。看看this thread，它有一个演示。它实际上比 jQuery 的 fadeIn 运行更流畅。

【讨论】：

【解决方案4】：

fadeIn 函数取自 here。

function fadeIn(el) {
    el.style.opacity = 0;
    var tick = function() {
        el.style.opacity = +el.style.opacity + 0.01;
        if (+el.style.opacity < 1) {
            (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16)
        }
    };
    tick();
}
document.getElementById("div1").onmousedown = function () {
    document.getElementById("div2").style.display = 'none';
    fadeIn(document.getElementById("div3"));
};

【讨论】：

您是否只是使用 JavaScript 制作了淡入动画？我肯定会改用 CSS3 过渡（即使没有标记）。
@JohnWhite 是的，我也是。
嗯，问题是因为我也使用延迟！我认为没有办法延迟 CSS？
@VladGincher 因为对于任何严肃的应用程序来说，它的速度都非常慢。 JS 驱动的过渡将消耗主线程进行计算，而 CSS3 过渡是 GPU 加速的，其性能远远超过前者。此外，我不认为只为使用旧版浏览器的极少数用户支持非核心 UI 元素而使用较差的性能是不值得的。
@BobRodes caniuse.com/#search=transition -- 除了 Opera Mini，这大约是 1%。

【解决方案5】：

如果你不打算使用 jQuery，你可以只使用普通的 JS，类似以下内容：

document.getElementById('div1').onclick(function() {

  document.getElementById('div2').style.visibility = 'hidden';
  document.getElementById('div3').style.visibility = 'visible';

});

免责声明有更好的方法来进行这些 DOM 操作，这是一个示例！

【讨论】：

我不明白这里的反对意见（除了相应的非jQuery代码可能会使用style.display，但我不确定了）。
反对票不是我的，但这与 jQuery 代码不同。 fadeIn() 动画从隐藏到可见的过渡。
好吧，投反对票的人可能已经解释说，改变可见性与淡入和淡出不同，而不是在没有解释的情况下投反对票。
好吧，但是普通的 JS 是否允许 .delai(1000) 函数？
没有。您必须为此使用setTimeout()