Jquery how to connect

Введение в jQuery

Начало работы с jQuery

Что такое jQuery

Современное веб-программирование и создание веб-сайтов уже невозможно представить без использования языка JavaScript. Однако в настоящее время, все чаще используется не «голый» код javascript, а javascript-фреймворки и библиотеки. Одной из таких библиотек, причем наверное самой популярной на сегодняшний день, является jQuery. По некоторым оценкам не менее половины крупнейших сайтов в интернете используют эту библиотеку.

Хотя мы и можем назвать jQuery библиотекой, он на самом деле понятие «jQuery» объединяет целую экосистему библиотек, построенный вокруг базовой библиотеки: это и библиотека jquery.ui, предназначенная для создания визуальных интерфейсов, это и jqyery.mobile, используемая при разработке мобильных сайтов и др.

Какие преимущества несет нам использование jQuery?

Подключение библиотеки jQuery

Чтобы начать работать с данной библиотекой, нам первым делом надо ее загрузить. Ее найти можно на официальном сайте разработчика https://jquery.com/download/. На странице загрузок в самом можно найти несколько версий jQuery. На момент написания данной главы последней доступной версией является 2.0.3. Хотя версии немного отличаются друг от друга, но эти отличия, как правило, не столь существенны, и базовый стержень и общие принципы у большинства версий по сути одни и те же.

Библиотека jquery подключается также, как и другие файлы javascript. Например:

Данная веб-страница, с одной стороны, применяет код jquery, с другой стороны, также демонстрирует отличие от использования стандартного кода javascript.

Другая же кнопка делает практически тоже самое, но только с jquery. Для этой кнопки определен id (id=»btn1″), через который в функции jquery мы будет ею управлять.

В самом низу страницы мы определим функцию jquery:

Использование сетей CDN

В предыдущем примере я подключил библиотеку jquery непосредственно с локального диска, однако нам необязательно загружать библиотеку и размещать на локальном диске рядом с прочими файлами. Вместо этого мы можем использовать сети CDN (Content Delivery Networks). В данном случае сама библиотека будет находится физически в какой-либо сети CDN, а мы можем указать на нее ссылку.

Например, подключим библиотеку jquery, находящуюся в jQuery CDN:

Необязательно подключать именно эту версию библиотеки, весь набор доступных версий библиотеки можно найти по адресу https://code.jquery.com/

Также мы можем использовать и другие сети CDN. Например:

Артём Саннников

Блог о программировании

Языки программирования

Формат данных

Базы данных

Программное обеспечение

Операционные системы

Мобильная разработка

Менеджеры пакетов

Сетевые технологии

CMS системы

Математика

SEO продвижение

Социальные сети

Психология

Хостинг провайдер

Смартфоны

JQuery является библиотекой JavaScript, которая позволяет осуществить взаимодействие между JavaScript и HTML. Благодаря JQuery можно получить доступ к любому элементу DOM и манипулировать им. Разработчики предоставляют несколько версий данной библиотеки:

Подключить JQuery к сайту можно двумя способами, которые существенно отличаются друг от друга и имеют свои плюсы и минусы. Сначала рассмотрим самый простой способ, а затем перейдём к более сложному.

Подключение JQuery при помощи CDN

CDN (Content Delivery Network) — географически распределённая сетевая инфраструктура для доставки контента пользователям. CDN позволяет ускорить доставку контента до оконечного пользователя.

Плюсы CDN

Примечание: если пользователь посещал другой сйт, который тоже использует CDN, то перейдя на наш сайт библиотека JQuery загрузится из кэша браузера.

Минусы CDN

Примечание: очень минимальный процент что сервера инфраструктуры CDN бывают недоступны.

На странице jquery.com/download нам предлагают несколько серверов CDN (Google CDN, Microsoft CDN, CDNJS CDN и JsDelivr CDN) с которых мы можем загружать и подключать библиотеку. Мы будем использовать стандартный JQuery CDN. Для подключения JQuery выполните несколько простых действий:

