Логотип Валидатор Валидатор Качество создания сайта

Просто JQUERY


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

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

jQuery

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

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

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

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

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

* * *

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

Основы jQuery

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

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

Важно! jQuery - это тоже JavaScript, т.е. "скриптовые" файлы с расширением js.
Если Вы отключили у себя в браузере интерпретатор javascript, увидеть действие скрипта Вы не сможете!

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

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


МЕГА-меню Особенно полезный!

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


РОТАТОР контента Особенно полезный!

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


Функции hide и show

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

Функция fadeTo

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Фотогалерея

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

Галерея 2

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

Слайд-шоу Особенно полезный!

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

Личная страничка Особенно интересный!

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

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

Веб-дизайн Блога Особенно интересный!

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

* * *

Заключение

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

jQuery

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

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

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

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

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

Назад

ВВЕРХ

Все права защищены. Copyright © 2009 - 2017 Коротеев Владимир.

Protected by Copyscape Duplicate Content Check
Яндекс.Метрика
Рейтинг@Mail.ru