战胜 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 扩展），您甚至可以将 close 发送到 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

找出答案的最简单方法是阅读the source code，了解您感兴趣的方法。可读性很强。

Answer 4

（我喜欢“击败 jQuery 上瘾”）

我曾经发布过一个关于width() and height() and animation without jQuery 的问题并回答了自己。如您所见，这并不简单，但无论如何都是可行的。

Answer 5

对我来说，$.each 实用程序通常可以替换为for..in 语句：

$.each (object, function () {
    // do something with this
}

对比

var current;
for (key in object) {
    current = object[key];
    // do something with current
}

$.each 的唯一附加功能是它创建了一个新范围，允许您拥有更多本地化变量：

var someVar = 'original string';
$.each (object, function () {
    // do something with this
    var someVar = 'new string';
}
console.log(someVar); // 'original string'

但是，您可以使用 for..in 使用自执行函数来复制它：

var someVar = 'original string';
for (key in object) {
    (function() {
        var current = object[key],
            someVar = 'new string';
    })();
}
console.log(someVar); // 'original string'

Answer 6

.toggle() 可以相对容易地重新创建，尤其是只有 2 个状态的那个（3+ 个状态需要更多的工作：

$(function() {    
    $(selector).each(function() {
        var counter = 1;
        $(this).click(function() {
            counter++ % 2 ? 
                (function() { $("div").html("one"); }());  // <== First function
                (function() { $("div").html("two"); }());  // <== Second function
        });
    });
});

Try it out with this jsFiddle

以上等价于

$(selector).toggle(function() { ... }, function () { ... });

Answer 7

这是一个小型 Miniframework：JavaScript Miniframework

;)

Answer 8

我不知道任何可以轻松替换的 jQuery 方法（而且我认为没有），如果“简单”应该意味着 jQuery 方法与本机方法相同的话另一个名字。

例如，请参阅 hide() 文档。
它不只是将显示设置为“无”，它还存储当前的显示属性（如果您想稍后再显示它，这很有用）。 如果没有 jQuery，你可以在哪里存储显示？作为全局变量？...最好不要。