Jquery函数在纯javascript中等效

时间:2013-01-09 14:16:51

标签: javascript jquery

我正在寻找一个包含所有jQuery函数的文档,以及它们在浏览器本身提供的API中的等价物。

有时我只需要一个特定的jQuery函数(.detach().insertAfter().on(),...),我只为此加载jQuery。

我想停止对jQuery的依赖,而jQuery到非库的翻译对我有很大的帮助(我想很多人)。

网上某处有这样的东西吗?

编辑:

我找到了它:http://youmightnotneedjquery.com/

4 个答案:

答案 0 :(得分:6)

在获取jQuery对象$(SELECTOR)之后,只调用那些jQuery函数。如果你说你不需要jQuery选择器代码而只是想要(可能)一个HTML DOM元素的函数,你必须从jQuery源代码(http://code.jquery.com/jquery-latest.js)中删除它,带有依赖关系,只需要大小和复杂性这可能是一个痛苦的过程。

JS等价物:

.detach - .removeChild

var par = elm.parentNode;
par.removeChild(elm);

.insertAfter - .insertBefore How to do insert After() in JavaScript without using a library?

function insertAfter(referenceNode, newNode) {
    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

.on - addEventListener / attachEvent

if(elm.addEventListener)
    elm.addEventListener(EVENT_NAME, function() {}, false);
else
    elm.attachEvent('on' + EVENT_NAME, function() {});

现在,如果要绑定事件,以便处理程序具有对特定对象的THIS引用......

function bind( scope, fn ) {
    return function () {
        fn.apply( scope, arguments );
    };
}
if(elm.addEventListener)
    elm.addEventListener(EVENT_NAME, bind(SCOPE_OBJECT, function(){}), false);
else
    elm.attachEvent('on' + EVENT_NAME, bind(SCOPE_OBJECT, function(){}));

答案 1 :(得分:2)

如果你也在寻找相同的传统支持,那么不,没有这样的事情有很多原因,例如:

  1. jQuery在内部重复使用其中的许多方法,因此您很难找到一个独立的api调用。
  2. 在为旧版支持应用回退之前,jQuery经常运行多个支持检查,浏览器是否本机支持某种方法。你需要做同样的事。
  3. 但是,您可能能够通过浏览github:https://github.com/jquery/jquery上的源代码来提取单个方法并制作正确的vanilla实现,但这将非常耗时。 / p>

    也就是说,许多dom操作非常简单,你首先不需要jQuery,比如添加一个类:

    elem.className += 'class'
    

    但逆向工程jQuery不是摆脱jQuery依赖的明智方法。

答案 2 :(得分:1)

也许您正在寻找jQuery源代码?

http://docs.jquery.com/Source_Code

答案 3 :(得分:0)

我从未见过一个人。 JQuery处理了很多浏览器差异,因此在JQuery中使用简单命令编写通常编写的内容可能需要在普通旧JavaScript中使用相当多的代码。

考虑到这一点,我认为你想让自己摆脱对jQuery的依赖,并了解更多关于JavaScript原生的方法,这是令人钦佩的。

查看the code behind JQuery 可能有助于您入门。否则,当您有特定问题时,为什么不回到本网站。我相信这里的人可以告诉你.detach().insertAfter().on()等等,但每个人可能都需要一个单独的问题和一些关于你要做什么的解释第一

希望这有助于(或至少鼓励)。