javascript - 战胜 jQuery 成瘾 : Which jQuery methods are easily translated into pure javascript?

Question

被 jQuery 宠坏了，我现在将它包含到每个项目中，即使我需要的只是调用 $("#div).hide()或$("#link").click()一次。

我知道 jQuery 通常会为您处理跨浏览器问题，但有时它只是 native JavaScript 方法的便捷包装。

所以我的问题是哪些 jQuery 方法可以轻松地被 native JavaScript 替换？

Answer 1

以下是我使用的一些示例，而不是 jQuery 方法(如果我不使用 jQuery):

• $(节点).css(值):

  function css(node, style) {
    if(node && node.style) {
      for(var key in style) {
          node.style[key] = style[key];
      }
    }
  }
  

• $(node).show():jQuery 在这里更加复杂，因为它还可以将显示值设置为例如内联。

  function show(node) {
    if(node && node.style) {
      node.style.display = "";
    }
  }
  

• $(node).hide():另外，jQuery方法存储了之前的显示值。

  function hide(node) {
    if(node && node.style) {
      node.style.display = "none";
    }
  }
  

• $(node).addClass(class)

  function addClass(node, cls) {
    if(node) {
      if(!node.className) {
          node.className = cls;
      }
      else if(node.className.indexOf(cls) == -1) {
          node.className = node.className + " " + cls;
      }
    }
  }
  

• $(node).removeClass(class)

  function removeClass(node, cls) {
    if(node && node.className && node.className.indexOf(cls) >= 0) {
      var pattern = new RegExp('\\s*' + cls + '\\s*');
      node.className = node.className.replace(pattern, ' ');
    }
  }
  

这些方法应该是跨浏览器兼容的。 jQuery 方法通常提供更多选项，例如删除多个类，或者更复杂。
这取决于您的需求，是否需要“高级”功能。更简单的方法可能就足够了。例如，如果我知道我总是需要隐藏 div 元素，那么这个 hide 和 show 方法就非常不错。

更新:

根据您正在开发的浏览器(例如制作 Firefox 扩展)，您甚至可以获得一些东西 close jQuery 的选择器引擎:document.querySelectorAll(selector)