1. Откройте страницу code.jquery.com в вашем браузере.

2. Выберите нужную версию и стиль библиотеки.

JQuery является библиотекой JavaScript, которая позволяет осуществить взаимодействие между JavaScript и HTML. Благодаря JQuery можно получить доступ к любому элементу DOM и манипулировать им. Разработчики предоставляют несколько версий данной библиотеки:

Подключить JQuery к сайту можно двумя способами, которые существенно отличаются друг от друга и имеют свои плюсы и минусы. Сначала рассмотрим самый простой способ, а затем перейдём к более сложному.

Подключение JQuery при помощи CDN

CDN (Content Delivery Network) — географически распределённая сетевая инфраструктура для доставки контента пользователям. CDN позволяет ускорить доставку контента до оконечного пользователя.

Плюсы CDN

Примечание: если пользователь посещал другой сйт, который тоже использует CDN, то перейдя на наш сайт библиотека JQuery загрузится из кэша браузера.

Минусы CDN

Примечание: очень минимальный процент что сервера инфраструктуры CDN бывают недоступны.

На странице jquery.com/download нам предлагают несколько серверов CDN (Google CDN, Microsoft CDN, CDNJS CDN и JsDelivr CDN) с которых мы можем загружать и подключать библиотеку. Мы будем использовать стандартный JQuery CDN. Для подключения JQuery выполните несколько простых действий:

1. Откройте страницу code.jquery.com в вашем браузере.

2. Выберите нужную версию и стиль библиотеки.

3. Добавьте следующий код для подключения библиотеки в область вашего сайта.

Атрибуты integrity и crossorigin используются для проверки целостности файла. Это позволяет браузерам гарантировать что файлы размещённые на сторонних ресурсах не были подделаны.

4. Библиотека успешно подключена к вашему сайту.

Подключение локальной библиотеки JQuery

Локальная библиотека — библиотека которую вы загрузили с официального сайта, а затем подключили её из корневой директории вашего сайта.

Плюсы локальной библиотеки

Минусы локальной библиотеки

Чтобы подключить библиотеку данным способом выполните несколько шагов по следующей инструкции:

1. Откройте страницу jquery.com/download в вашем браузере.

2. Найдите заголовок JQuery и выберите нужную версию.

3. Загруженный файл библиотеки поместите в корневую директорию вашего сайта.

4. Добавьте следующий код для подключения библиотеки в область вашего сайта.

где js — директория, а jquery-3.2.1.js — имя файла библиотеки.

Подключение jQuery

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 локально

1. Загрузите js-файл библиотеки jQuery с официальной страницы. Просто щелкните правой кнопкой мыши ссылку для загрузки и выберите пункт «Сохранить ссылку как» во всплывающем меню.

2. Затем сохраните загружаемый файл в каталоге вашего сайта. Я например просто сохраняю его в папке js моего проекта вместе с остальными js-скриптами.

3. Теперь вам нужно включить скачанный ранее файл библиотеки в вашу страницу. Разместите следующий код между тегами и :

Должно получится что-то вроде этого:

Подключение jQuery с CDN

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

Одно большое преимущество использования размещенного jQuery от Google: многие пользователи уже загрузили jQuery из Google CDN при посещении другого веб-сайта. В результате он будет загружен из кэша при посещении вашего сайта, что приводит к ускорению загрузки. Кроме того, Google CDN будет следить за тем, чтобы после того, как пользователь запросил у него файл, он был отправлен с ближайшего к ним сервера, что также приводит к ускорению загрузки.

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

1. Получите ссылку на библиотеку на официальном сайте Google CDN.

2. Разместите полученный код между тегами и :

Должно получится примерно следующее:

Как проверить подключен ли jQuery на странице?

Добавьте следующий код перед закрывающим тегом

Узнайте как подключить библиотеку jQuery

Все опытные и даже некоторые начинающие программисты знают о существование специальных библиотек, которые упрощают работу с кодом. Одна из таких библиотек, часто используемых программистами, является jQuery.

Как можно коротко описать эту вспомогательную JavaScript-библиотеку?

Как вы уже поняли со слов JavaScript-библиотека, jQuery взаимодействует с JavaScript, а также с HTML. Главный плюс этой библиотеки в том, что с ее помощью можно получить доступ к любому элементу DOM-структуры с удивительной легкостью. А также, jQuery предоставляет удобный API для работы с AJAX (c AJAX мы познакомимся в будущем). В общем, можно найти множество плюсов и «тайных дверей» в этой библиотеке, но сейчас у нас с вами стоит задача о подключение jQuery. Чем мы с вами сейчас и займемся.

Подключение jQuery

Подключить библиотеку можно двумя способами. Рассмотрим первый из них.

Заходим на сайт http://jquery.com/. После выбираем вкладку Download. В открывшемся окне нам нужно скачать подходящую нам версию jQuery. Там вы можете увидеть jQuery 1.x и jQuery 2.x. Чем же они отличаются? Да практически ничем, а только тем, что jQuery 2.x не поддерживается нашим «любимым» IE (версии 6, 7, 8). Так что, выбираем jQuery 1.x. Там тоже есть некое разветвление. Нашему вниманию предлагают сжатую и не сжатую версию библиотеки (Download the compressed, production jQuery 1.11.3, Download the uncompressed, development jQuery 1.11.3). Обе версии абсолютно одинаковы, за исключением экономии места. Вы можете скачать обе и увидеть, что в не сжатой версии есть комментарии, в то время как сжатая предстает перед нами даже без пробелов.

После скачивания самой библиотеки нам надо подключить ее к нашему потенциальному HTML-документу. Делается это следующим образом:

Вот и подключена наша библиотека. Первый способ мы рассмотрели.

Второй намного проще и удобнее.

Так как Google является самой крупной компанией на рынке браузерных технологий, он приготовил фишечку и для любителей jQuery. Просто в место указанного нами пути скаченной библиотека вставляем вот эту волшебную ссылку http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js. Если вы ее откроете, то увидите сжатый код библиотеки jQuery. Также, вы можете наблюдать там AJAX-технологии, которые в будущем вам не придется подключать отдельно.

В общем-то и все. Можем приступать к работе с jQuery и осваивать новые горизонты с помощью этого могущественного механизма.

Подключение JQuery через Google или CDN для новичков 2019-2020

Сразу код без воды (номера строк не скопируются):

Быстрый старт (основа HTML5):

Многие воспринимают данную библиотеку, как лишним огромным куском кодом который несет в себе много лишнего и считают что лучше использовать чистый JavaScript. Но файл jQuery весит всего

32кб, и более того, он уже давно закеширован у каждого интернет-пользователя, т.к. многие подключают jQuery через Google. Следовательно, вообще не требуется никакого времени на загрузку данной библиотеки на Вашем сайте, более того, загрузка же Ваших JavaScript кодов потребуется.

Данную библиотеку с легкостью может понять любой верстальщик PSD дизайнов для сайтов, достаточно лишь хорошо этого захотеть. В следующих статьях я буду писать о том как пользоваться данной библиотекой с примерами. И вы увидите все ее прекрасные возможности и удобства. В данной статье я очень подробно описываю как правильно подключить jQuery через Google или с помощью файловой системы личного хостинга.

Для подключения JQuery предпочтительней использовать сервис CDN или Google Code.

Последнюю версию jQuery можно узнать на официальном сайте jQuery, чтобы получить код подключения выберите minified версию и вам его выдадут

Подключать jQuery через CDN или Google необходимо, т.к. библиотека много весит. А если у всех она подключена через один файл в интернете, то, тогда не придется каждый раз на каждом сайте ее грузить себе на компьютер, т.к. она уже закеширована.

Привожу пример полностью подключенного jQuery через CDN:

После успешного подключения, у вас должно появиться alert сообщение, о том что jQuery подключен.