Подключить библиотеку jquery: Что такое jQuery? Как его скачать и подключить к сайту?

Как подключить JQuery CDN или Google, возможности библиотеки

Подключить библиотеку JQuery к сайту несколькими способами. Один из самых быстрых и простых способов — использовать возможности CDN. Подключение JQuery, используя CDN, в ряде случаев будет даже лучше, чем традиционный способ, при котором нужно скачивать эту библиотеку и монтировать ее в свой проект.

JQuery — это библиотека, основанная на JavaScript, которая в свое время была одним из самых популярных JS-инструментов. Она преследует простую цель — «пиши меньше, но разрабатывай больше». Благодаря такому подходу она и обрела должную популярность среди веб-разработчиков.

CDN — это специальная технология для быстрой доставки контента пользователям. Ее идея простая: создать сеть серверов по всему миру, чтобы максимально приблизить серверы к своим пользователям. Когда пользователь будет запрашивать контент, он получит его с географически ближайшего сервера, что увеличит скорость загрузки контента.

Идея простая, и ей активно пользуются крупные IT-компании, например, такие как:

  • Яндекс;

  • Google;

  • Microsoft;

  • Apple;

  • Amazon;

  • и др.

У кого-то сеть серверов побольше, у кого-то поменьше. 

Что такое JQuery с CDN

JQuery — это библиотека для веб-разработки. Вот несколько ее особенностей:

  • более компактный код, по сравнению с «чистым JavaScript»;

  • более понятный синтаксис, по сравнению с JS;

  • кроссбраузерность, которая гарантирует, что код с использованием JQuery будет функционировать в любом известном браузере;

  • бесплатный инструмент с открытым исходным кодом;

  • и др.

Главный недостаток JQuery — это уменьшение скорости загрузки веб-страницы. То есть программа, написанная на JQuery, функционирует чуть медленнее, чем программа, созданная с помощью «ванильного» JavaScript. Во время выхода этой библиотеки, а это был 2006 год, данный недостаток не считался критическим, так как не было других достойных JS-инструментов. В наше время все немного поменялось: появились другие, более производительные JS-инструменты, поэтому популярность JQuery стала немного снижаться. Но это вовсе не означает, что не нужно использовать эту библиотеку в своей работе.

На что способна JQuery:

  • она открывает возможность гибкой манипуляции элементами на странице;

  • помогает моделировать различные визуальные эффекты;

  • помогает моделировать анимацию меньшим количеством строк программы, чем «ванильный» JavaScript;

  • манипулирует DOM-компонентами;

  • реализовывает асинхронный взаимообмен информацией в цепочке «клиент-сервер»;

  • умещает в одной строке несколько операций над одним элементом;

  • и мн. др.

Как подключить JQuery с Google CDN

CDN (Content Delivery Network) — уникальная технология быстрой доставки контента пользователям. Компании, предлагающие пользователям спектр каких-то услуг в интернете, часто используют CDN с своей работе, например, та же компания Google. Все знают, что это американская компания, но не все знают, что у компании разбросана сеть из крупных и мелких дата-центров по всему миру. То есть, пользуясь какой-то услугой от компании Google из России, вы «обращаетесь» к ближайшему дата-центру компании, который также расположен в России. А если вы воспользуетесь той же услугой из Европы, вам ее будет предоставлять ближайший дата-центр из Европы.

Обычно по сети CDN распределяется более «крупный» контент, например, какие-то приложения для скачивания. Также есть компании, которые предлагают услугу CDN для веб-мастеров. В этом случае их сайты кэшируются на нескольких серверах компании, и, когда пользователь обращается к сайту, ему показывается сайт с ближайшего к нему сервера.

По такому же принципу распространяется и JQuery. В традиционном способе, чтобы подключить JQuery к собственному проекту, нужно проделать примерно следующее:

  • скачать JQuery с официального сайта;

  • загрузить библиотеку к себе на сервер;

  • подключить JQuery в свой проект.

Это все делается быстро и просто, однако еще быстрее и проще — подключить JQuery с CDN. В этом случае вы всего лишь добавляете в собственный проект ссылку на библиотеку и начинаете применять ее по назначению. При этом нет необходимости что-то скачивать и заливать к себе на сервер. Такую возможность предоставляют многие IT-компании. Не принципиально использовать какую-то конкретную компанию, поэтому можете использовать любую. Нам нравится Google, поэтому мы опишем, как подключить JQuery с Google CDN. 

Подключение JQuery с Google CDN выглядит следующим образом:

  • нужно пройти на специальную страницу от компании Google, где можно выбрать необходимую версию JQuery и там же скачать соответствующий скрипт;

  • скопировать скрипт и вставить его в раздел «head» вашего сайта.

