Добавление к изображению zoom-эффекта при наведении с помощью CSS и jQuery

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

jQuery: метод hasClass

Метод .hasClass() в jQuery возвращает true, если у блока есть искомый класс и false в противном случае.

Плавный скроллинг к блоку на jQuery

Реализация довольно проста. При клике по ссылке в навигации блокируем стандартное действие браузера, берем атрибут href, ищем блок с этим ID и вычисляем высоту от начала страницы. Добавляем плавную анимацию. Ниже пример HTML и jQuery кода.

Плавный скроллинг к блоку на jQuery

jQuery: текущий год на сайте

На многих сайтах в футере компании размещают надпись вида: Company Ⓒ 2010 - 2019. Естественно, текущий год обновляется не сразу или вовсе не обновляется.
Для решения этой проблемы можно использовить jQuery.

jQuery: всплывающий баннер с использованием cookies

В данном примере всплывающее окно на сайте с баннером или текстом реализуется с использованием библиотеки jQuery и плагина jquery.cookie.js. Скачать исходники можно в заключении поста. На изображении ниже пример окна с рандомной картинкой.

jQuery: всплывающий баннер с использованием cookies

jQuery: функция detach

Функция .detach() удаляет все выбранные элементы из DOM (указанный элемент и всех его потомков). В отличие от .remove() jQuery не удаляет информацию о элементе и поэтому он может быть восстановлен.

JavaScript: метод test()

Метод test проверяет строку на наличие совпадений с регулярным выражением. Метод возвращает true, если совпадения были найдены. И false, если нет.

Пример. Поиск в строке символа "e":

var string = "The best things in life are free";
var pattern = new RegExp("e");
var result = pattern.test(string);

jQuery: вызов события

Метод .trigger() вызывает событие у выбранных элементов, что приводит к запуску обработчиков этого события и имеет два варианта использования:

.trigger(eventType, [extraParameters])

eventType — тип вызываемого события. Например "click", "resize" и.т.д. (список всех событий см. ниже).
extraParameters — массив дополнительных данных, передаваемых в обработчик.

Перезагрузка страницы при помощи JavaScript

Есть несколько способов, чтобы обновить текущую страницу при помощи JS:

<input type="button" value="Перезагрузить страницу" onClick="window.location.reload()">
<input type="button" value="Перезагрузить страницу" onClick="history.go(0)">
<input type="button" value="Перезагрузить страницу" onClick="window.location.href=window.location.href">

 

JavaScript: переменная в регулярном выражении

Для того, чтобы использовать переменную в регулярном выражении в JavaScript, необходимо прибегнуть к помощи конструктора new RegExp(…).

Пример:

var type = 1;
var regex = new RegExp('type='+type,'g');

Таким образом, создается динамический regex-объект. Пример дальнейшего использования:

'mystring'.replace(regex, 'newstring');