Шпаргалка по использованию jQuery

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

Содержание:

  1. Событие загрузки страницы.
  2. События мыши.
  3. Вставка, удаление, перемещение.
  4. Перемещение по DOM-дереву.
  5. Поиск элементов.
  6. Анимации.
  7. Получение значений.
  8. Обновление страницы и перенаправление (JavaScript).
  9. Медиа запросы.

Событие загрузки страницы

Выполнение кода после загрузки DOM-дерева:

$(() => {
    /* код */
});

или

jQuery($ => {
    /* код */
});

Выполнение кода после ПОЛНОЙ загрузки ВСЕЙ страницы (или отдельного элемента):

$(window).load(function () {
    /* манипуляции с готовой страницей */
});

$("img.pig").load(function () {
    /* действия после загрузки изображения с классом pig */
});

Выполнение кода при уходе со страницы:

$(window).unload(function () {
    /* код */
});

События мыши

$(".element").hover(function () {     // при наведении курсора
    $(this).addClass("anyClass");     // добавление класса

}, function () {                      // при покидании курсора
    $(this).removeClass("anyClass");  // удаление класса
});

Манипуляции при помощи jQuery

Изменить текст:

$(".element").text("Новый текст");

Добавить контент внутрь выбранного элемента.

Где вставить » что вставить.

/* добавление в начало выбранного элемента */
$(".where-to-insert").prepend("<a class='new'>what-to-insert</a>");

/* добавление в конец выбранного элемента */
$(".where-to-insert").append("<a class='new'>what-to-insert</a>");

Добавить контент сразу рядом с выбранным элементом.

Где вставить » что вставить.

/* добавление перед выбранным элементом */
$(".where-to-insert").before("<span class='new'>what-to-insert</span>");

/* добавление после выбранного элемента */
$(".where-to-insert").after("<span class='new'>what-to-insert</span>");

Перемещение контента.

Что берём » куда вставляем.

$(".what-to-move").appendTo(".where-to-move");

Скопировать и вставить контент.

Что копируем » куда вставляем.

$(".what-to-copy").clone().appendTo(".where-to-insert");

Обёртка

Обернуть элемент в "container".

$(".element").wrap("<div class='container'></div>");

Удалить обёртку:

$(".element").unwrap("<div class='wrap'></div>");

Удаление

Удалить тег полностью:

$(".element").remove();

Удалить содержимое тега, а сам тег оставить:

$(".element").empty();

Изменение CSS

Изменение стилей элемента(ов):

$(".element").css("border", "3px solid #f1f4f9");
/* или */
$(".element").css({ "height": "8.5px", "left": "-11px" });

Перемещение по DOM-дереву / поиск

$(".element").prev() /* предыдущий элемент */
$(".element").next() /* следующий элемент */

$(".element").parent() /* родительский элемент */
$(".element").child()  /* ребёнок */

$(".element").parents() /* поиск элементов среди всех родителей */
$(".element").find("selector") /* поиск элементов среди всех детей */

$(".element").prevAll() /* выбрать все предыдущие элементы (сестринские) */

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

$(".element:first")         /* первый элемент в наборе */
$(".element:last")          /* последний элемент в наборе */
$(".element:even")          /* нечётные */
$(".element:odd")           /* чётные */
$(".element:eq(0)")         /* номер элемента (первый) */

$(".element:has('.red')")   /* имеет класс "red" */
$(".element").has(".red")   /* имеет класс "red" */
$(".element").not(".red")   /* все выбранные элементы, не имеющие класс "red" */

$("a[href='google.com']")   /* с ссылкой на гугл */
$("a[href!='google.com']")  /* все ссылки кроме ссылки на гугл */
$("a[href^='http']")        /* все ссылки которые начинаются с "http" */
$("a[href$='.ru']")         /* все ссылки которые заканчиваются ".ru" */
$("a[href*='r']")           /* все ссылки которые содержат "r" */

Анимации

За 2.5 секунды ширина элемента станет 222px:

$(".element").animate({
    "width": "222px"
}, 2500);

Задержка анимации

Через 1,8 секунды будет выполнена анимация fadeIn:

$(".element").delay(1800).fadeIn();

Получение значений

$(".element").text()       /* получение текста */
$(".element").val()        /* получение значения атрибута "value" элемента формы */
$(".element").attr("src")  /* получение значения атрибута "src"

Обновление страницы и перенаправление с помощью JavaScript

document.location.reload();     /* Обновить текущую страницу */
document.location.reload(true); /* Перезагрузить текущую страницу, без использования кэша */

window.location.replace("");    /* Перенаправление подобно HTTP-редиректу */
window.location.href = "";      /* Перенаправление подобное клику по ссылке */

Медиа запросы

Если ширина экрана меньше 1366px:

if ($(window).width() < 1366) {

} else {

}

Если высота экрана больше или равна 650px:

if ($(window).height() >= 650) {

} else {

}

Полезные ссылки:

  •  Подключение jQuery.
  • Официальный сайт jQuery.
Шпаргалка по работе с WordPress Добавление FontAwesome через CSS