jQuery - Введение

В этой статье мы познакомимся с библиотекой 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



   JavaScript и jQuery 0    1790 0

Комментарии (7)

  1. Bob # 0
    Здравствуйте Александр!
    Столкнулся с проблемой несовместимости различных версий jQuery… Использую плагин imgBox, он требует jQuery v1.3+ и нормально работает с jquery 1.3.2. Хотел использовать дополнительно плагин слайдера — ему нужен 1.8.2, но с 1.8.2 imgBox уже не пашет… И что делать? Возможно ли использовать разные версии jQuery на одной странице?
    1. Александр Мальцев # 0
      Здравствуйте.
      Да, это возможно, используя режим в jQuery noconflict.
      <!-- загружаем библиотеку jQuery 1.3.2 -->
      <script src="путь/до/jquery-1.3.2.js"></script>
      <script>
      var jQuery_1_3_2 = $.noConflict(true);
      </script>
      <!-- загружаем библиотеку jQuery 1.8.2 -->
      <script src="путь/до/jquery-1.8.2.js"></script>
      <script>
      var jQuery_1_8_2 = $.noConflict(true);
      </script>
      
      Затем вместо $ используем jQuery_1_3_2 или jQuery_1_8_2.
    2. Bob # 0
      Спасибо! Получилось
      1. Дина # 0
        Здравствуйте!
        У меня сайт на Joomla 3.6. После обновления до последней версии перестал работать один модуль, так как появился конфликт:
        Uncaught TypeError: $(...).tooltip is not a function
        Ну то, что они вызывают tooltip с помощью $, а не jQuery — это вообще непонятно, ну да бог с ним. Я на предыдущей версии в файле bootstrap.php меняла код, это срабатывало, сейчас там все по-другому и я не могу найти в сети решения. Методом подбора поменяла $ на jQuery и ошибка стала звучать как
        Uncaught TypeError: jQuery(...).tooltip is not a function
        Может, если я обновлю jQuery в этом единственном модуле, который вызывает проблему, то я решу проблему? сейчас там jQuery v1.11.3 — но я не знаю, на какую менять, на сайте две версии: 3.1.0 и 1.4.0.
        Подскажите, пожалуйста?
        Заранее спасибо.
        1. Александр Мальцев # 0
          Это зависит от того какие Вы плагины используете и какие они методы библиотеки jQuery используют. После обновления может сложиться ситуация: когда одни плагины используют методы, которые в новой версии jQuery нет, а другие применяют методы jQuery, которые есть только в новой версии библиотеки.
          Поэтому необходимо делать backup перед тем как что-то обновлять, т.к. плагины обновляются очень медленно и увидить новую версию не всегда представляется возможным.
          С точки зрения поддержки бразуеров jQuery 3.1.0 и 1.2.4 (версии 1.4.0 нет, есть 1.4.5 мобильная) отличаются только тем, что 3.1.0 не поддерживает Internet Explorer 8 или ниже.
          С точки зрения API отличаются методами и их использованием. Поэтому после перехода на новую версию многие плагины могут не работать, их необходимо переписать в соответствии с новым API jQuery.
        2. Дина # 0
          Обновила до 3.1.0, модуль заработал, но выдало 3 ошибки и одно предупреждение:
          jquery.js:4 Uncaught TypeError: a.indexOf is not a functionr.fn.load @ jquery.js:4(anonymous function) @ about:1701
          about:1765 Uncaught TypeError: jQuery(...).affix is not a function(anonymous function) @ about:1765
          jquery.js:2 jQuery.Deferred exception: $(...).tooltip is not a function TypeError: $(...).tooltip is not a function
          at HTMLDocument.(https://snowflakedesigns.co.uk/about:304:39)
          at j (https://snowflakedesigns.co.uk/modules/mod_tinycircle/js/jquery.js:2:29568)
          at k (https://snowflakedesigns.co.uk/modules/mod_tinycircle/js/jquery.js:2:29882) undefined
          jquery.js:2 Uncaught TypeError: $(...).tooltip is not a function

          Ну хоть модуль заработал! а как то от этих ошибок можно избавиться? кстати, affix у меня на этой странице и так не работал, конфликтовал с модулем. А хотелось бы, чтобы работал.
          1. Александр Мальцев # 0
            Тут необходимо разбираться от каких версий зависят используемые плагины.
            Например, что Bootstrap работал с jQuery 3.1.0 его необходимо обновить до версии 3.3.7

            Вы должны авторизоваться, чтобы оставлять комментарии.