JavaScript и jQuery

Что такое jQuery

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

Перед тем, как перейти к описанию jQuery, еще раз напомню, что такое объектная модель документа или DOM (Document Object Mode l). DOM – это иерархическая структура объектов в оперативной памяти, соответствующая структуре загруженной интернет страницы. DOM формируется браузером и предоставляет программный интерфейс для работы с элементами разметки, например, с использованием того же JavaScript. Средствами DOM вы можете искать, добавлять и удалять элементы документа, редактировать их атрибуты, менять стили и т.д. Другими словами, с помощью DOM и JavaScript создаются динамические интернет страницы, которые еще называют DHTML страницам (Dynamic HTML pages). Вернемся к библиотеке jQuery. С помощью программного интерфейса jQuery вы легко можете выбрать нужные вам элементы DOM и выполнить с ними любые действия из нижеприведенного списка:

  • Изменить ;
  • Отредактировать атрибутный состав;
  • Удалить;
  • Добавить потомков;
  • Переместить или обернуть другим элементом;
  • Выполнить копирование;
  • Привязать обработчик события;
  • Настроить визуальный эффект или анимацию;
Безусловно, все это можно сделать средствами “голого” DOM и JavaScript, но зачем, если есть уже готовый и бесплатный набор инструментов. Не стоит забывать и про кроссбраузерность. Если вам необходимо, чтобы ваша страница работала одинаково под управлением всех популярных браузеров, то для этого необходимо приложить немало усилий, поскольку существует довольно большой список того, что различные браузеры реализуют по-разному. Если вы работаете через интерфейс jQuery, то об этой проблеме вы можете забыть. Естественно, что программы пишут люди, и в jQuery могут быть ошибки, но в этом случае вы можете рассчитывать на то, что проблему устранят в ближайшее время. Если вы знакомы с , имеете представление о том, что такое и JavaScript, то самое время освоить работу с jQuery. С появлением этой замечательной библиотеки возможности профессионалов и начинающих веб-дизайнеров несколько выровнялись, что, возможно, огорчает первых, но воодушевляет вторых. Может быть, я несколько и преувеличиваю, но то, что теперь каждый, не особо искушенный в тонкостях программирования на JavaScript имеет довольно серьезный арсенал для создания эффектных, быстрых и надежных DHTML страниц - неоспоримая заслуга jQuery. Подключение jQuery

Для начала нужно скачать библиотеку. Сделать это можно на сайте авторов jQuery: http://jquery.com . Далее, необходимо ее просто подключить с помощью тега примерно так:

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

Программный интерфейс или синтаксис jQuery

Я уже сказал, что синтаксис запросов jQuery достаточно прост. Именно запросов, поскольку программирование на JavaScript с использованием jQuery можно отнести к декларативному программированию , которое отличается от классического процедурного программирование тем, что вы описывает “что нужно сделать”, а не “как сделать”. В названии библиотеки отражена ее суть – язык запросов в контексте JavaScript. Все запросы на jQuery начинаются вызовом функции $ , аргументом которой является сам запрос. Итак, обобщенный синтаксис jQuery запроса выглядит примерно так:

