README

Коллекция простых советов, чтобы помочь вашей работе с jQuery.

Содержание

Советы

Используйте noConflict()

Асимвол $, используемый jQuery, также используется другими библиотеками JavaScript. Чтобы гарантировать, что jQuery не конфликтует с объектом $ из разных библиотек, используйте метод noConflict() в начале документа:

jQuery.noConflict();

Теперь вы ссылаетесь на объект jQuery, используя имя переменной jQuery вместо $ (например, jQuery('div p').hide()). Если у вас несколько версий jQuery на одной странице, вы можете использовать noConflict () для установки псевдонима для определенной версии:

let $x = jQuery.noConflict();

Проверка готовности jQuery

Перед тем, как сделать что-нибудь с помощью jQuery, необходимо убедиться в том, что он загружен:

if (typeof jQuery == 'undefined') {
  console.log('jQuery hasn\'t loaded');
} else {
  console.log('jQuery has loaded');
}

Cпроверить, существует ли элемент

Прежде чем использовать элемент HTML, необходимо убедиться, что он является частью DOM.

if ($("#selector").length) {
  //сделать что-то с элементом
}

Используйте .on() вместо .click()

Использование .on() дает ряд преимуществ по сравнению с использованием .click(), например, возможность добавлять несколько событий…

.on('click tap hover')

…привязка применяется к динамически создаваемым элементам (нет необходимости вручную связывать каждый отдельный элемент, динамически добавленный к DOM)…

…и возможность установить пространство имен:

.on('click.menuOpening')

Пространства имен дают вам возможность отключать привязку к конкретному событию (например, .off('click.menuOpening')).

Кнопка “вернуться к началу”

С помощью методов animate и scrollTop в jQuery вам не нужен плагин, чтобы создать простую анимацию прокрутки вверх:

// Вернуться к началу
$('.container').on('click', '.back-to-top', function (e) {
  e.preventDefault();
  $('html, body').animate({scrollTop: 0}, 800);
});

<!-- Создаем элемент anchor -->
<a class="top" href="#">Back to top</a>

Изменение значения scrollTop изменяет место, на котором прокрутка остановится. Все, что вы действительно делаете, это прокрутка документа на протяжении 800 миллисекунд, пока мы не окажемся в верхней части документа.

Предварительная загрузка изображений

Если ваш веб-страница использует много изображений, которые не видны изначально (например, появлюятся при наведении курсора мыши), имеет смысл предварительно загрузить их:

$.preloadImages = function () {
  for (var i = 0; i < arguments.length; i++) {
    $('<img>').attr('src', arguments[i]);
  }
};

$.preloadImages('img/hover-on.png', 'img/hover-off.png');

Проверка, загружаются ли изображения

Иногда вам может понадобиться проверка того, что ваши изображения полностью загружены, перед тем как вы продолжите работу своего скрипта:

$('img').on('load', function () {
  console.log('image load successful');
});

Вы также можете проверить, если одно конкретное изображение загружено, заменив тег <img> на идентификатор или класс.

Автоматическое исправление сломанных изображений

Если вам посчастливилось найти неработающие ссылки на изображения на вашем сайте, замена их по одной может утомить. Этот простой фрагмент кода поможет избежать этой головной боли:

$('img').on('error', function () {
  if(!$(this).hasClass('broken-image')) {
    $(this).prop('src', 'img/broken.png').addClass('broken-image');
  }
});

В качестве альтернативы, если вы хотите просто скрыть сломанные изображения этот фрагмент будет заботиться о том, что для:

$('img').on('error', function () {
  $(this).hide();
});

Дать форму с помощью AJAX

методы JQuery AJAX являются распространенным способом запросить текст, HTML, XML или JSON. Если вы хотите отправить форму через AJAX можно собирать пользовательские входные данные через val() метода:

$.post('sign_up.php', {
  user_name: $('input[name=user_name]').val(),
  email:     $('input[name=email]').val(),
  password:  $('input[name=password]').val(),
});

Тем не менее, все эти val() звонки стоят дорого. Лучший способ сбора данных, вводимых пользователем использует serialize() функцию, которая собирает пользовательские входные данные в виде строки:

$.post('sign_up', $('#sign-up-form').serialize());

Переключение классов по наведению

Допустим, вы хотите изменить визуальный интерактивный элемент на странице, когда пользователь наводит курсор над ним. Вы можете добавить класс к вашему элементу, когда пользователь навел курсор; когда пользователь уводит курсор, класс удаляется:

