Полный список методов

Bliss.js — это легковесная JavaScript-библиотека для удобной работы с DOM, событиями, AJAX-запросами и утилитами для обработки данных. Основное преимущество библиотеки — лаконичный и интуитивно понятный API, который минимизирует необходимость писать громоздкий код, присущий стандартному DOM API.

Работа с элементами DOM

1. $(selector) Возвращает объект, оборачивающий найденные элементы по CSS-селектору. Позволяет применять методы Bliss.js к выбранным элементам.

var elems = $('.className');

2. .addClass(className) / .removeClass(className) / .toggleClass(className) Методы управления CSS-классами элементов.

$('div').addClass('active');
$('div').removeClass('hidden');
$('div').toggleClass('selected');

3. .hasClass(className) Проверяет, присутствует ли класс у элемента. Возвращает true или false.

if ($('div').hasClass('active')) {
  // действия
}

4. .attr(name, value) / .removeAttr(name) Управление атрибутами элементов.

$('img').attr('src', 'image.png');
$('input').removeAttr('disabled');

5. .prop(name, value) Чтение и запись свойств DOM-элемента.

$('input').prop('checked', true);

6. .html(content) / .text(content) Получение или установка содержимого элемента. .html() работает с HTML, .text() — с текстом.

$('p').html('<strong>Bold text</strong>');
$('p').text('Plain text');

7. .append(content) / .prepend(content) / .before(content) / .after(content) Вставка нового содержимого относительно выбранных элементов.

$('ul').append('<li>Новый элемент</li>');
$('ul').prepend('<li>Первый элемент</li>');
$('li:first').before('<li>До первого</li>');
$('li:last').after('<li>После последнего</li>');

8. .remove() / .empty() Удаление элементов из DOM или очистка их содержимого.

$('.old').remove();
$('ul').empty();

Работа с событиями

1. .on(event, handler) Привязка обработчика к событию.

$('button').on('click', function() {
  console.log('Клик по кнопке');
});

2. .off(event, handler) Удаление обработчика события.

$('button').off('click');

3. .trigger(event) Программный вызов события.

$('input').trigger('focus');

4. Специальные методы событий Bliss.js содержит удобные сокращения для стандартных событий:

  • .click(handler)
  • .focus(handler)
  • .blur(handler)
  • .mouseenter(handler)
  • .mouseleave(handler)

Работа с формами

1. .val() / .val(value) Чтение и установка значения элементов формы.

var inputVal = $('input').val();
$('input').val('Новое значение');

2. .serialize() / .serializeArray() Преобразование данных формы в строку запроса или массив объектов {name, value}.

var query = $('form').serialize();
var arrayData = $('form').serializeArray();

3. .reset() Сброс формы к исходным значениям.

$('form')[0].reset();

AJAX и HTTP-запросы

Bliss.js предоставляет встроенный API для работы с AJAX-запросами.

1. $.ajax(options) Универсальный метод для выполнения HTTP-запросов. Поддерживает следующие опции:

  • url — адрес запроса
  • method — метод (GET, POST и др.)
  • data — данные запроса
  • headers — заголовки
  • success / error — колбэки
$.ajax({
  url: '/api/data',
  method: 'GET',
  success: function(response) {
    console.log(response);
  },
  error: function(err) {
    console.error(err);
  }
});

2. Сокращения

  • $.get(url, data, callback)
  • $.post(url, data, callback)
$.get('/api/user', {id: 1}, function(res) {
  console.log(res);
});

Утилиты Bliss.js

1. $.extend(target, source) Копирование свойств из объекта source в объект target.

var a = {x:1};
var b = {y:2};
$.extend(a, b); // a = {x:1, y:2}

2. $.isArray(obj) / $.isFunction(obj) / $.isObject(obj) Проверка типа данных.

$.isArray([1,2,3]); // true
$.isFunction(function(){ }); // true
$.isObject({a:1}); // true

3. $.each(collection, callback) Итерирование массивов и объектов.

$.each([1,2,3], function(index, value) {
  console.log(index, value);
});

4. $.noop() Пустая функция, используется как заглушка.

$('button').on('click', $.noop);

Работа с анимацией и стилями

1. .css(property, value) / .css(properties) Установка и получение стилей элементов.

$('div').css('color', 'red');
$('div').css({width: '100px', height: '50px'});

2. .show() / .hide() / .toggle() Простое управление видимостью элементов.

$('div').show();
$('div').hide();
$('div').toggle();

3. .fadeIn(duration) / .fadeOut(duration) Плавное появление и скрытие элементов.

$('div').fadeIn(400);
$('div').fadeOut(400);

Массивы и объекты

Bliss.js расширяет работу с массивами и объектами:

1. .map(callback) — трансформация коллекции. 2. .filter(callback) — фильтрация элементов. 3. .reduce(callback, initialValue) — свертка коллекции.

var result = $.map([1,2,3], function(v){ return v*2; }); // [2,4,6]
var filtered = $.filter([1,2,3,4], function(v){ return v>2; }); // [3,4]

Bliss.js объединяет основные операции с DOM, событиями, AJAX и утилитами в единый компактный API, позволяя писать лаконичный и читаемый код без громоздких конструкций. Методы библиотеки организованы так, чтобы легко комбинироваться, поддерживая цепочки вызовов и минимизируя повторение кода.

Оглавление