10 JQuery снипетов, которые Вы должны знать.

0
9297

Мощная библиотека JQuery используется практически на всех сайтах. Библиотека позволяет легко повысить динамику и юзабилити сайта.

Не секрет, что сейчас требования к сайтам очень высоки и во многих случаях требования решаются путем использования данной библиотеки. Ниже представлен список из 10 небольших кусочков кода (снипетов), с помощью которых решаются большинство проблем и реализуется требуемая функциональность для сайта.

Данный список снипетов, очень часто применяется при разработке web сайта. Можете сохранить его в закладки, чтобы не забыть.

1) Подключаем JQuery

Самый главный и часто используемый снипет, без подключения библиотеки JQuery ничего работать не будет.

С помощью этого кода, мы подключаем последнюю, сжатую версию JQuery. Это самый оптимальный способ подключения библиотеки. Если требуется другая версия JQuery, в ссылке нужно указать версию.

2) Кнопка вернуться наверх

Как вы видите, мы использовали простые функции Jquery — animate и scrollTop. В данном случае, значение scrollTop 0 , это позволит подняться в самый верх страницы, если вы хотите смещения в 100px от верха, то поменяйте значение на 100.

Плавное перемещение действует на протяжении 800 мс, вы можете изменить данный параметр.

3) Изменяем класс тега при наведении (hover)

Часто требуется изменить стиль элемента сайта, когда пользователь наводит на него. Для этого используется данный код, при наведении элементу с  классом btn добавляется класс hover и наоборот.

4) Скрываем/показываем элемент при клике

Иногда требуется скрыть или показать элемент страницы, с этим делом прекрасно справляются функции fadeToggle() и slideToggle() . А благодаря использованию события click элементы будут исчезать или появляться при нажатии.

5) Выравниваем два div’a по высоте

Часто приходится динамически выравнивать div по высоте другого div’а, не зависимо от их содержания , тут на помощь приходит данный снипет, мы указываем min-height первого div равным высоте другого div’а.

6) Делаем зебру из списка

Когда требуется сделать полосатый список, с помощью JQuery мы меняем фон каждого нечетного элемента, получается эффект зебра. Данный снипет легко делает свое дело!

7) Определяем какая клавиша была нажата

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

8) Отключаем правую клавишу мышки

Некоторые используют данный трюк, чтобы запретить пользователям использовать меню ПКМ на сайте.

9) Заменяем не загрузившиеся (сломанные) изображения

Бывает ситуация, когда картинка не загружается (много причин), целесообразно заменить её на временную, например если не грузится пользовательский аватар, будем показывать картинку с вопросительным знаком или пустым лицом.

10) Блокируем кнопку формы

Данный снипет можно использовать в том случае, когда требуется заблокировать кнопку до того момента, пока пользователь не заполнить все поля формы, как только поля заполнены, мы разблокируем кнопку:

Заключение

Данные кусочки кода используются очень часто, и повторяются каждый раз. Целесообразно сохранить их и использовать по мере необходимости. Спасибо за внимание!

ОСТАВЬТЕ ОТВЕТ

Пожалуйста оставьте комментарий!
Введите ваше имя