Шпаргалка по использованию jQuery
Шпаргалка по использованию jQuery включает в себя: события загрузки страницы, манипуляции с DOM-деревом, поиск необходимых элементов, анимация и многое другое.
Содержание:
- Событие загрузки страницы.
- События мыши.
- Вставка, удаление, перемещение.
- Перемещение по DOM-дереву.
- Поиск элементов.
- Анимации.
- Получение значений.
- Обновление страницы и перенаправление (JavaScript).
- Медиа запросы.
Событие загрузки страницы
Выполнение кода после загрузки 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
Поиск элементов относительно заданного при помощи 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 {
}
Полезные ссылки:
Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.
Поделиться с друзьями:
Статьи из данной категории:
Комментарии (2)
- Евг
- Владимир