Javascript 将jQuery click（）、hide（）和fadeIn（）转换为本机JS

因此，我正在努力通过避免一些请求来加速我的页面，并想知道是否有人知道如何在不必加载整个JQuery库的情况下保持以下代码正常工作：

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

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

在某个地方，有没有一种方法可以从库中选择所需的代码并将其内联插入到我的html中

---

谢谢，

如果您不打算使用jQuery，您可以使用普通的JS，大致如下：

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

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

});

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

fadeIn函数取自

---

这只适用于单个选择器，而不是同时适用于多个元素，并且不适用于任何其他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的效果一样：

---

过渡：不透明

CSS3@keyframes是一种在没有jQuery的情况下做你想做的事情的干净方法。看一看，里面有一个演示。它实际上比jQuery的fadeIn运行得更流畅。

下面是一个使用CSS进行淡入淡出和使用普通Javascript触发更改的示例：

document.getElementById'div1'.onmousedown=function{ addClass'div2'，'hide'； addClass'div3'，'show'； } 函数addClassid，className{ var el=document.getElementById； 如果el.classList el.classList.addclassName； 其他的 el.className+=''类名称； } 第2部分：隐藏{ 显示：无； } 第三组{ 不透明度：0； 过渡：0.3s； } 第3部分：表演{ 不透明度：1； } 第一组 第二组

---

Div3您可能能够从诸如Rollup或Webpack2之类的捆绑包中删除一些具有树抖动的jQuery代码。但是如果这是一个真正的问题，那就放弃jQuery，改用普通的DOM事件处理程序和CSS。你可以使用jQuery cdn。你确定加载jQuery的时间比你的页面要长吗？我认为你可以做出来的链接，从谷歌的参考为基础jquery@AKZhang您可以引用google的jquery库，而不必在自己的站点上保存副本，但是当客户端遇到引用时，仍然必须加载整个jquery文件。您不希望在执行代码时往返于google站点。OP所说的是jquery.js文件比他的整个页面都重，这实际上是一个常见问题。从CDN加载需要2秒？这似乎很奇怪。我不理解这里的下推投票，而且相应的非jQuery代码可能会使用style.display，但我不确定了。下推投票不是我的，但这与jQuery代码不一样。fadeIn设置从隐藏到可见的过渡动画。向下投票人可能会解释说，改变可见性与淡入淡出不是一回事，而不是在没有解释的情况下向下投票。好的，thnaks，但是普通的JS允许.delai1000函数吗？不，你必须使用setTimeout。你刚才用JavaScript制作了淡入动画吗？我当然会选择CSS3转换，即使它没有标记。@JohnWhite是的，我也是。问题是我也使用了延迟！我不认为有什么办法可以延迟使用CSS？@VladGincher，因为对于任何严肃的应用程序来说，它的速度都慢得无法比拟。JS驱动的转换将通过计算消耗主线程，而CSS3转换是GPU加速的，其性能远远超过前者。另外，我不认为仅仅为了支持非核心UI元素而使用低劣的性能是值得的。@BobRodes-除了Opera Mini之外，这大约是1%。好吧，我认为上面的回答可以做到！伟大的如果您有任何其他问题或需要任何帮助，请告诉我

$ = 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;
}