击败jQuery成瘾:哪些jQuery方法很容易翻译成纯粹的javascript？

Question

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

我知道jQuery通常会为您处理跨浏览器问题,但有时它只是本机javascript方法的一个方便的包装器.

所以我的问题是哪些jQuery方法可以很容易地被原生javascript替换？

Answer 1

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

• $(node).css(values):

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

• $(node).show():jQuery在这里更复杂,因为它也可以将显示值设置为例如inline.

  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扩展程序),您甚至可以获得与jQuery的选择器引擎相近的内容:document.querySelectorAll(selector)

Answer 2

其中一个最大的jQuery滥用必须创建一个jQuery对象,仅仅是为了获取元素的属性.attr().

也许最常见的是使用以下方式获取ID属性:

$(this).attr("id");

代替

this.id;

在不使用jQuery的情况下,可以跨浏览器方式访问大量属性.

或者,如果我需要访问处理程序中元素的父级,而不是:

$(this).parent()...

我更有可能直接用父母包裹:

$(this.parentNode)...

如果您可以规划HTML以使元素之间没有空格,则可以跨浏览器方式轻松使用其他DOM遍历方法,例如:

this.nextSibling
this.previousSibling
this.firstChild
this.lastChild

Answer 3

最简单的找出方法就是阅读您感兴趣的方法的源代码。它非常易读。