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

jQuery — это библиотека, написанная на языке JavaScript, которая предназначена для кроссплатформенного манипулирования HTML страницей после того как она отобразится в браузере. Кроме этого, jQuery содержит инструменты помогающие перехватывать и обрабатывать события, создавать анимацию на веб-странице и методы, которые позволяют взаимодействовать с сервером без перезагрузки страницы (AJAX).

Библиотека jQuery

Основная причина популярности библиотеки jQuery заключается в том, что Вам при реализации типового действия не требуется громоздить большую конструкцию на языке JavaScript, которая к тому же может не работать во всех браузерах. Это происходит, потому что некоторый объект, свойство или метод JavaScript может поддерживаться в одном браузере, а в другом нет. В этом случае Вам для этого браузера придётся писать некоторый дополнительный (обходной) код, чтобы возможность, которую вы заложили в первоначальном коде, поддерживалась в этом браузере. А так как браузеров достаточно много, то и работы будет много и только для того чтобы Ваше типовое действие работало во всех браузерах. Чтобы этого избежать, можно воспользоваться библиотекой jQuery, которая содержит большое количество функций, предназначенных для решения типовых задач, стоящими перед веб-разработчиками и поддерживающими всеми браузерами.

Единственным недостатком данной библиотеки, если это можно считать недостатком, является её вес (размер), который занимает около 100 Кбайт.

Подключение библиотеки jQuery к веб-странице

Для того, чтобы использовать функции библиотеки jQuery, её необходимо подключить к своей веб-странице одним из следующих способов:

  1. Скачать данную библиотеку с официального сайта и подключить её с помощью элемента script:
    <script src=".../jquery-min.js"></script>
    
    Обычно данную строчку располагают в конце HTML документа до закрывающего тега body, но перед другими библиотеками, которые её используют.

  2. Используя Google CDN или другие CDN сервера:
    <!-- версия 1.11.3 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <!-- версия 2.1.4 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    
    Данный способ имеет следующие преимущества:
    • при посещении сайтов, на которых URL-ссылка для загрузки библиотеки jQuery имеет один и тот же вид, библиотека jQuery будет загружаться уже не с сервера, а с кэша браузера пользователя.
    • сокращает Ваш сетевой трафик, т.к. загрузка происходит не с вашего сервера, а с сервера сети Google.

На сайте http://jquery.com для загрузки доступны 2 варианта библиотеки jQuery: сжатый и обычный.

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

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

После подключения библиотеки jQuery к HTML документу её можно использовать с помощью функции jQuery (window.jQuery()). Данную функцию можно использовать не только по имени jQuery, но и по более короткому и красивому псевдониму - знаку $. Не забываем, что в JavaScript функции являются тоже объектами, следовательно, $ - является объектом.

window.jQuery = window.$ = jQuery = $;

Работа с jQuery всегда начинается с функции jQuery() или её псевдонима $(). Данная функция может принимать один или два аргумента. В зависимости от переданных ей значений аргументов функция jQuery() выполняет то или иное действие. В большинстве случаев данную функцию используют для выбора элементов, создания элементов или вызова анонимной функции. Если, например Вы будете использовать функцию jQuery для выбора элементов, то получите объект jQuery, состоящий из выбранных элементов. Следующий этап при работе с библиотекой jQuery обычно сводится к вызовам различных методов jQuery.

Рассмотрим работу с jQuery на следующем примере:

<div>I <strong>LOVE</strong> JQUERY!</div>
//Получить DOM-элемент body
//В результате получим объект jQuery, содержащий элемент body
$("body");
//1. Выбрать элементы div ($("div")) - получим объект jQuery, содержащий элементы div
//2. Изменим цвет текста для выбранных элементов (.css("color","red")) – используем метод jQuery .css()
$("div").css("color","red");
//вызовем цепочку методов: 
//1. Выбрать элементы div ($("div")) - получим объект jQuery, содержащий элементы div
//2. Вызовем для элементов, содержащихся в объекте jQuery, метод .css("color","red")
//3. Вызовем для элементов, содержащихся в объекте jQuery, метод .css("color","green")
$("div").css("color","red").css("color","green");
//1. Выбрать элементы strong ($("strong")) - получим объект jQuery, содержащий элементы strong
//2. Изменим контент для выбранных элементов (.text("VERY MUCH LOVE")) – используем метод jQuery .text()
$("strong").text("VERY MUCH LOVE");

Пример работы с jQuery