# jQuery

jQuery — это JavaScript, поэтому код подчиняется в том числе стилю JS.

# Именование

Переменные, содержащие jQuery-коллекции, должны иметь префикс $:

// Плохо, нет префикса
const links = $('#menu').find('.js-menu-link');

// Хорошо, есть префикс
const $links = $('#menu').find('.js-menu-link');

# Создание элементов

При создании пустого элемента закрывающие теги не используем:

// Плохо, лишние символы
let $el = $('<div/>');
let $el = $('<div></div>');

// Хорошо
let $el = $('<div>');

Элементы с атрибутами и/или контентом создаем, передавая объект опций вторым параметром в функцию $():

// Плохо, куча всего в строке, сложно читать
let $el = $('<div class="my-text">Hello</div>');

// Хорошо
let $el = $('<div>', {
        'class': 'my-text',
        text: 'Hello'
    });

# События

События навешиваем только через .on, штрткатами, типа, .click() или .submit() не пользуемся:

// Плохо, событие через шорткат
$('#button').click(ev => {
    // ...
});

// Хорошо, событие через `.on`
$('#button').on('click', ev => {
    // ...
});

# Название переменной для события в обработчике

Переменную с событием для консистентности именуем ev (не e и не event):

// Плохо
$('.btn').on('click', (e) => {
    // ...
});

// Хорошо
$('.btn').on('click', (ev) => {
    // ...
});

Ну как-то так повелось...

#trigger vs. triggerHandler

Для генерации кастомных событий используем triggerHandler:

• он работает только с jQuery, никак не касается родных событий браузера;
• события через triggerHandler не всплывают.

trigger используем только когда нужно сгенерировать нативное событие браузера. Например, клик на ссылке, на которую навешен обработчик через addEventListener (на чистом JS без jQuery).

# Оптимизация

# Выборка, контекст

Не используем теги в селекторах:

// Плохо
var $menu = $('div#menu');

// Хорошо
var $menu = $('#menu');

Если элемент на странице один, то делаем выборку по id, если нужно выбрать несколько элементов, даем им классы с префиксом js- и делаем выборку по классу:

// Плохо
var $topNav = $('nav.top-nav');

// Хорошо
var $topNav = $('.js-top-nav');

При поиске элементов стараемся использовать уже существующие jQuery-коллекции, хранящиеся в переменных, и контекстный поиск через метод .find():

// Плохо, работает медленно
const $links = $('#menu .js-menu-link');

// Хорошо, работает гораздо быстрее
const $links = $('#menu').find('.js-menu-link');

// Если нужно обратиться к выборке несколько раз — сохранили ее в переменную
const $menu = $('#menu');
$menu.find('.js-menu-link')
$menu.addClass('_open');

# Методы и фильтры

Некотоыре методы в jQuery-коллекциях имеют эквиваленты в виде фильтров. Предпочтительно использовать методы, они работают быстрее:

// Плохо
const $firstParagraph = $('p:first');

// Хорошо
const $firstParagraph = $('p').first();