Подсказки и приемы по программированию на jQuery

Это статья-шпаргалка по программированию на jQuery. Здесь для удобства собраны приемы и часто используемые функции при программировании. Статья будет пополняться по мере необходимости.

 

Для удобства пользования этой шпаргалкой к ней прилагается функционал. В любом необходимом месте этой страницы можно сделать двойной клик мышью с зажатой клавишей Ctrl — и тем самым установить метку. Установив несколько таких меток между ними можно быстро переключаться нажимая зеленые кнопки Вверх и Вниз в правом верхнем углу. Удалить ненужную метку можно кликнув по ней.

Если на странице сделать клик средней клавишей мыши (та что под колесом) с зажатой клавишей Ctrl, то появится поле поиска. При поиске выводятся блоки, содержащие все слова введенные в поле поиска через пробел.

Для отладки кода на Javascript/jQuery, HTML и CSS есть сервис: jsfiddle.net
Для отладки кода на PHP есть сервис: code.sololearn.com
Для отладки кода HTML и CSS есть сервис: edithtm.html5css.ru
Для проверки поддержки той или иной технологии в разных браузерах есть сервис: caniuse.com

Оглавление

 

Поиск элементов DOM

Селектор * (звезда) для выбора элементов любого типа

hbnn = $('*'); // выбрать все элементы на любом уровне вложенности на странице (включая <html>, <head> и <body>)
hbnn = $('#rzd *'); // выбрать всех детей на любом уровне вложенности принадлежащих #rzd

Выбрать все элементы checkbox, которые лежат непосредственно внутри label (являются его детьми 1-го уровня)

q = $('li label > input:checkbox');

Выбрать отмеченные чекбоксы checkbox

$('input:checkbox:checked');

Выбрать элемент по атрибуту data-k, name

$('[data-k = король]'); // когда значение атрибута задано в одно слово
$('[data-k = "король голый"]'); // когда значение атрибута задано несколькими словами
$('input[name="txt1"]'); // выбрать элемент по имени

Выбрать родительские или вложенные (дочерние) элементы относительно указанного элемента (parent, parents, closest, children)

$(this).parent("li"); // выбрать непосредственно родительский с тегом li элемент указанного элемента
$(this).parents("li"); // выбрать на любом уровне родительский с тегом li элемент указанного элемента (вернёт все li элементы вверх по иерархии от this)
$(this).closest("li"); // выбрать на любом уровне родительский с тегом li элемент указанного элемента (вернёт первый li элемент вверх по иерархии от this)
$(this).children("li"); // выбрать всех детей с тегом li указанного элемента

Выбрать дочерние элементы, включая текстовое содержимое (узлы) (contents, children)

// имеем HTML
<div class="text">начало<p>параграф</p>конец</div>

// с методом contents выведет 3 сообщения: "начало", "параграф", "конец"
$(".text").contents().each(function(){alert($(this).text());});

// с методом children выведет 1 сообщение: "параграф"
$(".text").children().each(function(){alert($(this).text());});

Отфильтровать выбранные элементы по сложному условию (filter, nodeType)

// вернуть всех детей .glav на любом уровне вложенности, исключая любых детей #ogl, при этом, у которых в текстовом узле элемента встречаются одновременно слова: 'выбрать' и 'начал' без учета регистра символов

let mspo = ['выбрать', 'начал'];
let a = $('.glav *').contents().filter(function() {
 // если функция возвратит false для элемента, то он будет отфильтрован, если true - то элемент будет возвращен
 if (!$(this).parents('#ogl').length) { // исключить элементы родитель которых #ogl на любом уровне
  if (this.nodeType == 3) { // выполнять только для текстовых узлов
   let fl = true;
   for (i = 0; i < mspol; i++) {if (this.textContent.toLowerCase().indexOf(mspo[i]) == -1) {fl = false; break;}}
   return fl;
  } else {return false;}
 } else {return false;}
}).parent(); // возвращать родителя текстового узла

Выбрать предыдущий или следующий на том же уровне (сестринский) элемент относительно текущего элемента (prev, next, prop, tagName)

slo = $(this).prev("a").html(); // предыдущий элемент с тегом a
slo = $(this).next("a").html(); // следующий элемент с тегом a

// если предыдущий/следующий элемент не существует, то все равно возвращается объект, но с тегом undefined
let li = $(this).next("li");
let tn = li.prop('tagName'); // определить тип тега у элемента
if (!!tn) { // проверка, если следующий элемент существует
 // какой-то код
}

Выбрать первый или последний элемент с заданным классом (first, last)

res1 = $(".disl:first");
res2 = $(".disl:last");

Выбрать элементы с исключающим условием :not

$('div:not(#foo)'); // выберет все div, у которых id не foo
$('div:not(.foo)'); // выберет все div, у которых класс не foo

Выбрать элементы с заданным содержимым :has, :not

$('div:has(a)'); // вернет все div, внутри которых содержится тег a
$('div:not(:has(a))'); // вернет все div, внутри которых не содержится тег a

Выбрать элементы содержащие текст «город» в словоформах

str = $('span:contains("город")'); // выберет все span, в которых встречается "город", во всех словоформах в т. ч. "городок", "городской" и т. д.

Выбрать элемент содержащий текст «город» и ничего более

$.expr[":"].exact = $.expr.createPseudo(function(arg) {
 return function(element) {return $(element).text() === arg.trim();};
});
str = $("span:exact('город')"); // выберет span, в котором содержится слово "город" и ничего больше

Выбрать элемент по тегу и классу одновременно

q = $('p.box'); // выбрать элемент с тегом p и классом box

Выбрать элемент по номеру в селекторе:eq

$('div:eq(0)');	// вернет первый div на странице
$('div:eq(1)'); // вернет второй div на странице
$('div:eq(-1)'); // вернет последний div на странице

Проверить существует или не существует элемент или набор элементов DOM length

 if ($('#banner').length) { // проверка на существование
  alert('элемент banner существует');
 }

 if (!$('#banner').length) { // проверка на не существование
  alert('элемент banner не существует');
 }

 if (!$('.mtk').length) { // проверка на не существование набора элементов
  alert('элементов с классом mtk не существует');
 }

Выбрать элемент на чистом Javascript (getElementById, getElementsByName, getElementsByTagName, getElementsByClassName, querySelector, querySelectorAll)

a = document.getElementById("sum"); // по id
b = document.getElementsByName("sum"); // по name
c = document.getElementsByTagName("div"); // по тегу
d = document.getElementsByClassName("pole"); // по class
e = document.querySelector("ol > li"); // по css-селектору (первый элемент)
f = document.querySelectorAll("ol > li"); // по css-селектору (все элементы)
g = f[0]; // первый элемент в наборе f

Обращение из родительского окна к элементам и функциям iframe окна (find, contentWindow)

let k = $('#ifr1').contents().find('#el1').attr('data-k'); // получить атрибут элемента в iframe
$('#ifr1').contents().find('select[name="sel1"]').val(id); // установить значение элемента в iframe

let fr1 = $('#ifr1').get(0).contentWindow; fr1.myfunc(); // выполнить функцию принадлежащую документу в iframe

Обращение из iframe окна к элементам и функциям родительского окна window.parent

$('#ok', window.parent.document).val(id); // установить значение элемента в родительском окне
$('#frm1', window.parent.document).submit(); // отправить форму в родительском окне
$('#vs', window.parent.document).hide(); // скрыть элемент в родительском окне
$('#ok', window.parent.document).append($('<span>', {id:'el1', text: 'дочь1'})); // создать дочерний элемент в конце заданного элемента в родительском окне

window.parent.myfunc(); // выполнить функцию принадлежащую родительскому окну

Свойства элементов DOM

Определить тип DOM-узла nodeType

let a = this.nodeType; // 1 - элемент, 3 - текстовый узел элемента, 9 - объект документа

Узнать тег элемента (prop, tagName)

let tn = $(this).prop('tagName'); // определить тип тега у элемента, вернет DIV, P, SPAN и т. п.

Узнать текст выбранного пункта в списке select

$("#town option:selected").text();

Узнать реальную высоту и ширину элемента (height, innerHeight, outerHeight, width, innerWidth, outerWidth)

$("#foo").height(); // реальная высота элемента
$("#foo").innerHeight(); // реальная высота элемента с учётом padding
$("#foo").outerHeight(); // реальная высота элемента с учётом padding и border-width
$("#foo").outerHeight(true); // реальная высота элемента с учётом padding, border-width и margin

$("#foo").width(); // реальная ширина элемента
$("#foo").innerWidth(); // реальная ширина элемента с учётом padding
$("#foo").outerWidth(); // реальная ширина элемента с учётом padding и border-width
$("#foo").outerWidth(true); // реальная ширина элемента с учётом padding, border-width и margin

Узнать реальные видимые ширину и высоту окна браузера (clientHeight, innerHeight, clientWidth, innerWidth, documentElement)

h = document.documentElement.clientHeight; // высота окна браузера исключая полосу прокрутки
w = document.documentElement.clientWidth; // ширина окна браузера исключая полосу прокрутки

h2 = window.innerHeight; // высота окна браузера включая полосу прокрутки, если она есть (обычно = h + 17px)
w2 = window.innerWidth; // ширина окна браузера включая полосу прокрутки, если она есть (обычно = w + 17px)

Получить высоту и ширину body (clientHeight, clientWidth)

h1 = document.body.clientHeight; // высота body, включая высоту всех данных не входящих в видимую область окна браузера
w1 = document.body.clientWidth; // ширина body, включая ширину всех данных не входящих в видимую область окна браузера

Узнать высоту элемента, включая высоту всех данных не входящих в видимую область элемента scrollHeight

// бывает нужно, чтобы выяснить полную высоту элемента, который имеет полосу прокрутки, если у элемента нет вертикальной полосы прокрутки, то значение scrollHeight равно clientHeight
var elem = document.querySelector('#elem');
alert(elem.scrollHeight);

Узнать положение элемента относительно левого верхнего угла видимой области окна браузера getBoundingClientRect

var elem = document.querySelector('#elem');
let v = elem.getBoundingClientRect();
let le = v.left; // расстояние слева
let to = v.top; // расстояние сверху

Узнать положение элемента относительно левого верхнего угла документа (offset)

le = $(this).offset().left; // расстояние слева
to = $(this).offset().top; // расстояние сверху

