Try jQuery — новый интерактивный самоучитель по jQuery / Habr
Раньше я как-то не стремился глубоко изучать jQuery, поскольку работаю в основном с back-end. Однако самоучитель TRYjQuery, ссылка на который пришла в недавнем письме от CodeSchool, вызвал интерес с первых кадров.В последнее время видна тенденция по созданию интерактивных «обучалок». Сходу вспоминается KhanAcademy, различные онлайн-учебники по тому же jQuery. Разработчики TRYjQuery пошли тем же путём, но при этом сделали свой самоучитель максимально качественным в плане подачи, упаковки материала.
Опять-таки, я не знаток jQuery и не могу судить о качестве самих материалов внутри и о том, насколько много даёт этот курс (я его не прошёл, только начал). Хотя некачественные материалы вряд ли бы расположили на поддомене jquery.com, да и разработчик — CodeSchool — весьма известен. Но зато могу дать оценку с точки зрения новичка: всё сделано так, что возникает желание учиться и продолжать обучение.
В самом начале нас встречает видеоролик. Разработчики курса даже не поскупились на хорошую заставку, такое ощущение, что начинаешь смотреть сериал:
Затем нас знакомят с самим курсом, некоторыми основами jQuery, и дают инструкцию по работе с обучающей средой.
Качество роликов высокое. Всё, что говорит ведущий, визуализируется. Сам ведущий очень «живой», т.е. это не скучная лекция. Впоследствии можно скачать слайды по уроку.
После видеоролика приступаем к выполнению заданий:
В целом структура курса следующая: есть несколько разделов, в каждом разделе мы смотрим видео — выполняем несколько заданий, опять видео — ещё несколько заданий.
В каждом задании есть некоторый HTML-код и задача, которую нужно выполнить с помощью jQuery. На первых заданиях в нижней части экрана есть консоль, куда и вводим код. В процессе ввода выбираемые элементы подсвечиваются.
Впоследствии вместо консоли нам могут предложить редактировать HTML или javascript-код.
Выполняя задания, зарабатываем очки:
К каждому заданию можно получить подсказки и, если они не помогли, то узнать ответ. Что интересно, за подсказки очки не снимаются. Но вот если посмотреть ответ, то за это снимается 75 очков. Также в процессе обучения зарабатываются значки.
В целом очень приятные впечатления. Единственное что — сравнив скорость прохождения первых разделов и их общее количество (шесть), сложилось ощущение, что курс очень маленький. Возможно, это обманчивое впечатление из-за лёгкости первых «вводных» заданий. А может быть, они и не ставили целью сделать какой-то сверх-объёмный курс, недаром же он называется «try» — мол, попробуйте, а дальше уже сами.
Предлагаю читателям не только высказать в комментариях мнение об этом курсе, но и поделиться ссылками на сравнимые по качеству интерактивные курсы (даже если они проскальзывали в постах ранее).
Ещё раз ссылка — TRYjQuery.
jquery | ProgBook — книги и учебники по программированию
Учебник «Изучаем jQuery» является незаменимым в изучении jQuery – JavaScript фреймворка, который завоевал огромное признание среди программистов. Библиотека jQuery применялась для создания более 500 тысяч ведущих сайтов мира. При помощи данной библиотеки и описанных в издательстве приёмов и примеров, каждый читатель сможет эффективно и быстро добавить уникальную и незаменимую функциональность на свой сайт.
Второе издание «Изучаем jQuery» является увлекательной и практичной книгой для изучения основ jQuery, где можно изучить все нюансы добавления анимации и интерактивности на веб-сайты. Автор понятным языком описывает сложные методики, виджеты интерфейса пользователя, а также совершенно новый фреймворк jQuerly Mobile. Книга рассчитана как для начинающих разработчиков, так и для опытных программистов, которые наверняка при помощи данного издания пополнят запас своих знаний.
Справочное пособие и одновременно «введение в язык», руководство по jQuery рассказывает о том, как использовать JavaScript на более высоком уровне с экономием времени и сил. Книга предназначена для читателя, уже имеющего представление о web-программировании.
Очень быстро развивающееся ответвление от JavaScript, библиотека jQuery становится всё более и более популярной у web-разработчиков. Множество тех операций, которые заставляют программиста «изобретать велосипед», в jQuery максимально автоматизированы, освобождая время и силы разработчика для собственно работы над проектом. Авторы пособия выбрали целевой аудиторией программистов, уже знакомых с технологией Ajax и языком web-сценариев JavaScript.
На практических «лабораторных» примерах рассматривается обработка данных, поступающих от различных «компонентов ввода» HTML-документа, работа с «событиями от пользователя», взаимодействие библиотеки jQuery с другими web-технологиями. Книга «jQuery. Подробное руководство по продвинутому JavaScript» и её авторы Бер Бибо и Иегуда Кац подробно рассказывает обо всех сильных сторонах jQuery, включая его уникальную способность сокращать код в несколько раз путём составления «цепочек» из команд.
В книге «PHP и jQuery для профессионалов» представлена информация, которая позволяет приступить к самостоятельной разработке эффективных веб приложений на базе jQuery, AJAX, а также объектно-ориентированных средств PHP. При соблюдении всех рекомендаций, содержащихся в книге, читатель в короткие сроки имеет возможность начать применять предлагаемые современные методы разработки PHP-приложений, при этом сочетая их с инструментами jQuery с целью создания пользовательских интерфейсов, которые отличаются высокой степенью интерактивности.
Работа над примером приложения позволяет читателю изучать основы объектно-ориентированного программирования на PHP, а также приобрести необходимый опыт при работе с библиотекой jQuery. При этом материал изложен в доступной форме так, чтобы даже новичок смог начать работать в данной области. В книге подробно рассматриваются следующие темы:
— базовые сведения о библиотеке jQuery;
— каким образом происходит проектирование пользовательских интерфейсов, которые осуществляют свою деятельность под управлением AJAX;
— способы расширения библиотеки jQuery с помощью пользовательских подключаемых модулей;
— проведение проверки корректности форм с помощью регулярных выражений.
Книга содержит множество полезных советов, а также предлагает к изучению ряд профессиональных приемов, после изучения которых можно сразу же приступать к созданию привлекательных приложений.
Книга «Изучаем jQuery 1.3. Эффективная веб-разработка на JavaScript» посвящена библиотеке jQuery версии 1.3, ее основам и способам создания с ее помощью интерактивных сайтов, становящихся все более популярными. С помощью jQuery читатель научится упрощать решение сложных задач и автоматизировать типичные задачи. jQuery основана на стандартных технологиях HTML и CSS, в связи с этим веб-дизайнеры, мало знакомые с программированием довольно быстро смогут научиться ее использовать.
Преимущество библиотеки jQuery в ее концептуальной целостности, что наверняка будет оценено опытными программистами. В книге освещены принципы применения селекторов, способы организации взаимодействий и использования анимационных эффектов. Рассмотрены типичные ошибки, связанные с использованием AJAX и широких возможностей языка JavaScript, даны рекомендации по их избеганию. Книга предназначена для разработчиков, стремящихся улучшить пользовательский интерфейс, и веб-дизайнеров, желающих освоить интерактивные элементы страниц. Для полного понимая излагаемого материала желательны базовые знания языка JavaScript и навыки использования HTML и CSS. Умение работать с библиотеками JavaScript, в том числе jQuery, не требуется.
В справочнике «jQuery. Новый стиль программирования на JavaScript» описывается основная функциональность и возможности библиотеки jQuery, которая используется в весьма широком диапазоне задач, таких как оперирование содержимым и параметрами элементов документа DOM, реализация обработчиков событий, механизм селекторов и работа с данными форм. Книга раскрывает способности и особенности технологии AJAX во взаимодействии с сервером и обмене с ним данными без перезагрузки веб-страниц. Описывается программный интерфейс доступа к AJAX через библиотеку jQuery, основные методы и свойства компонента XMLHttpRequest, набор визуальных компонентов с готовыми решениями, входящих в состав библиотеки jQuery UI. Последние могут использоваться любым программистом, даже если он не владеет особыми знаниями по JavaScript и jQuery. Библиотека jQuery UI дает возможность встраивать в документ необычные компоненты, разнообразные диалоговые окна, панели с вкладками, позволяет обеспечить перетаскивание мышью всех элементов окна. Обилие примеров, содержащихся в книге, поможет начинающим веб-разработчикам использовать ее в качестве практического самоучителя, а более опытные программисты всегда смогут обратиться к ней как к справочнику. Для полноценного усвоения материала необходимы знания основ PHP и JavaScript. Книга предназначена для программистов.
Издание «jQuery. Подробное руководство по продвинутому JavaScript» — это справочное руководство и введение по jQuery — мощнейшей платформе, предназначенной для разработки веб-приложений. Здесь детально описывается, как необходимо выполнять обход документов HTML, добавлять поддержку Ajax в веб-страницы, обрабатывать события, а также воспроизводить визуальные эффекты и анимацию. Отметим, что уникальные «лабораторные страницы», безусловно, помогут закрепить изученный материал на практических примерах. В этой книге тщательно рассмотрены аспекты взаимодействия jQuery с прочими инструментами и платформами, а также методы проектирования модулей расширения для вышеуказанной библиотеки. Издание предназначено для разработчиков, которые знакомы с технологией Ajax и языком JavaScript, а также хотят создавать понятный и краткий программный код. Способность jQuery составлять своеобразные «цепочки» из команд даёт возможность выполнять ряд последовательных операций над компонентами страницы, благодаря чему код уменьшается втрое.
jQuery. Основы
Приветствую Вас друзья. В данном видео я хотел бы представить Вам новый курс по изучению основ библиотеки jQuery.
Для тех, кто не знает jQuery – это специальная библиотека или фреймворк языка JavaScript, который значительно облегчает работу с элементами HTML страниц, то есть добавление новых элементов, изменение содержимого существующих, изменение атрибутов, стилей, реализация анимационных эффектов и т.д. При этом JQuery, позволяет создавать скрипты быстрее, эффективнее и главное кроссбраузерно.
Данный курс будет полезен всем, кто знаком с основами языка JavaScript и желает научиться использовать данный фреймворк для создания собственных скриптов или изменения уже существующих.
Изучение библиотеки мы начнем с абсолютного нуля, то есть, для начала, научимся выбирать элементы HTML страниц, используя инструменты jQuery, далее постепенно от урока к уроку будем изучать доступные методы, позволяющие осуществлять различные манипуляции с выбранными элементами. И конечно же в завершении, научимся отправлять асинхронные запросы, то есть использовать метод AJAX, потому как с jQuery – это очень удобно и легко.
Все уроки курса:
Количество уроков: 16
Продолжительность курса: 11:24:52
Автор: Виктор Гавриленко
Меня зовут Виктор Гавриленко. Еще учась в институте, начал увлекаться компьютерными технологиями и программированием, на протяжении многих лет усиленно занимаюсь разработкой интернет сайтов и веб-программированием.
Описание курса: JQuery, позволяет создавать скрипты быстрее, эффективнее и главное кроссбраузерно. Данный курс будет полезен всем, кто знаком с основами языка JavaScript и желает научиться использовать данный фреймворк для создания собственных скриптов или изменения уже существующих
Категории премиум
| Функция | Описание |
|---|---|
| $.contains() | Позволяет проверить и возвратить логическое значение, которое определяет является ли элемент DOM потомком другого элемента DOM. |
| $.data() | Позволяет сохранить произвольные данные, связанные с указанным элементом, и/или возвращать заданное значение. |
| $.each() | Универсальная функция итератор, которая может использоваться для перебора элементов объекта, так и массива, применяя функцию обратного вызова к каждому элементу массива, или объекта. |
| $.extend() | Позволяет объединить содержимое двух, или более объектов в один объект. |
| $.fn.extend() | Позволяет объединить содержимое объекта с прототипом jQuery, чтобы предоставить объекту методы экземпляра jQuery. |
| $.globalEval() | Позволяет выполнить определенный код JavaScript в глобальной области видимости. |
| $.grep() | Позволяет найти элементы массива, которые удовлетворяют фильтрующей функции, исходный массив при этом не изменяется. |
| $.inArray() | Производит поиск переданного значения в массиве и возвращает его индекс при нахождении, или значение -1, если не найден. |
| $.isArray() | Определяет, является ли переданное значение в параметре метода массивом JavaScript. |
| $.isEmptyObject() | Позволяет проверить является ли переданный объект пустым (не содержит перечислимых свойств — атрибут enumerable которых, имеет значение true). |
| $.isNumeric() | Определяет, является ли переданное значение в параметре метода числом JavaScript. |
| $.isPlainObject() | Позволяет проверить является ли объект простым объектом (созданным с помощью {}, или new Object). |
| $.isXMLDoc() | Позволяет проверить находится ли узел DOM внутри XML документа, или является XML документом. |
| $.makeArray() | Позволяет преобразовать массивоподобный объект в JavaScript массив. |
| $.map() | Позволяет перевести все элементы массива, или объекта в новый массив элементов, применяя функцию обратного вызова к каждому элементу массива, или объекта. |
| $.merge() | Позволяет объединить содержимое двух массивов в один массив. |
| $.noop() | Определяет пустую функцию. |
| $.now() | Возвращает число, представляющее текущее время. |
| $.parseHTML() | Позволяет преобразовать переданную HTML строку в массив DOM узлов. |
| $.parseXML() | Позволяет преобразовать переданную XML строку в XML документ. |
| $.removeData() | Позволяет удалить значения, которые были установлены с помощью метода $.data(). |
| $.trim() | Позволяет удалить пробелы из начала и конца строки. |
| $.type() | Позволяет определить внутренний JavaScript класс объекта ([[Class]]). |
| $.uniqueSort() | Производит сортировку массива элементов DOM с удалением дубликатов. |
Изучаем jQuery
Содержание
1. Живые веб-страницы.
Новые возможности веб-страниц
HTML и CSS — это, конечно, хорошо, но…
…без сценариев не обойтись
Знакомьтесь: j Query (и JavaScript)!
Что происходит в браузере
Скрытая структура веб-страницы
jQuery упрощает работу с DOM
Функция jQuery (и ее сокращенная запись)
jQuery выбирает элементы по тем же правилам, что и CSS
Селекторы: стили и сценарии
Использование селекторов jQuery
jQuery в переводе
Ваш первый проект с jQuery
Подготовка файлов HTML и CSS
Поехали…
Эффекты изменения прозрачности И это все?
Пушистые Друзья спасены
Ваш инструментарий jQuery
2. Хватай и действуй.
Подруга просит тебя помочь оформить сайт
Что требуется от проекта?
Начинаем с div
Событие click под увеличительным стеклом
Включение метода click в страницу
Выражайтесь точнее
Назначение классов
Идентификаторы элементов
Три уровня веб-страницы
Возвращаемся к списку
Выделение памяти для хранения данных
Конкатенация и слияние данных
Возвращаемся к программному коду…
Вставка сообщения
Все отлично работает, но…
Дайте мне $ (this)
Использование $(this)
Скатертью дорога!
Метод remove
Селекторы потомков
Ваша очередь прыгать от радости
Ваш инструментарий jQuery
3. Страница в центре событий.
Ни минуты покоя
В словах бухгалтера есть резон…
Реакция на события
За кулисами слушателя событий
Связывание события
Срабатывание событий
Удаление событий
Перебор элементов
Структура проекта
Использование функций
Как устроена функция
Анонимная функция
Именованные функции как обработчики событий
Передача переменных функциям
Функция также может возвращать значения
Условные конструкции и принятие решений
Но это еще не все
Методы могут изменять CSS
Добавление события hover
Еще немного…
Ваш инструментарий j Query
4. Изменение DOM.
Интерактивное меню
Вегетарианцы, вперед!
Назначение классов элементам
Создание кнопок
Что дальше?
Перемещение по дереву DOM
Методы обхода дерева DOM
Сцепленные вызовы методов
В переменных также могут храниться элементы
И снова знак $…
Хранение данных в массивах
Хранение элементов в массиве
Изменение элементов методом replace With
Чем поможет replace With?
Не торопитесь с replace With
Когда replace With не подходит
Вставка HTML в DOM
Фильтры (часть 1)
Фильтры (часть 2)
Верните гамбургер на место
И где же мясо?
Массив отсоединенных элементов
Метод each и перебор массивов
Вроде… все?
Ваш инструментарий jQuery
5. Плавно и изящно.
Новый заказ
Проект «Собери монстра»
Макет и позиционирование
Еще немного структуры и стиля
Проработка интерфейса
Эффект молнии
Как jQuery выполняет анимацию элементов?
Эффекты изменения прозрачности изменяют свойство CSS opacity
Эффект скольжения
Как работают эффекты изменения прозрачности
Комбинированные эффекты
Задержка при использовании эффектов
Включение функций в сценарий
Самодельные эффекты и animate
Что можно анимировать?
Метод animate изменяет стилевое оформление
Откуда и куда?
Абсолютные и относительные перемещения элементов
Включение вызовов animate в сценарный код
Смотри, мама! Работает без Flash!
Ваш инструментарий j Query
6. Люк jQuery, я твой отец!
Программируем блэкджек
Объекты и хранение данных
Построение собственных объектов
Создание объектов для повторного использования
Взаимодействие с объектами
Подготовка страницы
И снова массивы
Обращение к ячейкам массива
Добавление и обновление ячеек
Повторение операций
Поиск иголки в стоге сена
Пора принимать решение… снова!
Операторы сравнения и логические операторы
Стирание информации в jQuery
Чтобы было красивее
Ваш инструментарий jQuery и JavaScript
7. Что будем делать?
Надвигается буря
Мы создали монстра… функцию-монстра
Управление временными эффектами
Обработка событий браузера в onblur и onfocus
Методы работы с таймером определяют время выполнения функций
Пишем функции stopLightning и goLightning
Новая просьба
Случайные монстры
Мы уже знаем текущую позицию…
…и функция getRandom уже готова
Перемещение относительно текущей позиции
«Собери монстра-2» — настоящий хит!
Ваш инструментарий jQuery
8. Пожалуйста, передайте данные.
Бегом к современным технологиям
Прошлогодняя страница
Даешь динамику!
СТАРЫЕ и НОВЫЕ веб-технологии
Структура Ajax
Что такое Ajax?
Фактор «X»
Получение данных методом ajax
Разбор данных XML
Планирование событий
Самоактивизируемые функции
Сервер нам поможет
Который час?
Отключение планирования событий на странице
Ваш инструментарий jQuery/Ajax
9. Клиент встречается с сервером.
В отделе маркетинга MegaCorp никто не знает XML
Ошибки в XML
Ввод данных на веб-странице
Что делать с данными
Форматирование данных перед отправкой
Отправка данных серверу
Хранение информации в базе данных MySQL
Создание базы данных для информации об участниках
Строение команды insert
Использование РНР для работы с данными
Обработка данных POST на сервере
Подключение к базе данных из кода РНР
Чтение из базы данных
Доступ к данным в коде РНР
На помощь приходит JSON!
jQuery + JSON = потрясающе
Несколько правил РНР…
Правила РНР (еще немного)…
Форматирование вывода средствами РНР
Работа с данными в объекте JSON
Проверка и чистка данных в РНР
Ваш инструментарий jQuery/Ajax/РНР/MySQL
10. Переработка форм.
Cryptozoologists.org нуждается в переработке
Новая форма HTML
jQuery UI экономит время и силы
Содержимое naKeTajQuery UI
Построение календаря
Незаметное вмешательство jQuery UI
Изменение параметров виджета
Стильные кнопки
Ограничение ввода числовых данных
Создание цвета по трем составляющим
Функция refreshSwatch И последнее…
Ваш инструментарий jQuery
11. Объекты, сплошные объекты.
Где видели снежного человека?
Google Maps API
В API используются объекты
Включение карт Google в страницу
Чтение данных JSON средствами SQL и РНР
Точки на карте — маркеры
Список задач для отображения нескольких существ
Прослушивание событий карты
Получилось!!!
Ваш инструментарий jQuery API
Пара слов на прощание…