$(запрос )[{.фильтр (критерий )}].действие (аргументы ){ .действие (аргументы )} Запрос – это селектор или список селекторов, разделенных запятой. Синтаксис запроса совпадает с синтаксисом селекторов CSS стилей. Таким образом, запрос jQuery может начинаться примерно так:
$(“div”) - выбор всех элементов div ;
$(“div, p”) – выбор всех элементов div и элементов p ;
$(“.class_name”) – выбор всех элементов класса class_name ;
$(“#element_id”) – выбор элемента с идентификатором element_id ;
$(*) – выбор вообще всех элементов;
$(“.class_name span”) – выбор всех элементов span в рамках всех элементов класса class_name ;
$(“#element_id > div”) – выбор всех элементов div , являющихся прямыми потомками (дочерними элементами) элемента с идентификатором element_id .
$(“#element_id .class_name + div”) – выбор всех элементов, которые следуют сразу за элементами класса class_name в рамках элемента element_id .
$(“#ul_id > li:first”) – выбор первого элемента li списка ul_id . Также, можно выбрать последний last элемент либо все четные even или нечетные odd элементы. Есть и другие варианты.
$(“a”) – выбор всех ссылок со значением атрибута href , начинающегося на “http://ru.wikipedia.org” . Без символа “^” получим условие на полное совпадение значений, если вместо символа “^” поставим символ “$”, то получим ограничение на совпадение с конца, а символ * будет означать, что значение атрибута должно просто содержать указанный фрагмент.

Фильтр – способ отфильтровать набор выбранных элементов по дополнительным критериям. Критерии – это те же селекторы. Есть две противоположные друг другу операции: filter и not . Если использовать операцию filter(критерий) , то выбранными останутся только те элементы, которые удовлетворяют аргументу - критерию, а если not , то останутся только те, что не удовлетворяют. Обычно, смысл имеет использовать операцию not , поскольку критерий операции filter обычно легко объединить с основным селектором функции $() . Вот пара примеров использования этих операций:
$(“div”).not(“.class_name”) – исключаем все div класса class_name ;
$(“td, th, div”).filter(“.class_name”) – отбираем элементы td , th , div класса class_name .

Есть еще операция slice(from, to) , которая позволяет выделить последовательность элементов с индексами из промежутка [from - to ].

Действие – это, собственно, само действие – некоторая операция над множеством выбранных элементов . Каждая операция возвращает некий результат: либо то же самое множество, если операция не связана с созданием новых или удалением выбранных элементов, либо уже отредактированное множество, либо набор вновь созданных элементов. Благодаря этому вы можете указать сразу несколько операций, разделенных точками. Приведенный ниже пример выполнит отбор всех элементов span , не относящихся к классу class_name и скопирует их в элемент с идентификатором target :
$("span").not(".class_name").clone().appendTo("#target");

Результат каждой операции – это массив элементов HTMLElement . Размер массива можно узнать с использованием свойства length или функции size() . Аргументами операций могут быть не только строковые параметры, но и результаты других запросов. Вот пример того, как результат одного запроса можно поместить внутрь элемента, который, в свою очередь, являются результатом другого запроса:
$("span").not(".class_name").clone().appendTo($("span.class_name"))

В качестве аргумента можно использовать не весь результат запроса, а отдельный его элемент:
$("span.class_name").append($("span").not(".class_name"));

Таким образом, аргументом операции может быть либо селектор в виде строки, либо результат другого запроса, либо любой экземпляр HTMLElement .

Операции jQuery

Ниже представлены сводные таблицы с операциями jQuery, их кратким описанием и ссылками на те примеры, которые демонстрируют их применение на практике.

Свойства

Возвращают или устанавливают значения различных свойств выбранных элементов. Если необходимо определить новое значение свойства, то его следует передать в качестве аргумента, например, $(“#element”).text(text_value) или $(#element”).html(html_value) :

Наименование Описание Пример
text() Текст. -
offset() Смещение {left, top}. , функция перемещения шарика ball.move() : $("#ball").offset({left:$("#ball").offset().left + this.dx, top:$("#ball").offset().top + this.dy}); Данная функция вызывается по таймеру каждые 10 миллисекунд.
width(), height() Ширина и высота. -
html() html разметка внутри выбранных элементов.

Перед тем, как приступить к изучению библиотеки jQuery, ее следует подключить к нашему документу . Для этого давайте создадим самую простую страницу, без всяких излишеств – index.html, и на ней будем подключать наш jq (сокращение от jQuery, начинайте привыкать).

Как подключить библиотеку jQuery? И где взять код?

Есть 2 способа подключения библиотеки к сайту . Перед тем, как начну описывать оба способа, не надо сразу повторять за мной. Сначала прочитайте об этих способах, а потом выберите подходящий вам способ и все подключите. Не волнуйтесь – jQuery подключается одной строчкой кода , поэтому, если вы не обладаете памятью, как у рыбки, то все будет хорошо.

Первый способ – качаем с сайта jquery.com

Есть такой замечательный сайт – это официальный сайт библиотеки. Как любая библиотека, jq разработали простые программисты. Они поняли, что можно уменьшить язык программирования JavaScript, начали долго и усердно трудиться – и в итоге получилась самая распространенная библиотека, горячо любимая веб-программистами.

Важно! Все картинки кликабельны.

Подключение библиотеки jQuery с официального сайта

  • Заходим на официальный сайт;
  • Нажимаем ссылку «Download»;
  • Если нужна облегченная (сжатую) версия, то нажимаем на ссылку в блоке «3»;
  • Если нужна версия для веб-разработчиков, то нажимаем на ссылку в блоке «4»;
  • Качаем библиотеку:
  • Заливаем в папку, где расположен файл index.html.
    • Чем же отличаются сжатая версия от версии для веб-разработчиков?

    На картинках ниже я показал небольшие куски кода двух версий.



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

    Так как для браузера (а именно браузер обрабатывает этот код) не видит разницы между двумя этими файлами, то лучше на своих «живых» проектах использовать сжатую версию, потому что она намного легче (из-за отсутствия пробелов). А как известно, чем меньше весят исходные файлы сайтов – тем быстрее он загружается, что положительно влияет на и поведенческий фактор.


    Блок «1» - размер файла сжатой версии – 96 Кб.

    Блок «2» - размер файла версии для разработчика – 280 Кб.

    Полная версия почти в три раза тяжелее!

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

    Лично я – вообще ни когда туда не залезал, за три года не было такой необходимости. Да и я не особо любитель читать 10 тысяч строчек.

    Отличить эти 2 версии можно по названию. В сжатой версии перед.js всегда идет.min (на рисунке это показал в блоке под номером «3» ). Если вы достаточно долго уже работает в веб-разработке, то наверное замечали этот «фокус» у других библиотек.

    Как подключить jQuery?

    Да подключение происходит также, как css, только используя другой тег.

    Внимание! Весь код, который будете писать, используя jq – нужно писать ниже подключения этой библиотеки. В противном случае – у вас выскочит ошибка и ни чего работать не будет.

    Второй способ – используем гугл

    Почему я просил не торопиться с закачкой этой библиотеки? Да все просто – ее можно напрямую подключить с Google.

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

    Гугл использует также сжатую версию. И в этом коде можно найти одно важное дополнение – в ней присутствует ajax технология (об этом мы еще поговорим). Это очень полезная вещь, и рано или поздно она вам пригодится. И если вы подключите библиотеку с google – то вам не придется тратить свое время на поиск и подключения всех функций для ajax.

    Т.к. google – очень крупная компания, их сервера ни когда не упадут, и поэтому можно быть полностью уверенным в том, чтобы jQuery всегда будет работать на вашем сайте.

    Но есть один минус – если вы подключаете библиотеку с гугл, то при разработке сайта вам нужно постоянно иметь доступ к интернету.

    Ну а теперь, когда я описал оба способа – можете выбирать более подходящий для вас и подключать к вашему html документу.

    Тестирование

    Как только вы подключили библиотеку, желательно ее протестировать. Ниже я привел часть jq-кода – особо не вдавайтесь в подробности (об этом будут дальнейшие уроки), что там написано, просто напишите тоже самое и посмотрите на результат.

    Какой-то текст

    После запуска страницы – должны появиться слова «Тут какой-то текст». А после нажатия на этот текст – он должен пропасть. Если у вас все именно так отработало, то вы все правильно сделали.

    P.S. Иногда встречаются вопросы: «как подключить jQuery к Joomla 3?», «как подключить jQuery к Bitrix?», «как подключить jQuery к WordPress?». Не зависимо какой движок используете на сайте, способ подключения всегда одинаковый. В шаблон помещаем нужную строчку - и все у вас будет работать.

    Перед тем как начать хочу сказать, что на данную стать меня натолкнул вот этот :

    Наталия полностью права, мой блог посвящён, в принципе, JQuery, и JQuery плагинам, но что это такое, и как эти плагины применять на сайтах я не писал ниразу. Дорогие читатели, простите меня:-) я исправлюсь, честно:-)

    Наталия, спасибо Вам большое за такой комментарий! И хотелось бы отметить, что Наталья — начинающий блоггер (как и я:-)) и всем родителям советую почитать её блог Маминого малыша . Наталья, у Вас и Вашего блога большое будущее.

    Ладно, не будем сильно отвлекаться от темы, давайте перейдём ближе к делу. Дам общее понятие что такое JQuery.

    JQuery

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

    Честно признаюсь не хочется долго объяснять именно значение этого слова, а хочется подробнее остановиться на jQuery плагинах, как их прикрепить к сайту. Но для начала давайте узнаем, что такое плагины.

    jQuery плагины

    jQuery плагины — это уже готовые скрипты плюс HTML и CSS, которые нужно просто скачать и прикрепить на свой ресурс. Слайдеры, галереи, всякие подсказки всплывающие, многоуровневые меню и т.д. Перечислять можно бесконечно. Как оказывается прикрепить уже готовый скрипт бывает не так уж и легко, тем более если никогда не сталкивался с этим.

    Чтобы было понятнее я буду прикреплять плагин к странице на примере, потому что на примере всегда понятнее.

    Перед тем как начать Вам нужно на сайт прикрепить саму библиотеку jQuery, тут ничего сложного просто между тегами и поставьте вот это:

    Вот и всё, первый шаг сделали:-)

    Пример

    Например, мне захотелось на свой сайт прикрепить вот такие интересные и красивые картинки с классной анимацией:

    Как видите у меня есть три папки с картинками, стилями и с самим скриптом, а также три примера index.html . В данном случае будем использовать именно его.

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

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

    Важные моменты в данном примере.

    Нужно прикрепить стили именно того плагина, который прикрепляете, в данном случае это делается так:

    Эту строчку нужно ставить между тегами и и на той странице где будет сама галерея, если у Вас, например Вордпресс, нужно ставить в header.php .

    Так же ещё нужно прикрепить и сам скрипт этой красивой анимации, опять же между тегами:

    Ну а сейчас давайте посмотрим, что у меня получилось. Напоминаю, что я создал новую страницу и прикрепил туда галерею. Вот полюбуйтесь:

    Обязательно пользуйтесь исходным кодом примера плагина, для того чтобы было легче прикрутить его на свой сайт. Исходный код вы можете посмотреть в моём примере, и сюда его выложу тоже, на всякий случай:-)

    < !DOCTYPE html>

    //

    Вот в принципе и всё. Самое главное пробуйте сами изменять, вставлять, удалять и т. д. Испортили, скачали ещё раз и всё по новой пока не получится желаемый результат. Надеюсь, что я всё доступным языком Вам рассказал. Если Вам всё же будет что то не понятно обязательно спрашивайте в комментариях. До скорых встреч, друзья.

    Последнее обновление: 1.11.2015

    Что такое jQuery

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

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

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

      Упрощение работы с кодом . jQuery предлагает простой элегантный синтаксис для манипулирования элементами на веб-странице.

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

      Кроссбраузерность . jQuery имеет поддержку большинства известных браузеров, в том числе таких. как IE 7,8. (Хотя в силу того, что браузеры IE 6-8 постепенно становятся достоянием истории, а также чтобы уменьшить размер библиотеки в последней версии была прекращена поддержка IE 6-8).

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

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

    Библиотека представлена в двух вариантах - Compressed или Monified (минимизированная) и Uncompressed (обычный). Минимизированные версии предоставляют ту же функциональность, что и обычные, но отличаются тем, что не содержат всяких необязательных символов, наподобие пробелов, комментариев и т.д., и поэтому в своем названии имею суффикс min , например, jquery-1.10.1.min.js . Поскольку они производительнее за счет меньшего объема, их рекомендуется использовать в реальном производстве. В то же время, если вам захочется понять логику кода jQuery, то в этом случае можно обращаться к обычной версии библиотеки.

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

    Мир jQuery

    В данном случае я использовал минимизированную версию библиотеки jquery - jquery-1.10.1.min.js. Теперь создадим какую-нибудь простенькую веб-страничку с использованием jquery:

    Мир jQuery Добро пожаловать в мир jQuery jQuery JavaScript $(function(){ $("#btn1").click(function(){ $(this).css("background-color", "red"); alert("Мир jQuery"); }); });

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

    У нас определены на странице две кнопки. У одной кнопки определен обработчик onclick в самой разметке кнопки: onclick="alert("Мир JavaScript"); " .

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

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

    $(function(){ $("#btn1").click(function(){ $(this).css("background-color", "red"); alert("Мир jQuery"); }); });

    Выражение $(function(){}); - это и есть краткое определение функции jquery. Эту функцию принято помещать в конце документа, как в данном случае, перед закрывающем тегом body. Данная функция включает весь код на языке javascript, который будет выполняться при загрузке страницы.

    Смысл использованного кода состоит в том, что мы получаем элемент кнопки в выражении $("#btn1") и затем вешаем на него обработчик нажатия. Фактически выражение $("#btn1").click будет аналогично использованию обработчика onclick в теле разметки кнопки. При этом нам не надо никак изменять разметку самой кнопки, что-то туда дописывать. Все делается в функции jquery.

    Что в нашем случае она включает? Во-первых, мы устанавливаем цвет кнопки: $(this).css("background-color", "red"); . А дальше просто выводим сообщение на экран.

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

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

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

    Мир jQuery

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

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

      Google CDN: предоставляется компанией Google. Все доступные версии можно найти по адресу https://developers.google.com/speed/libraries/devguide?hl=ru#jquery .

      Microsoft CDN: предоставляется компанией Microsoft. Все доступные версии можно найти по адресу https://www.asp.net/ajaxlibrary/cdn.ashx#jQuery_Releases_on_the_CDN_0 .

      Формат подключения будет следующим:

      Yandex CDN: предоставляется российской компанией Yandex. Все доступные версии можно найти по адресу

    От автора: приветствую вас, друзья. В этой статье мы с вами начнем знакомиться с замечательной и популярнейшей javascript библиотекой – jQuery. Мы узнаем, для его она нужна и чем может помочь нам в работе, а также научимся подключать библиотеку jQuery к нашему проекту.

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

    Если вы не забыли JavaScript, тогда должны помнить, как непросто выбрать элементы на странице, чтобы затем манипулировать ими. Вспомните все эти длинные названия методов: getElementById, getElementsByClassName и т.п. Писать эту связку слов долго и неудобно на самом деле. Библиотека jQuery позволяет сделать то же самое гораздо проще и понятнее. Сравните хотя бы вот эти две строчки кода:

    var elem = document.getElementById("p"); var elem = $("#p");

    < p id = "p" > < / p >

    var elem = document . getElementById ("p" ) ;

    var elem = $ ("#p" ) ;

    Обе строки выберут один и тот же элемент – параграф с указанным идентификатором. Но, согласитесь, вторая строка гораздо короче и, что главное, понятнее. Кстати, ее синтаксис, скорее всего, вам мог что-то напомнить. Верно, это CSS селектор — #p – выборка элемента с указанным ID. jQuery для выборки элементов использует тот же синтаксис, что использует и CSS, поэтому если вы знаете CSS – вам будет гораздо проще понять и работать с jQuery. Это дополнительный плюс.

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

    простая работа с событиями;

    кроссбраузерность;

    удобная работа с AJAX (асинхронные запросы к серверу);

    удобные методы для работы с эффектами (скрытие / появление элементов с добавлением визуальных эффектов);

    и главный плюс – тысячи готовых плагинов на любой вкус (галереи, слайдшоу, работа с формами и другими элементами страницы).

    На сегодняшний день знание и работа с библиотекой jQuery – это фактически стандарт для любого веб-разработчика. Без нее не обходится практически ни один проект в сети, поскольку jQuery реально упрощает написание кода на JavaScript.

    Давайте же попробуем подключить библиотеку jQuery к нашей странице, тем более что сделать это очень просто. Первый способ – локальное подключение. Заключается он в том, что мы скачиваем jQuery в наш проект и подключаем его. Идем на официальный сайт jQuery и скачиваем актуальную версию библиотеки. На момент написания статьи это версия 3.1.1.

    Обратите внимание, мы можем скачать сжатую и несжатую версию библиотеки. Чем они отличаются?

    Если мы скачаем обе версии библиотеки, то увидим, что они отличаются весом. Сжатая версия весит 84 Кб, несжатая – 260 Кб. Разница в том, что из сжатой версии убрали все пробелы и переводы строк, а также сократили все имена переменных. В остальном – никакой разницы, т.е. обе версии библиотеки одинаковы и выполняют одну и ту же работу. Рекомендую подключать сжатую версию, поскольку она весит меньше и, следовательно, загрузится быстрее. А зачем же тогда нужна несжатая версия – спросите вы? Она нужна для разработчиков, т.е. для тех, кто захочет заглянуть внутрь библиотеки, чтобы изучить ее детальнее.

    Итак, подключаем библиотеку:

    jQuery

    < ! DOCTYPE html >

    < html lang = "en" >

    < head >

    < meta charset = "UTF-8" >

    < title > jQuery < / title >

    < / head >

    < body >

    < / body >

    < / html >

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