Введение в jQuery. Уроки Почему везде JQuery имеют знаки доллара? Селекторы в jQuery

Дата написания: 20.08.2023

Время на чтение: 16 минут

Keypress() — устанавливает обработчик ввода символа с клавиатуры, либо, запускает это событие.

Метод имеет три варианта использования.

Keypress(handler)

eventData — объект содержащий данные, для передачи в обработчик. Должны быть представлены в формате {fName1:value1, fName2:value2, …};
handler — функция, которая будет установлена в качестве обработчика.

Keypress ()

Вызывает событие keypress , у выбранных элементов страницы.

Примечание: поскольку событие keypress не покрывается какой-либо официальной спецификацией, фактическое поведение, возникающее при его использовании, может различаться в разных браузерах, версиях браузеров и платформах.

В первых двух вариантах, этот метод является сокращенной версией.on("keypress", handler) , а в третьем — .

Событие keypress отправляется элементу, когда пользователь нажимает клавишу на клавиатуре. Это похоже на событие , за исключением того, что модификаторы и непечатаемые клавиши, такие как Shift , Esc и Delete , запускают события смены ключа, но не события keypress . Другие различия между этими двумя событиями могут возникать в зависимости от платформы и браузера.

Событие keypress может быть прикреплено к любому элементу, но сработает только на тех элементах, которые имеют фокус. Список элементов, которые могут получить фокус, варьируются в зависимости от браузера, поэтому надежнее всего будет привязать это событие к элементам формы, так как они всегда могут получить фокус.

Для примера рассмотрим html:

Обработчик события может быть привязан к полю ввода:

$("#target").keypress(function() { alert("Вызвано событие.keypress()"); });

$ ("#target" ) . keypress (function () {

alert ("Вызвано событие.keypress()" ) ;

} ) ;

При нажатии клавиши в поле ввода мы увидим сообщение «Вызвано событие.keypress()».

Чтобы инициировать событие вручную, примените.keypress() без аргумента:

$("#other").click(function() { $("#target").keypress(); });

$ ("#other" ) . click (function () {

$ ("#target" ) . keypress () ;

} ) ;

При клике мышью в область с id="other" будет вызвано событие и мы также увидим сообщение.

Если необходимо установить обработчик нажатия клавиши в любом месте страницы (например, для реализации глобальных сочетаний клавиш), то лучше всего прикрепить это поведение к объекту документа. Событие нажатия клавиши «всплывает» по DOM, если не будет явно остановлено.

Код нажатой клавиши

В примере выше для того, чтобы узнать какая именно клавиша клавиатуры была нажата, мы можем посмотреть значение переменной eventObject.which , которая содержит код нажатой клавиши. В то время как браузеры используют разные свойства для хранения этой информации, jQuery нормализует свойство.which чтобы вы могли надежно использовать его для извлечения кода символа.

Обратите внимание, что методы keydown и keyup определяют нажатую клавишу, а keypress указывает, какой символ был введен. Таким образом,при вводе латинской «a» переменная eventObject.which внутри обработчиков события keydown или keyup будет содержать значение 65, а внутри обработчика keypress — 97. В верхнем регистре «А» сообщается как 65 по всем событиям. Из-за этого различия, обработка специальных нажатий клавиш, таких как клавиши со стрелками, keydown или keyup — лучший выбор.

Дополнительные замечания

Поскольку метод.keypress() является сокращенной версией.on("keypress", handler) , он может быть удален с помощью.off("keypress").

В прошлых уроках мы разбирали вопрос общих понятий jQuery и способов его подключения.
В этой статье речь пойдёт об применении селекторов в jQuery (CSS и XPath), которые позволяют с лёгкостью и точностью выбрать один или несколько элементов DOM. К каждому селектору будет приведён код, пример применения. Использование jQuery селекторов не вызывает проблем с работой в старый браузерах, например IE 6, так как содержит в себе механизмы работы CSS 1-3.

Структура кода jQuery Знак доллара $ - обозначает использование jQuery , selector - элемент DOM с которым работаем и специальная функция jQuery с её параметрами (например, анимация, развёртывание, перемещение и тд).

Пример jQuery кода

$(selector).function(parameters);

Селекторы в jQuery В данном уроке мы остановимся подробно на вопросе селекторов. Что же это такое?

Селектор (от англ. select - выбирать) - это элементы DOM (объектной модели документа, например, теги или специально размеченные блоки), к которым мы обращаемся с запросом. Данное понятие существует и в JavaScript, и в CSS, и других языках, где нужно выбрать конкретный элемент и поработать с его свойствами.

Идентификаторы (id).

