jQuery - это библиотека функций, которая позволяет очень простым способом манипулировать элементами DOM (Объектной Модели документа - Document Object Model), добавляя интерактивность на html-страницу и отправлять данные с помощью AJAX. Эта библиотека имеет небольшой вес, она кроссбраузерна, т.е. позволяет использовать один и тот же код, не задумываясь, а будет ли он работать в Chrome, Safari, Edge (Internet Explorer) или в Mozilla Firefox. И еще-она позволяет очень просто использовать выборки элементов по селекторам css и фильтрам и манипулирование коллекциями элементов.

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

Например, получение или изменение текста внутри элемента в JS доступно с помощью свойства textContent,  а в jQuery - с помощью функции text(). Свойство innerHTML в JavaScript позволяет не только получать или изменять текст, но еще и использовать html-теги. В jQuery на замену этому свойству приходит функция html(). Свойство value для элементов форм в jQuery трансформировалось в метод val(). И таких примеров можно привести еще много.

Скачать эту библиотеку вы можете на официальном сайте https://jquery.com/. Именно на нем вы найдете последнюю версию, а также все предыдущие, нажав на кнопку Download jQuery.

jquery.com

Подключаем jQuery

Для того чтобы добавить jQuery на страницу, необходимо расположить тег <script> с атрибутом src, в котором указывается путь к скачанному файлу с jquery.min.js. Например, разместите следующий код в секции head или body до основного скрипта:

Подключение jQuery из локальной папки имеет следующие плюсы:

  1. Вы используете ту версию, которую считаете для сюда удобной
  2. Вы в любой момент можете найти файл с jQuery в папке и подключить его к другому сайту/html-странице.
  3. Вы не зависите от наличия/отсутствия интернета для того, чтобы написать свой код.

В том случае, когда у вас есть сайт в сети или вы уверены в стабильности своего интернета, вам стоит воспользоваться онлайн-сервисами, которые позволяют подключить jQuery из сети распределенного контента (CDN). Плюсы этого способа:

  1. Таких сервисов очень много, и они позволяют загрузить jQuery с ближайшего источника,
  2. Вы можете выбрать версию jQuery, хотя для этого вам, возможно, придется поискать нужную.
  3. Пользователь, просматривающий ваш сайт, уже загрузил в кэш своего браузера jQuery с того источника, который используете вы, и ваш сайт подхватит ее из кэша браузера, а значит загрузка будет очень быстрой.

Подключаем jQuery с CDN

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

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

Зато с официального сайта code.jquery.com вы можете загрузить/подключить на страницу различные версии этой библиотеки и других продуктов, основанных на jQuery, например, jQuery UI, jQuery Mobile или jQuery Color. Просто кликните на нужной вам версии и скопируйте код. Все версии jQuery вы найдете здесь.

code.jquery.com

Из других источников вы также можете скопировать ссылку на нужную вам версию jQuery.

На скриншоте видно, что ссылки на ресурсах представлены на разные версии jQuery.

Ссылки на CDN jQuery

Выбирайте подходящий для себя вариант и вставляйте ссылку в тег <script>.

Несколько ссылок с вышеприведенных источников, которые вы можете скопировать и вставить к себе на страницу/сайт сразу же:

Разница между версиями jQuery

Версии линейки 1* поддерживают совместимость с  браузером Internet Explorer v6-8, поэтому они популярны до сих пор на сайтах, которые подразумевают охват большой аудитории. В версиях 2.* от поддержки старых IE отказались. Поэтому линейка версий 2.* немного легче из-за вырезанного кода. jQuery версии 3* основаны на стандартах ES6, ES7, поддерживают новые возможности типа промисов, цикла for..of, нового API для работы с анимацией и другие.

Начинаем писать код на jQuery

В вашем скрипте вы можете для начала записать код, который что-либо выводит или в консоль, или с помощью диалогового окна alert(), чтобы проверить работоспособность кода:

Можно использовать сокращенную форму записи:

Вызов функции $(document).ready(function(){}) обязателен в том случае, если вы подключили скрипты в блоке <head> ДО того, как браузер сможет прочитать и распарсить всю структуру элементов в теле документа (тег <body>). Если вы подключаете скрипты перед закрывающим тегом </body>, вызывать ее необязательно, хотя некоторые плагины могут требовать обязательного ее наличия.

Достаточно 1  раз написать вызов $(document).ready() и весь код писать внутри этой функции вне зависимости от того, 5 строк в этом коде или 225.

Вызов $(document).ready(function(){})  аналогичен обработке события DOMContentloaded, при наступлении которого браузер уже знает обо всех элементах в структуре DOM, но еще не загрузил картинки или видео. То есть вы уже можете обращаться к элементам и манипулировать ими, что чаще всего и является целью использования JavaScript и jQuery.

Обращение к элементам в jQuery

Для того чтобы писать код на jQuery, вам понадобится использовать знак $, который является псевдонимом (или сокращением) для идентификатора на jQuery. Например, чтобы выбрать все <div class="jq-test"> и добавить css-свойство с помощью jQuery, а также поменять класс при клике на этом блоке, необходимо написать такой код:

Код несложный, он добавляет рамку внизу блока. Клик на голубом блоке удаляет/добавляет класс "jq-test" к нему с помощью метода jQuery toggleClass().

Test Block 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio necessitatibus commodi dolorem natus qui ut suscipit, inventore expedita explicabo, ipsa.

Test Block 2

Facilis veniam praesentium modi possimus repudiandae eaque error eum provident similique debitis eligendi, laudantium incidunt earum sed ea dicta reprehenderit.

Test Block 3

Ratione possimus ullam dolor fugiat facilis! Eum iusto architecto laudantium ex molestiae commodi, sed earum nesciunt ut saepe deleniti ea.

Test Block 4

Quibusdam, tempore sapiente distinctio laboriosam explicabo totam deleniti, aliquam consectetur, ullam dolore non laudantium doloribus. Aperiam alias accusantium iusto quas.

Автор: Админ

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *