В наше время среда front-end разработки быстро развивается, и современные браузеры достаточно хорошо реализовали работу с DOM/BOM API. Вам не нужно изучать jQuery с нуля для манипуляцией DOM'ом или объектами событий. В то же время, благодаря лидирующим front-end библиотекам, таким как React, Angular и Vue, манипуляция DOM'ом напрямую становится антипаттерном, а jQuery теряет свою значимость.

Вам не нужен jQuery. Примеры кода jQuery на чистом JavaScript

#js #jquery

​​Jquery Line Progress Bar — легковесный прогресс бар для вашего сайта

Демо | Документация

#jquery #progressbar

​​slick.js - адаптивный слайдер с очень большим функционалом

Демо и документация

#jquery #slider

​​Небольшой, удобный JQuery плагин для изменения названия и фавикона страницы, при уходе пользователя с вашего сайта.

iMissYou.js

#jquery

​​Turntable.js — библиотека, которая позволяет из нескольких картинок сделать одну модель, которую можно вращать. Плюсы этой библиотеки в том, что она легковесная, отзывчивая, легка в установке и настройке.

Демо и документация

#js #jquery

​​Datedropper.js — очень крутой jQuery плагин, который обеспечивает быстрый и простой способ управления полем ввода даты. Классно выглядит, поддерживает много языков, работает на мобильных устройствах.

Демо | GitHub

#js #jquery

​​ANIMSITION — простой jQuery плагин для создания анимированных переходов между страницами. Большой и разнообразный набор эффектов (всего 58 штук).

Демо | GitHub

#jquery #animation

​​Passy — инструмент на jQuery для оценки сложности паролей. Так же он может генерировать реально сложные пароли.

Демо | GitHub

#js #jquery #security

​​Tooltipster — библиотека для создания всплывающих подсказок на сайте. Огромное множество конфигураций для кастомизации.

Вот так просто создается всплывающая подсказка:
<p class="tooltip" title="Hello world!">Some text</p>

Демо | GitHub

#tooltip #jquery

​​Knob — это jQuery плагин, который превращает обычные инпуты в красивые "диски". В этом плагине используется canvas и все элементы можно кастомизировать под свои нужды. Советую взглянуть на демо.

Демо | GitHub | Tutorial

#jquery #input

​​Pickadate.js — это jQuery плагин, который создает адаптивные виджеты выбора даты и времени. Очень легко использовать и кастомизировать, работает на мобильных устройствах.

Демо | GitHub

#datepicker #jquery

​​Scrollpath — это плагин для создания своих кастомных путей элементов при скролле старницы. Для рисования путей используется канвас и методы moveTo, lineTo и arc.

Демо | GitHub

#jquery #scroll

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

Демо | GitHub

#jquery #scroll

​​Shuffle Letters — это jQuery плагин, который создает интересный эффект вывода текста. Буквы выводятся рандомно, одна за другой.

Демо | GitHub

#text #animation #jquery

​​Number Plugin — плагин для стилизации <input type="number">. Плагин создаёт рядом текстовое поле и 2 стрелки с поддержкой полной кастомизации, проект постоянно дорабатывается.

Демо | GitHub

#jquery #input

​​Cash — это абсурдно маленькая альтернатива jQuery для современных браузеров, которая цепочки управления элементами DOM в стиле jQuery. Библиотека не нацелена на полное покрытие всех методов jQuery, а наоборот фокусируется только на самых часто используемых методах.

GitHub

#js #jquery

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

С Turntable.js вы можете легко создать классные вращающие демки 3D объектов путём размещения большого массива изображений в on-hover слайдер. Это позволяет пользователям быстро пройти через весь набор изображений, создавая эффект Flipbook и демонстрацию продукта со всех сторон.

Демо | GitHub

#js #JQuery #3d

ItemSlide.js — простой и красивый сенсорный слайдер-карусель.

Инструмент можно настраивать под любые экраны — как удобную "бегущую" строку, так и широкоформатный слайдер.

Демо | GitHub

#js #library #jquery

💡Оптимизация загрузки jQuery

Для оптимизации мы будем использовать CDN (Content Delivery Network).

Основные преимущества CDN:
– Уменьшение задержки – файл грузится с ближайшего к вам сервера
– Распараллеливание загрузки – браузеры ограничивают число одновременных подключений к одному домену, а так файлы могут грузиться параллельно
– Кеширование – есть большая вероятность, что в браузерном кеше посетителя файл уже лежит и это скорейший способ загрузить его.

Пример кода

 src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" charset="UTF-8"> </script>

В атрибуте src, желательно не указывать протокол вообще, тогда можно будет не заботиться о том http это или https.

А что делать в том случае, если CDN от google вдруг стал недоступен? Самый простой вариант — подгрузить локальную копию jQuery.
<script>
window.jQuery ||
document.write('<script src="js/vendor/jquery-3.5.1.min.js"><\/script>')
</script>

#optimization #jquery

📖 Javascript и jQuery. Интерактивная веб-разработка
🖋 Джон Дакетт, 2017

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

Вы узнаете, как сделать сайты более интерактивными и удобными для пользователей. Автор иллюстрирует применение сценариев JavaScript и библиотеки jQuery на реальных сайтах. В книге очень мало теории, она представляет собой практический справочник: новый пример сценарий или кода расположены на новой странице.
Буквально сразу вы сможете начать составлять работающие коды. Кроме того, вы научитесь читать и создавать сценарии JavaScript, использовать библиотеку jQuery для упрощения кода, применять технологии Ajax, API и JSON, пользоваться приемами фильтрации, поиском и сортировкой.

💾 Скачать книгу

WebDEV #book #js #jQuery #web