Фреймворк jquery особенности достоинства и недостатки применения
В этой статье вы узнаете: что такое JavaScript библиотека jQuery, как скачать последнюю версию и подключить её к сайту, как установить скрипт с Google CDN и других хранилищ на страницу, а также чем отличается обычная версия от slim и сжатая от не сжатой.
Что можно делать с jQuery
jQuery позволяет очень легко:
- выбирать элементы для выполнения различных манипуляций над ними;
- создавать различные визуальные эффекты (например, плавное отображение и скрытие элементов);
- создавать сложную анимацию, при этом реализовывая это за гораздо меньшее количество строк кода чем на чистом JavaScript;
- манипулировать DOM элементами и их атрибутами;
- реализовывать AJAX для асинхронного обмена данными между клиентом и сервером;
- перемещаться от текущего узла к другим по иерархической структуре DOM дерева;
- выполнять несколько действий над элементом посредством одной строчки кода;
- получать или устанавливать размеры HTML элементам и т.д.
Этот список можно продолжить дальше, т.к. jQuery содержит большое количество функций, которые значительно упрощают написание кода для решения различных задач, стоящих перед веб-разработчиками.
Краткая история jQuery
Джон Резиг (John Resig) создал первую версию библиотеки в 2005-м, а опубликовал в 2006-м, на мероприятии под названием BarCampNYC. На официальном сайте jQuery автор написал:
jQuery — это Javascript-библиотека, в основе которой лежит девиз: Программировать на Javascript должно быть приятно. jQuery берёт частые, повторяющиеся задачи, извлекает всю ненужную разметку и делает их короткими, элегантными и понятными.
У jQuery два главных достоинства. Первое — это удобный API для манипулирования веб-страницами. В частности, он предоставляет мощные методы для выбора элементов. Выбирать можно не только по ID или классам, jQuery позволяет писать сложные выражения, например, чтобы выбирать элементы на основе их взаимосвязей с другими элементами:
Со временем механизм выбора превратился в отдельную библиотеку Sizzle.
Вторым достоинством библиотеки было то, что она абстрагировала различия между браузерами. В те годы было сложно писать код, способный надёжно работать во всех браузерах.
Отсутствие стандартизации означало, что разработчикам нужно учитывать многочисленные различия между браузерами и пограничные случаи. Взгляните на этот ранний исходный код jQuery и поищите по jQuery.browser. Вот один из примеров:
А благодаря jQuery разработчики могли переложить заботы обо всех этих подводных камнях на плечи команды, развивающей библиотеку.
Позднее jQuery облегчила внедрение более сложных технологий, таких как анимации и Ajax. Библиотека фактически превратилась в стандартную для веб-сайтов зависимость. И сегодня она обеспечивает работу огромной доли интернета. W3Techs считает, что 74 % сайтов сегодня используют jQuery.
Контроль за развитием jQuery также стал более формализованным. В 2011-м команда cоздала jQuery Board. А в 2012-м jQuery Board преобразилась в jQuery Foundation.
В 2015-м jQuery Foundation влился в Dojo Foundation, чтобы создать JS Foundation, который затем объединился с Node.js Foundation в 2019-м для создания OpenJS Foundation, в рамках которого jQuery была одним из "пробивных проектов."
Экскурс в историю
Создателем библиотеки стал Джон Резиг, американец, который в свое время был JavaScript-евангелистом. В начале своей программистской карьеры Джон работал в Brand Logic на полставки и заинтересовался языком JavaScript, который впоследствии изучил вдоль и поперек.
Немного позже после написания множества приложений он создал библиотеку jQuery. Впервые она была представлена в 2006 году на «BarCamp» – международной конференции, проходящей в Нью-Йорке.
Главной целью своего детища Резиг назвал возможность написать такой код, который будет упрощать JS и при этом позволит не беспокоится о кроссбраузерности. И это действительно так.
Библиотека значительно упрощает множество решений на JavaScript и превращает увесистые куски кода в несколько строк. К тому же она прекрасно работает во всех браузерах и самое главное одинаково. Так что разработчику не надо заморачиваться с настройкой работы кода под особенности последних.
Новые фреймворки
С момента появления jQuery было создано множество фреймворков, в том числе современные лидеры React, Angular и Vue. У них есть два важных преимущества перед jQuery.
Во-первых, они позволяют легко разделять пользовательский интерфейс на компоненты. Фреймворки спроектированы так, чтобы обрабатывать отрисовку и обновление страницы. А jQuery обычно используется только для обновления, возлагая на сервер задачу предоставления начальной страницы.
С другой стороны, компоненты React, Angular и Vue позволяют тесно связать HTML, код и даже CSS. Как мы разделяем кодовую базу на много самодостаточных функций и классов, так и возможность разделить интерфейс на повторно используемые компоненты упрощает сборку и сопровождение сложных сайтов.
Вторым преимуществом является то, что более свежие фреймворки придерживаются декларативной парадигмы, в рамках которой разработчик описывает, как должен выглядеть интерфейс, а выполнение всех необходимых изменений для достижения желаемого возлагает на фреймворк. Этот подход противоречит императивному подходу, характерному для jQuery-кода.
В jQuery вы явно прописываете шаги для совершения каких-либо изменений. А в декларативном фреймворке вы говорите: «Согласно этим данным, интерфейс должен выглядеть так». Это может сильно облегчить написание кода без багов.
Разработчики приняли на вооружение новые подходы к разработке сайтов, из-за чего популярность jQuery понизилась.
Меняющиеся обстоятельства
Однако в последние годы jQuery подрастеряла свою популярность. GitHub убрал библиотеку из фронтенда своего сайта. Bootstrap v5 избавится от jQuery, потому что это его «крупнейшая клиентская зависимость для обычного JavaScript» (на данный момент размером 30 Кб, минифицированная и запакованная). Несколько тенденций в веб-разработке ослабили позицию jQuery как необходимого инструмента.
Как подключить скрипт jQuery в html
Подключение jQuery к странице осуществляется также как и любого другого JavaScript файла. Т.е. посредством добавления в HTML тега с атрибутом src , в котором необходимо задать полный или относительный путь к файлу.
Подключение последней версии jQuery:
При этом разместить можно как секции в , так и в . Но где же лучше?
Раньше (до появления режимов async и defer ) это рекомендовалось делать перед закрывающим тегом body :
При таком размещении скрипт не будет блокировать парсинг веб-страницы, т.к. его загрузка и выполнение будет осуществляться в самом конце. В результате, это приведёт к тому, что пользователь увидит содержимое страницы быстрее и сможет раньше с ней начать взаимодействовать.
Если бы мы сделали это по-другому, например, поместили script в раздел head , то создали бы «задержку» при обработке страницы в самом её начале. А это привело бы к тому, что пользователю пришлось бы дольше ждать отображения контента страницы.
Но сейчас так делать не рекомендуется. Лучше размещать скрипты как можно выше (в разделе ) с добавлением к ним атрибута defer или async . Эти атрибуты будут «говорить» браузеру, что скрипт нужно загрузить в фоне, не останавливая при этом основной поток обработки страницы. Это позволит сделать сайт более производительным.
При этом, если на странице имеется несколько внешних скриптов с атрибутом defer , то они будут выполняться строго в том порядке, в котором они расположены в коде.
Пример отложенного подключения jQuery и своего внешнего скрипта, зависящего от этой библиотеки:
При непосредственном размещении JavaScript кода в HTML документе его необходимо поместить в обработчик события DOMContentLoaded (в этом случае его код выполнится после загрузки библиотеки jQuery):
Преимущества и недостатки jQuery
Преимущества, которые даёт нам библиотеки jQuery при её использовании для написания клиентских сценариев:
- компактность кода . Позволяет писать код более компактно чем на чистом javaScript, т.е. за гораздо меньшее количество строк кода.
- простой и понятный синтаксис . Значительно упрощает написание многих вещей, например, таких как манипулирование DOM элементами, обработку событий, добавление эффектов анимации на страницу, AJAX запросов и т.д.
- кроссбраузерность . Код написанный на jQuery будет гарантированно работать во всех основных браузерах. В то время как код, написанный на чистом JavaScript надо будет однозначно проверять во всех браузерах. Т.к. некоторые фрагменты кода могут не поддерживаться и их реализацию для этих браузеров нужно будет выполнять как-то по-другому, или например, использовать полифиллы.
- открытый код . Библиотека jQuery является полностью бесплатной как для личных, так и для коммерческих проектов.
Кроме преимуществ, приведённых выше, у библиотеки jQuery имеются конечно и недостатки.
К недостаткам jQuery можно отнести то, что она может немного увеличивать скорость загрузки веб-страницы (её сжатый размер составляет около 30КБ), а также немного снижать производительность выполнения кода, чем если он был бы написан на чистом JavaScript.
Что делать при конфликте jQuery с другой библиотекой
Но что делать если знак $ у вас занят и используется другой библиотекой?
В этом случае, чтобы избежать конфликтов можно воспользоваться одним из следующих 3 способов.
Приветствую всех читателей и подписчиков моего блога! Изучая JavaScript, я несколько раз упоминал о библиотеке jQuery и давал вам только поверхностные знания о ней. Начиная с текущей публикации, вы сможете детально изучить, что такое jQuery и для чего он нужен, познакомиться с основными инструментами библиотеки, узнать, где применяются скрипты и какими преимуществами обладает сам jQuery. Но это чуть попозже, а сегодня я введу вас в курс дела. Ну что ж, поехали!
Что такое jQuery?
jQuery – это библиотека JavaScript (т.e., она написана на JavaScript), предназначенная для абстрагирования, выравнивания, исправления и упрощения скриптинга при работе с узлами HTML-элементов в браузере или для работы в браузере без графического интерфейса.
- Абстрагируется интерфейс объектной модели документа (он же DOM API).
- Выравниваются все различия реализаций DOM, существующие между браузерами.
- Исправляются известные браузерные баги, связанные с CSS и DOM.
Теперь позвольте объяснить, что я понимаю под “скриптингом HTML-элементов”. При помощи jQuery совершенно тривиально решаются задачи вроде «визуально скрыть второй элемент h2 в документе .html. Код jQuery для такой задачи выглядел бы так:
Давайте немного разберем эту строку с кодом jQuery. Сначала вызывается функция jQuery() , ей мы передаем специальный CSS-селектор библиотеки jQuery, выбирающий второй элемент h2 в HTML-документе. Затем вызывается метод jQuery .hide() , скрывающий элемент h2 . Вот как прост и семантически выразителен код jQuery.
Теперь сравним его с нативным DOM-кодом, который потребовалось бы написать, если бы мы не работали с jQuery.
Какой вариант было бы удобнее написать? А читать, а отлаживать? Также учтите, что вышеприведенный нативный DOM-код предполагает, что все браузеры поддерживают использованные здесь методы DOM. Однако оказывается, что некоторые старые браузеры не поддерживают querySelectorAll() или setProperty() . Поэтому вышеприведенный код jQuery вполне нормально работал бы в IE8, а нативный код DOM вызвал бы ошибку JavaScript. Но, все-таки, даже если бы обе строки кода работали повсюду, какую из них было бы проще читать и писать?
Имея дело с jQuery, можно не беспокоиться о том, какой браузер что поддерживает, либо какой DOM API в каком браузере может забарахлить. Работая с jQuery, вы сможете работать быстрее решать задачи на более простом коде, и при этом не беспокоиться, так как jQuery абстрагирует за вас многие проблемы.
Преимущества и недостатки
Для того чтобы у вас сложилось некоторое впечатление о данной технологии, я расскажу вам о ее особенностях.
jQuery обладает множеством преимуществ, которые действуют как бальзам на душу в большинстве ситуаций. Для удобства я их структурировал и перечислил ниже.
- Кроссбраузерность. Как я уже упоминал выше, данная библиотека поддерживается во всех браузерах и приложения работают практически идентично в любом из них. Такого, к сожалению, не всегда можно сказать о JavaScript.
- Простота. Несмотря на огромное количество дополнительных функций и несколько отличающийся синтаксис от основного языка, jQuery очень прост как для изучения, так и для понимания. А если вы уже плавали среди программного кода на JS, то изучение описываемой библиотеки не составит труда.
- Компактность. Одно из моих любимых преимуществ, так как реализация многих задач значительно сокращается в плане количества написанных строк. Всего лишь грамотно продуманное решение таска и код можно сократить втрое!
- Совместимость. К огромному счастью, все версии библиотеки полностью совместимы друг с другом. Поэтому переход от старых версий к новым не должен вызвать у вас трудностей.
- Дружба сAJAX. Считаю это также нужно вынести в преимущества. В jQuery очень удобно работать с AJAX, а без него не обходится большинство качественных сайтов. Для тех, кто не знает скажу, что AJAX нужен для построения интерактивных интерфейсов веб-приложений для пользователей. Он позволяет перегружать не всю страницу, а только ту часть, которую стоит изменить вследствие каких-то действий юзера, что значительно ускоряет работу сервиса.
- Возможности. Детище Резига наделено огромным количеством дополнительных возможностей, функций и теперь уже дополнительными библиотеками, основанными на jQuery. В качестве примера я назову две наиболее популярные. Начнем с Query UI. Это библиотека, благодаря которой можно получить готовые плагины, эффекты, темы, виджеты и многое другое. Для работы ее нужно скачать и после подключать в хедере документа. Второй не менее популярной считается jQuery Mobile. Эта библиотека облегчает жизнь разработчикам мобильных приложений.
Как видите, положительных моментов достаточно для того, чтобы захотеть работать с этой технологией. Однако моя публикация была бы односторонней, если бы сейчас мы не перешли к недостаткам.
- Типизация. Так как библиотека написана на JavaScript, у нее отсутствует типизация данных. Это несколько замедляет работу кода. К тому же «словить» ошибку можно только во время выполнения этой строки с багом. До этого программа не знает, какие типы переменных задействованы, а значит компилятор никак не поможет.
- Время компиляции. При открытии любого веб-ресурса запускаются и скрипты. Это также влияет на скорость выполнения приложения.
Из главных недостатков это, пожалуй, все. Они не катастрофичны, но все же существуют.
jQuery = JavaScript?
Поскольку jQuery повсеместно распространена, то вы, возможно, не вполне представляете, где заканчивается JavaScript и начинается jQuery. Для многих веб-дизайнеров и начинающих разработчиков HTML/CSS, библиотека jQuery — это первый контакт с языком программирования JavaScript. Поэтому jQuery иногда путают с JavaScript.
Первым делом давайте оговоримся, что JavaScript – это не jQuery и даже не сам DOM API. jQuery – это сторонняя свободная библиотека, написанная на JavaScript и поддерживаемая целым сообществом разработчиков. Кроме того, jQuery не относится к числу стандартов тех организаций (напр., W3C), которые пишут спецификации HTML, CSS или DOM.
Не забывайте, что jQuery служит прежде всего как «сахар» и используется поверх DOM API. Этот сахар помогает работать с интерфейсом DOM, который печально известен своей сложностью и обилием багов.
jQuery – это просто полезная библиотека, которой можно пользоваться при написании сценариев для HTML-элементов. На практике большинство разработчиков прибегают к ней при DOM-скриптинге, поскольку ее API позволяет решить больше задач меньшим количеством кода.
Библиотека jQuery и ее плагины используются разработчиками так широко, что такой код часто нахваливают как самые востребованные сценарии во всем Вебе.
А как же подключить библиотеку в программном коде?
Просто определитесь с ссылкой, нажмите на нее правой кнопкой мышки и выберете «Сохранить как…». Если вы не можете определиться с версией, то сначала прочтите документацию на официальном сайте о каждой из них.
Следующий этап – загрузка полученного документа на сервер с приложением и после подключение к самому коду через тег :
Однако это не единственный вариант. Если нет желания качать библиотеку, то можно совершить подключение с CDN. Для этого в атрибуте src нужно написать полный путь к хранилищу.
В качестве примера я приведу строку с ссылкой на CDN, организованный создателями описываемого инструмента.
Хочу отметить важную деталь: как вы уже поняли, в зависимости от того, откуда вы взяли jQuery, src может отличаться. Так что перед подключением уточняйте данный параметр.
Статистика использования jQuery
Если перейти к статистике, то многие крупные компании, используют jQuery в своих приложениях и сайтах. При этом растущий тренд продолжается, несмотря на очень горячие дискуссии в ИТ сообществах на тему: «Стоит ли использовать jQuery или нет в 2021 году?»
Что такое jQuery и её поддержка браузерами
jQuery — это быстрая, лёгкая и многофункциональная JavaScript библиотека, основанная на принципе «пиши меньше, делай больше».
Её создал Джон Резиг в начале 2006 года. В настоящее время jQuery разрабатывается и поддерживается распределенной группой разработчиков как проект с открытым исходным кодом.
Сейчас последней версией jQuery является 3.5.1. Она поддерживается во всех основных браузерах: Chrome, Firefox, Safari, Edge, Opera и Internet Explorer 9+.
Взгляд в будущее
jQuery исчезнет ещё не скоро. Она активно развивается, и многие разработчики предпочитают использовать её API, даже при доступности нативных методов. Библиотека помогла целому поколению разработчиков создавать сайты, работающие на любых браузерах. И хотя во многих аспектах её заменили новые библиотеки, фреймворки и парадигмы, jQuery сыграла огромную положительную роль в создании современного веба.
Если функциональность jQuery существенно не изменится, вполне вероятно, что в ближайшие несколько лет использование библиотеки будет продолжать медленно, но неуклонно снижаться. Новые веб-сайты, как правило, с самого начала создаются с использованием более современных фреймворков, и подходящие сценарии использования jQuery возникают всё реже.
Кому-то не нравится интенсивность устаревания инструментов для веб-разработки, но для меня это свидетельство быстрого прогресса. jQuery позволила нам много делать лучше. То же самое верно и для её преемников.
Стоит подытожить
Вот и подошли к окончанию вводной публикации. Я постарался составить общее впечатление о технологии и рассказать о ее создании. Как видно, библиотеке около 10 лет, однако благодаря своим создателям, она совершенствовалась и дополнялась каждый год.
Поэтому сегодня ее подключают ко многим веб-сервисам, в том числе написанным и на движках таких как Joomla, WordPress и другие. jQuery нельзя назвать самой лучшей библиотекой, ведь существуют и другие мощные решения, однако она входит в группу лидеров.
Если вам интересно дальше изучать описываемый инструмент, то добро пожаловать в текущую рубрику! Здесь вы найдете полезные статье о том, как его использовать и в каких ситуациях, узнаете об интересных плюшках и сможете опробовать библиотеку, решая практические задания.
Так же я рекомендую вам курс Евгения Попова Javascript + jQuery для начинающих, в котором для новичков рассказываются все азы работы с библиотекой jquery. Ознакомиться с курсом можно по ссылке.
Обязательно подписывайтесь на обновления моего блога и рассказывайте о нем своим друзьям. Желаю удачи в обучении! Пока-пока!
В этой статье рассказывается о том, что дает применение JQuery в ваших проектах. Допустим, вы хорошо знаете JavaScript, активно его используете, это добавляет вашим проектам живости, странички становятся более отзывчивыми и привлекательными по сравнению с голым HTML. Но однажды вы начинаете замечать, что ваш код тяжел, что вы пишете по сути одно и то же много и много раз, и что самое главное — у вас очень мало времени, а сделать хочется гораздо больше. Зреет вопрос — почему? Ответ очевиден: вы не используете фреймворк, а катаетесь на велосипедах собственного производства. Вам повезло, если вы ездите на них в свое удовольствие. Но если вы работаете на ответственных проектах, вас просто накажут рублем за неэффективность.
Попытаюсь убедить вас, как спасти свое время, как сделать разработку быстрее, и объяснить, что дает использование JQuery?
1) Скорость. Вы пишете меньше кода. Одной командой в JQuery можно сделать то, на что понадобится десятки строк простого JavaScript.
2) Понятность. Код и функции JQuery гораздо более удобны для чтения и понимания. Основная логика заключается в том, что сначала выбираем элементы, затем что-то с ними делаем. Поняв главное в JQuery, селекторы, мы можем делать впечатляющие вещи, и начинаем чувствовать всю магию на кончиках наших пальцев.
3) Кроссбраузерность. То, что вы пишете в JQuery с вероятностью 99% будет работать во всех современных браузерах. То, что вы пишете в простом JavaScript скорее всего не станет работать у Джорджа из Кентукки или Питера из Алабамы, просто потому, что вы привыкли использовать один браузер, он вам нравится, вы сделали заложниками своих привычек и пристрастий весь мир. Тетя Грэтта не виновата, что вы полюбили Chrome и ведете свою разработку только под ним. Она всю жизнь использует Firefox, который поставил ей ее сынок Ганс, и ей совершенно наплевать на вас и ваш продукт. Если он вдруг не запустился у нее, она просто будет использовать продукт вашего конкурента.
5) Возможности. Используя JQuery, вы можете подключать множество стандартных компонентов, называемых плагинами. Эти плагины можно по-своему оформлять, и они также будут работать во всех браузерах. Вам надо быстро сделать красивую фото-галерею? Пожалуйста, есть fancybox. Нужен выбор дат? У JQuery есть datepicker. Вам нужен пердожопль? Скорее всего, он тоже есть в арсеналах JQuery. Любая вещь, которая вам нужна, уже сделана, вам нужно только ее подключить и настроить. Представьте, сколько времени вы сэкономите. Вы сможете освободить себя и в 10 раз чаще гладить свою кошку.
6) Поддержка. JQuery разрабатывается уже давно, разные версии JQuery совместимы друг с другом, над этим продуктом трудятся тысячи программистов. Позвольте им писать за вас. Вы будете использовать результаты их труда, а свои велосипеды выкиньте и не позорьтесь. Даже Google использует JQuery, это уже говорит о том, что этот фреймворк прочно застолбил себе место под солнцем и ваш код будет радовать людей долгое время.
7) Конкурентоспособность. Программист, использующий и знающий JQuery гораздо более высоко ценится на рынке труда.
Вы все еще читаете? Вам мало обоснований выгод от использования JQuery? Я бы на вашем месте бросил все дела и принялся за изучение этой поистине революционной технологии.
Здравствуйте, дамы и господа! Вот уже без малого десять лет минуло с первого релиза библиотеки jQuery, и мы решили отряхнуть пыль веков с классики. Подумываем о выпуске третьего издания гусарской баллады об этой библиотеке:
Чтобы пояснить, чем она нас привлекает в эпоху Node и ES6 (у нас в ассортименте и этого добра навалом) предлагаем познакомиться со статьей Коди Линдли, вышедшей вскоре после вышеупомянутого третьего издания
Поскольку давно не утихают разговоры о ненужности jQuery, я буквально не могу избавиться от мысли, что мы забыли основную ценность jQuery. Время о ней напомнить.
В этой статье хотелось бы всем еще раз рассказать, что же такое jQuery, поскольку сегодня она не менее актуальна, чем на момент появления. Вопрос о ее важности нужно соотнести с исходным назначением всего этого решения (то есть, самого API jQuery), а не с браузерными багами или недостающими возможностями. Если исходить из чего-то другого, то мы рискуем встать на позиции, с которых бракуется любая абстракция, которая может быть не абсолютно необходимой, но, все-таки, мощной и полезной.
Прежде чем я начну пылко отстаивать честь jQuery, давайте вернемся к ее истокам, чтобы всем стало понятно, «что» такое jQuery, и «зачем» она нужна.
Как скачать jQuery
Для загрузки нам доступны 2 версии: полная и slim . Отличается slim от полной только тем, что в ней отсутствует часть модулей, а именно ajax и effects . Если функции входящие в эти модули нужны, то тогда следует выбрать полную версию. В противном случае – slim .
Кроме этого, каждая из них доступна нам как в сжатом (с суффиксом min ) так и в несжатом виде.
Несжатый вариант библиотеки рекомендуется использовать только во время разработки проекта или его отладки. Кроме этого, его ещё используют для изучения исходного кода jQuery. В нём можно посмотреть устройство как всей библиотеки, так и определённой функции.
На продакшене лучше применять сжатый вариант jQuery (с расширением min.js ). Он меньше весит, и, следовательно, быстрее загружается. А это очень важно для производительности сайта.
Уменьшение объема JavaScript кода библиотеки jQuery осуществляется за счёт минимизации. Минимизация – это процесс, который заключается в удалении из исходного кода всего лишнего (комментариев, незначащих пробелов, переносов строк, символов табуляции) и замене имен функций и переменных на более короткие.
Кроме этого, существуют разные ветки jQuery: 1.x , 2.x и 3.x .
jQuery 1.x следует использовать если нужна поддержка IE 6 – 8.
jQuery 2.x построено на том же API, что 1.x. Но имеет меньший размер и более высокую производительность. Это было достигнуто благодаря тому, что из неё был удалён устаревший код, необходимый для поддержки IE 6 – 8. Таким образом 2.x можно использовать только в том случае, если вам не нужна поддержка этих старых браузеров.
jQuery 3.x – последняя ветка (3.5.1 – последняя версия). В большинстве случаев рекомендуется выбирать её, если конечно вам не нужна поддержка IE 6 – 8. В отличие от предыдущих веток она имеет множество улучшений (поддержку промисов, работу с анимацией через requestAnimationFrame и др.) и исправлений. Кроме этого, она доступна как в полном формате, так и slim .
После того как вы определись какой вариант библиотеки вам нужен, его необходимо загрузить.
Для скачивания jQuery с официального сайта нажмите правой кнопкой мыши на нужную ссылку и выберите пункт «Сохранить ссылку как. ».
После скачивания, можно заметить, что jQuery представляет обычный файл с расширением .js . Далее его нужно загрузить на сервер.
Как jQuery сочетается с современной веб-разработкой
Однако, при любых разработках, связанных с BOM (браузерной моделью документа) или DOM, а не только с косметическими взаимодействиями, следует пользоваться jQuery. В противном случае вы станете изобретать велосипед (т.e. элементы абстракций jQuery), а потом испытывать его на всевозможных дорожках (т.e в мобильных браузерах и браузерах для ПК).
Опытные разработчики знают, что такое «стоять на плечах гигантов», и когда следует избегать излишней сложности. В большинстве случаев нам все равно не обойтись без jQuery, когда нужно в сжатые сроки выполнить нетривиальную работу, связанную с HTML и DOM.
Кроме того, даже если бы jQuery не решала ни единой проблемы с DOM или с разношерстными браузерными реализациями спецификации DOM, важность самого API ничуть бы не уменьшилась, поскольку он так удобен для HTML-скриптинга.
Причем jQuery совершенствуется, и с ее помощью программисты могут работать толковее и быстрее. Такова ситуация сегодня, так было и на момент создания библиотеки. Сказать «мне не нужна jQuery» — все равно, что утверждать «обойдусь без lo-dash или underscore.js». Разумеется, можно без них обойтись. Но об их ценности судят не по этому.
Их ценность — в API. Из-за излишней сложности разработка может замедляться. Поэтому нам и нравятся такие вещи как lo-dash и jQuery – с ними все упрощается. А поскольку jQuery облегчает выполнение сложных задач (например, писать сценарии для HTML), она не устареет.
Если вы по-прежнему сомневаетесь, нужна ли jQuery в современной веб-разработке, предлагаю посмотреть следующую презентацию от одного из разработчиков библиотеки, где он обосновывает ее нужность безотносительно наворотов современных браузеров.
jQuery — это самая популярная в мире JavaScript-библиотека. Сообщество веб-разработчиков создало её в конце 2000-х, что привело к возникновению богатой экосистемы сайтов, плагинов и фреймворков, использующих под капотом jQuery.
Но в последние годы её статус главного инструмента для веб-разработки пошатнулся. Давайте посмотрим, почему jQuery стала популярной и почему она вышла из моды, а также в каких случаях её пока ещё целесообразно использовать для создания современных сайтов.
Как использовать jQuery на странице
Синтаксис jQuery начинается с функции jQuery или с более короткого и красивого псевдонима - знака $ (как в этом примере).
Как проверить подключён ли jQuery
Проверить подключён ли jQuery к странице можно так:
Если нужно выполнить те или иные действия в зависимости от того подключен jQuery к странице или нет:
Пример, в котором показано как можно добавить jQuery на страницу, если он ещё не загружен:
Узнать версию jQuery, которая у вас подключена к странице можно следующим образом:
Когда использовать jQuery?
Так когда же следует использовать jQuery?
Если сложность проекта будет расти, то лучше начать с другой библиотекой или фреймворком, который позволяет осмысленно управлять сложностью. Например, разделять интерфейс на компоненты. Использование jQuery в таких сайтах на первых порах может выглядеть приемлемо, но это быстро приведёт к возникновению спагетти-кода, когда вы не будете уверены в том, какой фрагмент на какую часть страницы влияет.
Я бывал в такой ситуации, при попытке сделать любое изменение возникает ощущение трудной задачи. Нельзя быть уверенным в том, что ничего не сломаешь, потому что селекторы jQuery зависят от структуры HTML, созданной сервером.
На другом конце шкалы находятся простые сайты, которым требуется лишь чуток интерактивности или динамического контента. В таких случаях я тоже не стал бы по умолчанию использовать jQuery, потому что с нативными API можно сделать гораздо больше.
Даже если мне понадобится что-то более мощное, я поищу специализированную библиотеку, например, axios для Ajax или Animate.css для анимаций. Это будет проще, чем загружать всю jQuery ради небольшой функциональности.
Думаю, лучшим обоснованием использования jQuery будет то, что она предоставляет всеобъемлющую функциональность для работы фронтенда сайта. Вместо того чтобы изучать разнообразные нативные API или специализированные библиотеки, вы можете прочитать лишь документацию jQuery, и сразу станете продуктивны.
Императивный подход плохо масштабируется, но его освоить проще, чем декларативный подход других библиотек. Для сайта с явно ограниченными возможностями лучше применить jQuery и спокойно работать: библиотека не требует сложной сборки или компиляции.
Кроме того, jQuery хороша в тех случаях, если вы уверены, что сайт не будет со временем усложняться, и если вас не волнует нативная функциональность, которая, безусловно, потребует написания больше кода, чем jQuery.
Также вы можете применять эту библиотеку, если нужно поддерживать старые версии IE. Тогда jQuery будет служить вам как в те времена, когда IE был самым популярным браузером.
Браузеры
По ряду причин, различия и ограничения браузеров стали менее важны. Во-первых, улучшилась стандартизация. Основные разработчики браузеров (Apple, Google, Microsoft и Mozilla) совместно разрабатывают веб-стандарты в рамках Web Hypertext Application Technology Working Group.
Хотя браузеры ещё отличаются друг от друга в ряде важных моментов, у вендоров хотя бы есть средство для поиска и создания общей базы вместо перманентной войны друг с другом. Соответственно, API браузеров обрели новые возможности. К примеру, Fetch API способен заменять Ajax-функции из jQuery:
Методы querySelector и querySelectorAll дублируют средства выбора из jQuery:
Манипулировать классами элементов теперь можно с помощью classList:
На сайте You Might Not Need jQuery перечислено ещё несколько ситуаций, в которых код jQuery можно заменить нативным кодом. Некоторые разработчики всегда придерживаются jQuery, потому что просто не знают о новых API, но когда узнают, начинают реже использовать эту библиотеку.
Использование нативных возможностей позволяет повысить производительность страниц. Многие эффекты анимации из jQuery теперь можно реализовать гораздо эффективнее с помощью CSS.
Вторая причина заключается в том, что браузеры обновляются гораздо быстрее, чем раньше. В большинстве из них применяется «вечнозелёная» стратегия обновления, за исключением Apple Safari. Они могут обновляться в фоновом режиме без привлечения пользователя и не привязаны к обновлениям ОС.
Это означает, что новые возможности браузеров и исправления багов распространяются гораздо быстрее, и разработчикам не нужно ждать, пока доля Can I Use достигнет приемлемого уровня. Они могут уверенно использовать новые фичи и API без загрузки jQuery или полифилов.
Третья причина заключается в том, что Internet Explorer приближается к состоянию полной неактуальности. IE уже давно является бичом веб-разработки во всём мире. Характерные для него баги были широко распространены, а поскольку IE доминировал в 2000-х и не использовал «вечнозелёную» стратегию обновления, до сих пор часто встречаются его старые версии.
В 2016-м Microsoft ускорила вывод IE из эксплуатации, прекратив поддерживать десятую и более ранние версии, ограничившись поддержкой IE 11. И всё чаще веб-разработчики могут позволить себе роскошь игнорирования совместимости с IE.
Даже jQuery перестал поддерживать IE 8 и ниже начиная с версии 2.0, вышедшей в 2013-м. И хотя в некоторых случаях ещё требуется поддержка IE, к примеру, на старых сайтах, однако эти ситуации возникают всё реже.
Как подключить jQuery с CDN
CDN (Content Delivery Network) – это технология, которая позволяет увеличить скорость доставки контента конечным пользователям.
Состоит она из большого количества серверов, географически расположенных в разных точках мира, на каждом из которых располагается кэш контента. При этом его доставка конечному пользователю осуществляется обычно с того сервера, который ближе других расположен к нему. В результате чего сокращается время его загрузки, ускоряется отклик, увеличивается производительность сайта, а также снижается нагрузка на оригинальный сервер.
Т.е. CDN предоставляет ещё один способ подключить библиотеку jQuery. При этом непосредственно загружать его себе на сервер не нужно, он будет браться с CDN.
Загрузку jQuery с CDN предоставляют множество компаний, например, таких как Google, Microsoft, Cloudflare, jQuery, Yandex и т.д.
Подключить jQuery с CDN очень просто. Для этого нужно вставить script с атрибутом src , в котором прописать путь до этой библиотеки.
Код для онлайн подключения jQuery последней версии (3.5.1) с Google CDN:
Если нужна не эта, а какая-то другая версия, то тогда следует перейти страницу Google CDN и выбрать её.
Например, ссылка для подключения версии из ветки 1.x (1.12.4):
Google CDN для последней версии из ветки 2.x (2.2.4):
Два краеугольных камня jQuery
Две базовые концепции, на которых основана jQuery, таковы: “найди и сделай” и “пиши меньше, делай больше.”
Две этих концепции можно развернуть и переформулировать в виде следующего утверждения: первоочередная задача jQuery заключается в организации выбора (то есть, нахождении) или в создании HTML-элементов для решения практических задач. Без jQuery для этого потребовалось бы больше кода и больше сноровки в обращении с DOM. Достаточно вспомнить рассмотренный выше пример с сокрытием элемента h2 .
Еще добавлю, что польза jQuery – не в успешном устранении браузерных багов. «Краеугольные камни» нисколько не связаны с этими аспектами jQuery. В долгосрочном отношении самая сильная сторона jQuery заключается в том, что ее API абстрагирует DOM. И эта ценность никуда не денется.
Другие популярные CDN
Yandex CDN (последняя опубликованная версия 3.3.1):
Дополнительно можно отметить, что если множество сайтов используют один и тот-же URL для подключения jQuery с CDN, то браузеру не потребуется загружать его для каждого такого ресурса. После первого скачивания он поместить jQuery в кэш и при последующих запросах будет брать её уже оттуда.
Читайте также: