Уроки Почему везде JQuery имеют знаки доллара? Введение в jQuery Программный интерфейс или синтаксис jQuery.
- Tutorial
* Это шутка.
(картинка позаимствована где-то в интернете)
Всем привет.
Уже давно прошли времена обязательной поддержки 6, 7, 8 Ослов и неизбежного использования jQuery, DOM API постепенно приводится к единому виду, но я всё так же часто встречаю на просторах интернета утверждения о том, что VanillaJS - это длинная колбаса.
Мол, зачем мне писать вот так:
document.querySelector(".selector");
Если я могу написать вот так:
$(".selector");
Я отчасти согласен с этим, потому что, периодически, необходимо выбирать элементы много раз в приложении. Приходится определять функции, делающую выборку, прямо в коде:
// selects one node matched given selector
function $(selector, ctx) {
return (ctx || document).querySelector(selector);
}
// selects all nodes matched given selector
function $$(selector, ctx) {
return .slice.call((ctx || document).querySelectorAll(selector));
}
Это касается крошечных скриптов. Для крупных проектов, конечно, нужно юзать какой-нибудь фреймворк, который берет на себя все манипуляции над DOM.
Но я совершенно несогласен с тем, что для обычной выборки нужно подклюать что-то большое (Zepto, jQuery).
«Движение» против использования jQuery и за использование нативных методов DOM существует уже несколько лет. Вспомним два самых известных сайта youmightnotneedjquery и vanilla-js . Оба сразу отталкивают новичка устаревшими альтернативами. vanilla-js показывает ужасные примеры использования AJAX и анимаций, второй грешит только беспощадным XMLHttpRequest. Оба сайта ни слова не говорят о Fetch API.
Хотя, если присмотреться, и с анимациями у второго не всё гладко. В качестве альтернативы они предлагают воспользоваться transition, хотя CSS Animations существуют давно и, самое главное, Web Animations JavaScript API уже имплементирован в Хроме и Файерфоксе и неплохо полифилится для других браузеров.
Для того, чтоб получить небольшую DOM библиотеку с минимальным необходимым набором методов, я когда-то сделал библиотеку, с шуточным названием balalaika.js . Напомню, балалайка - jQuery-подобная микробиблиотека, с очень небольшим набором методов: on , off , is , extend .
Но и она устарела. Метод is потерял свою актуальность, так как метод matches стал кроссбраузерным. extend самоуничтожился, так как в JavaScript пришел Object.assign , on и off просто-напросто не нужны, по причине, озвученной выше: фреймворки.
Я решил немного обновить эту библиотеку, выпилив все методы и оставив только функциональность, отвечающу за выборку элементов. Так как это изменение полностью ломает совместимость с балалайкой, было решено вынести её в отдельный проект с другим названием «bala» - обрубленное старое название (как и библиотека), - «пуля» по-испански.
Кроме всего прочего, целью bala.js является улучшение того, что сейчас иногда называют «плагинами к VanillaJS». Я очень люблю библиотеки без зависимостей, но почти все они предлагают инициализировать скрипт с передачей DOM Element.
MyAwesomeLib(document.getElementByID("block"));
В таких случаях мне бы хотелось иметь больше возможностей: передать селектор, передать NodeList или, на худой конец, инстанс jQuery. Подключив к такому инструменту ~400 символов кода, инициализация скрипта будет более гибкой.
$(".selector").appendChild(node);
Поэтому, была добавлена симпатичная альтернатива в виде статичного метода $.one , который работает в точности так же, как и основная функция, но возвращает нулевой элемент или null
// всего одним символом больше, а выглядит на тысячу символов лучше $.one(".selector").appendChild(node);
$.one , кроме всего, служит двум целям: не создавать дополнительную переменную (в таких библиотеках их обычно две: $$ и $) и оставить возможность симпатичного импорта.
Import $ from "balajs";
var $ = require("balajs");
$(".one, two") $(document.querySelectorAll(".selector")); $(document.body); $(element.children); $(jQuery(".selector")); $()
Поиск элемента в другом элементе
var elements = $(".my-selector", element);
DOM ready
$(function() { alert("DOM is ready"); });
Не забывайте, что вместо использования DOM ready можно просто указать скрипты в конце тега body
...
Парсинг
var div = $("");
Парсинг контекстных элементов
Для персинга элементов, требующих контекст, нужно передать имя тега-родителя (он создается динамически), например, для парсинга td нужно передать tr , для парсинга tr нужно передать tbody , для парсинга option нужно передать select .
var cells = $("", "tr");
Плагины
Расширять bala.js можнно как и любую другую jQuery-подобную библиотеку.
$.fn.toggle = function(boolean) { this.forEach(function(item) { item.hidden = boolean; }); }; $(".button").toggle(false); // hides all buttons Как использовать?Как глобальную переменную на странице
$=function(d,e,c,f,g){c=function(a,b){return new f(a,b)};f=function(a,b){e.push.apply(this,a?a.nodeType||a==window?[a]:""+a===a?/