jquery уроки (6)
Я работаю над проектом с довольно большим количеством JQuery. В JQuery есть много значков в любом месте, например
$(document).ready(function () { $("input").wl_File({ url: "/Admin/PolicyInventory/UploadDocuments", onFileError: function (error, fileobj) { $.msg("file is not allowed: " + fileobj.name, { header: error.msg + " Error ", live: 10000 }); } }); ...
Мой вопрос: что означает этот знак доллара? Почему он используется повсюду и как его понять и интерпретировать? Это напоминает мне о страшных днях, когда я изучал Схему в университете, и мне приходилось класть скобки везде, не зная, почему я это делаю.
$ sign является псевдонимом для jQuery . Краткая версия jQuery , меньше механизма записи.
Только для примера: (в jQuery это сложнее)
Var yourFunction = function() { alert("a function"); } window.Myf = yourFunction;
Теперь вы можете позвонить yourFunction как:
Myf(); // definitely a short syntax
Знак доллара - это просто псевдоним для JQuery.
JQuery(document).ready(function(){});
$(document).ready(function(){});
Жесткость и производительностьКогда мы работаем над библиотекой или языком программирования, мы должны обратить внимание на некоторые правила записи. Благодаря jQuery они уже реализовали множество опций. Вы можете использовать $ или вы можете использовать jQuery или можете использовать _
(function (_) { _("#wow").click() })(jQuery);
Или, может быть, вы можете делать фантастические изменения, javascript-идентификаторы являются unicode, поэтому вы можете использовать Ω
(function (Ω) { Ω("#wow").click() })(jQuery);
Но основная идея этого, нажимая один раз на клавиатуру, лучше, чем набирать jQuery
С другой стороны у нас есть производительность... Я просто случайно открыл свой проект и искал $ , я использовал 54 $ в одном файле javascript.
jQuery - 6 байт.
Разница огромная 54 * 5 = 220 байт.
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").
- 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?/
