Для того, чтобы задать стили для всех элементов с классом .box на jQuery, достаточно написать следующее:
$('.box').css('background', 'red');
Как реализовать тоже самое на чистом JS?
Вот моя не вполне удачная попытка:
function $(selector) {
var prefix = selector[0];
var selector = selector.substring(1);
switch (prefix) {
case '#':
return document.getElementById(selector);
case '.':
var elem = document.getElementsByClassName(selector);
for (var i = 0; i < elem.length; i++) {
return elem[i];
};
default:
return document.getElementsByTagName(prefix + selector);
}
}
$('.box').style.background = 'red';
hello
world
000
111
Стили применились только к первому элементу с классом .box, хотя я возвращаю эти элементы из цикла ...
JS в процессе изучения, поэтому прошу сильно меня не "ругать"))
Ответ
Слишком разные результаты возвращает данная функция:
отдельный элемент, либо коллекция элементов.
Из-за этого нужно либо следить за тем, чтобы с результатом обращались в зависимости от типа, либо скрыть его внутри, выставив наружу нужные функции для работы с выбранными элементами.
Кроме этого проблема в данном коде заключается в том, что обычным return нельзя приостановить выполнение цикла, и потом продолжить его, при использовании return происходит полный возврат из функции, поэтому все остальные элементы теряются.
Если уж брать за основу jQuery, то стоит посмотреть как сделано в нем.
список элементов хранится внутри, и по большому счету доступ к нему осуществляется посредством функций.
Простейшую версию можно реализовать так:
(function(window) {
var my = function(selector) {
return new my.fn.init(selector);
}
my.prototype = my.fn = {
version: '0.0.1',
constructor: my
};
//выбираем элементы
var init = my.fn.init = function(selector) {
this.context = Array.from(document.querySelectorAll(selector)); //всегда имеем массив элементов
}
init.prototype = my.fn;
my.fn.css = function(cssProperty, cssValue) { // добавляем метод для работы с css
this.context.forEach(function(el) {
el.style[cssProperty] = cssValue
});
return this;
}
return window.my = my;
}(window));
my('.box').css('background', 'red');
hello
world
000
111
Комментариев нет:
Отправить комментарий