Подключение библиотеки jQuery. 4 способа
Подключать библиотеку jQuery можно различными способами. Давайте рассмотрим разные способы.
Способ 1. Скачать в папку и подключить файл
Наиболее распространённый способ, если сайт могут просматривать локально, без подключения сети Интернет (неужели такие еще есть?).
Идем по адресу и жмем большую желто-оранжевую кнопку Download jQuery. Переходим на страницу где выбираем версию jQuery. Желательно выбирать последнюю из доступных (на момент написания статьи – это 2.2.3). Обозначение compressed – означает, что библиотека минимизирована, т.е. занимаем минимум места, но, к сожалению, читать исходных код трудно. Качаем! После сохранения подключаем файл библиотеки. Для моей структуры (все скрипты лежат в папке js), код выглядит следующим образом:
Что такое jQuery? Как его скачать и подключить к сайту?
В этой статье вы узнаете: что такое JavaScript библиотека jQuery, как скачать последнюю версию и подключить её к сайту, как установить скрипт с Google CDN и других хранилищ на страницу, а также чем отличается обычная версия от slim и сжатая от не сжатой.
Что такое jQuery и её поддержка браузерами
jQuery — это быстрая, лёгкая и многофункциональная JavaScript библиотека, основанная на принципе «пиши меньше, делай больше».
Её создал Джон Резиг в начале 2006 года. В настоящее время jQuery разрабатывается и поддерживается распределенной группой разработчиков как проект с открытым исходным кодом.
Сейчас последней версией jQuery является 3.5.1. Она поддерживается во всех основных браузерах: Chrome, Firefox, Safari, Edge, Opera и Internet Explorer 9+.
Преимущества и недостатки jQuery
Преимущества, которые даёт нам библиотеки jQuery при её использовании для написания клиентских сценариев:
- компактность кода . Позволяет писать код более компактно чем на чистом javaScript, т.е. за гораздо меньшее количество строк кода.
- простой и понятный синтаксис . Значительно упрощает написание многих вещей, например, таких как манипулирование DOM элементами, обработку событий, добавление эффектов анимации на страницу, AJAX запросов и т.д.
- кроссбраузерность . Код написанный на jQuery будет гарантированно работать во всех основных браузерах. В то время как код, написанный на чистом JavaScript надо будет однозначно проверять во всех браузерах. Т.к. некоторые фрагменты кода могут не поддерживаться и их реализацию для этих браузеров нужно будет выполнять как-то по-другому, или например, использовать полифиллы.
- открытый код . Библиотека jQuery является полностью бесплатной как для личных, так и для коммерческих проектов.
Кроме преимуществ, приведённых выше, у библиотеки jQuery имеются конечно и недостатки.
К недостаткам jQuery можно отнести то, что она может немного увеличивать скорость загрузки веб-страницы (её сжатый размер составляет около 30КБ), а также немного снижать производительность выполнения кода, чем если он был бы написан на чистом JavaScript.
Статистика использования jQuery
Если перейти к статистике, то многие крупные компании, используют jQuery в своих приложениях и сайтах. При этом растущий тренд продолжается, несмотря на очень горячие дискуссии в ИТ сообществах на тему: «Стоит ли использовать jQuery или нет в 2021 году?»
Что можно делать с jQuery
jQuery позволяет очень легко:
- выбирать элементы для выполнения различных манипуляций над ними;
- создавать различные визуальные эффекты (например, плавное отображение и скрытие элементов);
- создавать сложную анимацию, при этом реализовывая это за гораздо меньшее количество строк кода чем на чистом JavaScript;
- манипулировать DOM элементами и их атрибутами;
- реализовывать AJAX для асинхронного обмена данными между клиентом и сервером;
- перемещаться от текущего узла к другим по иерархической структуре DOM дерева;
- выполнять несколько действий над элементом посредством одной строчки кода;
- получать или устанавливать размеры HTML элементам и т.д.
Этот список можно продолжить дальше, т.к. 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 в html
Подключение jQuery к странице осуществляется также как и любого другого JavaScript файла. Т.е. посредством добавления в HTML тега <script> с атрибутом src , в котором необходимо задать полный или относительный путь к файлу.
Подключение последней версии jQuery:
При этом разместить <script> можно как секции в <head> , так и в <body> . Но где же лучше?
Раньше (до появления режимов async и defer ) это рекомендовалось делать перед закрывающим тегом body :
При таком размещении скрипт не будет блокировать парсинг веб-страницы, т.к. его загрузка и выполнение будет осуществляться в самом конце. В результате, это приведёт к тому, что пользователь увидит содержимое страницы быстрее и сможет раньше с ней начать взаимодействовать.
Если бы мы сделали это по-другому, например, поместили script в раздел head , то создали бы «задержку» при обработке страницы в самом её начале. А это привело бы к тому, что пользователю пришлось бы дольше ждать отображения контента страницы.
Но сейчас так делать не рекомендуется. Лучше размещать скрипты как можно выше (в разделе <head> ) с добавлением к ним атрибута defer или async . Эти атрибуты будут «говорить» браузеру, что скрипт нужно загрузить в фоне, не останавливая при этом основной поток обработки страницы. Это позволит сделать сайт более производительным.
Использовать атрибут async применительно к jQuery не имеет смысла, т.к. эту библиотеку мы в основном используем для изменения DOM. Но перед тем, как править DOM, он должен быть построен. Это сделать нам поможет использование атрибута defer . Атрибут defer гарантирует что скрипт выполниться только после того, как дерево DOM будет построено, но до события DOMContentLoaded .
При этом, если на странице имеется несколько внешних скриптов с атрибутом defer , то они будут выполняться строго в том порядке, в котором они расположены в коде.
Пример отложенного подключения jQuery и своего внешнего скрипта, зависящего от этой библиотеки:
При непосредственном размещении JavaScript кода в HTML документе его необходимо поместить в обработчик события DOMContentLoaded (в этом случае его код выполнится после загрузки библиотеки jQuery):
Как подключить 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):
Другие популярные CDN
Yandex CDN (последняя опубликованная версия 3.3.1):
Дополнительно можно отметить, что если множество сайтов используют один и тот-же URL для подключения jQuery с CDN, то браузеру не потребуется загружать его для каждого такого ресурса. После первого скачивания он поместить jQuery в кэш и при последующих запросах будет брать её уже оттуда.
Как проверить подключён ли jQuery
Проверить подключён ли jQuery к странице можно так:
Если нужно выполнить те или иные действия в зависимости от того подключен jQuery к странице или нет:
Пример, в котором показано как можно добавить jQuery на страницу, если он ещё не загружен:
Узнать версию jQuery, которая у вас подключена к странице можно следующим образом:
Как использовать jQuery на странице
Использование jQuery рассмотрим на простом HTML5 документе. Для этого мы его создадим, подключим к нему эту библиотеку с помощью Google CDN, и произведём с помощью неё ряд изменений на странице. А именно, изменим цвет фона body на #eee , выровняем h1 по центру и добавим в конец страницы элемент div с контентом «Я люблю jQuery».
Синтаксис jQuery начинается с функции jQuery или с более короткого и красивого псевдонима — знака $ (как в этом примере).
Что делать при конфликте jQuery с другой библиотекой
Но что делать если знак $ у вас занят и используется другой библиотекой?
В этом случае, чтобы избежать конфликтов можно воспользоваться одним из следующих 3 способов.
How to Use a JavaScript Library: jQuery
Learn how to dynamically change a website with the jQuery library
Read the article or watch the video!
JQuery is a library that contains lots of methods which make it much easier to manipulate HTML documents, add animation, along with a bunch of other things. Since JQuery is a library, it has an API that we can use to access its functionality.
API stands for Application Programming Interface and it basically states the methods or functions we can call inside our code if we import the library.
Let’s click on .addClass() method and see what it does.
Say we had a class named blue that made its elements have blue text. We could use the .addClass() method and add the blue class to all of the p elements with something similar to this where we’d have $(“p”).addClass(“blue”). This may be confusing right now, but don’t worry, we’ll figure it out.
To start, we first need to create an index.html and a script.js file. We’ll also put the script.js file in a folder named js and then link our script.js file in our index.html file. This should look pretty familiar since we’ve done it in other tutorials.
Just like we imported bootstrap in the bootstrap tutorial, we need to import jQuery in this post. We can either download it from the Internet and link it locally or we can link it from the Internet. We’ll do the second and after searching for the jQuery CDN, we’ll add it to our code.
Make sure to add it above the our script.js link because we will need to use jQuery in this file. With our jQuery in place, we’ll add one line of HTML code, a header. We’ll add some styling that puts it in the center of the page and gives it a white text color. We can also give it the id hidden and the header will say “I was hidden!”.
Now, when we refresh the page, we’ll see that the header text is there, but we can’t see it unless we highlight it.
With jQuery and CSS, we could make it so that when we hover over it, the text of the header becomes black. To do this, we’ll go into our script.js file and write some code.
Here, the ready function makes sure that the DOM (for now, our HTML elements) have loaded. Once they are loaded, we select our element with the hidden id and call the hover function on it. This means when we over hover the element, the function on lines 2–4 will be run. The function will select “this” element (the element with the id hidden) and in the element’s CSS, the color property will be set to the value black. You could do this for any element, ID, or class and set any property to any value. Next, we have the callback function on lines 5–6 and this is something you have to write out even if you don’t use it. We will leave it empty for now and come back to it later.
Now, when we refresh the page and hover over the header, the text turns black. However, when we stop hovering over the header, the text remains black. What if we want to “re-hide” our message after hovering over it? Going back to the code we can implement our callback function. This will be called once we “leave” or stop hovering over our header, the element with the ID hidden. Let’s add some more code.
Here, we select “this” element again, which is the element with the ID hidden, and hide it from the viewer. This function as with the .css, .hover, and .ready function are built into the jQuery library so we don’t need to worry about how they are implemented. We just need to know the end result. Here, the hide function hides “this” element on the webpages. Essentially, this just sets the display property of “this” element to none, but using .hide() makes the code a bit more concise. Let’s see what happens when we refresh the page.
We hover over the header and leave it. After, the header element is gone — even when we try highlighting it, it cannot be found. With this program, we hid a message in plain sight, displayed the message while the mouse was pointed on it, and then made it disappear when the mouse left it.
For another quick example, we’ll add a button back in our HTML and make it so an alert shows up on the page when we click the button.
Now, we’ll write the JavaScript using the jQuery library to make the button interactive.
Here, we select all the buttons on the page and when one is clicked, we run the function. The function uses the alert method (built into HTML) to alert the user on screen with the message “I’m alerting you!”. Going back to our webpage, we’ll refresh and see what our alert looks like.
Подключение jQuery
jQuery — это быстрая, небольшая и многофункциональная библиотека JavaScript, включенная в один файл .js. На данный момент это самая популярная библиотека JavaScript.
JQuery облегчает жизнь веб-разработчика. Библиотека предоставляет множество встроенных функций, с помощью которых вы можете легко и быстро выполнять различные задачи, используя меньше кода.
Немного теории
Для лучшего понимания давайте рассмотрим основные задачи, которые можно решить с помощью библиотеки jQuery, рассмотрим какие бывают версии и варианты подключения, а затем перейдем непосредственно к практике.
Важные особенности jQuery
Выбор DOM: jQuery предоставляет селекторы для извлечения элемента DOM на основе различных критериев, таких как имя тега, идентификатор, имя класса css, имя атрибута, значение, n-й дочерний элемент в иерархии и т.д.
DOM манипуляции: вы можете манипулировать DOM-элементами, используя различные встроенные функции jQuery. Например, добавление или удаление элементов, изменение содержимого HTML, класса CSS и т.д.
Специальные эффекты: Вы можете применять специальные эффекты к элементам DOM, таким как показ или скрытие элементов, постепенное увеличение или уменьшение видимости, эффект скольжения, анимация и т.д.
События: библиотека jQuery включает в себя функции, которые эквивалентны DOM-событиям, таким как нажатие, dblclick, mouseenter, отпускание мыши, размытие, keyup, keydown и т.д. Эти функции автоматически решают проблемы, возникающие в браузере.
Ajax: jQuery также включает в себя простые в использовании функции AJAX для загрузки данных с серверов без перезагрузки всей страницы.
Кросс-браузерная поддержка: библиотека jQuery автоматически обрабатывает кросс-браузерные проблемы, поэтому пользователю не нужно об этом беспокоиться. jQuery поддерживает IE 6.0+, FF 2.0+, Safari 3.0+, Chrome и Opera 9.0+.
Преимущества jQuery
Легко учиться: jQuery легко научиться, потому что он поддерживает то же самое кодирование в стиле JavaScript.
Пишите меньше, делайте больше: jQuery предоставляет богатый набор функций, которые повышают производительность разработчиков за счет написания меньшего количества удобочитаемого кода.
Отличная документация по API: jQuery предоставляет отличную онлайн-документацию по API.
Кросс-браузерная поддержка: jQuery обеспечивает отличную кросс-браузерную поддержку без написания дополнительного кода.
Ненавязчивый: jQuery является ненавязчивым, что позволяет разделить проблемы путем разделения HTML и jQuery кода.
Версии jQuery
На данный момент существуют три версии jQuery: 1.x, 2.x и 3.x. Отличие второй версии лишь в том, что в ней перестали поддерживаться старые браузеры, такие как Internet Explorer ниже 8 версии. Это позволило уменьшить размер файла библиотеки и ускорить её работу. Третья версия получила еще больше ускорения, новых методов и исправлений.
Так же jQuery используется в сжатом (.min) и не сжатом варианте. Несжатую версию библиотеки вы можете использовать во время разработки. В сжатом варианте код минимизирован и внести какие-то изменения в него практически невозможно. Поэтому сжатый вариант используют уже на рабочем проекте для более оптимальной работы, так как библиотека в таком варианте занимает гораздо меньше места и быстрее обрабатывается.
Подключение jQuery
Для подключения jQuery к вашему проекту существует 2 способа: локальный и с помощью CDN. При локальном способе библиотека подключается как обычный .js файл, который находится на вашем сервере. При подключении с CDN библиотека подключается с удаленного сервера, например с Google CDN. Давайте рассмотрим каждый способ более подробно.
Подключение jQuery локально
1. Загрузите js-файл библиотеки jQuery с официальной страницы. Просто щелкните правой кнопкой мыши ссылку для загрузки и выберите пункт «Сохранить ссылку как» во всплывающем меню.
Загрузка jQuery с официального сайта
2. Затем сохраните загружаемый файл в каталоге вашего сайта. Я например просто сохраняю его в папке js моего проекта вместе с остальными js-скриптами.
3. Теперь вам нужно включить скачанный ранее файл библиотеки в вашу страницу. Разместите следующий код между тегами <head> и </head> :
Должно получится что-то вроде этого:
Подключение jQuery с CDN
Подключение jQuery размещенного на CDN похоже на локальное, за исключением того, что файл библиотеки будет не на вашем сервере, а на удаленном. Помимо этой детали, вы просто добавляете jQuery в вашу страницу, как и любой другой внешний файл JavaScript.
Одно большое преимущество использования размещенного jQuery от Google: многие пользователи уже загрузили jQuery из Google CDN при посещении другого веб-сайта. В результате он будет загружен из кэша при посещении вашего сайта, что приводит к ускорению загрузки. Кроме того, Google CDN будет следить за тем, чтобы после того, как пользователь запросил у него файл, он был отправлен с ближайшего к ним сервера, что также приводит к ускорению загрузки.
Наиболее популярные CDN — это Google CDN и jQuery CDN. Мы рассмотрим подключение с Google CDN, но подключение с других серверов аналогично и можете выбрать любой понравившийся вариант.
1. Получите ссылку на библиотеку на официальном сайте Google CDN.
Google CDN
2. Разместите полученный код между тегами <head> и </head> :
Должно получится примерно следующее:
Как проверить подключен ли jQuery на странице?
Добавьте следующий код перед закрывающим тегом </body> :
Если библиотека подключена и работает, то скрипт вызовет всплывающее окно при открытии страницы.
Обратите внимание, что вызовы функций jQuery должны находится после подключения самой библиотеки. Если код подключения библиотеки будет находится после вызова, то ваша функция не сработает и скорее всего вызовет ошибку.
Полный код примера:
Сохраните этот код в файл .html и запустите его. Вы увидите вот такое всплывающее окно:
Всплывающее окно на jQuery
Заключение
Как видите подключить и начать использовать библиотеку jQuery совсем просто. А каким именно вариантом подключения воспользоваться это уже решать вам.