jQuery. Мое первое знакомство с «волшебной палочкой» для JavaScript

Логотип jQueryНа днях познакомился с очень хорошим фреймворком для JavaScript с названием jQuery. Дня три не мог нарадоваться 🙂 И захотелось поделиться этим.

До этого использовал чистый JavaScript, а для задач, требующих использования AJAX, использовал библиотеку JsHttpRequest от dkLab.

«Я почему раньше такой злой был — потому что у меня велосипеда не было!» (с) Почтальон Печкин

В целом до знакомства с jQuery я достаточно негативно воспринимал работу с JavaScript, душа у меня к нему явно не лежит. Причем использую в JavaScript обычно самый необходимый функционал, например, оперирование объектами из DOM, на уровне скрыть/показать, или же для валидации данных форм на стороне клиента.

Так как информация о фреймворках для JavaScript постоянно мелькает перед глазами на различных блогах, мне стало интересно разобраться с одним из них. Выбор стоял перед jQuery или Prototype (возможно, из-за того, что они одни из самых популярных). Посмотрев отзывы в различных источниках, выбрал для изучения jQuery и, как оказалось, не прогадал.

Как я понял, основная фишка jQuery (по крайней мере, на первый взгляд) в том, что он позволяет очень удобно и изящно получать доступ к тем или иным элементам объектной модели документа (то, что мне нужно пока в первую очередь). В Prototype этот момент менее изящный (хотя всяко лучше чем в голом JavaScript 🙂 ), но, как это всегда бывает, есть в нем и свои плюсы.
То есть, нельзя сказать, что jQuery — лучший из лучших, просто для моих текущих задач он подходит как нельзя лучше. И я достаточно четко понимаю, что в будущем, возможно, будет смысл использовать Prototype или что-то еще (или вообще ничего, ведь все от ситуации зависит…).

В целом, использование JavaScript фреймворков на подобие jQuery дает возможность достаточно легко делать на странице практически все, на что хватит фантазии, фактически можно делать целые online приложения, которые по функциональности будут очень похожи на обычные программы. Что, конечно же, можно сделать и без фреймворков, но с гораздо большими трудозатратами.

Собственно, для изучения jQuery (или достаточно хорошего ознакомления) хватило двух хороших статей, ссылками на которые и хотел поделиться с теми, кто, возможно, так же собирается разбираться с jQuery:

  • Очень подробная и качественная статья на RSDN, в конце которой так же можно найти полезные ссылки.
  • Менее подробная, но зато хорошо иллюстрированная примерами (с уклоном на использование визуальных эффектов в jQuery) статья Шевчука Антона «jQuery для начинающих» (рекомендую читать после статьи на RSDN).

Так же пришелся очень кстати файл справки в формате CHM для jQuery.

Не знаю, хорошо это или плохо, но часто меня одолевает «лень» тратить свое время на то, на что его можно не тратить. Наверное, именно поэтому для меня jQuery — действительно полезное открытие 🙂

Автор

ezoterik

Программист

  • muromec

    еще на йахушный YUI посмотри — тоже полезная штука из той же оперы.

  • Так получилось, что я тоже недавно занялся jQuery. До этого использовал prototype.
    В jQuery очень понравился размер библиотеки 🙂
    Кстати, уже нашел книжку
    «Learning jQuery» Jonathan Chaffer, Karl Swedberg (pdf).
    Откуда качал не помню (какой-то файловый хостинг), но, если нужно могу выслать на eMail (где-то мегабайт 5).

  • muromec,
    Теперь нужно только запастись временем, чтобы хотя бы познакомиться с разными фреймворками 🙂

    Владимир,
    Спасибо за наводку. Поискал и тоже нашел.
    Про размер, кстати, тоже часто встречал упоминания, такой себе заманчивый плюс 🙂

    Мне один знакомый рассказывал, что он перешел с jQuery на Prototype из-за того, что в jQuery был (а может и сейчас есть, не знаю) какой-то глюк с модальными диалогами, «победить» который не удалось до конца и целесообразней было использовать Prototype (в нем именно этой проблемы не было). В общем, как ни крути, а получается, что в идеале нужно знать и то и то 🙂

    PS. По возможности хочу разобраться с CodeIgniter и уже давно приметил у Вас на блоге много хороших статей на эту тему 💡

  • Бирц

    Ага, я говорил. Проблема не столько с модальными диалогами, сколько с эффектами и анимацией. Например затухание в prototype происходит ровнее, без дерганий. Аналогично slide-down, slide-up и тп.
    Но в доступе к dom-элементам jquery конечно удобнее, а некоторые вещи вообще вне конкуренции, например раскраска страниц из статьи http://www.rsdn.ru/article/inet/jQuery.xml

    Будем надеяться, что разработчики решат проблему эффектов, поскольку они работают отвратно.

    Кстати, prototype содержит механизмы для программирования в стиле ООП.

  • Небольшое уточнение. Эффекты это уже scriptaculous (надстройка над prototype), т.е. еще десяток килобайт кода 🙂 .
    И «дергания» я наблюдал в ней тоже, особенно если время эффекта короткое (может, подтормаживал браузер, потому что иногда при повторном запуске «дергания» исчезали).

    Но, конечно, возможность в scriptaculous задавать кривые для эффектов вне конкуренции.

    P.S. Я потестировал slideDown эффект в jQuery — «дерганий» не заметил. Может дело в версии?

  • отличное решение. спасибо.

  • Pingback: Правильный редактор для PHP | Заметки разработчика()

  • В начале этого года в интернете купил книгу «jQuery подробное руководство по продвинотому JavaScript», всю книгу прочитал, не советую ее приобретать, лучше русские блог по jQuery почитать, быстрее и доходчевее можно понять и научиться.

  • Z0RG

    Интересно. Тоже была задача прикрутить AJAX. Тоже сначала пытался поюзать фреймворк от DKLab, т.к. использую в PHP их класс DBSimple для работы с БД — довольно-таки удобно. Но JS фреймворк их оказался как-то не очень. Мало документации, возникли какие-то проблемы которые я не мог решить, а у них на форуме тоже мертво как-то. В итоге выбирал также между jQuery и Prototype. И выбрал jQuery. Всем доволен, кроме несколько большого размера. Особенно jQUery UI весит много. Ну и дергание эффектов и непомерный аппетит в плане ресурсов у jQuery UI.

  • Из-за этих тяжеловесных фреймворков я и отключил поддержку яваскрипта в браузере. В большинстве случаев фреймворки используются для какого-нибудь тупого эффекта, типа аккордеона или модального окна, да и тот же аякс запрос можно сделать 5-ти килобайтовым скриптом (SACK http://www.twilightuniverse.com), а не поключать в 10 раз больший по размеру фреймворк. Еще бесят статьи с названиями «легкий скрипт навигации на прототайп», где для 3-х килобайтового скрипта нужно 126 кб фреймворка. Добросовестные веб мастера делают сайты, работающие и без яваскрипта, он нужен лишь для понтов, а мне от сайтов нужна только информация.
    Еще моя ненавить к фреймворкам подстегивается медленным пометровым интернетом :E

    Попробуйте miniJquery http://deer.org.ua/2009/12/08/2/ может кому-нибудь понравится.

  • Z0RG,
    Касательно размера, он все же вроде как меньше чем у Prototype. Спасибо за DbSimple, буду изучать, интересно (дата последнего обновления только чуть отпугивает)…

    sartas,
    «Добросовестные веб мастера делают сайты, работающие и без яваскрипта…»
    100%

    Насчет встраивания в сайт специфичных только нужных скриптов, проблема в том, что далеко не сразу ясно какой JS функционал нужен в начале проекта, если же он четко и жестко прописан в ТЗ тогда да, скорее всего, будет выгоднее использовать только то, что нужно. Проблема в том, что чаще всего все же говорится о том, что «нужно будет реализовать все, что придет в голову и предела фантазиям не будет», а в этом ключе, имхо, проще подключить фреймворк и с нужной скоростью реализовывать все, что потребуется (поэтому у меня и стоял вопрос именно в выборе фрейморка). Другой вопрос, что на самом деле, чаще всего, все сводится к стандартным «фишкам», и которых обычно не так уж и много, вот тут подход использования отдельных скриптов (не привязанных к фрейморкам) может подойти как средство оптимизации готового продукта.

  • Нашла вашу статью после просмотра краткого видеоматериала Мороковина, и надеюсь, знакомство продолжится — благодаря предложенным вами ссылкам.
    Вообще, вы считаете, что лучше всегда пользоваться jQuery или каждый раз подключать менее тяжеловесные скрипты для конкретных задач, как предлагают другие комментаторы?

  • Pingback: Правильный редактор для PHP()

  • Pingback: Правильный редактор для PHP | авто, бизнес, интернет журнал,мода, мужчины, новости, отдых, фото()