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

30 марта 2018             Главная › IT › Шпаргалки по программированию ›

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

 

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

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

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

Коды клавиш в Javascript.

Оглавление

 

Поиск элементов 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 и т. п.

Получить html-код самого элемента включая его содержимое (outerHTML)

let q = $('#elem')[0].outerHTML;

Узнать текст выбранного пункта в списке 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, включая ширину всех данных не входящих в видимую область окна браузера

Узнать ширину и высоту элемента на чистом Javascript (clientHeight, clientWidth)

let el = document.querySelector('#el');
el.clientHeight; // высота элемента на странице исключая высоту данных не входящих в видимую область элемента (с padding, без border, без scrollbar если он есть)
el.clientWidth; // ширина элемента на странице исключая ширину данных не входящих в видимую область элемента (с padding, без border, без scrollbar если он есть)

Узнать высоту элемента, включая высоту всех данных не входящих в видимую область элемента 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; // расстояние до верхней границы элемента
let ri = v.right; // расстояние до правой границы элемента
let bo = v.bottom; // расстояние до нижней границы элемента
let wi = v.width; // ширина элемента
let he = v.height; // высота элемента
// если элемент находится выше видимой области окна браузера, то расстояния до верхней и нижней границ элемента будут иметь отрицательные значения

Узнать положение элемента относительно левого верхнего угла документа (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

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

// на чистом javascript
window.addEventListener('scroll', function() {
 let sc = window.pageYOffset || document.documentElement.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)

Читайте также:  Шпаргалка по CSS
// 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

Получить число по модулю (Math.abs)

Math.abs('-1'); // вернёт 1
Math.abs(-2); // вернёт 2
Math.abs(3); // вернёт 3

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

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

Читайте также:  Шпаргалка по HTML
// вывод с разделением групп разрядов
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

Поведение программы при возникновении ошибки (try, catch)

// можно использовать, например, чтобы определить, существует ли функция
try { 
 myfunc(par); // тут вызов возможно ещё не успевшей загрузиться функции
} catch (error) {
  // тут, действия, если код выше вызвал ошибку
}

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

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

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

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

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

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

setTimeout(function run() {
 // код который выполнится через 1 сек
 // здесь можно использовать переданные параметры: par1, par2, par3, par4
}, 1000, par1, par2, par3, par4);

Выполнение функции регулярно с повтором через указанный интервал времени (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 - Шпаргалки по программированию:

Шпаргалка по CSS

Шпаргалка по HTML

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

Шпаргалка по программированию для WordPress

Шпаргалка по программированию на SQL, MySQL, MariaDB

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

    Метки: , , , , , , , , , , , , , , , , , , , ,

Читайте также:

  1. Мифы о Турции или байки туроператора
  2. Как добраться до монастыря Монсеррат из Барселоны самостоятельно
  3. Анкара - столица Турции, приятное знакомство за 1-2 дня
  4. Прогулка по набережной Геленджика «На удачу!»
  5. Как подняться к Кресту и надписи Геленджик самостоятельно
  6. Клубничный сок или смузи - рецепт приготовления на 2 порции
  7. Где и что покупать в Краснодаре – рынки, торговые центры, ярмарки и специализированные места
Поделитесь своим мнением

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

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

Рубрики
Свежие записи
Свежие комментарии
Метки
Геленджик Краснодар Турция автобус автовокзал автостанция атмосфера аэропорт билет вкусный вода город грузинский дорога достопримечательность жизнь история как добраться как доехать канатная дорога карта квартира курорт маршрут море музей набережная остановка отдых отель парк пляж полезный проще простого путешествие район расписание река рецепт самостоятельно стоимость турецкий храм цена центр
Хороший отзыв
Яндекс.Метрика
© 2016 - 2020 Хороший отзыв · Разумно · Дельно · Опытно · Идейно