Как освоить технологию программирования jQuery
Сначала разрешите пару слов о самой технологии jQuery. Разработана она на базе JavaScript, а это значит, что выполнение программ происходит на стороне клиента — выполняется в браузере. Тем самым, мы можем заставить наши Веб-приложения и сайты быть интерактивными: пользователь может как угодно играться с переданными ему данными, а новые данные могут поступать в его браузер без необходимости перезагрузки страницы.
Если честно, jQuery вряд ли способна на что-то новое, на что не способен JavaScript. Но эта новая технология способна в разы сократить и упростить код. Правда, для работы данного фреймворка требуется подключение дополнительной JS-библиотеки, но для серьёзных проектов эти дополнительные 89 КБ (вес последней версии библиотеки jQuery) с лихвой компенсируются.
Приведу пару примеров. Такая абстрактная задача. Как вы думаете, сложно в блок на странице с идентификатором «text» вписать текст из следующего за ним абзаца и при этом в течении секунды изменить его высоту до 200 пикселей? Эта задача решается очень просто:
$('#text').html ($('#text ~ p').html ()).animate ({height:'200px'}, 1000)
Как видите, в решении задачи меньше букв, чем в её описании. Вот такие языки программирования мне нравятся. Не представляю даже, сколько байт занял бы код, решающий подобную задачу на «голом» JS.
А теперь самое интересное: как освоить эту замечательную технологию. Я не волшебник и не заслуженный сенсей РФ, но знаю действенный способ: поставить перед собой интересную конкретную задачу, и решить её. Для меня такой задачей стал слайдер для сайта (картинка справа).
По задумке, слайдер не должен был занимать много места, уютно расположившись в сайдбаре. Перелистывание слайдера сопровождается некоторыми эффектом анимации. Но самое интересное — при наведении слайдер увеличивает размер в 4 раза, остальное пространство страницы затемняется, и с изображения убирается дымка.
На картинке слева вы видите развёрнутый слайдер. В полноразмерном режиме у него появляется кнопка «закрыть», по нажатию которой он возвращается в исходный размер (для удобства также сворачивает слайдер и клик по затемнённой области страницы).
Слайды сменяются автоматически, и есть также возможность ручного переключения слайдов. Для этого предусмотрена кнопка «плей / пауза» вначале ряда кнопок слайдов (внизу слайдера). Также переход в ручной режим происходит, если пользователь начинает вручную переключать слайды.
До начала работы над слайдером я имел лишь общие представления о технологии jQuery. Теперь же я в значительной степени расширил свои знания. Всё это — без репетиторов, учебников и самоучителей. Просто, когда ищешь в Сети ответ на какой-то конкретный вопрос, то это интересней, ближе к практике, и сразу видно, какую ценность имеет найденный источник информацией.
Важный момент: решайте поставленную задачу с нуля. Когда будете хорошо разбираться в технологии программирования, то сможете вносить изменения в готовые коды для конкретных задач. Пока же, начните с малого:
- выбор объектов jQuery при помощи селекторов;
- изменение CSS свойства выбранного объекта;
- реакция на события (наведение мыши, клик);
- использование условного оператора и переменных JS;
- создание собственных (пользовательских) функций.
И пусть трудности вас не останавливают. На решение некоторых текущих задач мне, порой, требовалось до часу времени на поиски. Но решение всё же находилось: когда уже почти отчаивался, и в самом неожиданном месте. Иногда просто осеняла мысль. Как видите, всё дело в заинтересованности. А интерес практический значительно сильней теоретического.
5 комментариев на «Как освоить технологию программирования jQuery»
Ваше мнение
О, вот этот слайдер мне нравится. Обычно слайдеры загромождают полстраницы, а этот и места много не занимает, и оттого не менее функционален
Да, мне тоже такой интерактивный слайдер очень понравился
В дизайн очень гармонично вписывается 
Молодец, Хайтек!
Очень красиво!
Надо себе попробовать поставить!
Прикольно обяательно попробую !