12:53 11.06.2017
Я уже затронул тему о методах jQuery на чистом JavaScript тут продолжу, но тут буду писать только про функцию $() или jQuery(). Это попытка сделать аналогичную функцию, как в jQuery, но не используя код jQuery. На самом деле эта очень удобная функция, она избавляет веб программистов каждый раз писать функции: getElementById, getElementsByClassName и getElementsByTagName.
Зачем это надо, спросите вы? Ведь можно просто подключить библиотеку или в крайнем случае, скопировать с файла кусок кода не изобретать велосипед. А я отвечу - это делаю для своей и возможно вашей практики. Давайте попрактикуемся?!
Предлагаю не использовать символ доллара, как это сделано в jQuery, а придумать свое название функции, например, Job. Насколько мне известно, метода с таким названием в JS нет, пусть будет у нас. И начнем с простого, создадим функцию, которая будет взаимодействовать с одним из элементов всего документа, подключаться к элементу будем по его id. Делаем так:
Теперь нашу функцию можно вызывать так:
В блоке с
Продолжаем разговор! Выше наша функция может работать только с элементами, которые имеют атрибут id, но ведь документ может иметь элементы и с атрибутами class или вообще их не иметь. Значит надо расширять нашу функцию, что я собственно и собираюсь делать. Я добавил проверку первого символа, если первый символ будет решетка (#), значит работаем с тегом с атрибутом id, если первый символ точка (.), значит работаем с тегом с атрибутом class, а если нет ни решетки, ни точки, значит работаем по названию тега.
Я заменил функцию getElementById на querySelector, для работы с тегами, которые с атрибутами id и class, а так же добавил функцию getElementsByTagName, для работы с элементами по названию тега. Вот, что у меня получилось:
Название тега, так же, как и тег с атрибутом
Элементы для теста работы функции:
Зачем это надо, спросите вы? Ведь можно просто подключить библиотеку или в крайнем случае, скопировать с файла кусок кода не изобретать велосипед. А я отвечу - это делаю для своей и возможно вашей практики. Давайте попрактикуемся?!
Предлагаю не использовать символ доллара, как это сделано в jQuery, а придумать свое название функции, например, Job. Насколько мне известно, метода с таким названием в JS нет, пусть будет у нас. И начнем с простого, создадим функцию, которая будет взаимодействовать с одним из элементов всего документа, подключаться к элементу будем по его id. Делаем так:
var Job = function(e) {
return document.getElementById(e);
};
Теперь нашу функцию можно вызывать так:
Job('id')
, пример:
Job('block').innerHTML = 'Проба';
В блоке с
id="block"
появится строка Проба
.Продолжаем разговор! Выше наша функция может работать только с элементами, которые имеют атрибут id, но ведь документ может иметь элементы и с атрибутами class или вообще их не иметь. Значит надо расширять нашу функцию, что я собственно и собираюсь делать. Я добавил проверку первого символа, если первый символ будет решетка (#), значит работаем с тегом с атрибутом id, если первый символ точка (.), значит работаем с тегом с атрибутом class, а если нет ни решетки, ни точки, значит работаем по названию тега.
Я заменил функцию getElementById на querySelector, для работы с тегами, которые с атрибутами id и class, а так же добавил функцию getElementsByTagName, для работы с элементами по названию тега. Вот, что у меня получилось:
var Job = function(e) {
switch (e[0]) { // Получаем первый символ строки
case '#': // Если первый символ решетка ("#"), значит работает с элементом по "id"
case '.': // Если первый символ точка ("."), значит работает с элементом по "class"
return document.querySelector(e);
break;
default: // Если нет ни решетки, ни точки, значит работаем с тегом
return document.getElementsByTagName(e)[0];
break;
};
};
Название тега, так же, как и тег с атрибутом
class
, берется первый найденный в документе. Работу можно проверить так:
Job('#block').innerHTML = 'Блок с id="block"';
Job('.block').innerHTML = 'Блок с class="block"';
Job('span').innerHTML = 'Тег span';
Элементы для теста работы функции:
<div id="block"></div>
<div class="block"></div>
<span></span>
- Жалоба
19:26 29.07.2018
Я тут подумал, зачем нам проверять первый символ передаваемого значения, ведь функция querySelector сама может определить, что ей передают, идентификатор, класс или тег, но эта функция работает только с первым найденным элементом, а нам надо со всеми, как в jQuery, по этому будем использовать функцию querySelectorAll:
Но, если нам потребуется работать с элементом по идентификатору, то есть с одним единственным тегом (
И этого пока хватает.
var Job = function(val) {
return document.querySelectorAll(val);
};
Но, если нам потребуется работать с элементом по идентификатору, то есть с одним единственным тегом (
id="xxx"
), то нам потребуется помощь функции querySelector, либо getElementById, значит проверка первого символа все же необходима. Я сделал так:var Job = function(val) {
if (val[0] == '#') {
return document.querySelector(val);
}
else {
return document.querySelectorAll(val);
};
};
И этого пока хватает.