Шпаргалка по использованию jQuery
Шпаргалка по использованию 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 = ''; /* Перенаправление подобное клику по ссылке */
Полезные ссылки
Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.
Поделиться с друзьями:
Статьи из данной категории:
Комментарии
- Комментариев пока нет.