Честно говоря, кодинг на JavaScript может быть настоящим геморроем, причём постоянным. Тем не менее, на заре jQuery весь этот ужас остался в прошлом.

Jquery — это не новый язык программирования и не отдельная платформа, это предварительно написанный скрипт, который работает на клиентской стороне, используя всю мощь JavaScript. Он стал даром небесным, особенно для разработчиков внешнего интерфейса.

Как бы очаровательно это не звучало, для тех, кто только вступил на путь веб-разработки, важно иметь хотя бы базовые знания по JavaScript. В противном случае, с jQuery или без оного, использование этих скриптов всегда будет непростой задачей.

Тем не менее, всего лишь одним поиском в Google вы можете легко найти бесчисленный список источников с бесчисленным количеством jQuery-сниппетов. Но в поисках лучшего может пройти немало времени. Чтобы избавить вас от этих проблем я собрал вместе некоторые мощные jQuery-сниппеты, которые пригодятся любому разработчику.

1. Переключение таблицы стилей

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

2. Запрет правого клика мышкой

Некоторые веб-разработчики отключают контекстное меню, вызываемое правым кликом, на их веб-страницах. Одной из частных причин этого является попытка отпугнуть воров картинок. (На всякий случай подчеркну, это не является хоть сколько-нибудь действенной мерой — ни HTML-код, ни картинки невозможно надёжно защитить в принципе). Независимо от причин, мы можем отключить появление меню по правому клику, используя этот простой сниппет.

3. Отключение/включение поля ввода

Для отключения:

Для включения:

Часто мы отключаем отдельные поля, которые могут быть включены если посетитель отмечает или заполняет предыдущие поля. К примеру отключаем кнопку отправки формы, которая может быть включена если пользователи отметили бокс «Я принимаю условия». Используйте вышеупомянутые скрипты для отключения и включения полей.

4. Создание кликабельных DIV'ов

Если вы хотите добавить ссылку ко всему элементу DIV и сделать его кликабельным, этот jQuery-сниппет для вас. Когда пользователь кликает в любом месте DIV'а, ‘myBox’ будет искать ссылку класса ‘myBox’ внутри этого DIV'а и перенаправлять пользователя на найденную ссылку.

5. Загрузка внешнего контента

Никогда ещё загрузка внешнего файла с сервера не была столь простой. Используйте этот скрипт для проверки и оценки результата.

6. Прокрутка наверх

Это довольно распространённый и мощный сниппет, который возвращает пользователей наверх проще и быстрее. Плагин позволяет пользователям вернуться в верх страницы независимо от того, где он находился. Например, если пользователь долистал до конца длинной страницы, он может немедленно вернуться наверх, кликнув кнопку «Вернуться на верх» или «Вверх». Вы можете найти хорошие примеры этого сниппета на почти каждом социальном сайте.

7. Сенсор мобильных устройств

Эта славная маленькая библиотека — обязательный инструмент для каждого разработчика, которая позволяет выявить мобильное устройство, которое используется для сёрфинка по вашей веб-страничке. Пользование этим скриптом за последнее время стало обычным делом благодаря увеличившемуся количеству веб-сайтов в Интернете с отзывчивым дизайном.

8. Открытие всплывающих окон

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

9. Обновление части страницы

Иногда мы хотим обновить определённую секцию страницы, чтобы показать обновления, при этом оставив остальную часть страницы без изменений. Мы делаем это используя этот скрипт. Вы можете видеть этот скрипт в действии почти на всех новостных порталах, где новостные заголовки обновляются каждые несколько секунд.

10. Показ полосок в таблице

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

11. Поправляем ссылки на отсутствующие изображения

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

12. Проверка выбран ли (Checked) чекбокс (Checkbox)

Одиночный чекбокс:

Все чекбоксы:

Хотите ли вы узнать выбран ли (Checked) одиночный чекбокс (checkbox) или сразу много чекбоксов, вы можете использовать вышеприведённый код. Код совместим только с jQuery v 1.5, для 1.6 замените‘.attr’ на ‘.prop’.

13. Очистка поля ввода

Очистка поля ввода используется для подсказки пользователю, что они должны записать в определённое поле. С вышеприведённым скриптом, поле будет отображать определённый текст, например «Ваше имя», который будет немедленно стёрт, как только пользователь кликнет (переведёт фокус) на это поле.

14. Валидация email адреса

Абсолютно необходимый скрипт — библиотека валидации email'а, она нужна для каждого сайта, который имеет форму «связь с нами» или любую другую форму в которой требуется валидный email пользователя. Если пользователь вводит неверный адрес электронный почты, он будет немедленно оповещён сообщением о неверной почте.

15. Открытие внешних ссылок в новом окне

Вручную прописывание атрибутов для внешних ссылок на вашей веб-страницы ‘target=”_blank” может быть очень тоскливым занятием. Вы можете избежать этой ситуации используя данный выше скрипт.

Подведение итогов

jQuery-сниппеты, которые я представил в вышеупомянутом списке — являются наиболее популярными и широко используемыми скриптами на большинстве веб-сайтах. Не стесняйтесь использовать их по своему усмотрению и дайте мне знать, если что-то не работает (хотя я уверен, что всё определённо работает). Наслаждайтесь!


Кстати, ведь популярный сайт создаёт значительную нагрузку на хостинг. Важно, чтобы ваш хостер обеспечивал устойчивую работу в любых ситуациях, чтобы сайт не «лежал» от отключений электричества в дата центре, частом смене программного обеспечения, частых DdoS-атаках или просто от нагрузок сайтов и т.д. Ведь пользователям это быстро надоест и они уйдут на сайт-конкурент. Я перебрал довольно много решений и нашёл очень хороший вариант — 100 рублей в месяц! За эти деньги даётся профессиональный хостинг, с отличным аптаймом, с бесплатным доменом второго уровня в подарок (!), с 2 гигабайтами места на SSD диске, с неограниченным количеством баз данных, с возможностью подключать неограниченное количество новых доменов (платить придётся только за каждый новый домен — 139 рублей). Вообще, всего хорошего так много, что проще всего посмотреть это здесь.

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

Похожие темы

Был ли jquery.com скомпрометирован (взломан)?... И всё-таки он взломан, продолжение здесь.   Сегодня рано утром RiskIQ опубликовал сообщение в блоге, утверждающее, что веб-сервер ...
Как выделить и скопировать текст на сайтах, которы... Всегда — сейчас и раньше — бродя по просторам Интернета я натыкался на сайты, которые не позволяют скопировать часть текста или весь отображаемый текс...
jQuery.com скомпрометирован (взломан)!... Отродясь такого не видали, и вот опять! (Виктор Степанович Черномырдин)   Сегодня (24 сентября) в 11:15 североамериканского восточн...
jQuery 3.0: Следующие поколения В это трудно поверить, прошло уже почти восемь лет как был выпущен jQuery. Веб-разработка значительно изменилась за эти годы, и jQuery изменился вме...
Новости софта от 13 февраля 2015 года (jQuery, Ver... jQuery UI 1.11.3 Вышла третья версия jQuery UI из линейки 1.11. Пакет с темами для этой версии можете скачать по этой ссылке: http://jqueryui.co...