如何将jQuery代码重写为Javascript？

我使用的WordPress主题只有大约10行jQuery，但它使用的是90kb的jQuery文件。我想将此jQuery代码更改为Javascript，但我不太擅长Javascript：

jQuery('body #main-tabbed-area a, body .wp-pagenavi a, body .pagination a').live("click", function () {
  $href = jQuery(this).attr('href');
  $contentArea.fadeTo('fast', 0.2).load($href + ' #main-area', function () {
    $contentArea.fadeTo('fast', 1);
  });
  return false;
});


var $tabbed_area = jQuery('div#tabbed');
if ($tabbed_area.length) {
  $tabbed_area.tabs({
    fx: {
      opacity: 'toggle'
    }
  });
};

---

提前谢谢

就个人而言，我会坚持使用jQuery。尽管jQuery“只有大约10行”，但它所做的是相当可观的。当您重新创建jQuery提供给您的许多内容时，您将有一个相当不错的javaScript板需要调试和维护。这就是jQuery的美妙之处，引用他们的口号“少写，多做”记住，使用jQuery可以消除许多恼人的跨浏览器怪癖

编辑：有关为什么jQuery值得使用的实际示例，请参见

使用jQuery的CDN版本，比如，您将使用的jQuery可能已经缓存，因此不必再次下载。jQueryUI也可以以同样的方式提供服务。见本文：

编辑

---

进一步阅读您的问题“我不太擅长javaScript”更是坚持使用jQuery的理由。让它为你做所有的举重但是不要用jQuery作为不了解javaScript的借口，对javaScript了解得越多，就越能从jQuery中获益。

我的解决方案是支离破碎的，不完整的，我不希望这个答案得到分数。这是我尝试在vanilla JS中复制jQuery的代码，纯粹是为了科学公正地回答您的问题。我认为自己擅长JavaScript，但即使我知道自己的局限性和时间限制。我在这个星球上只有一个生命，我实在不值得花时间为你的Wordpress网站写一个tabs插件和动画

只要看看代码的区别就可以了。如果你真的害怕人们下载，你应该问问自己，是什么让你的网站与成千上万的人有如此大的不同？有数百万人访问的其他网站吗

写这些东西很乏味，这就是为什么如果我必须做这些事情，我会使用jQuery但是，假设您不关心较旧的浏览器支持。您没有提到这一点，我在最底层有一个解决方案，可以做更多的工作，但是将不适用于较旧的浏览器，也不适用于较旧的浏览器

原件

很少有代码可以做非常复杂的事情

jQuery('body #main-tabbed-area a, body .wp-pagenavi a, body .pagination a').live("click", function () {
  $href = jQuery(this).attr('href');
  $contentArea.fadeTo('fast', 0.2).load($href + ' #main-area', function () {
    $contentArea.fadeTo('fast', 1);
  });
  return false;
});

尝试从头开始写

// Not even close to finished solution
(function(window, document) {
  var tabbed = document.getElementById('tabbed');

  // Semi-normalized event handling, not even a fraction as good as jQuery's
  function attachEvent(node, type, callback) {
    if(node.attachEvent) {
      return node.attachEvent('on'+type, function() {
        callback.apply(window.event.target, arguments);
      });
    }

    return node.addEventListener(type, function(e) {
      callback.apply(e.target, arguments);
    }, true);
  }

  // Semi-delegation again, not even a fraction of what jQuery offers
  attachEvent(document, 'click', function(e) {
    var href = this.href;
    var body = document.body;
    var elements = [];
    var slice = [].slice;
    var concat = elements.concat;

    // This is just the start of what it would take to emulate what jQuery is doing to match all those items
    // Without a reliable selector engine like querySelectorAll (not even that reliable) you'd need to match.
    elements = concat(slice.call(body.getElementById('main-tabbed-area').getElementsByTagName('a')));
    elements = concat(slice.call(body.getElementsByTagName('...');

    // Not even going to attempt fading
    // jQuery again does all this
  });

  if(tabbed && tabbed.tagName === 'div') {
    // No idea what tabs is? A plugin? Good luck!
  }

})(this, this.document);

代码稍微现代一些。。。但还是要看看那些代码

function xhr(url, callback) {
  var request = new window.XMLHttpRequest();
  request.open('GET', url, true);
  request.onreadystatechange = function(e) {
    if(e.readyState === 4) {
      callback(e.responseXML);
    }
  };
  request.send(null);
}

// No idea what contentArea is
var contentArea = ...???;

(function(window, document) {
  var tabbed = document.getElementsById('tabbed');

  document.addEventListener('click', function(e) {
    var href;
    var elements = document.querySelectorAll('body #main-tabbed-area a, body .wp-pagenavi a, body .pagination a');
    var match = false;

    elements.forEach(function(element) {
      if(this === element) {
        match = true;
      }
    });

    if(match) {
      href = e.target.href;

      // Some CSS3 class that does a fade out
      contentArea.classList.add('fadeOut');

      xhr(href, function(data) {
        var data = data.getElementById('main-area').innerHTML;
        contentArea.innerHTML = data;

        contentArea.classList.remove('fadeOut');

        // Some CSS3 class that does a fade in
        contentArea.classList.add('fadeIn');
      });

      return false;
    }
  }, true);

  if(tabbed && tabbed.tagName === 'div') {
    // Still no idea what tabs is? A plugin? Good luck!
  }
})(this, this.document);

---

jQuery已经用Javascript编写。我想您想要实现的是删除90kb的jQuery库依赖项。不幸的是，如果您想在自己的代码中重写它，很可能会产生90kb以上的Javascript行。请不要否决这一条。多亏了一些答案，这是一个很好的学习工具，可以教授我们为什么使用jquery。90Kb的jquery库是这10行代码的功能所在。如果我们不使用jQuery就可以简单地重写它们，那么首先你应该问问自己为什么要使用jQuery。但是这10行可以被大约100行普通javascript替换，因此可以删除4000行jQuery。@RobG:可能吧，也可能不。我们不要忘记，它仍然需要跨平台/浏览器进行彻底测试。从零开始编写/测试几百行JavaScript真的值得不加载90Kb的微小、几乎微不足道的好处吗？32kb是文件在互联网上的“传输大小”（缩小+压缩），实际缩小版本约为90Kb谢谢，无论如何，我会调整我的答案accordingly@Neverever：鬼鬼祟祟！不知道他们是这样衡量的。+1继续学习Javascript，尽管你似乎越深入，你越了解Javascript是如何工作的。+1是为了清楚地证明jQuery不是白做的。同意+1是为了帮助noob理解为什么jQuery值得付出代价……哦，我知道我擅长Javascript，但你看起来就像是我寻找答案的那个人。+1是为了说明jQueryGood的简洁性，展示4500行代码可替换为少于100个。但是请修复

document.getElementsById（'tabbed'）

（没有s）。也许你的意思是

getElementsByClassName

，如果你需要，我可以发布一个10行的版本，用于不支持主机方法的浏览器。谢谢@RobG，修复了这个错误。不，这是id，根据OP。我想继续写这段代码的其余部分，但感觉不对：-p