Узнать положение элемента относительно родителя (position)

$("#foo").position().left; // расстояние слева
$("#foo").position().top; // расстояние сверху

Узнать значение и содержимое тегов (val, html, text)

z = $(this).val(); // получить значение атрибута value тега input
z = $("div").html(); // получить данные, содержащиеся между открывающим и закрывающим тегом div
z = $("label").text(); // получить текст внутри тега label исключая содержащиеся в нем другие теги

Узнать значение атрибута checked тега input типа checkbox (prop)

a = $('.ool label > [type="checkbox"]').prop('checked'); // возвращает true, если checkbox отмечен и false - если нет

// на чистом Javascript
b = document.querySelector('#dd').checked; // возвращает true, если checkbox отмечен и false - если нет

Узнать выбранное значение из группы радио-кнопок input radio

el = $('[name="vop"]:checked').val(); // покажет выбранное значение среди радио-кнопок с name="vop"

Изменить свойства CSS выбранному элементу (css)

$(".zn").css("left","245px"); // если свойство одно
$(".zn").css({"left":"100px", "top":"150px"}); // если свойств несколько

Удалить ранее установленное свойство CSS (css, attr)

$(".elm").css("height", ""); // удалит из атрибута style элемента elm свойство height
$(".elm").attr("style", ""); // удалит все css-свойства, содержащиеся в атрибуте style у элемента elm

Изменить значения атрибутов у выбранного элемента (attr)

$(".zn").attr("class", "spp"); // если атрибут один
$(".zn").attr({"class":"spp", "title":"Заголовок"}); // если атрибутов несколько

Удалить заданный атрибут у элемента (removeAttr)

$('.elm').removeAttr("style"); // удалит атрибут style у элемента elm, со всеми css-свойствами в нём

Изменить значение и содержимое тегов (val, html, text)

$("div").html("мороз<br> и солнце"); // заменить содержимое тега div (теги будут восприняты в структуру DOM)
$("label").text("мороз<br> и солнце"); // заменить текст тега label (теги НЕ будут восприняты в структуру DOM)
$(this).val("король"); // заменить значение атрибута value тега input
$('textarea[name="tx"]').val("король\nголый"); // заменить содержимое многострочного текстового поля textarea

Изменить значение атрибута checked тега input типа checkbox (prop)

$('.ool label > [type="checkbox"]').prop('checked', true); // установить птичку в checkbox

Сделать кнопку неактивной (button, disabled)

// сделать неактивным элемент input type="button" с id = bt (кнопка перестанет отзываться на действия пользователя)
$('#bt').prop("disabled",true);

Скрыть и показать элемент (hide, show)

$(this).hide(); // скрыть элемент (место занимаемое элементом остается за ним)
$(this).show(); // показать элемент

Получить html, value, текст выбранного элемента на чистом Javascript (innerHTML, value, textContent)

e = document.querySelector("#sum"); // выбрать элемент по id = sum
e2 = document.querySelectorAll("input")[0]; // выбрать элемент по тегу input
s = e.innerHTML; // получить html элемента в переменную s
s2 = e2.value; // получить value элемента в переменную s2
s3 = e.textContent; // получить текст элемента в переменную s3 (все теги будут вырезаны)

Установить стиль элементу на чистом Javascript style

document.querySelector("#sum").style.border = '1px solid red';

Навигация по DOM элементам на чистом Javascript (parentNode, children, firstElementChild, lastElementChild, previousElementSibling, nextElementSibling)

e = document.querySelector("#sum").parentNode; // вернет родителя #sum
e = document.querySelector("#sum").children[1]; // вернет второго ребенка #sum
e = document.querySelector("#sum").firstElementChild; // вернет первого ребенка #sum
e = document.querySelector("#sum").lastElementChild; // вернет последнего ребенка #sum
e = document.querySelector("#sum").previousElementSibling; // вернет предыдущий рядом стоящий от #sum элемент
e = document.querySelector("#sum").nextElementSibling; // вернет следующий рядом стоящий от #sum элемент

Получить или изменить классы элемента на чистом Javascript (className, classList, classList.add, classList.remove, classList.length, classList.toggle, classList.contains, classList.replace)

e = document.querySelector("#sum");
alert(e.className); // выведет строку со всеми классами присвоенными элементу через пробел
e.className = 'hhh kkk'; // присвоить элементу классы hhh и kkk
e.classList[0]; // вернет первый класс по порядку из всех классов присвоенных элементу
e.classList.add('mmm'); // добавить элементу к списку классов класс mmm
e.classList.remove('hhh'); // удалить у элемента из списка классов класс hhh
e.classList.length; // вернет количество классов присвоенных элементу
e.classList.toggle("uuu"); // если у элемента есть класс uuu, то он будет удален и вернется значение false, если у элемента нет класса uuu, то он будет добавлен и вернется значение true
e.classList.contains("uuu"); // проверить существует ли у элемента класс uuu, если да то вернет true, если нет - то false
e.classList.replace('mmm', 'uuu'); // заменит существующий класс mmm на класс uuu

Получить индекс или выбрать по индексу элемент списка select на чистом Javascript selectedIndex

s = document.querySelector("#sel").selectedIndex; // получит индекс выбранного элемента в списке select (индексы начинаются от 0)
document.querySelector("#sel").selectedIndex = 1; // выбрать второй элемент списка select

Получить значение выбранного элемента списка select на чистом Javascript (options, selectedIndex, value)

var el = document.querySelector("#sel");
var so = el.options[el.selectedIndex].value;

Добавить или удалить class у элемента (addClass, removeClass)

$('.hod').addClass('redout'); // добавить класс redout элементам с классом hod
$('.hod').removeClass('redout'); // удалить класс redout элементам с классом hod

Определить наличие класса у элемента hasClass

<div id="pole" class="foo bar"></div>
<script>
a = $('#pole').hasClass('foo'); alert(a); // выведет true
b = $('#pole').hasClass('bar'); alert(b); // выведет true
c = $('#pole').hasClass('qqq'); alert(c); // выведет false
</script>

Работа с наборами элементов DOM

Узнать количество элементов в наборе (length, size)

// свойство length работает быстрее, чем метод size(), поэтому его использование предпочтительнее
sl = $(".ol2col li").length; // вернёт количество li в списке

sl = $("select[id=town] option").size(); // вернёт количество элементов option в списке select

Выбрать элемент по номеру в наборе eq

$('div').eq(0);	// вернет первый div на странице
$('div').eq(1); // вернет второй div на странице
$('div').eq(-1); // вернет последний div на странице
s = $('div');
s.eq(-2); // вернет предпоследний div на странице

Узнать ширину самого широкого элемента в наборе в px

// в переменной A задан сам набор элементов, в переменную max попадет максимальная длина, в переменную elem - сам элемент
var A = $('.ol2col li span'), max = 0, elem;
A.each(function () {
 if (this.offsetWidth > max)
 max = this.offsetWidth, elem = this;
});

Сделать все пункты в списке select не выбранными

$('#town option:selected').each(function(){
  this.selected=false;
});

Перебрать все выбранные элементы последовательно (each)

$('.zn').each(function(i){
  // обратиться к текущему элементу можно через $(this)
  // i - это счетчик, порядковый номер элемента в перебираемом наборе (счёт начинается с 0)
});

Сортировать элементы li списка ul или ol по алфавиту в прямом или обратном порядке

function sorting(res, ts) {
 let l = $(res), c = new Intl.Collator();
 let i = l.children('li').get();
 i.sort(function(a, b) {
  let ca = $(a).text().toUpperCase();
  let cb = $(b).text().toUpperCase();
  return (ts ? 1 : -1) * c.compare(ca, cb);
 });
 ts = !ts; $.each(i, function(idx, itm) {l.append(itm);});
}

sorting('#myul', true); // запуск сортировки для списка myul в прямом порядке
sorting('#myul', false); // запуск сортировки для списка myul в обратном порядке

Обработка событий

Закрыть окно (вкладку)

var ow;
ow = window.open('doc1.htm');
$("#el1").click(function(){
 ow.close(); // закрыть окно, открытое с помощь window.open
});
// закрыть окно, открытое пользователем, с помощью Javascript нельзя

Узнать зажата ли клавиша Control (keydown, keyup, event.key)

var cntrlIsPressed = false; // переменная хранит состояние Ctrl
$(document).keydown(function(event){if(event.key=="Control") {cntrlIsPressed = true;}});
$(document).keyup(function(){if(event.key=="Control") {cntrlIsPressed = false;}});
$("body").on("click", function (event) {
 alert(cntrlIsPressed); // выведет true, если клавиша Control зажата и false - если нет
});

Выполнить функцию при нажатии клавиши Enter внутри текстового поля (input, keydown, event.key)

$('body').on('keydown', '#myinput', function(event) {
 if (event.key == 'Enter') {
  event.preventDefault();
  myfunc(); // функция с каким-то кодом
  return false;
 }
});

Обработать событие click для выбранных элементов

$(".mr li span").click(function(){
 // команды
});

Обработать событие click для динамически созданного элемента с id = psk

$("body").on("click", "#psk", function () {
 // команды
});

Обработать событие click по любому месту страницы вне заданного элемента

$(document).click(function(event) {
 if ($(event.target).closest('#foo').length) return;
   // команды
 event.stopPropagation();
});

Обработать событие click по элементу с получением параметров event на чистом Javascript

elem = document.querySelector("#abc");
// вывести тип события, элемент и координаты клика
elem.onclick = function(event) {
 alert(event.type + " на " + event.currentTarget);
 alert("Координаты: " + event.clientX + ":" + event.clientY);
};

Повесить событие click на все элементы класса на чистом Javascript

var a = document.querySelectorAll('.link');
[].forEach.call(a, function(el) {
 el.onclick = function(e) { // вешаем событие
  // код обработки события
 }
});

Обработать событие потери фокуса элементом input (focusout)

