JavaScript для верстальщика. Шпаргалка
1. Подключение скриптов
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/custom.js"></script>
</body>
</html>
2. Начало работы в среде jQuery:
$(document).ready(function(){
// здесь код
});
или:
$(function(){
// здесь код
});
3. Событие клик и меняем текст для проверки:
$ (".js-get-started").on("click", function(){
$ (this).text("Test");
})
или
$ (".js-get-started").click(function(){
$ (this).text("Test");
})
4. Отмена события по умолчанию
event.preventDefault();
5.Отступ блока от верха браузера:
$("#js-plans").offset().top;
6. Плавный скролл
$("html, body").animate({
scrollTop: plansOffset
}, 500);
7. Высота блока
$("#js-header").height();
$("#js-header").innerHeight();
7.1. Ширина блока
$(".js-modal").width();
$(".js-modal").innerWidth();
Первый метод width() получает ширину элемента без паддингов и бордеров, второй - innerWidth() - вместе с ними.
8. Добавить/удалить класс
$("#js-nav-container").addClass("fixed");
$("#js-nav-container").removeClass("fixed");
9. Показать/скрыть модальное окно с классом js-modal.
$(".js-modal").fadeIn();
$(".js-modal").fadeOut();
10. Получение атрибута href той ссылки, по которой кликнули, и сохранения его в переменную currentModal:
var currentModal = $(this).attr("href");
Открываем модальное окно с id, которое сохранено в переменной currentModal
$(currentModal).fadeIn();
11. Функция next()
$ (".js-faq-title").on("click", function(){
$(this).next().fadeIn();
})
Эта конструкция говорит следующее: "При клике по этому (this) блоку открой следующий за ним блок".
12. Контент будет не просто появляться, а плавно выплывать вниз, уплывать вверх или плавать туда-сюда.
slideDown()
slideUp()
slideToggle()
13. Добавление, удаление и переключение класса
.addClass("active")
.removeClass("active")
.toggleClass("active")
14. Проверяем наличие/отсутствие класса
if( $(this).hasClass("active")
if( !$(this).hasClass("active")
15. Добавление элемента в разметку через js
$(body).append("<div class = 'overlay' id = 'js-overlay'></div>");
Особенностью является то, что если в js используются двойные кавычки, кавычки в коде элемента нужно изменить на одинарные.
Метод append() добавляет элемент в конц тега, метод prepend() - в начало тега.
16. Редактируем css через js
var modalWidth = $(this).innerWidth() / 2;
css({
"marginLeft": "-" + modalWidth + "px"
});
17. Убрать элемент
$("#js-overlay").remove();
18. Цикл, который проходит по всем элементам
$(".js-modal").each(function() {
});