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

В данной подборке приводиться 10 примеров сниппетов jQuery.  

1. Поддержка HTML5 в устаревших браузерах:

HTML5 определенно представляет собой будущее веб разработки клиентский приложений. К сожалению, старые браузеры не распознают новых тегов, таких как header или section. Данный код принуждает старые браузеры распознавать новые теги HTML5.

Лучшим вариантом решения будет присоединять файл .js в раздел <head> вашей страницы HTML:

2. Проверяем поддержку браузером определенных свойств CSS3:

Здесь приводится простая функция jQuery для проверки поддержки браузером клиента определенных свойств CSS3. В данном примере проверяется свойство border-radius, но код можно легко модифицировать для проверки другого свойства.

Примечание: нужно опускать тире при передаче имени свойства в качестве парметра. Например, вместо  border-radius, нужно вводить “borderRadius” или “BorderRadius”

3. Отключаем клавишу “Enter” в формах:

По умолчанию, форма может быть отправлена нажатием клавиши “Enter”. Но в некоторых формах такой функционал может оказаться лишним и порождать некоторые проблемы при вводе данных. Ниже приведенный код подавляет функционирование клавиши “Enter” в форме.

4.Плавное проявление/затухание при наведении курсора мыши:

Еще один приятный визуальный эффект, который очень популярен — плавное проявление/затухание элементов при наведении на них курсора мыши. Следующий код устанавливает непрозрачность 100% при наведении курсора мыши, и 60% — при потере фокуса.

5. Плавная прокрутка для ссылки:

jQuery известен своим функционалом для создания визуальных эффектов. Простой, но приятный эффект — плавное проскальзывание содержания до ссылки. Следующий код создает такой эффект, когда нажимается ссылка с классом topLink.

6. Добавляем класс к тегу <body> если разрешен JavaScript:

Данный код представляет собой всего одну строку. Но это самый простой способ определить разрешение использования JavaScript в браузере клиента. Если разрешение есть, класс hasJS будет добавлен к тегу <body>.

7. Предварительная загрузка изображений:

Предварительная загрузка изображений очень полезна, ведь картинки будут загружаться, пока пользователь занят просмотром другого материала. С помощью jQuery задача решается очень просто:

8. Снабжаем ссылки атрибутом target=”blank”:

Следующий код будет открывать все ссылки, снабженные атрибутом rel="external" в новой закладке или окне. Код легко модифицировать для открытия ссылок только с определенным классом.

9. Равная высота колонок:

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

10. Получаем параметры URL:

Получение параметров URL с помощью jQuery — очень простой процесс.

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