Эта статья, а также последующая статья, выходящая на следующей неделе, являются выдержками из главы 2 новой книги SitePoint, jQuery: от новичка до ниндзя , написанной Эрлом Кастледином и Крейгом Шарки. Вы можете получить всю главу 2, а также главы 1 и 7 и полный архив кода для всей книги бесплатно здесь . Вместе эти две статьи представляют собой введение в jQuery для дизайнеров, которые когда-либо работали только с CSS и HTML.
Если вы хотите изучить основы jQuery и начать добавлять динамические взаимодействия на свой веб-сайт, это место для начала. Если вы хотите следовать коду в этой статье, загрузите образец, который включает в себя все примеры кода из книги.
«На втором этапе мы хотим использовать социальную среду и обеспечить взаимодействие на базе сообщества Web 2.0 с использованием краудсорсинга, Ajax, — говорит наш новый клиент. «Но сейчас нам просто нужно изменить некоторые базовые вещи на нашем сайте.
Наш клиент запускает стартап под названием StarTrackr! Он использует технологии GPS и RFID для отслеживания точного физического местоположения популярных знаменитостей, а затем продает эту информацию фанатам. В местном магазине друга работают отличные орудия, но теперь они отправляются в онлайн.
«Ты можешь сделать это? Вот список, который должен быть опубликован до пятницы, до конца рабочего дня ».
Вы просматриваете список. Удивительным совпадением вы заметили, что все запросы могут быть реализованы с использованием jQuery. Вы смотрите на свой календарь. Это утро пятницы. Давайте начнем!
Первая задача в списке — добавить простое предупреждение JavaScript при загрузке существующего сайта. Это чтобы посетители знали, что StarTrackr! в настоящее время не предъявляют иск за вторжение в личную жизнь (что недавно было указано в местной газете).
Конечно, мы могли бы использовать старый добрый JavaScript, чтобы сделать это, но мы знаем, что использование jQuery сделает нашу жизнь намного проще — плюс мы можем изучать новые технологии по мере продвижения! Мы уже видели анатомию оператора jQuery в главе 1; Теперь давайте посмотрим на шаги, необходимые для запуска jQuery: мы ждем, когда страница будет готова, выберите нашу цель, а затем изменим ее.
Возможно, вы уже догадались, что jQuery может быть более сложным, чем это, но только немного! Даже продвинутые эффекты будут опираться на эту базовую формулу с множеством итераций последних двух шагов и, возможно, немного ноу-хау JavaScript. А пока давайте начнем красиво и легко.
Прежде чем мы сможем взаимодействовать с элементами HTML на странице, эти элементы должны быть загружены: мы можем изменить их, только когда они уже есть. В старые времена JavaScript единственным надежным способом сделать это было дождаться полной загрузки всей страницы (включая изображения), прежде чем мы запустили какие-либо скрипты.
К счастью для нас, в jQuery есть очень классное встроенное событие, которое выполняет нашу магию как можно скорее. Из-за этого наши страницы и приложения загружаются конечному пользователю намного быстрее:
Пример 1. chapter_02/01_document_ready/script.js
$ (document) .ready (function () { alert ('Добро пожаловать в StarTrackr! Теперь больше не в полиции ...'); });
Важные фрагменты (выделены жирным шрифтом) говорят: «Когда наш документ готов, запустите нашу функцию». Это один из самых распространенных фрагментов jQuery, который вы, вероятно, увидите. Обычно хорошей идеей является сделать простой тест оповещения, как этот, чтобы убедиться, что вы правильно включили библиотеку jQuery, и что ничего смешного не происходит.
Почти все, что вы делаете в jQuery, нужно будет сделать после того, как документ будет готов, поэтому мы будем часто использовать это действие. Это будет упоминаться как готовое к документу событие отныне. Каждый пример, который следует в этой книге, если не указано иное, должен выполняться из события готового документа. Вы должны только объявить это один раз за страницу.
Документально-готовая идиома настолько распространена, что существует ее сокращенная версия:
$ (function () {alert ('Готов делать ставки!');});
Если вы хотите использовать метод быстрого доступа, вперед! Расширенная версия, возможно, является лучшим примером самодокументируемого кода; гораздо проще сразу увидеть, что именно происходит, особенно если это скрыто на странице JavaScript другого разработчика!
На первый взгляд событие готового документа выглядит очень удаленным от структуры, с которой мы столкнулись в нашем анатомическом классе jQuery, но при ближайшем рассмотрении мы видим, что все необходимые части учитываются: селектор — document действие ready и параметр является функцией, которая выполняет некоторый код (наше alert