$("body").on("focusout", ".new", function () {
 // команды
}

Обработать событие change изменения значения checkbox (событие установки или снятия птички)

$('li label > input:checkbox').on("change", function() {
  // команды
});

Обработать событие наведения и убирания курсора мыши на элемент (hover)

// обработчик сразу для двух событий mouseenter и mouseleave
$('#myId').hover(
function() {
  alert('Навели');
},function() {
  alert('Отвели');
});

Обработать событие появления курсора мыши над элементом (mouseenter, mouseover)

// обработчик mouseover стоящий на контейнере будет инициировать срабатывание события каждый раз при наведении курсора на дочерние элементы, mouseenter - инициирует срабатывание события единожды при наведении курсора на текущий элемент

$('#foo').mouseenter(function(){
  alert('Навели');
});

$('#foo').mouseover(function(){
  alert('Навели');
});

Обработать событие выхода курсора мыши из области элемента (mouseleave, mouseout)

// обработчик mouseout стоящий на контейнере будет инициировать срабатывание события каждый раз при выходе с дочерних элементов, mouseleave - инициирует срабатывание события единожды при выходе курсора с текущего элемента

$('#foo').mouseleave(function(){
  alert('Отвели');
});

$('#foo').mouseout(function(){
  alert('Отвели');
});

Обработать событие выбора цвета в стандартном html-элементе выбора цвета (input, color)

$('#myColor[type="color"]').on('input', function() {
d = 'a {color:' + $(this).val() + ';}';
alert (d);
});

Обработать событие изменения значения списка select

$('select').on("change", function() {
  // команды
});

Обработать событие ввода текста в input, textarea

$("input, textarea").on("change keyup input paste click", function() {
  // команды
});

Обработать событие ввода текста для динамически созданного поля ввода с id = psk

$("body").on("change keyup input paste click", "#psk", function () {
 // команды
});

Отправить форму (submit)

$('#frm').submit();

Передать фокус элементу input (focus)

$(".new").focus();

Событие прокрутки (скролла) страницы scroll

$(document).scroll(function(){
 sc = $(document).scrollTop(); // позиция вертикального скролла у документа
});

Дождаться загрузки страницы перед выполнением кода (DOMContentLoaded, load)

// дождётся, когда загружен DOM
$(function() {
  // здесь jQuery код
});

// на чистом Javascript: дождётся, когда загружен DOM
document.addEventListener("DOMContentLoaded", function(event){
  // здесь js код
});

// дождётся, когда страница загрузилась полностью (DOM, картинки, фреймы, объекты)
$(window).on("load", function(){
 // здесь jQuery код
});

Остановить «всплытие» вызова события у родительских элементов event.stopPropagation

$(".fa-arrows-alt").click(function(event){
 event.stopPropagation(); // не запускать обработчики событий click у родительских элементов
 // здесь свой код обработки функции
});

Drag & Drop с помощью HTML5 и Javascript (dataTransfer, draggable, ondragstart, ondragend, ondrop, ondragover, ondragenter, ondragleave)

// HTML код
<div ondrop="drop(event, this)" ondragover="allowDrow(event)" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)" class="cart">
<p id="el1" class="tch" draggable="true" ondragstart="drag(event)" ondragend="dragEnd(event)">Перетащи</p>
</div>
<div ondrop="drop(event, this)" ondragover="allowDrow(event)" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)" class="cart"></div>

// CSS код
.cart {width: 300px; height: 80px; margin-bottom:20px; background: #ffff00; padding: 20px;}
.tch {background: #0084ff; border: none; border-radius: 5px; padding: 8px 14px; font-size: 15px; color: #fff;}

// JS код
function drag(ev) { // во время хватания элемента
 ev.dataTransfer.setData("id", ev.target.id); // передает id перетаскиваемого элемента
 // ev.dataTransfer.setData("luboy_kluch", "можно передать что угодно");
}

function drop(ev, block) { // во время бросания элемента
 ev.preventDefault(); // отменить действие браузера по умолчанию
 let id = ev.dataTransfer.getData("id"); // получить переданное значение по ключу
 // let kluch = ev.dataTransfer.getData("luboy_kluch");
 block.appendChild(document.getElementById(id)); // перенести перетаскиваемый элемент в целевой блок
 block.style.border = ""; // убрать рамку у целевого блока, когда перетаскивание окончено
}

function dragEnter(ev) {
 if (ev.target.className == "cart") {
  ev.target.style.border = "2px dotted black"; // задать рамку целевому блоку, когда перетаскиваемый элемент находится над ним
 }
}

function dragLeave(ev) {ev.target.style.border = "";} // убрать рамку у целевого блока, когда перетаскиваемый элемент покинул его
function allowDrow(ev) {ev.preventDefault();} // отменить действие браузера по умолчанию во время перетаскивания над целевым блоком

Проверка объема и расширения графического файла (картинки) при выборе файла в элементе input type=»file» change

// функция проверяет, чтобы объем файла не превышал 6 Мбайт и расширение файла было gif, png, jpg или jpeg
function valid_size_ext(fi) {
 var fileObj;  
 var fts = fi.value.toLowerCase();
 fts = fts.slice(fts.lastIndexOf(".") + 1); 
 if (fts == "gif" || fts == "png" || fts == "jpg" || fts == "jpeg"){
  if (typeof ActiveXObject == "function") { // для IE
   fileObj = (new ActiveXObject("Scripting.FileSystemObject")).getFile(fi.value);
  } else {fileObj = fi.files[0];}
  if(fileObj.size > 6 * 1024 * 1024){ // если больше 6 Мбайт
   alert('Размер файла не должен превышать 6 Мбайт');
   fi.parentNode.innerHTML = fi.parentNode.innerHTML; // очистить поле выбора файла
   $('#fpic').on("change", function() {valid_size_ext(this);}); // заново зарегистрировать обработчик события
  }  
 } else {
  alert("Выберите фотографию в формате jpg, png, gif");
  fi.parentNode.innerHTML = fi.parentNode.innerHTML; // очистить поле выбора файла
  $('#fpic').on("change", function() {valid_size_ext(this);}); // заново зарегистрировать обработчик события
 }
}
$('#fpic').change(function() {valid_size_ext(this);}); // запуск проверки при выборе файла картинки

Вывод сообщения во всплывающем окне с кнопками ОК и Отмена confirm

var is = confirm("Подтвердить удаление?");
if (is == true) { // если нажата кнопка ОК
  // свой код
}

Убрать стандартное контекстное меню для элемента contextmenu

// удалить атрибут oncontextmenu у тега body
$("body").removeAttr("oncontextmenu");

// отменить вызов стандартного контекстного меню для элементов с классом cart
$(".cart").contextmenu(function(){return false;});

Узнать координаты клика мышью от левого верхнего угла документа (event.pageX, event.pageY)

$("body").on("mousedown", function (event) {
 var x = event.pageX; // координата по горизонтали (соответствует left)
 var y = event.pageY; // координата по вертикали (соответствует top)
});

Узнать относительные координаты клика мышью от левого верхнего угла заданного элемента (offset, event.pageX, event.pageY)

$("#banner").click(function(event) {
  var offset = $(this).offset();
  var relativeX = (event.pageX - offset.left); // относительная координата по горизонтали (соответствует left)
  var relativeY = (event.pageY - offset.top); // относительная координата по вертикали (соответствует top)
});

Узнать позицию скролла на странице scrollTop

var s = $(window).scrollTop();

Прокрутить (скроллировать) страницу до заданного элемента scrollTop

function myscroll(el) {
 var scrollTop = $(el).offset().top; // top элемента относительно документа
 $(document).scrollTop(scrollTop); // скроллим страницу до этой позиции
}
myscroll('#banner'); // запуск скролла до элемента с id = banner

Плавная прокрутка (скролл) страницы вверх (animate, scrollTop)

$("body,html").animate({scrollTop: 0}, 800); // крутит страницу наверх за 0.8 секунды

Внутри обработчика события узнать элемент, на котором оно произошло (this, event.target)

<div>что-то<p>клик</p>что-то</div>

$("div").click(function(event){ // при клике на p вложенный в div (c обработчиком клика установленного на div)
 el = $(this); // ссылка на div
 el2 = $(event.target); // ссылка на p
});

Отправка формы на чистом Javascript submit

document.querySelector('#frm').submit();

Установить обработчик события изменения размеров окна браузера на чистом Javascript (addEventListener, removeEventListener, resize)

window.addEventListener('resize', myfunc, false); // установить обработчик
window.removeEventListener('resize', myfunc, false); // для удаления обработчика необходимо указать ту же самую функцию
function myfunc() {
 // какой-то код
}

Прокрутить (скроллировать) страницу на чистом Javascript (scrollBy, scrollTo, scrollIntoView)

// сработает только если DOM уже загружен
window.scrollBy(0, -80); // прокрутить страницу на 80px вверх от текущего положения скролла
window.scrollTo(0, 0); // прокрутит страницу наверх (в начало) документа
e = document.querySelector("#sum");
e.scrollIntoView(true); // прокрутит страницу так, что элемент #sum окажется вверху
e.scrollIntoView(false); // прокрутит страницу так, что элемент #sum окажется внизу

Запретить или разрешить прокрутку страницы на чистом Javascript style.overflow

document.body.style.overflow = "hidden"; // запретить прокрутку страницы (она замрёт в текущем положении)
document.body.style.overflow = ""; // разрешить прокрутку страницы

Узнать текущее положение прокрутки (скролла) на странице по вертикали и по горизонтали на чистом Javascript (pageYOffset, pageXOffset, scrollTop, scrollLeft)

var scrollTop = window.pageYOffset || document.documentElement.scrollTop; // кроссбраузерное положение скролла по вертикали
var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft; // кроссбраузерное положение скролла по горизонтали

События нажатия и отпускания кнопки мыши и обработка нажатия левой, средней, правой кнопок мыши (mousedown, mouseup, event.which)

$("body").on("mousedown", "#psk", function (event) {
 if (event.which === 1) { // нажата левая кнопка мыши
  // свой код
 }
 if (event.which === 2) { // нажата средняя кнопка мыши
  // свой код
 }
 if (event.which === 3) { // нажата правая кнопка мыши
  // свой код
 }
});

$("body").on("mouseup", "#psk", function (event) {
 if (event.which === 1) { // отпущена левая кнопка мыши
  // свой код
 }
 if (event.which === 2) { // отпущена средняя кнопка мыши
  // свой код
 }
 if (event.which === 3) { // отпущена правая кнопка мыши
  // свой код
 }
});

Отмена действия по умолчанию для события event.preventDefault

$("a").click(function(event) {
 event.preventDefault(); // при клике по ссылкам в документе переход по ним происходить не будет
 alert(event.type); // вместо этого будет показан тип события
});

Отследить события изменения элемента (change paste keyup)

$("#name").on("change keyup input paste click", function() { // сработает при изменении, вставки из буфера обмена или отпускании клавиши на элементе 
  myfunc(); // функция которая что-то сделает в этом случае
});

Разрешить ввод только цифр в текстовое поле (match, replace)

// не позволяет вводить ничего кроме цифр в текстовое поле с id = dd (вырезает все символы не являющиеся цифрами)
$('#dd').on("change keyup input paste click", function() {
 if (this.value.match(/[^0-9]/g)) {
  this.value = this.value.replace(/[^0-9]/g, '');
 }
});

Запретить ввод определенных символов в поле ввода (match, replace)

// позволяет вводить всё кроме следующих букв "аиоуыэеёйюяьъАИОУЫЭЕЁЙЮЯЬЪ" в текстовое поле с id = dd2 (вырезает их)
$('#dd2').on("change keyup input paste click", function() {
 if (this.value.match(/[аиоуыэеёйюяьъАИОУЫЭЕЁЙЮЯЬЪ]/g)) {
  this.value = this.value.replace(/[аиоуыэеёйюяьъАИОУЫЭЕЁЙЮЯЬЪ]/g, '');
 }
});

Выбрать элемент по его порядковому номеру в наборе (nth-child, nth-child-last)

// нумерация элементов в nth-child, nth-child-last начинается от 1
$("#town option:nth-child(1)").attr("selected", "selected"); // будет выбран первый option в списке select
$("#town :nth-child(2)").attr("selected", "selected"); // будет выбран 2-й элемент с начала

$("#town :nth-child-last(2)").attr("selected", "selected"); // будет выбран 2-й элемент с конца

Динамические манипуляции с элементами DOM

Создать новый элемент option в списке select после 3-го элемента считая с начала (nth-child, after)

$("#town option:nth-child(3)").after($('<option value="Voronezh">Воронеж</option>'));

Создать элемент динамически с одновременным заданием его атрибутов и CSS-свойств (appendTo)

$("<div>", {id: "psk", text: "Привет!", css: {"left":"100px", "top":"120px"}}).appendTo("body"); // создает div с заданием id, текста, стилей

$("<div>", {id: "psk", css: {"left":"100px", "top":"120px"}, html: '<strong>Мой html</strong>'}).appendTo("body"); // создает div с заданием id, стилей, html-кода

$("<div>", {class: "psk", css: {"left":"100px", "top":"120px"}, append: $('<span>', {id: 'el1', text: 'дочерний элемент1'})}).appendTo("body"); // создает div с заданием class, стилей, дочернего элемента

$("<div>", {id: "qq", on: {click: function(e){alert('клик');}}}).appendTo("body"); // создает div c заданием id и обработчиком события click

$("<div>", {id: "qq", on: {scroll: function(e){alert('скролл');}}}).appendTo("body"); // создает div c заданием id и обработчиком события scroll - скроллинга

$("<input>", {type: "checkbox"}).prependTo("#sl ol li"); // создать чекбокс

Добавить html-содержимое перед или после указанного элемента (before, after)

$(this).before('<a name="k1"></a>'); // поставим метку перед указанным элементом
$(this).after('<a name="k2"></a>'); // поставим метку после указанного элемента

Перенос выбранных элементов в начало или в конец заданного элемента (appendTo, prependTo, append, prepend)

$('#my1').appendTo('#cont'); // запишет элемент my1 внутрь элемента cont в самом его конце
$('#my2').prependTo('#cont'); // запишет элемент my2 внутрь элемента cont в самом его начале

$('#cont').append( $('#my1').parent("li") ); // перемещаем элемент внутрь cont в самом его конце
$('#cont').prepend( $('#chbb').html() ); // перемещаем содержимое внутрь cont в самом его начале

Клонирование выбранных элементов (clone)

el = $(".hello").clone(); // клонирует элемент hello со всем его содержимым в переменную el

$(".hello").clone().appendTo(".container"); // скопирует элемент hello в конец элемента container, при этом оригинальный hello также останется на своём старом месте

Удалить элемент из DOM (remove)

$("#psk").remove();

Получение данных с сервера

Асинхронный ajax запрос к серверу без перезагрузки страницы (методом POST) ajax

id = 5; sl = 'тест'; // переменные для передачи в php-скрипт
$.ajax({
 type: "POST",
 url: "https://domain.ru/script.php",
 data: {'id':id, 'sl':sl},
 success: function(msg){
  alert(msg); // выведем результат, пришедший от сервера
 }
});

Синхронный ajax запрос к серверу без перезагрузки страницы (методом POST) ajax

// синхронный ajax запрос будет дожидаться ответа от сервера, делая на это время страницу недоступной для пользователя
id = 5; sl = 'тест'; // переменные для передачи в php-скрипт
$.ajax({
 type: 'POST',
 url: "https://domain.ru/script.php",
 data: {'id':id, 'sl':sl},
 async: false, // будем выполнять синхронно
 success: function(msg){
  alert(msg); // выведем результат, пришедший от сервера
 }
});

Обработка строк

Удалить пробелы в начале и в конце строки (trim)

str = "  привет ";
pm = $.trim(str); // вернет: 'привет'
s = str.replace( /^\s+/g, '').replace( /\s+$/g, ''); // вернет: 'привет'

Получить часть строки между двумя заданными позициями символов(substring)

// нумерация начинается от 0. Позиция первого символа - включается, позиция последнего символа не включается

var str = "Моя строка"
str.substring(0,3) // Моя (позиция1 д.б < позиция2)
str.substring(3,0) // Моя (если позиция1 > позиция2, то это равносильно тому, что позиция1 < позиция2)
str.substring(1,2) // о
str.substring(4) // "строка" (если позиция2 не задана, то возвращает до конца строки)

Получить часть строки начиная с заданной позиции символа и заданной длины (substr, charAt)

// нумерация начинается от 0

var str = "abcdefghij";
str.substr(1,2); // выведет bc
str.substr(-3,2); // выведет hi (если позиция < 0, то отсчёт начинается с конца строки)
str.substr(-3); // выведет hij (если длина не задана, то возвращает до конца строки)
str.substr(1); // выведет bcdefghij
str.substr(-20,2); // выведет ab (если позиция < 0 и позиция по модулю > длины строки, то позиция = 0)
str.substr(20,2); // выведет "" (если позиция > длины строки, то возвращает пустую строку)

a = str[3]; // выведет d, строка рассматривается как массив символов, к которым можно получить доступ по их индексу в строке (не работает в IE 8.0 и ниже)
b = str.charAt(3); // выведет d

Преобразовать символы строки в нижний или верхний регистр (toLowerCase, toUpperCase, charAt, substr)

str = text.toLowerCase(); // возвратит все символы строки в нижнем регистре

str = text.toUpperCase(); // возвратит все символы строки в верхнем регистре

str = str.charAt(0).toUpperCase() + str.substr(1).toLowerCase(); // возвратит первый символ строки в верхнем регистре, остальные -  в нижнем

Заменить подстроку в строке — одно вхождение или все вхождения (replace, split, join)

s = "лето ах лето";
a = s.replace("лето", "зима"); alert(a); // выведет "зима ах лето"
b = s.replace(/лето/g, "зима"); alert(b); // выведет "зима ах зима"
c = s.replace(new RegExp("лето",'g'), "зима"); alert(c); // выведет "зима ах зима"
d = s.split('лето').join('зима'); alert(d); // выведет "зима ах зима"

Оставить только цифры в строке replace

str = str.replace(/[^0-9]/g, '');

Поиск подстроки в строке с начала и с конца (indexOf, lastIndexOf, RegExp, test)

str = '12345678123';
p1 = str.indexOf("3"); // вернет 2
p2 = str.indexOf("3", 4); // вернет 10 так как начало искать с 4 символа
p3 = str.lastIndexOf("1"); // вернет 8
p4 = str.lastIndexOf("9"); // вернет -1 так как 9 не найдено

str2 = '#comment-4345';
reg = new RegExp('#comment-','i'); // для поиска без учета регистра символов
alert(reg.test(str2)); // вернет true, так как #comment- присутствует в #comment-4345

Поиск всех вхождений подстроки в строке (множественный поиск) indexOf

// функция возвращает массив из найденных позиций
function str_in_str(s, sp) {
 let p = -1, o = 0, m = [];
 while ((p = s.indexOf(sp, o)) != -1) {
  m.push(p); o = p + 1;
 }
 return m;
}
s = 'Лето, ах лето, лето красное будь со мной.';
m = str_in_str(s, 'лето'); alert(m); // вернет 9,15 - найденные позиции для 'лето' (первое 'Лето' не найдено, так как поиск с учетом регистра символов)

Узнать длину строки length

let st = 'abcdef';
let d = st.length; // выведет 6

Склонение слова в зависимости от числа function

function sklonenie(n, s){
 if (s == 1) {words = [' год',' года',' лет'];}
 if (s == 2) {words = [' месяц',' месяца',' месяцев'];}
 if (s == 3) {words = [' день',' дня',' дней'];}
 return words[(n=(n=n%100)>19?(n%10):n)==1?0 : ((n>1&&n<=4)?1:2)];
}
p = 1; a = p + sklonenie(p, 3); // 1 день
p = 22; b = p + sklonenie(p, 2); // 22 месяца
p = 19; c = p + sklonenie(p, 1); // 19 лет

Преобразовать строку в массив по заданному разделителю split

str = 'qwe$asd$zxc';
arr = str.split('$'); // разобьет строку в массив по разделителю "$"
alert(arr[1]); // выведет asd

Символ пробела в Javascript \u0020

let z = 'Привет\u0020медвед!'; alert(z); // выведет "Привет медвед!"

Символ переноса строки в Javascript \n

v = 'привет\nмедвед'; alert(v); // выведет
"привет
медвед" - в 2 строки
v =  v.split("\n").join("+"); alert(v); // выведет "привет+медвед"

Работа с массивами

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

var arr = []; // создать пустой массив
var arr = ["Яблоко", "Апельсин", "Слива"]; // создать массив (нумерация массива начинается с индекса 0 автоматически)
arr[9] = 5; // задать значение массива по индексу
dm = arr.push("лето"); // создает элемент массива записывая его в конец - с индексом на 1 больше, чем у последнего элемента массива (возвращает длину массива)
dm = arr.unshift("зима"); // создает элемент массива записывая его в начало (к индексам других элементов прибавляется 1) (возвращает длину массива)
k = arr[0]; // присвоить значение переменной по индексу массива
r = arr.length; // узнать количество элементов массива включая пустые элементы (считает как последний индекс + 1)

Узнать, существует ли элемент массива typeof

let u = []; 
if (typeof u[5] === "undefined") {
 alert('Элемент с ключом 5 в массиве u не существует');
}

Удалить или добавить несколько элементов массива по порядку splice

// 1 параметр - позиция, 2 параметр - количество элементов, 3 параметр - новые элементы массива (вставляются начиная с позиции, указанной в 1 параметре)
var m = [1, 2, 3, "x", "y", "z"]; // создать массив
m.splice(3); // станет [1, 2, 3]
m.splice(-2); // станет [1, 2, 3, "x"]
m.splice(2, 2); // станет [1, 2, "y", "z"]
m.splice(-2, 1); // станет [1, 2, 3, "x", "z"]
m.splice(0, 2, "j", true); // станет ["j", true, 3, "x", "y", "z"]
m.splice(3, 0, "w", "w", "w"); // станет [1, 2, 3, "w", "w", "w", "x", "y", "z"]

Перемешать элементы массива в случайном порядке Math.random

// функция принимает в качестве параметра массив и возвращает новый массив с перемешанными элементами (ключи нового массива идут по порядку начиная с 0)
function shuffle(m) {
 let dm = m.length; 
 for(var j, x, i = dm; i; j = parseInt(Math.random() * i), x = m[--i], m[i] = m[j], m[j] = x);
 return m;
};
let ra = shuffle([1, 2, 3, 4, 5]); // вернёт массив с перемешанными элементами наподобие [3, 5, 1, 4, 2]

Создание ассоциативного массива и элементов ассоциативного массива в Javascript

var myArray = {}; // создать пустой ассоциативный массив
var myArray2 = {'sex': 1, 'name': 'John', 'fam': 'Ivanov'};
myArray["ключ1"] = "значение1"; // задать значение ассоциативного массива по строковому ключу
k = myArray["ключ1"]; // присвоить значение переменной по ключу ассоциативного массива
r = Object.keys(myArray).length; // узнать количество элементов (длину) ассоциативного массива
alert(myArray2.name); // выведет John

Цикл перебирает элементы массива последовательно с индексами от 1 до arr.length (for)

for (i = 1; i < arr.length; i++) {
 alert(arr[i]);
}

Цикл перебирает элементы ассоциативного массива (for in)

for(key in myArray) {
 alert(key + " = " + myArray[key]);
}

Цикл сначала проверяет условие, затем выполняет тело (while)

var i = 0;
while (i < 3) {
  alert(i);
  i++;
}

Цикл сначала выполняет тело, затем проверяет условие (do while)

var i = 0;
do {
  alert(i);
  i++;
} while (i < 3);

Вычесть массив из массива filter

var a = [1, 2, 3, 4, 2, 5, 6, 2, 3, 6];
var b = [2, 3];
var c = a.filter(x => !b.includes(x));
alert(c.join()); // выведет 1,4,5,6,6

Преобразовать все элементы массива в одну строку join

var a = [1, 2, 3, 4];
q = a.join(); // выведет 1,2,3,4
w = a.join(""); // выведет 1234
e = a.join(" : "); // выведет 1 : 2 : 3 : 4

Создать массив объектов (массив ассоциативных массивов)

var ms = []; // объявление массива
ms[0] = {id: "1", name: "John"};
ms[1] = {id: "2", name: "Mary"};

Сортировать массив объектов (массив ассоциативных массивов) по значениям одного из ключей типа число, строка, дата (sort, Intl.Collator, compare)

var ms = []; // объявление массива
ms.push({id: "15", name: "John", fam: "Петров", dat: "2001-12-30"});
ms.push({id: "2", name: "Mary", fam: "иванова", dat: "1999-07-23"});
ms.push({id: "7", name: "Opra", fam: "Ёжова", dat: "2020-04-03"});
ms.push({id: "12", name: "july", fam: "Арбузова", dat: "2019-11-17"});
ms.push({id: "5", name: "Dory", fam: "Иванова", dat: "1998-01-05"});

ms.sort(function(a,b) {return a.id - b.id;}); // сортировать по числовому ключу по возрастанию
ms.sort(function(a,b) {return b.id - a.id;}); // сортировать по числовому ключу по убыванию

var collator = new Intl.Collator('en'); // Collator для английского языка
ms.sort(function(a, b) {return collator.compare(a.name, b.name);}); // сортировать по строковому ключу на английском языке по возрастанию
ms.sort(function(a, b) {return collator.compare(a.name, b.name);}); // сортировать по строковому ключу на английском языке по убыванию

let collator2 = new Intl.Collator(); // Collator для текущего (русского) языка
ms.sort(function(a, b) {return collator2.compare(a.fam, b.fam);}); // сортировать по строковому ключу на русском языке по возрастанию
ms.sort(function(a, b) {return collator2.compare(b.fam, a.fam);}); // сортировать по строковому ключу на русском языке по убыванию

ms.sort(function(a,b) { // сортировать по ключу с датой по возрастанию
var adt = new Date(a.dat); var bdt = new Date(b.dat);
return (adt < bdt) ? -1 : (adt > bdt) ? 1 : 0;});

ms.sort(function(a,b) { // сортировать по ключу с датой по убыванию
var adt = new Date(a.dat); var bdt = new Date(b.dat);
return (bdt < adt) ? -1 : (bdt > adt) ? 1 : 0;});

ms.forEach(function(item, i, ms) { // вывод отсортированного массива в консоль
 console.log(item.id + ' : ' + item.name + ' : ' + item.fam + ' : ' + item.dat);
});

Сортировать массив строк по алфавиту (Intl.Collator, sort)

// сортировка с учётом текущей языковой локали (если в обычной сортировке любая строчная буква больше любой заглавной буквы (б > Я), то здесь (я > Я), но (б < Я))
let animals = ["тигр", "ёж", "енот", "ехидна", "АИСТ", "ЯК"];
let collator = new Intl.Collator(); // использует текущую локаль, различает регистр символов, е ≠ ё, Ёж ≠ ёж
let collator2 = new Intl.Collator(undefined, {sensitivity: "accent"}); // использует текущую локаль, не различает регистр символов, е ≠ ё, Ёж = ёж
animals.sort(function(a, b) {return collator.compare(a, b);});
alert(animals); // выведет: АИСТ,ёж,енот,ехидна,тигр,ЯК

// стандартная сортировка
let animals2 = ["тигр", "ёж", "енот", "ехидна", "АИСТ", "ЯК"];
alert(animals2.sort()); // выведет: АИСТ,ЯК,енот,ехидна,тигр,ёж

Перебор всех элементов массива forEach

arr.forEach(function(item, i, arr) { // где item - элемент массива, i - его индекс, arr - сам массив
 alert( i + ": " + item);
});

Досрочный выход из цикла (прервать цикл) for, while

// выход из одного цикла
let i = 0; let sum = 0;
while (true) { // объявим вечный цикл
 i++;
 if (i > 4) {break;} // прервём цикл
 sum += i;
}
alert(sum); // выведет 10 - сумма 1 + 2 + 3 + 4

// выход из нескольких циклов
let i = 0; let sum = 0;
outer: // объявим метку перед циклом, из которого нужно будет выйти в теле одного из вложенных циклов
while (true) { // объявим вечный цикл
 i++;
 for (let j = 1; j <= 3; j++) {
  if (i == 2 && j == 2) {break outer;} // прервём несколько циклов (в данном примере 2)
  sum += i * j;
 }
}
alert(sum); // выведет 8 - сумма 1*1 + 1*2 + 1*3 + 2*1

Поиск индекса элемента в массиве и проверка присутствует ли элемент в массиве indexOf

var an = ['dog', 'cat', 'fish'];
an[7] = 'duck'
alert(an.indexOf('duck')); // вернет 7 - индекс элемента duck
alert(an.indexOf('cow')); // вернет -1, так как элемента cow отсутствует в массиве

alert(an.indexOf('dog') != -1); // вернет true так как элемент dog присутствует в массиве под индексом 0
alert(an.indexOf('cow') != -1); // вернет false так как элемент cow отсутствует в массиве

Получить первый или последний элемент массива с удалением его из массива (pop, shift)

vg = ["лето", "зима", "осень", "весна"];
var le = vg.pop(); // равен "весна"
// теперь массив выглядит так vg = ["лето", "зима", "осень"]

vg2 = ["лето", "зима", "осень", "весна"];
var my = vg2.shift(); // равен "лето"
// теперь массив выглядит так vg2 = ["зима", "осень", "весна"]

Работа с числами

Округлить число в Javascript (ceil, round, floor)

h1 = Math.ceil(5.2); // вернет 6 - округляет в большую сторону
h2 = Math.round(5.2); // вернет 5 - округляет по математическим правилам
h2 = Math.round(5.5); // вернет 6 - округляет по математическим правилам
h3 = Math.floor(5.2); // вернет 5 - округляет в меньшую сторону

Получить случайное целое число из заданного диапазона Math.random

function getRandomInRange(min, max) {
 return Math.floor(Math.random() * (max - min + 1)) + min;
}
let x = getRandomInRange(-180, 180); // вернет случайное целое число от -180 до 180 включая крайние значения

Получить остаток от деления

a = x % y // вернёт остаток о целочисленного деления
12 % 5 // 2
-1 % 2 // -1
NaN % 2 // NaN
1 % 2 // 1
2 % 3 // 2
-4 % 2 // -0
5.5 % 2 // 1.5

Проверка числа на четность или нечетность

let i = 2;
if (i%2 == 0) {alert('четное');} // проверка на четные числа, выведет 'четное'

let j = 5;
if (j%2 == 1) {alert('нечетное');} // проверка на нечетные числа, выведет 'нечетное'

Проверка на число (чтобы в строке были только цифры) (test, isNaN)

// проверка на целое число
function is_number(p) {return /^\d+$/.test(p);}

// проверка на целое число, допускается отрицательное число
function is_number2(p){return /^[-]?\d+$/.test(p);}

// проверка на целое число
function is_number3(p) {
 let t = p.length; let m = [0,1,2,3,4,5,6,7,8,9]; let n = true;
 for (let i = 0; i < t; i++) {if (m.indexOf(+p.charAt(i)) == -1) {n = false; break;}} return n;
}

// проверка на целое число
function is_number4(p){
 let a = [NaN, undefined, null, true, false, ''];
 return (a.indexOf(p) != -1) ? false : isNaN(+p) ? false : (p < 0) ? false : ((+p ^ 0) === +p) ? true : false;
}

// проверка на целое число, допускается отрицательное число
function is_number5(p){
 let a = [NaN, undefined, null, true, false, ''];
 return (a.indexOf(p) != -1) ? false : isNaN(+p) ? false : ((+p ^ 0) === +p) ? true : false;
}

// проверка на число, допускается число с плавающей точкой (дробное)
function is_number6(p){
 let a = [NaN, undefined, null, true, false, ''];
 return (a.indexOf(p) != -1) ? false : isNaN(+p) ? false : (p < 0) ? false : true;
}

// проверка на число, допускается отрицательное число и число с плавающей точкой (дробное)
function is_number7(p){
 let a = [NaN, undefined, null, true, false, ''];
 return (a.indexOf(p) != -1) ? false : isNaN(+p) ? false : true;
}

Форматирование чисел в виде групп разрядов, с важностью, вывод для валюты Intl.NumberFormat

// вывод с разделением групп разрядов
var formatter = new Intl.NumberFormat("ru");
alert(formatter.format(1234567890.123)); // 1 234 567 890,123

// вывод с разделением групп разрядов (вариант 2)
ssm = String(ssm).replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1 ') + ' руб.';
alert(ssm); // 1 234 567 890.123 руб.

// вывод с ограничением значимых цифр (важны только первые 3)
var formatter = new Intl.NumberFormat("ru", {maximumSignificantDigits: 3});
alert(formatter.format(1234567890.123)); // 1 230 000 000

// вывод валюты
var formatter = new Intl.NumberFormat("ru", {style: "currency", currency: "GBP"});
alert(formatter.format(1234.5)); // 1 234,5 £

// вывод валюты с двумя цифрами после запятой
var formatter = new Intl.NumberFormat("ru", {style: "currency", currency: "USD", minimumFractionDigits: 2});
alert(formatter.format(1234.5)); // 1 234,50 $

Работа с датой и временем

Создать объект даты и времени Date

var dt = new Date(); // создать объект Date с текущей датой и временем
var dt2 = new Date('2020-03-15 03:50:00'); // создать объект Date с датой и временем заданными в виде строки
var dt3 = new Date(2020, 0, 1, 0, 0, 0, 0); // // 1 января 2020, 00:00:00
var dt4 = new Date(2020, 0, 1); // то же самое, часы, минуты, секунды, миллисекунды по умолчанию равны 0
var dt5 = Date.now(); // возвращает текущую дату сразу в виде миллисекунд

Получить из даты год, месяц, день, день недели, час, минуты, секунды, часовой пояс, количество миллисекунд с 01.01.1970 UTC Date

var dt = new Date();
y = dt.getFullYear(); // возвращает год в 4 цифры
m = dt.getMonth(); // возвращает месяц в виде числа, где 0 - январь, 1 - февраль и т. д.
d = dt.getDate(); // возвращает день месяца от 1 до 31
dn = dt.getDay(); // возвращает день недели, где 0 - воскресенье, 1 - понедельник, 2 - вторник, и т. д.
h = dt.getHours(); // возвращает час от 0 до 23
mi = dt.getMinutes(); // возвращает минуту от 0 до 59
se = dt.getSeconds(); // возвращает секунду от 0 до 59
tzo = dt.getTimezoneOffset(); // возвращает разницу между местным и UTC-временем, в минутах, для зоны UTC+5 вернёт 60 * 5 = 300
tm = dt.getTime(); // возвращает число миллисекунд прошедших с 1 января 1970 года GMT+0 до заданной даты

Изменить компоненты даты Date

setFullYear(year [, month, date])
setMonth(month [, date])
setDate(date)
setHours(hour [, min, sec, ms])
setMinutes(min [, sec, ms])
setSeconds(sec [, ms])
setMilliseconds(ms)
setTime(milliseconds) (устанавливает всю дату по миллисекундам с 01.01.1970 UTC)

var dt = new Date();
dt.setHours(0); // сегодня, но час изменён на 0
dt.setHours(0, 0, 0, 0); // сегодня, но часы, минуты, секунды изменены на 00:00:00.

Узнать количество дней в месяце Date

year = 2020;
month = 1; // февраль
var maxDays = 32 - new Date(year, month, 32).getDate(); // при создании даты с избыточным количеством дней создаётся дата следующего месяца (года) с днём равным лишним дням
alert(maxDays); // вернёт 29 так как 2020 год високосный

Получить языкозависимые данные из даты (Date, toLocaleString, Intl.DateTimeFormat, format)

era: 'long'
year: 'numeric'
month: 'long'
day: 'numeric'
weekday: 'long'
timezone: 'UTC'
hour: 'numeric'
minute: 'numeric'
second: 'numeric'

var date = new Date('2020-03-15 03:50:00');
var options = {weekday: 'long'};
alert(date.toLocaleString("ru", options)); // вернёт воскресенье - день недели русскими буквами

var options = {month: 'long'};
alert(date.toLocaleString("ru", options)); // вернёт март - месяц русскими буквами

var formatter = new Intl.DateTimeFormat("ru");
alert(formatter.format(date)); // вернёт 15.03.2020 - русский формат даты

var formatter2 = new Intl.DateTimeFormat("ru", {hour: "numeric", minute: "numeric", second: "numeric"});
alert(formatter2.format(date)); // вернёт 03:50:00 - время в русском формате

Узнать разницу между заданной и текущей датой в днях, часах, минутах, секундах (прямой и обратный счетчик времени) Date

function getTimeRemaining(tm){
 var td = Date.parse(new Date());
 var dl = Date.parse(tm);
 if (dl > td) { // если заданная дата больше текущей
  var t = dl - td;
  var bm = 'ещё осталось';
 } else { // если заданная дата меньше текущей
  var t = td - dl;
  var bm = 'прошло';
 }
 var seconds = Math.floor( (t/1000) % 60 );
 var minutes = Math.floor( (t/1000/60) % 60 );
 var hours = Math.floor( (t/(1000*60*60)) % 24 );
 var days = Math.floor( t/(1000*60*60*24) );
 var mes = Math.floor(days / 30.41);
 var dni = days - Math.round(mes * 30.41);
 var ddn = [' день', ' дня', ' дней'];
 if (mes > 0) {mes = mes + ' мес ' + dni + ' дней';} else {mes = dni + ' дней';}
 return {
  'total': t,
  'days': days,
  'hours': hours,
  'minutes': minutes,
  'seconds': seconds,
  'bm': bm,
  'mes': mes
 };
}
tmm = '2020-03-15 03:50:00';
var myt = getTimeRemaining(tmm);
var ss = '<span title="' + myt.mes + '">' + myt.days + '<sup>д</sup> ' + myt.hours + '<sup>час</sup> ' + myt.minutes + '<sup>мин</sup><br><span>' + myt.bm + '</span></span>';
$(this).html(ss);

Типы данных, сравнение, присваивание, условные операторы

Приведение типов данных: строка, число, логический тип (string, number, boolean, parseInt)

// Преобразование в строку
var a = String(55); // "55"
var a = String(null); // "null"
var a = String(false); // "false"
var a = String(undefined); // "undefined"
var a = true + "test"; // "truetest"
var a = "123" + undefined; // "123undefined"

// Преобразование в число
var a = +"123"; // 123
var a = +"1.55"; // 1.55 (для корректного преобразования в число в строке должны быть только цифры и не более одной точки)
var a = parseInt("123ab", 10); // 123 (10 - десятичная система счисления)
var a = +"   \n  123   \n  \n"; // 123 (пробелы и переносы строк предварительно обрезаются)
var a = +"123abc"; // NaN
var a = +"123.3."; // NaN
var a = +"abc"; // NaN
var a = +""; // 0
var a = +true; // 1
var a = +false; // 0
var a = +undefined; // NaN
var a = +null; // 0

// Преобразование в логический тип
var a = !!2; // true
var a = !!"тест"; // true
var a = !!$("#mel"); // true
var a = !!0; // false
var a = !!""; // false
var a = !!null; // false
var a = !!undefined; // false
var a = !!NaN; // false

Операторы сравнения (< <= > >= == != === !== null NaN undefined)

> больше
>= больше или равно
< меньше
<= меньше или равно
== равно
!= не равно
=== строго равно
!== строго не равно

alert(2 > 1);  // true
alert(2 < 1);  // false
alert(2 == 1); // false
alert(2 != 1); // true
alert('Я' > 'А'); // true
alert('Кот' > 'Код'); // true (потому что т > д)
alert('Сонный' > 'Сон'); // true (потому что Сонный длиннее, чем Сон)
alert('а' > 'А'); // true (потому что любая строчная буква > любой заглавной буквы)
alert("9" < "a"); // true (потому что цифра в строке всегда меньше, чем буквы в любом регистре)
alert('2' > 1); // true (потому что при сравнении разных типов строка '2' становится числом 2)
alert('01' == 1); // true (потому что при сравнении разных типов строка '01' становится числом 1)
alert(true == 1); // true (потому что при сравнении разных типов true становится 1)
alert(false == 0); // true (потому что при сравнении разных типов false становится 0)
alert('' == false); // true (потому что при сравнении разных типов пустая строка становится 0 и false становится 0)
alert(false === 0); // false (потому что при "строгом равно" разные типы не преобразуются)
alert('' !== false); // true (потому что при "строгом не равно" разные типы не преобразуются)
alert(null === undefined); // false (потому что null и undefined имеют разные типы)
alert(null == undefined); // true (потому что при не строгом равенстве null равно undefined и не равно больше ничему другому)
alert(null > 0);  // false (потому что при сравнении разных типов сравнение > преобразует null в 0)
alert(null == 0); // false (потому что при не строгом равенстве null равно только undefined и не равно больше ничему другому)
alert(null >= 0); // true (потому что при сравнении разных типов сравнение >= преобразует null в 0)
alert(undefined > 0); // false (потому что при сравнении разных типов undefined преобразуется в NaN, а NaN – возвращает false при любых сравнениях)
alert(undefined < 0); // false (потому что при сравнении разных типов undefined преобразуется в NaN, а NaN – возвращает false при любых сравнениях)
alert(undefined == 0); // false (потому что при не строгом равенстве undefined равно только null и не равно больше ничему другому)
alert(NaN == NaN); // false (потому что NaN – возвращает false при любых сравнениях)
alert(NaN === NaN); // false (потому что NaN – возвращает false при любых сравнениях)
alert(null == null); // true
alert(null === null); // true (потому что имеют одинаковый тип)
alert(undefined == undefined); // true
alert(undefined === undefined); // true (потому что имеют одинаковый тип)

Присвоить результат сравнения переменной let

let r = 3 > 2;
alert(r); // выведет true

Короткая запись операторов присваивания ++ -- += -= *= /= %= &= |=

i++; // аналогично записи i = i + 1;
i--; // аналогично записи i = i - 1;
s += i; // аналогично записи s = s + i;
s -= i; // аналогично записи s = s - i;
s *= i; // аналогично записи s = s * i;
s /= i; // аналогично записи s = s / i;
s %= i; // аналогично записи s = s % i;
s &= i; // аналогично записи s = s & i;
s |= i; // аналогично записи s = s | i;

Короткая запись if (if, else, else if)

k = 1;
s = (k > 10) ? 1 : 5; // в результате s будет равно 5
if (k > 10) {s = 1;} else {s = 5;} // аналогичная предыдущей запись

k = 3;
s2 = (k > 10) ? 1 : (k < 10) ? 7 : 5; // в результате s2 будет равно 7
if (k > 10) {s2 = 1;} else if (k < 10) {s2 = 7;} else {s2 = 5;} // аналогичная предыдущей запись

Проверка ввода данных разных типов (текст, дата, число, email) из полей разного типа перед отправкой (date, datetime-local, isNaN)

// проверка текстового поля на пустоту
zn = $.trim($('#pole').val());
if (!!zn == false) {alert('Значение пусто!'); return;}

// проверка полей типа date, datetime-local - дата, дата с временем - на пустоту
var dd = $('#clndr').val();
if (!dd) {alert('Некорректная дата!'); return;}

// проверка числового поля, чтобы оно было больше нуля
dg = +$('#cfr').val(); // приведем значение к числу
if (isNaN(dg) || !(dg > 0)) {alert('Некорректная длительность!'); return;}

// проверка числового поля, чтобы оно было целым числом и больше нуля
dg = parseInt($('#cfr').val()); // приведем значение к целому числу
if (isNaN(dg) || !(dg > 0)) {alert('Некорректная длительность!'); return;}

// проверка текстового поля с вводом email
function valid_email(s) {return /^[\w-\.]+@[\w-\.]+\.[\w-]{2,20}$/i.test(s);}
q = valid_email('a.b@ma-i_l.co.photography'); // вернет true для длинного домена верхнего уровня
q = valid_email('a@xn--h1aigbl0e.xn--p1ai'); // вернет true для домена на кириллице
// html-элемент input type="email" хоть и создан для ввода и проверки email перед отправкой данных на сервер, но его встроенная в браузер проверка пока что несовершенна и считает нормальным, например, такой email адрес: 'z@ф' так что проверку на удовлетворительность введенного email лучше делать самостоятельно способами выше

Проверка на не попадание переменной в диапазон ! - отрицание

function myf(k) {
 if (!(k >= 10 && k <=20)) { // условие задано через отрицание
  alert(k + ' вне диапазона 10 - 20');
 } else {
  alert(k + ' внутри диапазона 10 - 20');
 }
}
myf(9); // выведет 9 вне диапазона 10 - 20
myf(12); // выведет 12 внутри диапазона 10 - 20

Временные функции (таймер, интервал, анимация)

Выполнение функции по таймеру — через заданный период времени (setTimeout)

var timerId = setTimeout(function(){
  alert('Привет'); // этот код будет выполнен через 1000 миллисекунд или 1 секунду
}, 1000);

Отмена исполнения по таймеру (clearTimeout)

clearTimeout(timerId); // отменит исполнение таймера в переменной timerId, если эта команда будет выполнена раньше, чем наступит время исполнения таймера

Выполнение функции регулярно с повтором через указанный интервал времени (setInterval)

var timerId = setInterval(function() {
  alert("тик"); // этот код выполнится через 2 секунды и далее будет выполняться каждые 2 секунды
}, 2000);

Отмена исполнения интервальной функции (clearInterval)

clearInterval(timerId); // отменит исполнение интервальной функции в переменной timerId

Рекурсивный setTimeout для запуска функции точно через заданное время без учёта времени ушедшего на её отработку или для гибкого управления задержкой перед выполнением следующих повторов

setTimeout(function run() {
  res = func(i); // запуск какой-то своей функции
  zd = res + 1500;
  setTimeout(run, zd); // запустит саму себя еще раз через 1,5 секунды, если  предыдущая функция возвратила 0
}, 1000); // выполнится через 1 секунду

Простой плавный спойлер (плавное скользящее скрытие — отображение элемента) slideToggle

HTML:
<p class="sptl">спойлер1</p><div><p>Скрытый текст для<br>первого спойлера</p></div>
<p class="sptl">спойлер2</p><div><p>Скрытый текст для второго спойлера</p></div>

$(".sptl").next().hide(); // по умолчанию спойлеры скрыты
$(".sptl").click(function(){ $(this).next().slideToggle(); }); // скрыть-открыть спойлер по клику

Плавно скользяще скрыть элемент slideDown

$("#am").slideDown(600); // скрытие элемента займет 0,6 сек

Плавно скользяще отобразить элемент slideUp

$("#am").slideUp(600); // отображение элемента займет 0,6 сек

Выполнить код дождавшись завершения анимации slideToggle

$('.foo').slideToggle(1000, sdvig); // где функция sdvig выполнится после отработки анимации

Анимация нескольких свойств элемента animate

// HTML код
<p id="newimg">Hello World</p>

// CSS код
#newimg {position:absolute; left:0px; top:0px; z-index:100;}

// JS код анимации сразу нескольких свойств элемента с id = newimg от изначальных в CSS к заданным в JS
$("#newimg").animate({opacity: 0, left: "300px", top: "-200px", width: "100px", height: "100px"}, 1000); // анимация выполняется в течении 1 секунды

Выполнить код дождавшись завершения анимации animate

$("#el").animate({opacity: 0}, 1000, myfunc); // анимация
function myfunc() { // функция выполнится после завершения анимации
 // какой-то код
}

Мигающий элемент страницы (setInterval, setTimeout)

setInterval(function(){
 setTimeout(function(){
  $("#message").hide(); // элемент не виден
  setTimeout(function(){$("#message").show();},500); // элемент становится виден через 0,5 сек
 },3000); // повтор итерации через 3 сек
},3500); // запускается через 3,5 сек после загрузки страницы

Использование функций, область видимости, типы переменных

Создать свою функцию (function)

function hello(a, b) {
 z = a + b;
 return z;
}
s = hello('frm', 3);

Возврат нескольких значений из функции function

function myfunc(n) {
 var a = 1 + n; var b = 2 + n;
 return [a, b];
}
var vl = myfunc(5);
var z = vl[0];
var x = vl[1];

Прекратить выполнение функции при выполнении условия return

function hello(a, b) {
 let z = a + b;
 if (z == 7) {return false;} 
 return z; // если предыдущее условие выполнится, то этот return не сработает
}
let s = hello(4, 4); alert(s); // вернет 8
let s = hello(4, 3); alert(s); // вернет false

Функция с необязательными параметрами (параметры по умолчанию) function

function myfunc(n, m = "медвед") {
 alert(n + " " + m );
}
myfunc("привет"); // выведет "привет медвед"
myfunc("привет", "мир"); // выведет "привет мир"

function myfunc2(n, m = myfunc("настало")) {
 alert(n + " " + m );
}
myfunc2("лето"); // выведет "лето настало медвед"

Глобальные и локальные переменные в функции (область видимости) (var, function)

function myfunc() {
 alert(q + 5);
}
var q = 2;
myfunc(); // выведет 7

function myfunc2(q) {
 alert(q + 5);
}
var q = 2;
myfunc2(7); // выведет 12 так как внутри функции использовалась локальная переменная q заданная в качестве параметра функции

function myfunc3() {
 q = 3;
 alert(q + 5);
}
var q = 2;
myfunc3(); // выведет 8
alert(q); // выведет 3, так как значение глобальной переменной q было изменено внутри функции

function myfunc4() {
 var q = 4;
 alert(q + 5);
}
var q = 2;
myfunc4(); // выведет 9, так как внутри функции использовалась объявленная локальная переменная q
alert(q); // выведет 2, так как глобальная переменная q не изменялась

function myfunc5(a) {
 a.pole= 'привет';
};
var obj = {pole: 'медвед'}; // объект
myfunc5(obj);
alert(obj.pole); // выведет "привет", так как свойство объекта было изменено в функции

Особенности объявления переменной через var

var a; alert(a); // вернет undefined
var a = 5; alert(a); // вернет 5
alert(b); // вернет ошибку Uncaught ReferenceError: b is not defined

alert(c); // вернет undefined несмотря на то, что переменная 'с' объявлена ниже
var c = 5;

var x = 3;
var x = 4; // даст объявить переменную повторно
console.log(x);

for(var i = 0; i<=10; i++) { /* … */ }
alert(i); // выведет 10 - последнее значение переменной i в цикле

Особенность объявления переменной через let

let a = 3; // в отличие от var видна только внутри блока {} в котором она объявлена, таких как: function, if, while, for

let a = 3;
if (true) {
  let a = 5; alert(a); // выведет 5 (внутри блока)
}
alert(a); // выведет 3 (снаружи блока)

alert(c); // вернет ошибку Uncaught ReferenceError: c is not defined несмотря на то, что переменная 'с' объявлена ниже
let c = 5;

let x;
let x; // вернет ошибку Uncaught SyntaxError: Identifier 'x' has already been declared, потому что переменная 'x' уже объявлена в этом блоке

for(let i = 0; i<10; i++) { /* … */ }
alert(i); // вернет ошибку Uncaught ReferenceError: i is not defined, так как i объявлена только для цикла for

Особенности объявления переменной через const

const a = 5; // не подлежит изменению
a = 7; // вернет ошибку Uncaught TypeError: Assignment to constant variable, так как константы нельзя изменять

const a = 5;
const a = 7; // вернет ошибку Uncaught SyntaxError: Identifier 'a' has already been declared, так как константу нельзя объявлять повторно

function dd() {
 var b = 7;
 var c = b * a;
 alert(c);
}
const a = 5;
dd(); // выведет 35, так как константа 'a' глобальная и видна внутри функции

Объявить несколько переменных за раз (var, let, const)

var v = -1, t = 0, m = []; // все переменные v, t и массив m объявлены через var
let d = "привет", s = p = f = 5; // все переменные d, s, p, f объявлены через let
const x = y = z = 0; // объявлены переменные x, y, z, при этом через const объявлена только x; y и z объявлены через var и не являются константами
const x = 0, y = 0, z = 0; // все переменные объявлены через const

Включить строгий режим для Javascript use strict

// строгий режим не поддерживает старые реализации кода, поддерживается только современный режим Javascript

(function() {
 'use strict'; // включит строгий режим внутри функции
 // здесь код функции в строгом режиме
})();

<script>
"use strict"; // включит строгий режим во всём скрипте, эта директива должна идти первой или после комментариев
// здесь код скрипта в строгом режиме
</script>

Вывод данных в консоль браузера при отладке скрипта

console.log(str);

Адрес страницы и адресная строка

Получить GET-параметры адресной строки браузера по их именам function

// если адресная строка:
// https://site.ru/post.php?post=25&action=Привет%20медвед

// функция разбора GET-параметров нормально обрабатывает также значения с пробелами и на русском языке
function getAdrPar(name) {
 return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null;
}
let post = getAdrPar('post'); alert(post); // выведет 25
let act = getAdrPar('action'); alert(act); // выведет "Привет медвед"
let aaa = getAdrPar('aaa'); alert(aaa); // выведет null

Открыть ссылку в текущей вкладке document.location.href

document.location.href = 'https://site.ru/';

Открыть ссылку в новой вкладке

function openInNewTab(href) {Object.assign(document.createElement('a'), {target: '_blank', href}).click();}
openInNewTab('https://site.ru');

Обновить страницу в текущей вкладке без учёта меток document.location.href

var p = document.location.href;
p = p.substring(0, p.lastIndexOf("#"));
document.location.href = p;

Получить URL адрес страницы, по ссылке с которой был совершен переход на текущую страницу referrer

s = document.referrer; // возвратит ссылку вида https://site.ru/post.php?r=43&da=56 если страница была загружена не по ссылке, то вернет '' - пустую строку

Перезагрузить текущую страницу location.reload

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

Хранение и передача данных между окнами

Создать куки cookie

// для хранения куки браузером выделяется всего 4 Кбайта на один домен, при этом при каждом обновлении страницы домена куки отправляются на сервер и обратно

function createCookie(name,value,days) { // создать куки
 if (days) {
  var date = new Date();
  date.setTime(date.getTime()+(days*24*60*60*1000));
  var expires = "; expires="+date.toUTCString();
 } else {var expires = "";}
 document.cookie = name+"="+value+expires+"; path=/";
}
createCookie('imya','Лена',100); // создать куки на 100 дней с именем imya = 'Лена'

Получить куки по имени cookie

function getCookie(name) { // получить значение куки по его имени
 var matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"));
 return matches ? decodeURIComponent(matches[1]) : undefined;
}
nm = getCookie('imya'); // получить значение куки с названием 'imya'

Удалить куки по имени cookie

function eraseCookie(name) {createCookie(name,"",-1);}
eraseCookie('imya'); // удалить куки с названием 'imya'

Работа с внутренним хранилищем браузера localStorage

// для localStorage браузером выделяется 5 Мбайт на домен в Firefox, Google Chrome, и Opera, и 10 Мбайт в Internet Explorer (данные хранятся только в браузере пользователя, на сервер автоматически не отправляются)

// проверить включен ли localStorage в браузере
if (window.localStorage) {
 // какой-то код с использованием localStorage
}

localStorage['pole'] = 'тест'; // записать в localStorage атрибут pole со значением 'тест'

let n = localStorage['pole']; // получить значение ранее установленного атрибута pole в переменную, если атрибут не существует, то вернет undefined

delete localStorage['pole']; // удалить атрибут pole из localStorage

Разные функции и возможности

Кнопка Наверх для сайта на чистом Javascript

// HTML код кнопки
<a class="back_to_top" title="Наверх">↑</a>

// JS код обработчик логики (чистый Javascript)
<script type="text/javascript">
(function() {
 'use strict';
 function trackScroll() {
  var scrolled = window.pageYOffset;
  var coords = document.documentElement.clientHeight;
  if (scrolled > coords) {
   goTopBtn.classList.add('back_to_top-show');
  }
  if (scrolled < coords) {
   goTopBtn.classList.remove('back_to_top-show');
  }
 }
 function backToTop() {
  if (window.pageYOffset > 0) {
   window.scrollBy(0, -80);
   setTimeout(backToTop, 0);
  }
 }
 var goTopBtn = document.querySelector('.back_to_top');
 window.addEventListener('scroll', trackScroll);
 goTopBtn.addEventListener('click', backToTop);
})();
</script>

// CSS код кнопки
.back_to_top {background: #a2a2a2; color:#000000; padding: 7px 15px; font-size: 20pt; cursor: pointer; bottom: 20px; right: 15px; display: none; position: fixed; z-index: 999; border-radius: 4px; opacity: 0.4;}
.back_to_top :hover {background: #777777;}
.back_to_top-show {display: block;}

Проиграть звуковой файл по клику (Audio, src, autoplay)

// HTML код
<p onclick="sound()">Проиграть звук</p>

// JS функция
function sound() {
 audio = new Audio(); // создать новый элемент audio
 audio.src = 'https://site.ru/1.mp3'; // путь к звуковому файлу
 audio.autoplay = true; // автоматически запустить проигрывание
}

Кнопки Stop Pause Play для звукового файла (Audio, src, play, pause, currentTime)

// HTML код
<p><span onclick="sound_stop()">Stop</span> <span onclick="sound_pause()">Pause</span> <span onclick="sound_play()">Play</span></p>

// JS код
var audio;
audio = new Audio(); // создать новый элемент audio
audio.src = 'https://site.ru/2.mp3'; // путь к звуковому файлу

function sound_stop() {
 audio.pause(); // пауза
 audio.currentTime = 0; // текущее время на 0
}

function sound_pause() {
 audio.pause(); // пауза
}

function sound_play() {
 audio.play(); // плей
}

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

// на jQuery: при клике на тег var его текст копируется в буфер обмена
$("var").click(function(){
 let t = $(this).text();
 $("<input>", {id: "tmpel", value: t}).appendTo("body");
 $("#tmpel").select();
 document.execCommand("copy");
 $("#tmpel").remove();
});

// на Javascript: при клике на тег var его текст копируется в буфер обмена
var vars = document.querySelectorAll("var");
[].forEach.call(vars, function(el) { // перебираем все найденные элементы
 el.onclick = function(e) { // вешаем событие
  let inp = document.createElement("input");
  inp.id = "tmpel";
  inp.value = e.currentTarget.textContent;
  document.body.append(inp);
  let fu = document.querySelector("#tmpel");
  fu.select();
  document.execCommand("copy");
  fu.remove();
 }
});

Многострочная сноска с прокруткой в тексте

// HTMl-код (номер сноски заключен в тег верхнего индекса sup, текст сноски идет сразу за ним в теге span, в нем же можно задать высоту и ширину окна сноски, если атрибуты data-h и data-w убрать, то будут использоваться одни на всех размеры из css)
<p>Мороз и солнце<sup>1</sup><span data-h="50" data-w="200" class="invis">Солнце - звезда класса G2V желтый карлик.</span> день чудесный! Еще ты дремлешь, друг<sup>2</sup><span data-h="50" data-w="150" class="invis">Друг - товарищ, названный брат, побратим, но не родственник.</span> прелестный.</p>

// CSS-код
#pskaz {background:#dbdbdb; position: absolute; width:300px; height:150px; border-radius: 5px; padding:5px 10px 5px 6px; overflow:auto; font-size: 15px;}
#pskazx {position:absolute; cursor:pointer; color:red; right:2px; top:1px;}
sup {cursor:pointer;}
.invis {display: none;}

// JS-код (положение окна сноски зависит от положения номера сноски в тексте и подстраивается под размеры видимой области окна браузера; окно сноски открывается по клику на номер сноски и закрывается по клику на крестик)
$("body").on("click", "sup", function () {
 $("#pskaz").remove();
 let opis = $(this).next().html();
 let he = $(this).next().attr('data-h');
 let wi = $(this).next().attr('data-w');
 $("<div>", {id: "pskaz", html: opis, on: {scroll: function(event){$("#pskazx").css({"top":$(this).scrollTop()+1});}}, css: {height: he, width: wi}, append: $("<div>", {id: "pskazx", title: "Закрыть", html: "⊗", on: {click: function(event){$("#pskaz").remove();}}})}).appendTo("body");
 let tw = $(this).width(); let th = $(this).height();
 let h1 = window.innerHeight; let w1 = window.innerWidth;
 let le2 = $(this).offset().left; let to2 = $(this).offset().top;
 let elh = $('#pskaz').outerHeight(); let elw = $('#pskaz').outerWidth();
 let c = this.getBoundingClientRect(); let to = c.top; let le = c.left;
 if (le + elw + tw + 5 < w1) {lz = le2 + tw + 5;} // справа
 else if (le - elw - 5 > 0) {lz = le2 - elw - 5;} // слева
 else {lz = Math.round((w1 - elw)/2);} // посредине
 if (to - elh > 0) {tz = to2 - elh;} // сверху
 else if (to + th + elh < h1) {tz = to2 + th;} // снизу
 else {tz = Math.round((h1 - elh)/2) + $(window).scrollTop();} // посредине
 $('#pskaz').css({"left":lz, "top":tz});
});

Читайте все статьи из IT - Шпаргалки по программированию:

Поделиться статьей:  

Поделитесь своим мнением

Правила сообщений

Для оформления сообщений Вы можете использовать следующие тэги:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Копирование материалов разрешено только с указанием источника и прямой индексируемой ссылкой на оригинал.
Яндекс.Метрика
© 2016 - 2019 Хороший отзыв · Лично · Разумно · Честно