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

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

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

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

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

$(element)

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

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

addClass - Метод добавляет новый класс к элементу
  1. $('div').addClass('my_class');

after - Добавляет новый элемент в конце элемента
  1. const div = $('<div></div>'); // создаст элемент div и запишет его в переменную
  2. div.addClass('my_div'); // добавит элементу div класс my_div
  3. $('body').after(div); // добавит элемент div перед закрывающим тегом body

append - Добавляет произвольный текст или код в конец элемента
  1. const html = $('body').append('<div class="my_div"></div>');

attr - Получает или устанавливает значение атрибута элемента. Внимание - метод attr не возвращает ссылку на экземпляр!
  1. $('body').attr('id', 'my_body'); // установит атрибут id="my_body"
  2. $('body').attr('id'); // вернет значение my_body

before - Добавляет новый элемент в начало элемента
  1. const div = $('<div></div>'); // создаст элемент div и запишет его в переменную
  2. div.addClass('my_div'); // добавит элементу div класс my_div
  3. $('body').before(div); // добавит элемент div после открывающего тега body

blur - убирает фокус с элемента
  1. $('input').blur();

changeClass - Изменяет класс на новый
  1. $('div').changeClass('old_class', 'new_class');

checked - Проверяет отмечен ли checkbox или radio кнопка. Внимание - метод checked не возвращает ссылку на экземпляр!
  1. $('input[type="checkbox"]').checked(); // true/false в зависимости от состояния

child - Возвращает всех потомков элемента
  1. const li = $('ul').child(); // получить все li элементы
  2. li.addClass('my_item'); // добавит всем li элементам класс my_item

css - Устанавливает стили для элемента
  1. $('div').css({
  2. 'color': '#000075',
  3. 'background-color': '#ffffff'
  4. });

data - Возвращает содержимое data-атрибута элемента
  1. $('div').data('id'); // вернет содержимое атрибута data-id

each - Перебирает массив
  1. $('div').each(function(){
  2. console.info(this); // выведет в консоль каждый элемент div
  3. });
  4. const arr = ['one', 'two'];
  5. arr.each(function(item, i){
  6. console.info(item, i);
  7. });

empty - Очищает содержимое элемента
  1. <div>Привет!</div>
  2. $('div').empty(); // удалит 'Привет!'

fadeIn - Плавное появление элемента
  1. <div style="display: none"></div>
  2. $('div').fadeIn();

fadeOut - Плавное исчезание элемента
  1. $('div').fadeOut();

files - Собирает и возвращает список файлов в виде массива
  1. $('input[type="file"]').files(); // вернет массив файлов

focus - Устанавливает фокус на первый элемент
  1. $('input').focus();

hasClass - Проверяет, существует ли класс у элемента. Внимание - метод hasClass не возвращает ссылку на экземпляр!
  1. $('div').hasClass('need_class'); // true/false в зависимости от существования класса

height - Возвращает высоту элемента
  1. <div style="height: 100px"></div>
  2. $('div').height(); // 100

hide - Скрывает элемент
  1. $('div').hide();

html - Возвращает или изменяет html-содержимое элементов
  1. <div>Привет!</div>
  2. $('div').html(); // вернет Привет!
  3. $('div').html('<span>Снова привет!</span>'); // <span>Снова привет!</span>
  4. $('div').html(function(){ // доступно с версии 2.6
  5. return '<span>Снова привет!</span>';
  6. }); // <span>Снова привет!</span>

insertBefore - Вставляет новый элемент в начало родительского элемента
  1. <ul>
  2. <li class="item"></li>
  3. </ul>
  4. const element = $('<li></li>');
  5. element.addClass('first_item').html('Это новый элемент');
  6. $('.item').insertBefore(element); // вставляет <li class="first_item"></li> перед <li class="item"></li>

insertAfter - Вставляет новый элемент в конец родительского элемента
  1. <ul>
  2. <li class="item"></li>
  3. </ul>
  4. const element = $('<li></li>');
  5. element.addClass('last_item').html('Это новый элемент');
  6. $('.item').insertAfter(element); // вставляет <li class="last_item"></li> после <li class="item"></li>

