Преобразовать функция JQuery для яваскрипта GSAP

Question

Я делаю некоторые эксперименты с библиотекой GSAP и я нашел одну ручку Джонатан

http://codepen.io/jonathan/pen/qxsfc 

, который в значительной степени я нужен. я разветвил это перо и сделал свой собственный, и теперь я пытаюсь преобразовать его в vanilla js, но первый шаг он сам не работает. Я превратил анонимную функцию в именованный и вызвал window.onload и ее работу. но теперь я должен заменить все $ вызовы селектора Jquery к родным селекторов и ее не работает момент я изменить

var animContainer = $('.animContainer'), 
to  var animContainer = document.querySelector('.animContainer'), 

мое перо

`http://codepen.io/osricmacon/pen/HAnrt` 

больше предложение о том, как идти о преобразование jquery в vanilla js

Answer 1

querySelector останавливается у первого найденного элемента и возвращает ссылку на этот один элемент (или null, если он не находит его). Ближайший аналог к ​​jQuery querySelectorAll, который ищет всех соответствующих элементов и возвращает NodeList (который будет пуст, если ни один не найден).

Отдельно от этого ключевая вещь о jQuery заключается в том, что это основанный на наборе, тогда как DOM API - нет. Вероятно, это будет самая большая вещь, с которой вам придется иметь дело, когда вы конвертируете одно в другое.

Например, в JQuery, это устанавливает HTML всех div элементов "эй":

$("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"; 
} 

Распространенной подход к тому, чтобы сделать это менее многословным, заключается в повторном использовании функции ArrayforEach (что является 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 повторно использует те же функции, что и сеттеры и геттеры. html функции, например, наборов HTML-элементов в Jquery устанавливается, когда вы даете ему аргумент, но получает в 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, ...).