JS-фреймворк для работы с css классами dom элементов
c поддержкой ES6
<script src="jsf.js"></script>
- Выборка
- dom.css()
- dom.css().toString()
- dom.addClass()
- dom.removeClass()
- dom.get()
- dom.html()
- dom.text()
- dom.delete()
- dom.on()
- dom.mediacss()
Основной метод framework`a, который находит элементы DOM. Возвращает строку, которая затем подхватывается заранее определенными методами.
dom = ('#id'); // => получам id элемент
dom = ('.class'); // => получам элементы c определенным классом
dom = ('tag'); // => получам все тегиЭтот метод получает все css-свойства первого элемента из листа dom-выборки, также можно узнать значение конкретного свойства и установить css-свойства для всех dom-элементов всей выборки.
// каждое css-свойство должно
// заканчиваться точкой с запятой (;)
('div#main article').css(`
width: 130px;
height: 130px;
padding: 10px;
`);
('article').css('padding'); // "10px"
('article').css(); // ассоциативный массив свойств
('article').css().toString('css'); // "width: 130px; height: 130px; padding: 10px"Этот метод добавляет класс dom-элементам из выборки.
('p').addClass('title'); // dom: <p class="title"></p>Этот метод удаляет класс у dom-элементов из выборки.
('p').removeClass('title'); // dom: <p></p>Этот метод получает текущий номер элемента в списке элементов выборки.
('p').get(1).css('font-size: 30px');
// аналогичный, но более стабильный способ:
('p:nth-child(1)').css('font-size: 30px'); Этот метод получает html содержимое первого элемента в списке элементов выборки. Также можно записать html-код внутрь dom-элемента, перед dom-элементов и после.
// получает html содержимое dom-элемента с идентификатором max
('#max').html();
// перезаписывает html содержимое dom-элемента с идентификатором max
('#max').html("<p style='font-size: 40px'>text</p>");
// добавляет параграф перед dom-элементом с идентификатором max
('#max').html("<p style='font-size: 40px'>text</p>", 'beforebegin');
// добавляет параграф внутри dom-элемента, перед первым дочерним потомком
('#max').html("<p style='font-size: 40px'>text</p>", 'afterbegin');
// добавляет параграф внутри dom-элемента, после последнего дочернего элемента
('#max').html("<p style='font-size: 40px'>text</p>", 'beforeend');
// добавляет параграф после dom-элемента с идентификатором max
('#max').html("<p style='font-size: 40px'>text</p>", 'afterend') Этот метод устанавливает и получает текстовое содержимое dom-элемента.
let pi = Math.PI;
('p.math').text(`Число Pi = ${pi}`);
('p.math').text(); // "Число Pi = 3.141592653589793"Этот метод удаляет dom-элементы всей выборки.
('p').delete();
('p').text(); // undefinedЭтот метод устанавливает пользовательские события.
('p').on("click", function(){
console.log('click p');
});
('input').on("blur", function(){
console.log('onblur');
});Этот метод устанавливает медиа-запрос для dom-элемента. Таким образом, мы можем, динамически при помощи javascript, влиять на поведение окна браузера
// если окно браузера больше 1024px цвет фона страницы будет светло-зеленым
('body').mediacss('screen and (min-width: 1024px)', `
background-color: lightgreen;
`);
// если свойства были уже определены в атрибуте style,
// только !important cможет переопределить их
('.block').mediacss('(max-width: 1000px)', `
background: yellow !important;
width: 80% !important;
margin: 10px auto !important;
`);- Расширение базовой структуры данных String,
отчего в будущем это может привести к регрессии веб-приложения - Неотлаженные до конца методы
- Поддержка ES6 синтаксиса только в Google Chrome