Учебник jQuery для начинающих

    image

    Я таки решился и собрал все свои статьи из серии "jQuery для начинающих" в одном учебнике, который и хочу представить на суд общественности.


    Скачиваем, читаем, пробуем



    Чтобы долго не искали, даю сразу ссылки на учебник в PDF формате (1,8Mb):



    И интерактивные примеры кода:



    Убедительная просьба, если вы хотите рассказать о данном учебнике, то указывайте ссылку на страницу: http://anton.shevchuk.name/jquery-book/, так как со временем я буду обновлять учебник, и прямые ссылки будут не актуальны (а возможно даже вредны :). Я конечно же постараюсь поддерживать ссылки на Хабре в актуальном состоянии, но возможны случайности.


    Историческая справка


    Первая версия jQuery была представлена публике в августе 2006-го года разработчиком Джоном Резигом. До конца года выходили багфиксы, которые завершились на версии 1.0.4. В 2007-м началась и закончилась разработка ветки 1.1.х, к тому моменту jQuery уже начинает завоёвывать сердца разработчиков. В феврале 2008-го выходит версия 1.2.3, а дизайнер из Торонто Ник Ла пишет замечательную статью jQuery Tutorials for Designers, и к ней написано уже больше тысячи комментариев. И вот, в марте того же года, я публикую перевод данной статьи на своём блоге, c которой и начинается серия «для начинающих».

    Чтобы было не так скучно читать анонс, я решил разбавить информацию статистикой, и она может быть любопытна:

    Часть 1 (март 2008):
    • > 400 комментариев
    • > 1 200 000 просмотров
    • ~ 800 000 уникальных посетителей


    Часть 9. Пишем плагины анимации (ноябрь 2010):
    • ~ 10 комментариев
    • ~ 30 000 просмотров
    • ~ 30 000 уникальных посетителей


    Вся серия за период 2008-2012:
    • > 2 500 000 просмотров
    • > 2 000 000 уникальных посетителей


    P.S.


    Если у вас есть замечания и(или) предложения — то пишите на мой e-mail: Anton.Shevchuk@gmail.com
    Поделиться публикацией
    Комментарии 55
      +7
      О супер, я помню начинал изучать jquery благодаря твоему сайту. Очень были полезны примеры.
        +2
        аналогично, еще и другим советовал
          +2
          А я как раз хотел начать, и вот тут как раз такой пост.
          Спасибо!
        +5
        Если возможно, сделайте пожалуйста ePub версию.
          +1
          Для начинающих — супер. Спасибо!
            +1
            Хорошая манера изложения.
              +1
              Большое спасибо. На 36 странице нашел опечатку
              // было
              $(".conTent div input:disabled");
              // стало
              $(".content div").find(«input:disabled»);
                0
                ох уж эти фреймы… не современно как-то
                  +1
                  О каких фреймах речь?
                    +1
                    Секцию с id #posts пошыре бы, а то плохо читается
                  +1
                  Антон, спасибо, давно читаю ваш блог, помог в свое время с азами!
                    +1
                    Здорово написано, спасибо!
                      +1
                      Здравствуйте!
                      Можно ли использовать ваш замечательный учебник в качестве основы для курса на http://hexlet.ru/? А может, вам самим будет интересно провести курс?
                        0
                        Скажите, планируете ли вы сверстать учебник в CHM формате?
                          +3
                          Еще бы mobi/epub. А то на читалках PDF больная тема.
                            +1
                            Другие форматы планируются, но чутка попозже…
                              0
                              Добрый день.
                              Спасибо за книжку!
                              А можно попросить обновить epub-версию до 1.0.6 (как pdf)?
                          0
                          Друзья-джавакодеры, если вы, как минимум, изучили вышеуказанные учебник и чувствуете в себе силы поработать js-программистом в большой компании — велкам в почту :)
                          • НЛО прилетело и опубликовало эту надпись здесь
                              0
                              Друзья, изучившие один учебник, вроде бы, не котируются на рынке :)
                                0
                                Для Javascript самое оно, только лучше это был не учебник по jQuery, а «JavaScript: The Definitive Guide.»
                              0
                              Спасибо большое, тоже начинал с этого (в том числе)).

                              Хотелось бы побольше статей по фреймворкам. По Dojo хочется статью)
                                0
                                ИМХО: начинать нужно с чистого Js, что бы понимать как работает jquery, а то потом на форумах куча умников которые написали какой то говно- код на jquery и удивляются почему он не работает.
                                  0
                                  Всё верно, именно по этой причине я частенько отправляю читателя на страницы учебника от Ильи Кантора
                                    0
                                    Это правильно, но лучше перед прочтением вашего учебника отправить пользователя на прочтение учебника Ильи Кантора, от начала и до конца.
                                      0
                                      Ну справедливости ради надо сказать, что в учебнике автора топика есть глава «О HTML, CSS и JavaScript», где хоть и очень вкратце, но присутствуют азы javascript. Конечно этого недостаточно и Кантор «must have», но в рамках данной книги этого вполне достаточно, что бы правильно понять как работать с jQuery и не задавать уж откровенно глупых вопросов на форумах.
                                        0
                                        А вот прямо отсюда отправить читателя на учебник Ильи Кантора не позволяет религия?
                                        • НЛО прилетело и опубликовало эту надпись здесь
                                            0
                                            эм, а это что?
                                            image
                                    +1
                                    О, да вы тот самый Шевчук, с статей котрого, я начал учить jQuery. Спасибо большое!
                                    • НЛО прилетело и опубликовало эту надпись здесь
                                        0
                                        Вроде как шустрее стал, интерфейс действительно улучшили — т.е. нет этапа «привыкания» после 2010 — всё осталось на своих местах, но стало чуточку удобней и понятней — имхо такое улучшение дорогого стоит, но я всё ещё не уверен, что соглашусь заплатить $140 за базовую версию лишь для домашнего использования — дома и без офиса можно обойтись
                                          –1
                                          Libre Office с головой хватает для дома, та и даже для офиса. Как-то уже год как забил я на продукты от Майкрософт.
                                        0
                                        спасибо, непременно воспользуюсь
                                        уже два года, как собираюсь выучить :(
                                          0
                                          $('div#sidebar'); — не первый раз встречаю такой пример, зачем нужен такой селектор? :)
                                            0
                                            В JS он избыточен, приведён для примера, в CSS — более «спецефичен» чем просто с ID со всеми вытекающими последствиями
                                              0
                                              Дело не в 3 символах избыточности, а в неудачности примера и сильного проигрыша в скорости выборки api.jquery.com/id-selector/ — даже здесь пишут в первом абзаце.
                                                0
                                                Спасибо, я в курсе, и об этой разнице я упоминаю в учебнике.

                                                По контенту:
                                                — в примере работы CSS этот селектор не случаен, т.к. тут играет роль «специфичность» селектора
                                                — в примере разбора Sizzle — тут тоже используется для наглядности
                                                — в примере по работе с селекторами — тут так же имеет право на жизнь — бывают ситуации когда указание тега необходимо — если у вас один и тот же код обслуживает различные страницы, на которых в качестве искомого элемента с одинаковым ID могут быть различные DOM элементы, и для них требуется различное поведение.
                                                  0
                                                  Для специфичности лучше сделать $('#sidebar').filter('div') должно быть быстрее намного
                                                    0
                                                    «Специфичность» — это для CSS только, прошу не путать…
                                                    Для фильтрации — тут не так однозначно — я, к примеру, не знаю что быстрее отработает — QuerySelectorAll или getElementById + фильтр
                                                      +1
                                                      Зависит от тестовых данных и браузера: jsperf.com/div-id
                                                        +1
                                                        Спасибо за пример, интересный получился тест
                                              0
                                              Говорят, что если ты ищешь по ID, то лучше не указывать элемент.
                                              Если ищешь по классу — то лучше указать.
                                              0
                                              29 стр.
                                              // мы всегда будет уверены, что $ == jQuery
                                                0
                                                Спасибо, исправлю
                                                  0
                                                  35-36 стр.

                                                  $(".conent a.button");
                                                  // стало
                                                  $("a.button", ".content");
                                                  
                                                0
                                                Спасибо за книгу! Сижу на работе, расширяю кругозор.
                                                То что нужно для пятницы!
                                                  0
                                                  Да Антон Спасибо огромное! Когда-то начинал учить jQuery на Ваших примерах. Года 2 вроде назад… ;) Теперь вот могу публично сказать спасибо :)
                                                    0
                                                    Пользуясь случаем хочу присоедениться к благодарностям за ваш блог.
                                                    Книжку пока не читал, но скачал, пролистал и добавил в список для прочтения.
                                                    Если первые главы мне показались совсем уж для начинающих, то где то с 33% уже листать стал медленнее :)
                                                    Понравились и стиль и оформление книжки. Слог лёгкий. Лирические отступления и ссылки в тему.
                                                    Я, к примеру, когда использовал live() каждый раз думал в чем прикол с on() и вот у вас в один абзац нашел ответ.
                                                    Вобщем на мой первый взгляд вообще замечательно.
                                                    З.Ы.: напишите на кнопках слово «скачать», чтобы было «скачать учебник», может я туплю с утра, но что эти картинки есть ссылки на скачивание я понял не сразу :))
                                                      0
                                                      Антон, огромное спасибо, давно искал такой тутор
                                                        0
                                                        Не читал (пока), но одобряю. Надеюсь подойдёт для начинающего (меня). Да что там «надеюсь», уверен!
                                                        Спасибо большое за проделанную работу.
                                                          0
                                                          по моему на странице 26 ошибка в ссылке
                                                          — «Использование замыканий»
                                                          [http://learn.javascript.ru/using-closures]

                                                          должно быть
                                                          learn.javascript.ru/closures-usage
                                                          0
                                                          на 74 странице ссылка «как«оживить» события» не рабочая походу
                                                            0
                                                            Будет исправлено в 1.0.1

                                                          Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                                          Самое читаемое