Просто JQUERY

Что значит "просто" jQuery

Эту страницу сделал "стартовой" для просмотра результатов обучения базовым методам технологии jQuery.
Почему назвал её "Просто jQuery"?
Здесь покажу эффекты только с использованием её "ядра", ещё БЕЗ подключения дополнительных модулей. Нужные скрипты писал сам.

Чтоб Вам легче было ориентироваться, поступил "как всегда": разбил всё на главы, где коротенькое описание и ссылка для перехода.

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

Постарался отобрать наиболее интересные эффекты.

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

Посмотреть тестовый сайт (ещё БЕЗ воздействия каких-либо технологий) можете ЗДЕСЬ

* * *

Начну с самого начала изучения этой технологии. Сразу станет ясно, чем сильно отличается jQuery от стандартного JavaScript.

Основы jQuery

Предлагаемый к просмотру раздел ещё не содержит никаких скриптов. Вообще-то, делал его для личного пользования в качестве пособия. Так всегда поступаю: вместе с конспектами в тетрадях создаю их аналог на HTML. Здорово способствует запоминанию нового материала.
Надеюсь, он будет полезен людям, изучающим технологию jQuery. СМОТРЕТЬ
(P.S. Разумеется, адреса папок и файлов указаны мои собственные.)

Кроме того, людям, желающим научиться практическому использованию jQuery, очень советую не пропустить мимо своего внимания два нижних подраздела с примерами слайд-шоу. СМОТРЕТЬ

В скриптах вирусов НЕТ. Гарантирую! Всё писал сам.

Сначала покажу то, что самому больше всего понравилось при изучении и тренировках по использованию jQuery. Это её способность "умещать большое в малом".

МЕГА-меню

Даже, если бы технология jQuery ничего больше не могла бы предоставить, её стоило бы изучать лишь только ради возможности создавать МЕГА-меню. СМОТРЕТЬ

РОТАТОР контента

Абсолютно то же самое можно сказать и про способности этой чудесной технологии для создания ротаторов контента на своём сайте. СМОТРЕТЬ

Функции hide и show

Их использование позволяет реализовать очень интересный эффект плавного исчезновения шапки сайта (да, чего угодно), с последующим её появлением.
СМОТРЕТЬ

Функция fadeTo

Ещё более интересный эффект. Шапка сайта начинает бледнеть, как бы тает, но не полностью, а потом снова становится яркой.
СМОТРЕТЬ

Автоматические циклы

Обеспечивают выборочное скрытие части элементов страницы. Прописал скрипту спрятать 2 из 4-ёх верхних рисунков.
СМОТРЕТЬ

"Самоходные" картинки

При загрузке страницы, картинки выделятся рамкой и начнут неспешно изменять своё местоположение. Выстроятся в другом порядке. Закончив работу, скрипт "радостно" сообщит Вам об этом.
СМОТРЕТЬ

Свернуть/Развернуть расчётную форму

Полезнейший эффект(!), позволяющий экономить очень много места на странице. Сворачивать/Разворачивать можно не только расчётные формы, а вообще что угодно, абсолютно любой блок.
СМОТРЕТЬ

Постепенное появление текста

Не менее интересный эффект плавного, постепенного появления текста на странице сайта. Подробно описал весь процесс, и дал два варианта кода для его создания.
СМОТРЕТЬ

Подсветка строк

При наведении курсора мыши на строку таблицы, она выделяется. Убрав курсор, всё становится прежним.
СМОТРЕТЬ

Проверка корректного ввода е-мейл

Сочетание методов обычного JavaScript и jQuery даёт интересную возможность проверять корректность заполнения полей формы, с их выделением рамками разного цвета, и блокировать от повторной отправки сообщения, заказа, и т.д.. Подробное, пошаговое описание.
СМОТРЕТЬ

Скрипт-помощник заполнения форм

Аналогично. С помощью обычного JavaScript и ядра jQuery можно написать интересный скрипт, облегчающий заполнение полей разных форм. В данном случае использовал его для создания страницы подписки.
СМОТРЕТЬ

Смена "умолчаний"

Кликните по кнопке "Отправить заявку". Вместо обычных действий "по умолчанию": отправка формы, добавится текст в указанное скриптом место. Сколько раз кликните, столько раз и добавятся абзацы с текстом.
СМОТРЕТЬ

Клонирование

Очень интересный метод. Он разрешает посетителю кликом добавлять рисунки на страницу сайта (в своём браузере, разумеется).
СМОТРЕТЬ

Счётчик кликов

Позволяет показать пользователю, сколько раз(?) он кликнул по тому или иному элементу веб-страницы.
СМОТРЕТЬ

Фотогалерея

jQuery предоставляет отличную возможность организовать фотогалерею на своём сайте. Много времени ушло бы на самостоятельное написание такой же в стандартном JavaScript!
СМОТРЕТЬ

Галерея 2

Решил показать ещё одну фотогалерею, не очень сильно отличающуюся по внешнему виду от размещённой выше, но имеющую принципиальное отличие. Какое?
Написал на самой странице.
СМОТРЕТЬ

Слайд-шоу

Не случайно отметил "звездой", предлагаемый к просмотру подраздел. Он особенный! Сделан не на тестовом сайте, а на основном, и содержит 8(!) видов слайд-шоу, создание которых подробнейшим образом прокомментировал.
Кроме того, это двойной подраздел, что позволяет наглядно сравнить jQuery с возможностями базовых технологий интернета.
Будет весьма полезен людям, изучающим jQuery и, особенно, желающим с её помощью создать у себя на сайте такие же слайдеры.
СМОТРЕТЬ

Личная страничка

Аналогично. Не мог не отметить "звездой" и этот подраздел. Это сайт-визитка, имеющий свой собственный уникальный дизайн.
Расположил его в своём собственном каталоге, с собственной таблицей стилей и прочее.

Показываю комплексное, точечное применение освоенных современных технологий на примере действующего сайта.
Можно его использовать, как аналог главной страницы основного ресурса.
СМОТРЕТЬ

Веб-дизайн Блога

Точно так же. И этот подраздел заслужил быть отмеченным. Это сайт, сделанный в стиле "блог", и у него тоже свой собственный уникальный дизайн.
Расположил в отдельном каталоге. Имеет свою таблицу стилей, даже целых три, скрипты, обработчики, и так далее.
СМОТРЕТЬ

* * *

Заключение

Конечно же, показал здесь не все базовые возможности, предоставляемые библиотеками jQuery, а лишь некоторые. Те, которые самому понравились больше всего. А так их гораздо больше!
Базовые, как уже писал, означает: без подключения дополнительных модулей, только используя "ядро". К нему же можно легко подключать их, значительно расширяя возможности "Просто jQuery".

Не зря создатели этих замечательных библиотек взяли себе девизом слова: "Write less, do more.", что переводится как: "Пиши меньше, делай больше."

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

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

Мой отзыв об этой технологии, и почему изучив, НЕ использовал её для остальных страниц сайта, сможете узнать в разделе "Современные технологии".

Кликнув по нижней стрелке, вернётесь на промежуточную страницу выбора.

ВВЕРХ