Если Вы хотите поработать с конкретным элементом, и только один раз (в теории, так как на практике некоторые браузеры не побрезгуют повторным использованием идентификатора), то присваиваем ему уникальный id.

Код HTML

#id - выбирает единственный элемент с переданным идентификатором (id). В данном случае special

Код jQuery

$("#special").css("border", "1px solid black");

В дальнейшем буду писать без тегов , надеюсь понятно, что JavaScript надо заключать именно в них. В примере мы выбираем элемент с id special , в данном случае это div. В нём мы используем функцию css и создаём чёрную непрерывную (solid) границу (border) в 1 пиксель.

Классы (class).

.class - выбираем все элементы с указанным классом. Всё правильно, их может быть несколько. Главное, чтобы название класса было одинаковым.

Код HTML

Первый блок
Второй блок
Как видите, элемента (div) два и классы у них одинаковые.

Код jQuery

$(".spec_class").css("border", "1px solid red");
У всех элементов, где значение класса spec_class также создаются такие же границы, как и в прошлом примере, но уже красные.

Элементы (elements).

Выбираются все элемента определённого типа. Это либо body , либо все div , либо все table и так далее.

Код jQuery

$("div").css("border", "1px solid green");
У всех div появится зелёная рамка.

* (все элементы) - выбираем абсолютно все элементы. Даже head и body .

Код jQuery

$("*").css("border", "1px solid blue");
У всех элементов Вашего документа появится синяя рамка.

$("*", document.body).css("border", "2px solid black");
Выбираем все элементы в body и делаем им чёрную границу в 2 пикселя.

По типу: selector1, selector2, ..., selectorN - перечисляем все элементы. Ниже интересный пример совместного использования селекторов.

Код jQuery

$("div, span, p.spec_class").css("border", "1px solid red");
Выбирает все элементы div, span и p, у которых указан класс spec_class. Все селекторы просто указывается через запятую.

Иерархические селекторы в jQueryancestor descendant

Выбирается главный элемент (родительский элемент) и элементы включённые в него (потомки). Рассмотрим на примере ниже родителя form и потомков select .

Код jQuery

$("form select").css("border", "1px dashed black");
У всех элементов select, потомков form будет установлена чёрная пунктирная граница.

parent - child

Теперь выберем всех потомков родителького элемента.

Код jQuery

$("#id > *").css("border", "1px double black");
В начале выбираем всех наследников элемента с идентификатором id , а потом создаём им двойную границу чёрного цвета.

prev и next (предыдущий и следующий)

Указываем элементы, идущие следующими (next) за элементом, обозначенным в качестве предыдущего (prev).

Код jQuery

$("label + input").css("color", "blue").val("Готово!");
Выбираем элементы input, идущие за label. Устанавливаем им свойства CSS - цвет в форме чёрного цвета, а значение (.val) установлено Готово!

prev ~ siblings

Теперь работаем с сестринскими элементами. Выюираем всех сестёр, следующих за предыдущим элементом (prev).

Код jQuery

$("#prev ~ div").css("border", "3px groove blue");
Ищем все элементы div, которые являются сестринскими по отношению друг к другу и следуют сразу за элементом с идентификатором #prev. Обратите внимание, что в примере не будут отобраны элементы span, поскольку отбор идет только для элементов div.

Базовые фильтры:first

Будет выбран первый элемент с указанным селектором.

Код jQuery

$("tr:first").css("font-style", "bold");
В первой строке (tr) в таблице текст будет выделен полужирным (bold).

Теперь будем выбирать последний элемент с указанным селектором.

Код jQuery

$("tr:last").css({backgroundColor: "yellow",fontWeight: "bolder"});
Находим последнюю строчку (tr) в таблице и красим фон в жёлтый цвет и также устанавливаем жирный шрифт (bolder).

:not(selector)

Используя отрицание отфильтровывает элементы. Выбираем все input, в которых не стоит флажка (checkbox), а также span, следующие за ними

Код jQuery

$("input:not(:checked) + span").css("background-color", "yellow");
Значение чекбоксов при этом не меняется.

Внимание! Интересный пример , который применяет каждый второй в своей практике. Как выбрать чётный или нечётный элементы? Нужно затем, чтобы строки в тексте или даже коде делать читаемыми. Стартовое значение 0.

Код jQuery

$("tr:even").css("background-color", "#с1с1с1");
Отбираем чётные строки в таблице. Выделена будет первая, третья и тд строки. Внимание! Отсчёт идёт по индексам, а в них первая строка имеет значение 0. Далее отбираются строки с индексами 0, 2, 4 и т.д.).

