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

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

Оглавление

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

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

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

$('input:checkbox:checked');

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

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

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

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

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

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

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

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

Выбрать элемент по его порядковому номеру в наборе (nth-child, nth-child-last) Нумерация начинается от 1.

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

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

$("#town option:nth-child(3)").after( $('<option value="Voronezh">Воронеж</option>') ); // добавить новый элемент option в списке select после 3-го элемента с начала

Выбрать элементы с исключающим условием :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

Узнать количество элементов в наборе (length, size) Свойство length работает быстрее, чем метод size(), поэтому его использование предпочтительнее.

sl = $(".ol2col li").length; // вернёт количество li в списке

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

Узнать текст выбранного пункта в списке 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)

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

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

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

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

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

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

Узнать самое длинное слово в списке в px. В переменную max попадет длина, в переменную elem — сам элемент.

var A = $('.ol2col li span'), max = 0, elem;
A.each(function () {
 if (this.offsetWidth > max)
 max = this.offsetWidth, elem = this;
});

Изменить свойства 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

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

$('#town option:selected').each(function(){
  this.selected=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();
});

Обработать событие потери фокуса элементом 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").bind("change paste keyup", function() {
  // команды
});

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

$("<div>", { id: "psk", text: "Привет!", css: {"left":"100px", "top":"120px"}}).appendTo("body");

Добавить 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();

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

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

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

function sorting(res, isAscOrder) {
  var mylist = $(res);
  var listitems = mylist.children('li').get();
  listitems.sort(function(a, b) {
    var compA = $(a).text().toUpperCase();
    var compB = $(b).text().toUpperCase();
    return (isAscOrder ? 1 : -1) * ((compA < compB) ? -1 : (compA > compB) ? 1 : 0);
  });
  isAscOrder = !isAscOrder;
  $.each(listitems, function(idx, itm) { mylist.append(itm); });
}

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

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

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

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

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

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

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

Округлить число в 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 - округляет в меньшую сторону

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

str = "  привет ";
pm = $.trim(str); // вернет: 'привет'

Получить часть строки между двумя заданными позициями символов(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) Нумерация начинается от 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); // "" (если позиция > длины строки, то возвращает пустую строку)

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

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

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

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

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

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

Работа с ассоциативными массивами в Javascript

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

Цикл перебирает элементы массива последовательно с индексами от 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);

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

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

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

// Преобразование в строку
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 = +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

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

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

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

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

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

Простой плавный спойлер

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(); }); // скрыть-открыть спойлер по клику

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

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

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