next - Выбор следующего элемента
  1. $('div').next();

off - Удаляет обработчик событий
  1. $('div').off('click');
  2. $('div').off('click', function(){
  3. // доступно с версии 2.6
  4. });

offset - Возвращает координаты относительно окна
  1. $('div').offset().top;
  2. $('div').offset().right;
  3. $('div').offset().bottom;
  4. $('div').offset().left;

on - Устанавливает обработчик событий
  1. $('div').on('click', function(){
  2. // для статических элементов
  3. });
  4. $(document).on('click', 'div', function(){
  5. // для динамических элементов
  6. });

outerHtml - Возвращает или изменяет html-элемент
  1. <div>Привет!</div>
  2. $('div').outerHtml(); // вернет <div>Привет!</div>
  3. $('div').outerHtml('<span>Снова привет!</span>'); // <span>Снова привет!</span>
  4. $('div').outerHtml(function(){ // доступно с версии 2.6
  5. return '<span>Снова привет!</span>';
  6. }); // <span>Снова привет!</span>

parent - Возвращает родительский элемент
  1. $('div').parent(); // вернет родительский элемент
  2. $('div').parent('.box'); // вернет родительский элемент с классом .box | доступно с версии 2.6

prepend - Добавляет произвольный текст или код в начало элемента
  1. const html = $('body').prepend('<div class="my_div"></div>');

prev - Выбор предыдущего элемента
  1. $('div').prev();

ready - Выполняет функцию сразу после загрузки DOM
  1. $(document).ready(function(){
  2. //
  3. });

remove - Удаляет элемент. Внимание - метод не возвращает ссылку на экземпляр, т.к. элемента уже не существует!
  1. $('div').remove();

removeAttr - Удаляет атрибут у элемента
  1. $('div').removeAttr('id');

removeClass - Удаляет класс у элемента
  1. $('div').removeClass('my_class');

scrollTo - Осуществляет скролл по заданным параметрам
  1. $(window).scrollTo(100); // скролл окна на 100px
  2. $(window).scrollTo(100, 1000); // скролл окна на 100px в течении 1000мс (1 секунда)
  3. $(window).scrollTo('.box'); // скролл окна к блоку с классом .box
  4. $(window).scrollTo('.box', 1000); // скролл окна к блоку с классом .box в течении 1000мс (1 секунда)
  5. $(window).scrollTo('.box', 1000, function(){
  6. // доступно с версии 2.6 | метод с вызовом функции не возвращает ссылку на экземпляр
  7. }); // скролл окна к блоку с классом .box в течении 1000мс (1 секунда), с вызовом функции

serialized - Возвращает строку пригодную для передачи через URL
  1. <input name="example" value="123">
  2. </div>
  3. <form>
  4. <input name="example" value="123">
  5. </form>
  6. $('div').serialized(); // {example:123}
  7. $('form').serialized(); // {example:123}

show - Показывает скрытый блок
  1. $('div').show();

top - Возвращает текущую прокрутку страницы
  1. $(window).top();

toggleClass - Добавляет или удаляет класс у элемента
  1. <div></div>
  2. $('div').toggleClass('my_class'); // добавили класс my_class
  3. $('div').toggleClass('my_class'); // удалили класс my_class

trigger - Выполняет заданные события
  1. $('div').trigger('click'); // выполнит клик по элементу div
  2. $('div').trigger('click', function(){
  3. // выполнит клик по элементу div и выполнит функцию | доступно с версии 2.6
  4. });

val - Возвращает или устанавливает значение элементу
  1. $('input').val(); // получили значение
  2. $('input').val('123'); // установили значение

validated - Производит валидацию формы или псевдоформы. Требует наличия модального окна MODAL_EVENT для показа уведомлений. Атрибут error поддерживается с версии 2.6
  1. <div>
  2. <input type="email" name="example" value="123" error="Проверьте правильность E-mail" required>
  3. </div>
  4. <form>
  5. <input type="number" name="example" value="123" error="Допускаются только цыфры" required>
  6. </form>
  7. $('div').validated(); // false
  8. $('form').validated(); // true



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

Комментарии

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

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

^ вверх ^