Теперь выбираем нечётные элементы. Считается значение индекса, начиная с 0. Соответственно будут выбраны значения 1,3,5,7 и тд. Это соответствует 2,4,6 и тд строчкам, так как их отсчёт идёт по факту, с первой.

Код jQuery

$("tr:odd").css("background-color", "#с1с1с1");
Фон нечётных строк окрашиваем в серый.

:eq(index)

Выбираем конкретный индекс элемента. В примере покрасим только одну строку таблицы.

Код jQuery

$("td:eq(2)").css("color", "blue");
Выбираем по индексу элемент 2. Напоминаю, это будет 3-я строка, так как тэо будет третий по счёт индекс (0,1,2).

:gt(index)

Теперь выбираем значения индекса, которые больше указанного в селекторе.

Код jQuery

$("td:gt(4)").css("text-decoration", "line-through");
Выбираем строки в таблице, индекс элемента которых больше 4, то есть их индекс равен 5,6 и тд. Это соответствует 6, 7 и тд встречающимся элементам, в нашем случае строкам таблицы.

:lt(index)

Теперь выбираем значения индекса, которые меньше указанного в селекторе.

Код jQuery

$("td:lt(3)").css("color", "red");
Выбираются все элементы td с индексом мНапример ищем все элементы TD, с индексом меньше 3. Поскольку отсчёт, ещё раз напоминаю, ведётся с нуля, то это строки таблицы (td) 1,2,3.

Будут выбраны все элементы, которые являются заголовками (h1,h2,h3 и тд)

Код jQuery

$(":header").css({ background:"#c1c1c1", color:"#0085cc" });
Для всех заголовков (элементов h) мы установим синий шрифт и светло-сервый фон.

:animated

Будут отобраны все элементы, являющиеся в тот момент анимированными.

Код HTML

Сделать первый div красным
Код jQuery

$("#run").click(function(){
$("div:animated").toggleClass("colored");
});
function animateIt() {
$("#mover").slideToggle("slow", animateIt);
}
animateIt();
Здесь пример немного посложнее. После клика по кнопке меняем цвет анимированного элемента (div). С не анимированными элементами изменений не происходит.

Рассмотрим простой пример работы селекторов в jQuery. Файл полностью готов к работе, достаточно просто скопировать код целиком в созданный html-файл. Бибилотека в примере подключается с сервера Google, поэтому для корректной работы файла потребуется подключение к интернету. Под кодом есть Демо-версия для просмотра.

jQuery

#polosa1{ position: relative; background:white; width: 200px; height: 50px; border-top: solid 1px #000; }
#polosa2{ position: relative; background:blue; width: 200px; height: 50px; }
#polosa3{ position: relative; background:red; width: 200px; height: 50px; border-bottom: solid 1px #000; }

Пример работы селекторов jQuery

Флаг Болгарии
Флаг Австрии
Флаг СССР

Демонстрация Скачать исходники
Спасибо за внимание! Удачи в начинаниях!

Я использую функцию автозаполнения jQuery на моем норвежском сайте. При вводе норвежских символов æ, ø и å функция автозаполнения предлагает слова с соответствующим символом, но не слова, начинающиеся с соответствующего символа. Похоже, мне нужно, чтобы символ кодировал норвежских символов посреди слов, но не символы, начинающиеся с него.

Я использую PHP-скрипт с моей собственной функцией для кодирования норвежских символов в UTF-8 и создания списка автозаполнения.

Это действительно расстраивает!

$q = strtolower($_REQUEST["q"]); if (!$q) return; function rewrite($string){ $to = array("%E6","%F8","%E5","%F6","%EB","%E4","%C6","%D8","%C5","%C4","%D6","%CB", "%FC", "+", " "); $from = array("æ", "ø", "å", "ä", "ö", "ë", "æ", "ø", "å", "ä", "ö", "ë", "-", "-"); $string = str_replace($from, $to, $string); return $string; }

$items – массив, содержащий подсказки-слова.

Foreach ($items as $key=>$value) { if (strpos(strtolower(rewrite($key)), $q) !== false) { echo utf8_encode($key)."\n"; } }

$(document).ready(function(){ $("#autocomplete").autocomplete("/search_words. ", { position: "after", selectFirst: false, minChars: 3, width: 240, cacheLength: 100, delay: 0 }) });

Ошибка (я думаю):

Strtolower() не будет Strtolower() строчные символы.
Таким образом, вы не конвертируете специальные символы в функцию повторной записи (Ä Æ Ø Å и т. Д.),

если я правильно понял код, запрос для Øygarden (обратите внимание на капитал Ø) оставил бы первый символ в его исходной форме Ø , но вы запрашиваете форму urlencode () d, которая должна быть %C3%98