На момент написания статьи скрипт для вставки на веб-страницы с актуальной версией JQuery будет следующим:

Из ветки 3.х:

 <script src=»https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js»></script>

Из ветки 2.х:

<script src=»https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js»></script>

Из ветки 1.х:

<script src=»https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js»></script>

Заключение

Как видно, подключить JQuery с CDN достаточно просто. Самое важное, что не нужно ничего скачивать, а также нагружать серверы своего проекта. При таком дистанционном подключении JQuery во многих случаях работает лучше, чем скачанная и установленная. 

До сих пор ходят споры, а стоит ли использовать JQuery в 2022 году? Ведь вокруг JavaScript появилось много других интересных и производительных инструментов. На самом деле, нет однозначного ответа, потому что JQuery, как и любой другой веб-инструмент, обладает своими сильными и слабым сторонами. Поэтому, если хотите ее попробовать, тогда пробуйте, а если в чем-то сомневаетесь, тогда выберите другой инструмент, который вам кажется более эффективным.

jQuery Core — все версии

jQuery Миграция сборки git — несжатый, уменьшенный

jQuery Core — все версии 3.x

  • jQuery Core 3.6.4 — несжатый, уменьшенный, тонкий, тонкий уменьшенный
  • jQuery Core 3.6.3 — несжатый, уменьшенный, тонкий, тонкий уменьшенный
  • jQuery Core 3.6.2 — несжатый, уменьшенный, тонкий, тонкий уменьшенный
  • jQuery Core 3.6.1 — несжатый, уменьшенный, тонкий, тонкий уменьшенный
  • jQuery Core 3.6.0 — несжатый, уменьшенный, тонкий, тонкий уменьшенный
  • jQuery Core 3.5.1 — несжатый, уменьшенный, тонкий, тонкий уменьшенный
  • jQuery Core 3.5.0 — несжатый, уменьшенный, тонкий, тонкий уменьшенный
  • jQuery Core 3.4.1 — несжатый, уменьшенный, тонкий, тонкий уменьшенный
  • jQuery Core 3.4.0 — несжатый, уменьшенный, тонкий, тонкий уменьшенный
  • jQuery Core 3.3.1 — несжатый, уменьшенный, тонкий, тонкий уменьшенный
  • jQuery Core 3.
    3.0 — несжатый, уменьшенный, тонкий, тонкий уменьшенный
  • jQuery Core 3.2.1 — несжатый, уменьшенный, тонкий, тонкий уменьшенный
  • jQuery Core 3.2.0 — несжатый, уменьшенный, тонкий, тонкий уменьшенный
  • jQuery Core 3.1.1 — несжатый, уменьшенный, тонкий, тонкий уменьшенный
  • jQuery Core 3.1.0 — несжатый, уменьшенный, тонкий, тонкий уменьшенный
  • jQuery Core 3.0.0 — несжатый, уменьшенный, тонкий, тонкий уменьшенный

jQuery Core — все версии 2.x

  • jQuery Core 2.2.4 — несжатый, уменьшенный
  • jQuery Core 2.2.3 — несжатый, минимизированный
  • jQuery Core 2.2.2 — несжатый, минимизированный
  • jQuery Core 2.2.1 — несжатый, минимизированный
  • jQuery Core 2.2.0 — несжатый, минимизированный
  • jQuery Core 2.1.4 — несжатый, минимизированный
  • jQuery Core 2.1.3 — несжатый, минимизированный
  • jQuery Core 2.1.2 — несжатый, минимизированный
  • jQuery Core 2.1.1 — несжатый, минимизированный
  • jQuery Core 2. 1.0 — несжатый, минимизированный
  • jQuery Core 2.0.3 — несжатый, минимизированный
  • jQuery Core 2.0.2 — несжатый, минимизированный
  • jQuery Core 2.0.1 — несжатый, минимизированный
  • jQuery Core 2.0.0 — несжатый, минимизированный