$('.btn').on('hover', function () {
  $(this).addClass('hover');
}, function () {
  $(this).removeClass('hover');
});

Вам просто нужно добавить необходимые стили CSS. Если вы хотите упростить логику, используйте метод toggleClass:

$('.btn').hover(function () {
  $(this).toggleClass('hover');
});

Примечание: CSS может быть более быстрым решением в этом случае, но вам по-прежнему стоит знать об этом.

Отключение поля ввода

Иногда вы можете захотеть отключить кнопку отправки формы или одно из его текстовых полей, до тех пор, пока пользователь не выполнил определенное действие (например, не отметил флаг “я прочитал условия”). Добавьте атрибут disabled на ваше поле ввода, отключив его, когда вы хотите:

$('input[type="submit"]').prop('disabled', true);

Все, что вам нужно сделать, чтобы включить поле обратно, это запустить метод prop на том же поле ввода, но установить значение disabled к false:

$('input[type="submit"]').prop('disabled', false);

Прерывание загрузки ссылки

Иногда вы не хотите, чтобы ссылки переводили пользователя на определенную веб-страницу или перезагружали страницу; Вы можете хотеть, чтобы они делали что-то еще, как спусковой крючок для какой-либо другого сценария. Этот скрипт предотвратит действие по умолчанию:

$('a.no-link').on('click', function (e) {
  e.preventDefault();
});

Кэширование селекторов jQuery

Подумайте, сколько раз вы пишете один и тот же селектор снова и снова в любом проекте. Каждый $('.element') селектор ищет по всему DOM каждый раз, независимо от того, был ли он использован раньше. Вместо этого запустите селектор один раз и сохраните его результаты в переменной:

var blocks = $('#blocks').find('li');

Теперь вы можете использовать blocks переменную там, где вы хотите, без необходимости выполнять поиск по DOM каждый раз:

$('#hideBlocks').on('click', function () {
  blocks.fadeOut();
});

$('#showBlocks').on('click', function () {
  blocks.fadeIn();
});

Кэширование jQuery селекторов позволяет получить выигрыш в производительности.

Переключение fade/slide

Slide и fade являются часто используемыми действиями в анимации с jQuery. Вы можете захотить, показать элемент, когда пользователь нажимает что-то, что делает методы fadeIn и slideDown хорошо подходящими. Но если вы хотите, чтобы этот элемент, появился на первый щелчок, а затем исчез на второй, то этот скрипт будет работать просто отлично:

// Fade
$('.btn').on('click', function () {
  $('.element').fadeToggle('slow');
});

// Toggle
$('.btn').on('click', function () {
  $('.element').slideToggle('slow');
});

Простой аккордеон

// Закрываем все панели
$('#accordion').find('.content').hide();

// Аккордеон
$('#accordion').find('.accordion-header').on('click', function () {
  var next = $(this).next();
  next.slideToggle('fast');
  $('.content').not(next).slideUp('fast');
  return false;
});

Добавив этот скрипт все, что вам нужно сделать на вашей веб-странице, это найти необходимый HTML и поручить ему эту работу.

Сделать два элемента div одинаковой высотой

Иногда вы будете хотеть две элемента div, которые имеют одинаковую высоту, независимо от содержания:

$('.div').css('min-height', $('.main-div').height());

В этом примере задается min-height, что означает, что она может быть больше, чем основной DIV, но никогда меньше. Тем не менее, более гибкий метод должен был бы пройтись циклом по множеству элементов и установить высоту самого высокого элемента:

var $columns = $('.column');
var height = 0;
$columns.each(function () {
  if ($(this).height() > height) {
    height = $(this).height();
  }
});
$columns.height(height);

Если вы хотите, чтобы все столбцы имели одинаковую высоту:

var $rows = $('.same-height-columns');
$rows.each(function () {
  $(this).find('.column').height($(this).height());
});

Примечание: Это можно сделать несколькими способами в CSS, но в зависимости от ваших потребностей, стоит знать, как это сделать с помощью jQuery.

Открывать внешние ссылки в новой вкладке или новом окне

Открыть внешние ссылки в новой вкладке браузера или новом окне, и открывать внутренние ссылки в той же вкладке или окне:

$('a[href^="http"]').attr('target', '_blank');
$('a[href^="//"]').attr('target', '_blank');
$('a[href^="' + window.location.origin + '"]').attr('target', '_self');

Примечание: window.location.origin не работает в IE10. Это исправление решает проблему.

Найти элемент по тексту

При использовании contains() селектора в jQuery вы можете найти текст в содержимом элемента. Если текст не существует, то этот элемент будет скрыт:

var search = $('#search').val();
$('div:not(:contains("' + search + '"))').hide();

Запуск по изменению видимости

Запуск скрипта, когда пользователь больше не фокусируется на вкладке или перефокусируется на вкладке:

$(document).on('visibilitychange', function (e) {
  if (e.target.visibilityState === 'visible') {
    console.log('Tab is now in view!');
  } else if (e.target.visibilityState === 'hidden') {
    console.log('Tab is now hidden!');
  }
});

Обработка ошибок в AJAX-запросах

Когда AJAX-запрос возвращает ошибку 404 или 500, будет выполняться обработчик ошибок. Если обработчик не определен, другой код jQuery может не работать после этого. Определить глобальный обработчик ошибок AJAX-запросов можно следующим образом:

$(document).on('ajaxError', function (e, xhr, settings, error) {
  console.log(error);
});

Цепочка вызовов плагинов

jQuery позволяет выполнять “цепочки” методов, что упрощает процесс, однократно запрашивая DOM и не создавая несколько объектов jQuery. Скажем, следующий фрагмент кода представляет ваш метод:

$('#elem').show();
$('#elem').html('bla');
$('#elem').otherStuff();

Он может быть значительно улучшен с помощью цепочки:

$('#elem')
  .show()
  .html('bla')
  .otherStuff();

Альтернативой является кэширование элемента в переменной (с приставкой $):

var $elem = $('#elem');
$elem.hide();
$elem.html('bla');
$elem.otherStuff();

И цепочки и кэширование в jQuery являются лучшими практиками, которые приводят к более короткому и быстрому код.

Сортировка элементов списка по алфавиту

Допустим, в списке слишком много элементов. Возможно, содержание производится с помощью CMS, а вы хотите показать их в алфавитном порядке:

var ul = $('#list'),
lis = $('li', ul).get();

lis.sort(function (a, b) {
  return ($(a).text().toUpperCase() < $(b).text().toUpperCase()) ? -1 : 1;
});

ul.append(lis);

Отключить правую кнопку мыши

Если вы хотите отключить контекстное меню, вы можете сделать это для всей страницы…

$(document).ready(function () {
  $(document).bind('contextmenu', function (e) {
    return false;
  })
})

…но вы также можете сделать то же самое для конкретного элемента:

Советы по jQuery, которые должен знать каждый

Содержание

Советы

Используйте `noConflict()`

Проверка готовности jQuery

Cпроверить, существует ли элемент

Используйте `.on()` вместо `.click()`

Кнопка “вернуться к началу”

Предварительная загрузка изображений

Проверка, загружаются ли изображения

Автоматическое исправление сломанных изображений

Дать форму с помощью AJAX

Переключение классов по наведению

Отключение поля ввода

Прерывание загрузки ссылки

Кэширование селекторов jQuery

Переключение fade/slide

Простой аккордеон

Сделать два элемента div одинаковой высотой

Открывать внешние ссылки в новой вкладке или новом окне

Найти элемент по тексту

Запуск по изменению видимости

Обработка ошибок в AJAX-запросах

Цепочка вызовов плагинов

Сортировка элементов списка по алфавиту

Отключить правую кнопку мыши

Поддержка

Советы по jQuery, которые должен знать каждый

Содержание

Советы

Используйте noConflict()

Проверка готовности jQuery

Cпроверить, существует ли элемент

Используйте .on() вместо .click()

Кнопка “вернуться к началу”

Предварительная загрузка изображений

Проверка, загружаются ли изображения

Автоматическое исправление сломанных изображений

Дать форму с помощью AJAX

Переключение классов по наведению

Отключение поля ввода

Прерывание загрузки ссылки

Кэширование селекторов jQuery

Переключение fade/slide

Простой аккордеон

Сделать два элемента div одинаковой высотой

Открывать внешние ссылки в новой вкладке или новом окне

Найти элемент по тексту

Запуск по изменению видимости

Обработка ошибок в AJAX-запросах

Цепочка вызовов плагинов

Сортировка элементов списка по алфавиту

Отключить правую кнопку мыши

Поддержка

Используйте `noConflict()`

Используйте `.on()` вместо `.click()`