Вы должны использовать mb_convert_case() определяющий UTF-8 как кодировку.

Дайте мне знать, разрешит ли это это.

Ваш код может быть заменен на 100% с использованием стандартных функций PHP, которые могут обрабатывать все символы Unicode вместо тех, которые вы указали, тем самым менее подвержены ошибкам. Я думаю, что функциональность вашей пользовательской функции rewrite() может быть заменена на

urldecode ()
iconv ()

вы получили бы правильные кодированные UTF-8 данные, которые вам больше не нужны utf8_encode() . Можно было бы получить более чистый подход таким образом, который работает для всех персонажей. Также может случиться так, что он уже сортирует любую ошибку (если ошибка в вашем коде).

Я использую аналогичную конфигурацию, но с датскими персонажами (æ, ø и å), и у меня нет проблем с любыми символами. Вы уверены, что кодируете все символы правильно?

Мой ответ содержит | список значений. Все значения кодируются в кодировке UTF-8 (так они хранятся в базе данных), и я задал тип содержимого text / plain; charset = utf-8, используя функцию заголовка php. Последний бит для этого не нужен.

Фрэнк

Спасибо за все ответы и помощь. Я, конечно, узнал некоторые новые вещи о PHP и кодировании 🙂

Но решение, которое сработало для меня, было следующим:

Я узнал, что функция автозаполнения jQuery фактически кодирует UTF-8 и строчный специальный символ перед отправкой его в функцию PHP. Поэтому, когда я выписываю массивы предлагаемого контента, я использовал функцию rewrite() для кодирования специальных символов. Поэтому в моей функции сравнения мне нужно было только опустить все.

Теперь он отлично работает!

У меня была схожая проблема. решение в моем случае было функцией urldecode () php, чтобы преобразовать строку обратно в исходную, а затем отправить запрос в db.

Селекторы jQuery используются для выбора необходимого элемента на странице.

Команды jQuery

Код jQuery как и код JavaScript состоит из последовательно идущих команд . Команды являются основной структурной единицей jQuery.

Стандартный синтаксис jQuery команд :

$(селектор).метод();

Знак $ сообщает, что символы идущие после него являются jQuery кодом;

Селектор позволяет выбрать элемент на странице;

Метод задает действие, которое необходимо совершить над выбранным элементом. Методы в jQuery разделяются на следующие группы:

Методы для манипулирования DOM;
Методы для оформления элементов;
Методы для создания AJAX запросов;
Методы для создания эффектов;
Методы для привязки обработчиков событий.

Символ $

jQuery можно комбинировать с обычным JavaScript.

Если строка начинается с $ - это jQuery, если $ вначале строки отсутствует - это строка JavaScript кода.

