Введение в работу с фреймворком jQuery

Хорошо присматриваясь, под слоем социальности, интерактивности и пользовательского контента, "Веб 2.0", с которым мы все каждый день имеем дело в значительной степени базируется на использовании языка javascript. В прошлом javascript часто ассоциировался с идеей инвазивных PopUp и базой для мошенничества в сети, этот язык был пересмотрен разработчиками в последние годы благодаря распространению таких методов, как AJAX и способностью воспроизводить все большее число динамических диаграмм без использования таких технологий, как Flash.

С точки зрения разработчиков, однако, на стороне клиента, характер язык всегда был главным источником проблем и головной боли. Поскольку каждый браузер реализует свои обработчики для javascript, каждый (особенно IE) имеет свои спецификации и свои исключения, часто невозможно быть уверенным в кросс-браузерности написанного скрипта. Кроме того, в языке до сих пор существуют значительные пробелы, которые делают его неконкурентноспособным с серверными языками, такими как PHP или тот же Ruby.
В ответ на эти проблемы были созданы проекты библиотек (фрэймворки), которые могут обеспечить кросс-браузерность скрипта и расширить или иным образом способствовать повышению функциональности языка javascript.

Одним из первых родившихся фреймворков был Prototype, который подошел к проблеме путем расширения DOM и глобальных объектов javascript , т.е. с помошью добавления функциональности элементам содержащимся на страницах и таким объектам, как массивы и строки. С помощью этого метода начали заполненяться многочисленные пробелы в языке javascript, а вместе с ними плагины в различных программах. В своих ранних версиях фрэймворка Mootools разработчики также прошли по этому пути, но последняя версия библиотеки практически полностью поставлена на структурированные объекты, сохранив расширение некоторых основных объектов, таких как массивы и строки. Проблема фрэймворка Prototype это расширение глобальных объектов javascript которым он рискует вступать в конфликт с функциями разработчиков и других библиотек.

Проект jQuery

Совершенно иной подход к проблеме всегда проявлялся со стороны фреймворка jQuery, разработанного Джоном Ресигом в 2006 году с намерением, сделать код более лаконичным и свести к минимуму масштабы глобальных объектов для обеспечения максимальной совместимости с другими библиотеками .
Из этого принципа была создана библиотека предлагающая широкий спектр возможностей, начиная от обработки CSS и HTML элементов, заканчивая графическими эффектами для перехода к удобным методам кросс-браузерности технологии AJAX. Все, по сути, не прикасаясь к какому-либо из родных объектов javascript.
Для тех, кто "подбирается" к jQuery впервые, важно знать, что здесь все вращается вокруг объекта /функции $ , аббревиатуры (или псевдонима) jQuery.



И так, начнем по порядку, ниже приведен первый пример использования jQuery, который дает представление о его преимуществах:

Задача:
Найти значение аттрибута href ссылки по идентивикатору "moi_link"
Сама ссылка:


На Prototype решение выглядит так (Prototype, как я и говорил расширяет DOM):



Тоже самое на jQuery:



Уже из этих строк кода видны две основные характеристик jQuery: во-первых, краткость используемого кода, но прежде всего тот факт, что название искомого элемента было передано функции $ () в виде CSS селектора (как в Mootools для функции $$).

Для тех, кто не знаком с общими принципами, или переходит с других библиотек, эта функция может поначалу показаться недостатком и может спровоцировать некоторые ошибки, например, в jQuery функция $ ('moi_link') будет искать html тег


и не найдет его.

На самом деле одна из сильных сторон библиотеки jQuery и есть очень мощный двигатель отбора (о котором поговорим чуть позже).
Еще одна особенность, которую необходимо подчеркнуть, это то, что многие методы jQuery конкатенируемы, что позволяет писать и читать код намного легче:


Пример:



Веские причины использования jQuery

Кроме выше затронутых преимуществ, есть еще несколько причин по которым лучше использовать именно jQuery:

Во-первых, потому что вы можете использовать его во всех проектах, не опасаясь возникновения несовместимостей в коде. Действительно, используя jQuery.noConflict () можно просто удалить псевдоним $, и мы можем использовать, например, Mootools вызывая его через $ ('myid ") и с jQuery с помощью JQuery (" # myid ")

Во-вторых, jQuery имеет простую систему расширения, которая позволяет добавлять новые функции (плагины) в дополнение к стандартным.

Кроме того, его распространенность создала вокруг официальной команды разработчиков большое сообщество, что обеспечивает отличную поддержку и сножество отличных плагинов.

Наконец, потому что девиз jQuery является "Write less, do more" (Пиши меньше делай больше), который отображает всю суть работы с jQuery особенно когда речь идет о написании сножества строк кода.


Где взять jQuery?
С оффициального сайта Jquery.com Вы можете скачать дистрибутив фрэймворка в двух формах:
1. development: несжатый, пригодится для разработки и отладки ( вес около 155kb)
2. production: сжатый, для использования, когда проект уже онлайн - для оптимизации времени загрузки (24КБ, 19Кб в сжатом виде с помощью GZip на стороне сервера)

После загрузки файла, достаточно просто подключить его на странице HTML добавив в головную часть страницы (между тегов и ) код:


Еще одно решение, которое распространилось в последнее время это использование постоянно обновляемого дистрибутива из сети Google, это позволяет не беспокоиться об обновлении дистибутива jQuery у себя на сервере и таким способом браузер зашедшенго на Ваш сайт пользователя не должен будет заново качать дистрибутив у Вас если он уже имеется на компьютере, что уменьшает скорость загрузки Вашего сайта. Код для вставки:

← К мануалу jQuery | К следующей главе →