将jQuery的click()、hide()和fadeIn()转换为原生JS

Question

所以，我正在努力加快我的页面(通过避免一些请求)，不知道是否有人知道如何保持以下代码工作，而不必加载整个JQuery库:

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

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

是否有一种方法，在某个地方，只是从库中选择所需的代码并将其插入内联(在我的html中)?

谢谢你,

Answer 1

CSS3 @keyframes是一个干净的方式做你想没有jQuery。看看这个线程，它有一个演示。它实际上比jQuery的fadeIn运行得更流畅。

Answer 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>

Answer 3

如果你没有设置使用jQuery，你可以使用普通的JS，沿着这些行:

document.getElementById('div1').onclick(function() {
  document.getElementById('div2').style.visibility = 'hidden';
  document.getElementById('div3').style.visibility = 'visible';
});

免责声明有更好的方法来做这些DOM操作，这是一个例子!

Answer 4

从这里取fadeIn函数

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"));
};

Answer 5

这只适用于单个选择器，而不是同时使用多个元素，并且它不适用于任何其他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属性到你的元素。设置为400ms，就像jQuery的效果一样:transition: opacity .4s ease;