Function start() { //Скроем абзац с id="hid" с помощью jQuery $("p#hid").hide(); //Изменим содержимое абзаца с id="change" document.getElementById("change").innerHTML="Данное содержимое было изменено с помощью JavaScript."; }

Некоторые JavaScript библиотеки тоже используют $ для обозначения своего кода. Для того, чтобы избежать конфликта имен между ними в jQuery предусмотрена команда noConflict() . С помощью команды noConflict() Вы можете заменить знак $ на любой другой.

Синтаксис:

Var произвольное_имя=jQuery.noConflict();

//Изменим стандартный символ $ на nsign var nsign=jQuery.noConflict(); //Изменим цвет абзаца используя nsign вместо $ nsign(document).ready(function(){ nsign("p").css("color","green"); });

Быстрый просмотр

Селекторы jQuery

С помощью селекторов Вы можете выбирать элементы на странице для применения к ним определенных действий.

Ниже располагается таблица с различными примерами использования селекторов для выбора желаемых элементов:

Пример Результат

$("p")	Будут выбраны все элементы p, которые находятся на странице.
$(".par")	Будут выбраны все элементы на странице с class="par".
$("#par")	Будет выбран первый элемент на странице с id="par".
	Позволяет выбрать текущий HTML элемент. Щелкните на $(this) слева, чтобы посмотреть пример использования данного селектора в онлайн редакторе.
$("p.par")	Будут выбраны все элементы p на странице с class="par".
$("p#par")	Будут выбраны все элементы p на странице с id="par".
$(".par,.header,#heat")	Будут выбраны все элементы на странице со значениями атрибутов class="par", class="header" и id="heat".
$("")	Будут выбраны все элементы на странице, имеющие атрибут src.
$("")	Будут выбраны все элементы со значениям атрибута src="значение".
$("")	Будут выбраны все элементы со значениями атрибута src заканчивающимися на.gif.
$("div#wrap .par1")	Будут выбраны все элементы с class=par1, которые находятся внутри элементов div с id=wrap.
$(":input")	Будут выбраны все input элементы на странице.
$(":тип")	Будут выбраны все input элементы с . Например:button выберет все элементы, :text выберет все элементы и т.д.

$(document).ready(function(){ //Установим размер шрифта всех абзацев равным 20 пикселям $("p").css("fontSize","20px"); //Изменим на зеленый цвет шрифта элемента с id=el2 $("#el2").css("color","green"); //Изменим на красный цвет шрифта элемента с class=el3 $(".el3").css("color","red"); //Сделаем жирным шрифт элементов с id=el2 и class=el3 $("#el2,.el3").css("fontWeight","bold"); //Изменим на синий цвет текста кнопки $(":input").css("color","blue"); //Установим размер шрифта всех элементов имеющих атрибут href равным 20 пикселям $("").css("fontSize","20px"); //Изменим на зеленый цвет ссылки на www..сайт/"]").css("color","green"); });

Быстрый просмотр

Полный список селекторов jQuery Вы можете найти в нашем .

Предотвращение преждевременного выполнения кода

Из учебника по JavaScript Вы наверно помните, что выполнение кода до полной загрузки документа часто приводит к ошибкам.

Дело в том, что скрипт может обратится к еще не загруженному содержимому, а это всегда приводит к ошибкам или неожиданным результатам.

Для того, чтобы избежать этого мы часто помещали код в функцию, которая начинала выполнение только после полной загрузки документа.

Предотвращение преждевременного выполнения кода в JavaScript:

function start() { Код который будет выполнен после полной загрузки документа }

В jQuery можно избавиться от преждевременного выполнения кода следующими способами:

Предотвращение преждевременного выполнения кода в jQuery:

//Первый способ: $(document).ready(function(){ Код который будет выполнен после полной загрузки документа }); //Второй способ: $().ready(function(){ Код который будет выполнен после полной загрузки документа }); //Третий способ: $(function(){ Код который будет выполнен после полной загрузки документа });

Существует еще один альтернативный способ также помогающий избежать преждевременное выполнение JavaScript и jQuery кода и позволяющий также ускорить загрузку страниц (благодарим за напоминание о нем пользователя Ghringo Americano ).

Необходимо помещать код в самый конец тела документа (т.е. перед ) в данном случае интерпретатор JavaScript встроенный в браузер начнет разбирать код только после загрузки документа. В предыдущем же способе загрузка скриптов происходит одновременно с загрузкой документа, а выполняется этот код после загрузки документа.

Содержимое тела документа

Содержимое тела документа Код который будет выполнен после полной загрузки документа

Цепочки команд в jQuery

Для того, чтобы сократить размер кода Вы можете соединять команды jQuery в цепочки.

Команды в цепочке будут выполняться поочередно слева направо.

//Код без сокращения $("p").css("color","green"); $("p").css("font-size","30px"); //Сокращенный код $("p").css("color","green").css("font-size","30px");

Сделайте сами

Задание 1 измените цвет и размер шрифта, перечисленных ниже элементов, для того, чтобы выделить буквы кодового слова.

Измените цвет и размер шрифта:

Элемента с id=meadow;
Элемента с class=rainbow;
Элемента с id=future находящегося внутри элемента с id=fut; (данный элемент необходимо выделить цветом отличным от красного);
Элемента имеющего атрибут set;
Элемента с атрибутом last=code.

Обратите внимание: для изменения цвета текста элемента используйте метод: css("color","новый_цвет_текста"), для изменения размера шрифта используйте метод: css("font-size","размер_шрифта_px").

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 символов кода, инициализация скрипта будет более гибкой.

Что добавлено? Крайне часто, при выборке, требуется только одна нода (например, для вызова appendChild). Но каждый раз запрашивать нулевой элемент выборки никому не нравится.
$(".selector").appendChild(node);
Поэтому, была добавлена симпатичная альтернатива в виде статичного метода $.one , который работает в точности так же, как и основная функция, но возвращает нулевой элемент или null
// всего одним символом больше, а выглядит на тысячу символов лучше $.one(".selector").appendChild(node);
$.one , кроме всего, служит двум целям: не создавать дополнительную переменную (в таких библиотеках их обычно две: $$ и $) и оставить возможность симпатичного импорта.

Import $ from "balajs";
var $ = require("balajs");

Что осталось от Балалайки?Возможность передать в функцию всё, что угодно : селектор, узел, массив, NodeList, jQuery и любой другой array-like объект
$(".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?/