jQuery Core — все версии 1.x

  • jQuery Core 1.12.4 — несжатый, минимизированный
  • jQuery Core 1.12.3 — несжатый, минимизированный
  • jQuery Core 1.12.2 — несжатый, минимизированный
  • jQuery Core 1.12.1 — несжатый, минимизированный
  • jQuery Core 1.12.0 — несжатый, минимизированный
  • jQuery Core 1.11.3 — несжатый, минимизированный
  • jQuery Core 1.11.2 — несжатый, минимизированный
  • jQuery Core 1.11.1 — несжатый, минимизированный
  • jQuery Core 1.11.0 — несжатый, минимизированный
  • jQuery Core 1.10.2 — несжатый, минимизированный
  • jQuery Core 1.10.1 — несжатый, минимизированный
  • jQuery Core 1.10.0 — несжатый, минимизированный
  • jQuery Core 1. 9.1 — несжатый, минимизированный
  • jQuery Core 1.9.0 — несжатый, минимизированный
  • jQuery Core 1.8.3 — несжатый, минимизированный
  • jQuery Core 1.8.2 — несжатый, минимизированный
  • jQuery Core 1.8.1 — несжатый, минимизированный
  • jQuery Core 1.8.0 — несжатый, минимизированный
  • jQuery Core 1.7.2 — несжатый, минимизированный
  • jQuery Core 1.7.1 — несжатый, минимизированный
  • jQuery Core 1.7.0 — несжатый, минимизированный
  • jQuery Core 1.7.0 — несжатый, минимизированный
  • jQuery Core 1.6.4 — несжатый, минимизированный
  • jQuery Core 1.6.3 — несжатый, минимизированный
  • jQuery Core 1.6.2 — несжатый, минимизированный
  • jQuery Core 1.6.1 — несжатый, минимизированный
  • jQuery Core 1.6.0 — несжатый, минимизированный
  • jQuery Core 1.5.2 — несжатый, минимизированный
  • jQuery Core 1.5.1 — несжатый, минимизированный
  • jQuery Core 1.5.0 — несжатый, минимизированный
  • jQuery Core 1. 4.4 — несжатый, минимизированный
  • jQuery Core 1.4.3 — несжатый, минимизированный
  • jQuery Core 1.4.2 — несжатый, минимизированный
  • jQuery Core 1.4.1 — несжатый, минимизированный
  • jQuery Core 1.4.0 — несжатый, минимизированный
  • jQuery Core 1.3.2 — несжатый, минимизированный, упакованный
  • jQuery Core 1.3.1 — несжатый, минимизированный, упакованный
  • jQuery Core 1.3.0 — несжатый, минимизированный, упакованный
  • jQuery Core 1.2.6 — несжатый, минимизированный, упакованный
  • jQuery Core 1.2.5 — несжатый, минимизированный, упакованный
  • jQuery Core 1.2.4 — несжатый, минимизированный, упакованный
  • jQuery Core 1.2.3 — несжатый, минимизированный, упакованный
  • jQuery Core 1.2.2 — несжатый, минимизированный, упакованный
  • jQuery Core 1.2.1 — несжатый, минимизированный, упакованный
  • jQuery Core 1.2.0 — несжатый, минимизированный, упакованный
  • jQuery Core 1.1. 4 — несжатый, упакованный
  • jQuery Core 1.1.3 — несжатый, упакованный
  • jQuery Core 1.1.2 — несжатый, упакованный
  • jQuery Core 1.1.1 — несжатый, упакованный
  • jQuery Core 1.1.0 — несжатый, упакованный
  • jQuery Core 1.0.4 — несжатый, упакованный
  • jQuery Core 1.0.3 — несжатый, упакованный
  • jQuery Core 1.0.2 — несжатый, упакованный
  • jQuery Core 1.0.1 — несжатый, упакованный
  • jQuery Core 1.0.0 — несжатый, упакованный

jQuery Migrate — все версии

  • jQuery Migrate 3.4.1 — несжатая, минимизированная
  • jQuery Migrate 3.4.0 — несжатый, минимизированный
  • jQuery Migrate 3.3.2 — несжатый, минимизированный
  • jQuery Migrate 3.3.1 — несжатый, минимизированный
  • jQuery Migrate 3.3.0 — несжатый, минимизированный
  • jQuery Migrate 3.2.0 — несжатый, минимизированный
  • jQuery Migrate 3.1.0 — несжатый, минимизированный
  • jQuery Migrate 3. 0.1 — несжатый, минимизированный
  • jQuery Migrate 3.0.0 — несжатый, минимизированный
  • jQuery Migrate 1.4.1 — несжатый, минимизированный
  • jQuery Migrate 1.4.0 — несжатый, минимизированный
  • jQuery Migrate 1.3.0 — несжатый, минимизированный
  • jQuery Migrate 1.2.1 — несжатый, минимизированный
  • jQuery Migrate 1.2.0 — несжатый, минимизированный
  • jQuery Migrate 1.1.1 — несжатый, минимизированный
  • jQuery Migrate 1.1.0 — несжатый, минимизированный
  • jQuery Migrate 1.0.0 — несжатый, минимизированный

Пользовательский интерфейс jQuery — все версии