Справочник по использованию Cool JS (1 часть)

Наверное многие из Вас пробовали или использовали различные библиотеки для ускорения и упрощения программирования на JavaScript но всегда чего-то не хватало или что-то было не так. Кто-то подключал библиотеку jQuery и несколько других библиотек ради одного или нескольких слайдеров или модальных окон.

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

Подключение файлов

Для начала, если Вы еще не подключили Cool-библиотеку, её нужно подключить перед закрывающим тегом head (если вы не изменяли стандартный шаблон CoolCMS - у Вас уже подключены все необходимые файлы): [code][]//cdn.coolcms.ru/js/jcool-2.6.min.js[/][/code]

$(element)

Начнем со знаменитого знака $ - Знак доллара. Если вывести его в консоль, то мы увидим только функцию, которая инициализирует новый экземпляр класса App: [code](a) => new App(a)[/code] С классом можно работать как напрямую, так и записав его в переменную: [code]$('div') // все div элементы на странице const divs = $('div') // то же самое но в переменной $('[div][/div]') // создание нового элемента | доступно с версии 2.6 const new_element = $('[div][/div]') // создание нового элемента и запись его в переменную [/code] Практически все методы возвращают ссылку на экземпляр, т.е. можно использовать несколько методов подряд: [code]$('div').firstMethod(...).otherMethod(...);[/code] Но некоторые методы не возвращают ссылку на экземпляр, об этом написано в описании к таким методам

Список методов и их использование

addClass - Метод добавляет новый класс к элементу [code]$('div').addClass('my_class');[/code]
after - Добавляет новый элемент в конце элемента [code]const div = $('[div][/div]'); // создаст элемент div и запишет его в переменную div.addClass('my_div'); // добавит элементу div класс my_div $('body').after(div); // добавит элемент div перед закрывающим тегом body [/code]
append - Добавляет произвольный текст или код в конец элемента [code]const html = $('body').append('[div+] class="my_div"[+div]');[/code]
attr - Получает или устанавливает значение атрибута элемента. Внимание - метод attr не возвращает ссылку на экземпляр! [code]$('body').attr('id', 'my_body'); // установит атрибут id="my_body" $('body').attr('id'); // вернет значение my_body [/code]
before - Добавляет новый элемент в начало элемента [code]const div = $('[div][/div]'); // создаст элемент div и запишет его в переменную div.addClass('my_div'); // добавит элементу div класс my_div $('body').before(div); // добавит элемент div после открывающего тега body [/code]
blur - убирает фокус с элемента [code]$('input').blur();[/code]
changeClass - Изменяет класс на новый [code]$('div').changeClass('old_class', 'new_class');[/code]
checked - Проверяет отмечен ли checkbox или radio кнопка. Внимание - метод checked не возвращает ссылку на экземпляр! [code]$('input[type="checkbox"]').checked(); // true/false в зависимости от состояния [/code]
child - Возвращает всех потомков элемента [code]const li = $('ul').child(); // получить все li элементы li.addClass('my_item'); // добавит всем li элементам класс my_item [/code]
css - Устанавливает стили для элемента [code]$('div').css({ 'color': '#000075', 'background-color': '#ffffff' });[/code]
data - Возвращает содержимое data-атрибута элемента [code]$('div').data('id'); // вернет содержимое атрибута data-id [/code]
each - Перебирает массив [code]$('div').each(function(){ console.info(this); // выведет в консоль каждый элемент div }); const arr = ['one', 'two']; arr.each(function(item, i){ console.info(item, i); });[/code]
empty - Очищает содержимое элемента [code][div]Привет![/div] $('div').empty(); // удалит 'Привет!' [/code]
fadeIn - Плавное появление элемента [code][div+] style="display: none"[+div] $('div').fadeIn();[/code]
fadeOut - Плавное исчезание элемента [code]$('div').fadeOut();[/code]
files - Собирает и возвращает список файлов в виде массива [code]$('input[type="file"]').files(); // вернет массив файлов [/code]
focus - Устанавливает фокус на первый элемент [code]$('input').focus();[/code]
hasClass - Проверяет, существует ли класс у элемента. Внимание - метод hasClass не возвращает ссылку на экземпляр! [code]$('div').hasClass('need_class'); // true/false в зависимости от существования класса [/code]
height - Возвращает высоту элемента [code][div+] style="height: 100px"[+div] $('div').height(); // 100 [/code]
hide - Скрывает элемент [code]$('div').hide();[/code]
html - Возвращает или изменяет html-содержимое элементов [code][div]Привет![/div] $('div').html(); // вернет Привет! $('div').html('[span]Снова привет![/span]'); // [span]Снова привет![/span] $('div').html(function(){ // доступно с версии 2.6 return '[span]Снова привет![/span]'; }); // [span]Снова привет![/span] [/code]
insertBefore - Вставляет новый элемент в начало родительского элемента [code][ul] [li+] class="item"[+li] [/ul] const element = $('[li][/li]'); element.addClass('first_item').html('Это новый элемент'); $('.item').insertBefore(element); // вставляет [li+] class="first_item"[+li] перед [li+] class="item"[+li] [/code]
insertAfter - Вставляет новый элемент в конец родительского элемента [code][ul] [li+] class="item"[+li] [/ul] const element = $('[li][/li]'); element.addClass('last_item').html('Это новый элемент'); $('.item').insertAfter(element); // вставляет [li+] class="last_item"[+li] после [li+] class="item"[+li] [/code]
next - Выбор следующего элемента [code]$('div').next();[/code]
off - Удаляет обработчик событий [code]$('div').off('click'); $('div').off('click', function(){ // доступно с версии 2.6 });[/code]
offset - Возвращает координаты относительно окна [code]$('div').offset().top; $('div').offset().right; $('div').offset().bottom; $('div').offset().left;[/code]
on - Устанавливает обработчик событий [code]$('div').on('click', function(){ // для статических элементов }); $(document).on('click', 'div', function(){ // для динамических элементов });[/code]
outerHtml - Возвращает или изменяет html-элемент [code][div]Привет![/div] $('div').outerHtml(); // вернет [div]Привет![/div] $('div').outerHtml('[span]Снова привет![/span]'); // [span]Снова привет![/span] $('div').outerHtml(function(){ // доступно с версии 2.6 return '[span]Снова привет![/span]'; }); // [span]Снова привет![/span][/code]
parent - Возвращает родительский элемент [code]$('div').parent(); // вернет родительский элемент $('div').parent('.box'); // вернет родительский элемент с классом .box | доступно с версии 2.6[/code]
prepend - Добавляет произвольный текст или код в начало элемента [code]const html = $('body').prepend('[div+] class="my_div"[+div]');[/code]
prev - Выбор предыдущего элемента [code]$('div').prev();[/code]
ready - Выполняет функцию сразу после загрузки DOM [code]$(document).ready(function(){ // });[/code]
remove - Удаляет элемент. Внимание - метод не возвращает ссылку на экземпляр, т.к. элемента уже не существует! [code]$('div').remove();[/code]
removeAttr - Удаляет атрибут у элемента [code]$('div').removeAttr('id');[/code]
removeClass - Удаляет класс у элемента [code]$('div').removeClass('my_class');[/code]
scrollTo - Осуществляет скролл по заданным параметрам [code]$(window).scrollTo(100); // скролл окна на 100px $(window).scrollTo(100, 1000); // скролл окна на 100px в течении 1000мс (1 секунда) $(window).scrollTo('.box'); // скролл окна к блоку с классом .box $(window).scrollTo('.box', 1000); // скролл окна к блоку с классом .box в течении 1000мс (1 секунда) $(window).scrollTo('.box', 1000, function(){ // доступно с версии 2.6 | метод с вызовом функции не возвращает ссылку на экземпляр }); // скролл окна к блоку с классом .box в течении 1000мс (1 секунда), с вызовом функции [/code]
serialized - Возвращает строку пригодную для передачи через URL [code] [/div] [form] [/form] $('div').serialized(); // {example:123} $('form').serialized(); // {example:123}[/code]
show - Показывает скрытый блок [code]$('div').show();[/code]
top - Возвращает текущую прокрутку страницы [code]$(window).top();[/code]
toggleClass - Добавляет или удаляет класс у элемента [code][div][/div] $('div').toggleClass('my_class'); // добавили класс my_class $('div').toggleClass('my_class'); // удалили класс my_class[/code]
trigger - Выполняет заданные события [code]$('div').trigger('click'); // выполнит клик по элементу div $('div').trigger('click', function(){ // выполнит клик по элементу div и выполнит функцию | доступно с версии 2.6 });[/code]
val - Возвращает или устанавливает значение элементу [code]$('input').val(); // получили значение $('input').val('123'); // установили значение[/code]
validated - Производит валидацию формы или псевдоформы. Требует наличия модального окна MODAL_EVENT для показа уведомлений. Атрибут error поддерживается с версии 2.6 [code] [div] [/div] [form] [/form] $('div').validated(); // false $('form').validated(); // true[/code]


Подписывайтесь на обновления и будьте вкурсе всех новинок, а так же делитесь с друзьями в социальных сетях!
25 Апреля 2018

Комментарии

Комментирование доступно только для авторизированных пользователей

Комментариев пока нет

^ вверх ^