Шпаргалка по использованию jQuery

Шпаргалка по использованию jQuery включает в себя: события загрузки страницы, манипуляции с DOM-деревом, поиск необходимых элементов, анимация и многое другое.

События загрузки страницы

Выполнение кода после загрузки DOM-дерева

$(function() {
  /* код */
});

или

jQuery(function($) {
  /* код */
});

Выполнение кода после ПОЛНОЙ загрузки ВСЕЙ страницы (или отдельного элемента)

$(window).load(function () {
  /* манипуляции с готовой страницей */
});

$('img.pig').load(function () {
  /* действия после загрузки изображения с классом pig */
});

Выполнение кода при уходе со страницы

$(window).unload(function(){ 
  /* код */
});

События мыши

$('.element').hover(function(){     //при наведении курсора

  $(this).addClass('anyClass');     //добавление класса

}, function(){                      //при покидании курсора

  $(this).removeClass('anyClass');  //удаление класса

});

Манипуляции при помощи jQuery

Изменить текст

$('.element').text('Новый текст');

Добавить контент внутрь выбранного элемента

/* где вставить --> что вставить */

/* добавление в начало выбранного элемента */
$('.where-to-insert').prepend('<a class="new">what-to-insert</a>');

/* добавление в конец выбранного элемента */
$('.where-to-insert').append('<a class="new">what-to-insert</a>');

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

/* где вставить --> что вставить */

/* добавление перед выбранным элементом */
$('.where-to-insert').before('<span class="new">what-to-insert</span>');

/* добавление после выбранного элемента */
$('.where-to-insert').after('<span class="new">what-to-insert</span>');

Перемещение контента

/* что перемещаем --> куда перемещаем */
$('.what-to-move').appendTo('.where-to-move');

Скопировать и вставить контент

/* что копируем --> куда вставляем */
$('.what-to-copy').clone().appendTo('.where-to-insert');

Обёртка

Обернуть элемент в 'container'

$('.element').wrap('<div class="container"></div>');

Удалить обёртку

$('.element').unwrap('<div class="wrap"></div>');

Удаление

Удалить тег полностью

$('.element').remove();

Тег остаётся а содержимое удаляется

$('.element').empty();

Изменение CSS

Изменение стилей элемента(ов)

$('.element').css('border', '3px solid #f1f4f9');
/* или */
$('.element').css({'height':'8.5px', 'left':'-11px'})

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

Поиск элементов относительно заданного при помощи jQuery методов

$('.element').parent()      /* родительский элемент */
$('.element').child()       /* ребёнок */

$('.element:first')         /* первый элемент в наборе */
$('.element:last')          /* последний элемент в наборе */
$('.element:even')          /* нечётные */
$('.element:odd')           /* чётные */ 
$('.element:eq(0)')         /* номер элемента (первый) */

$('.element:has(".red")')   /* имеет класс 'red' */
$('.element').has('.red')   /* имеет класс 'red' */
$('.element').not('.red')   /* все выбранные элементы, не имеющие класс 'red' */

$('a[href="google.com"]')   /* с ссылкой на гугл */
$('a[href!="google.com"]')  /* все ссылки кроме ссылки на гугл */
$('a[href^="http"]')        /* все ссылки которые начинаются с 'http' */
$('a[href$=".ru"]')         /* все ссылки которые заканчиваются '.ru' */
$('a[href*="r"]')           /* все ссылки которые содержат 'r' */

Анимации

/* за 2.5 секунды ширина элемента станет '222px' */
$('.element').animate({
  'width': '222px'
}, 2500 );

Задержка анимации

/* через 1,8 секунды будет выполнена анимация 'fadeIn' */
$('.element').delay(1800).fadeIn();

Получение значений

$('.element').text()       /* получение текста */
$('.element').val()        /* получение значения атрибута 'value' элемента формы */
$('.element').attr('src')  /* получение значения атрибута 'src'

Обновление страницы и перенаправление с помощью JavaScript

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

window.location.replace('');    /* Перенаправление подобно HTTP-редиректу */
window.location.href = '';      /* Перенаправление подобное клику по ссылке */

Полезные ссылки

  • Подключение jQuery
  • Официальный сайт jQuery
admin