我正在使用GSAP库做一些实验，发现乔纳森（Jonathan）的一支笔
http://codepen.io/jonathan/pen/qxsfc
这几乎是我所需要的。我分叉了那支笔，制成了自己的笔，现在我正尝试在香草js中将其转换，但第一步是它本身无法正常工作。我已经将匿名函数转换为命名函数，并调用window.onload及其工作。但是现在我必须将jquery选择器的所有$调用替换为本机选择器，并且在我更改时不起作用
var animContainer = $('.animContainer'),
to var animContainer = document.querySelector('.animContainer'),
我的笔是
`http://codepen.io/osricmacon/pen/HAnrt`
关于如何将jquery转换为vanilla js的任何其他建议
querySelector在找到的第一个元素处停止，并返回对该元素的引用（或者null如果找不到）。类似于jQuery的$()是querySelectorAll，它查找所有匹配的元素并返回a NodeList（如果未找到则为空）。
与此分开的是，关于jQuery的关键是它是基于集合的，而DOM API不是。当您将一个转换为另一个时，这可能是您要处理的最大事情。
例如，在jQuery中，这会将所有div元素的HTML设置为“嘿”：
$("div").html("hey");
使用DOM API的等效内容可能如下所示：
var list = document.querySelectorAll("div"); // Or .getElementsByTagName
var i;
for (i = 0; i < list.length; ++i) {
list[i].innerHTML = "hey";
}
减少繁琐程度的一种常见方法是重用Array的forEach功能（这是ES5，但可以针对较旧的浏览器进行填充），如下所示：
// You'd probably do this once and reuse it
var forEach = Array.prototype.forEach;
// Where you want to use it:
forEach.call(document.querySelectorAll("div"), function(div) {
div.innerHTML = "hey";
});
或者，当然，要有一个实用功能的工具带来做这些事情。当然，这正是jQuery是什么。
最后，在许多情况下，jQuery重用与setter和getter相同的功能。的html功能，比如，设置在jQuery的集合中的元素的HTML，当你给它一个说法，但得到的的HTML第一，如果你不这样做的一组元素：
$("div").html("hey"); // Sets the HTML of all divs
console.log($("div").html()); // Gets the HTML of the *first* div
请注意非对称性：设置适用于集合中的所有元素，但获取仅适用于集合中的第一个元素（忽略任何其他元素）。这是对所有做双重职责职能的真实（html，css，val，attr，prop，...）。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句