Как на своем сайте подключить jquery

Как скопировать элемент в jQuery

Копирование одного или нескольких элементов в jQuery осуществляется с помощью метода .

Синтаксис метода :

.clone ( )

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

Первый параметр указывает, следует ли копировать обработчики событий и данные вместе с элементами.

Второй параметр делает аналогичные действия, но не для самого клонированного элемента, а для всех его дочерних элементов.

Примеры использования метода clone.

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

<div class="items" style="display: flex; flex-wrap: wrap">
  <div class="item" style="height: 100px; width: 100px; background-color: #eee; font-size: 50px; text-align: center; line-height: 100px; cursor: pointer; margin: 5px;">1</div>
</div>
<script>
  $('.item').click(function() {
    var
      clone = $(this).clone(), // копируем элемент на который мы кликнули
      count = $('.item').length; // определяем количество элементов .item
      $('.items').append(clone.text(count + 1)); // добавляем элемент в конец элемента .items, при этом изменяем его содержимое на count + 1
  });
</script>

Немного усовершенствуем скрипт. Укажем, что при клонировании элемента нужно копировать и его события. Для этого установим параметру значение .

clone = $(this).clone(true), // копируем элемент на который мы кликнули

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

<div class="form-group">
  <label>
    <span>Товар:</span>
    <input type="text">
    <button class="addProduct">Добавить ещё товар</button>
  </label>  
</div>

<script>
  $('.addProduct').click(function() {
    var
      formGroup = $(this).closest('.form-group'),
      product = formGroup.clone(true, true);
    
    formGroup.after(product);
  });
</script>

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

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

Простой скрипт на jQuery

<style>
.jq-test { padding: 10px; background: #90c4f8; }
</style>

<div class=»jq-test»>
<h5>Test Block 1</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio necessitatibus commodi
dolorem natus qui ut suscipit, inventore expedita explicabo, ipsa.</p>
</div>
<div class=»jq-test»>
<h5>Test Block 2</h5>
<p>Facilis veniam praesentium modi possimus repudiandae eaque error eum provident similique
debitis eligendi, laudantium incidunt earum sed ea dicta reprehenderit.</p>
</div>
<div class=»jq-test»>
<h5>Test Block 3</h5>
<p>Ratione possimus ullam dolor fugiat facilis! Eum iusto architecto laudantium ex molestiae commodi,
sed earum nesciunt ut saepe deleniti ea.</p>
</div>
<div class=»jq-test»>
<h5>Test Block 4</h5>
<p>Quibusdam, tempore sapiente distinctio laboriosam explicabo totam deleniti, aliquam consectetur,
ullam dolore non laudantium doloribus. Aperiam alias accusantium iusto quas.</p>
</div>

<script>
$(document).ready(function(){
$(‘.jq-test’).css(‘border-bottom’, ‘5px double #cde’);
$(‘.jq-test’).click(function(){
$(this).toggleClass(«jq-test»);
});
});
</script>

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

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.

Просмотров:
2 420

Как подключить jQuery на свою страницу с сайта Google и других внешних источников

1. С сайта Google API

В Google есть дочерний проект под названием Google Libraries API, слоган которого “Make the Web Faster” («сделай веб более быстрым»). Этот проект предоставляет API для JavaScript разработчиков, позволяющее им подключать разные библиотеки не из создаваемых ими сайтов, а из сайта Google ().

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

Чтобы подключить jQuery с сайта Google на свою страницу, необходимо всего лишь задать значение атрибута SRC тега SCRIPT на адрес библиотеки на сайте Google API. На данный момент последняя версия jQuery имеет там такой адрес:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

Общий «скелет» страницы с подключенной jQuery может иметь такой вид:

<!DOCTYPE html>
<html dir="ltr" lang="ru-RU">
<head>
<meta charset="UTF-8" />
<title>Страница, на которую я подключаю jQuery</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
Контент моей страницы
</body>
<html>

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

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

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Цифра 1 здесь означает последнюю версию линейки 1, которая уже долгое время является последней. Когда выйдет jQuery 2-й линейки, в ней могут быть некоторые существенные изменения (например, удалены или изменены некоторые функции), следовательно, если Вы делаете сайт на долгое время, то нет смысла подключать самую последнею версию jQuery. Однако, как это сделать, написано ниже.

2. Подключить последнюю версию jQuery с официального сайта

Хотя рекомендуется в первую очередь подключать jQuery именно с сайта Google API, но можно также сделать это с официального сайта. Строчка подключения последней версии этой библиотеки будет иметь вид:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

Или, если надо, подключаем конкретную версию:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

3. C сайта Microsoft

Также можно с сайта Microsoft, это делается так:

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.7.2.min.js"></script>

Подключение зависящих от библиотеки JQuery скриптов к WordPress

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

array(‘jquery’) — указывает зависимость от библиотеки JQuery.

Здесь не указывается, в какую область шаблона подключать скрипт (footer или header), так как он в любом случае будет подключен сразу после библиотеки JQuery, в массиве зависящих от нее скриптов.

Можно указать версию подключаемого скрипта к WordPress

‘1.0.0’ — Строка указывающая версию скрипта, если она у него есть.

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

Если версия не проставлена, то WordPress сам присвоет свою версию. Если указать null, то никакая версия не будет добавлена.

Получаем и запускаем код JavaScript с помощью метода $.getScript()

Также как и метод , который является короткой записью вызова метода для получения данных в формате JSON, метод является короткой записью вызова метода для получения и выполнения кода JavaScript, то есть аналогично использованию параметра формата данных . Метод  получает два аргумента:

• URL файла JavaScript для загрузки.
• Опциональную возвратную функцию, которая выполняется по завершению выполнения загруженного JavaScript кода.

Метод используется для загрузки библиотек и плагинов JavaScript «на лету», то есть тогда, когда они нужны. Так можно уменьшить время начальной загрузки страницы, потому что не нужно включать в заголовок страницы каждую библиотеку JavaScript, которая может быть понадобится, а может быть и нет.

Для демонстрации работы метода   переместим код, который выводит прогноз в отдельный файл JavaScript . Весь код будет размещен в функции :

function showForecast( forecastData ) {
  var forecast = forecastData.city + ". Прогноз погоды на " + forecastData.date;
  forecast += ": " + forecastData.forecast + ". Максимальная температура:" + forecastData.maxTemp + "C";
  alert( forecast );
}

Также изменим страницу для получения нашего кода JavaScript с помощью метода :

<!doctype html>
<html lang="ru">
<head>
<title>Прогноз погоды</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 
<script>
 
$( function() {
 
    $.getScript( "showForecast.js", function() {
 
      $('#getForecast').click( function() {
        var data = { city: "Васюки", date: "20120318" };
        $.get( "getForecast.txt", data, showForecast, "json" );
      } );
 
    } );
 
  } );
 
</script>
 
</head>
 
<body>
 
<button id="getForecast">Получить прогноз погоды</button>
 
</body>
</html>

Запускаем демонстрационный файл и наблюдаем результат работы кода JavaScript, который подгружается из другого файла по мере необходимости.

Код JavaScript в файле начинается с вызова для загрузки библиотеки . Также создается анонимная возвратная функция, которая выполняется сразу после загрузки . Данная функция добавляет обработчик события для кнопки , который вызывает метод для получения файла и выполнения загруженной функции для вывода сообщения.

Метод добавляет случайный параметр к строке запроса (например,) для предотвращения кэширования браузером файла JavaScript.

Получение библиотеки jQuery UI

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

Выбор темы оформления

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

На сайте jQuery UI можно воспользоваться услугами специального приложения — настройщика тем (Themeroller), но кроме того существует целая галерея предопределенных тем, полностью готовых к использованию, из которых можно выбрать ту, которая вас больше всего устраивает, и тем самым облегчить себе жизнь.

Начните с посещения сайта jqueryui.com и щелкните на кнопке Themes. В результате откроется страница ThemeRoller, отображающая виджеты jQuery UI и расположенную слева от них панель настроек, с помощью которой можно установить параметры темы оформления, как показано на рисунке:

Если у вас уже используется определенный визуальный стиль, которого вы должны придерживаться, и вы хотите, чтобы визуальный интерфейс средств JQuery UI согласовывался с остальной частью сайта или приложения, то вкладка Roll Your Own (которая выбирается по умолчанию) — это как раз то, что нужно. Можно изменить любой аспект оформления с помощью набора стилей CSS, который используется библиотекой jQuery UI.

Чтобы получить одну из готовых тем, следует перейти на вкладку Gallery. На момент написания этих строк галерея включала 24 темы, охватывающие широкий спектр вариантов цветового оформления — от приглушенных и нежных тонов до ярких и вызывающих. При выполнении щелчков на темах галереи внешний вид виджетов, отображаемых на остальной части страницы, будет соответствующим образом обновляться, позволяя вам оценить, как может выглядеть приложение:

Используемая для jQuery UI стандартная тема носит название UI lightness, но эта тема недостаточно контрастна, и поэтому я буду использовать тему Sunny, которая выглядит немного лучше. Единственное, что от вас сейчас требуется — это запомнить название темы, которая вас устраивает.

Создание настраиваемого загрузочного архива библиотеки jQuery UI

Выбрав для себя определенную тему оформления, можете приступить к созданию собственного варианта загрузки библиотеки jQuery UI. Щелкните на кнопке Download в верхней части страницы для перехода на страницу Download Builder. Вы увидите список компонентов jQuery UI, разбитых на четыре функциональные группы: UI Core, Interactions, Widgets и Effects.

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

Для выполнения примеров вам понадобятся все компоненты, поэтому проследите за тем, чтобы были установлены все флажки.

Между некоторыми компонентами, фигурирующими в списке, существуют зависимости, но в процессе создания своего варианта библиотеки можете об этом не думать. Если вы выбираете какой-либо компонент, то одновременно с ним загрузятся все компоненты, от которых он зависит.

Следующий шаг заключается в выборе темы. Это делается с помощью раскрывающегося списка, который располагается снизу на странице, как показано на рисунке:

У вас также есть возможность выбрать конкретную версию библиотеки jQuery UI, которая должна быть включена в загрузочный архив. Вам потребуется загрузить стабильную (Stable) версию, которая работает со всеми версиями библиотеки jQuery, начиная с версии 1.3.2.

После выделения всех компонентов и выбора темы и стабильной версии загрузите созданный вами пользовательский вариант загрузочного архива библиотеки jQuery UI, щелкнув на кнопке Download.

Как подключить плагин к коду HTML

Для того, чтобы подключить плагин jQuery к коду страницы, в теге link нужно прописать пути ко всем файлам из архива на вашем компьютере. Сначала добавляем в HTML файл с расширением CSS и подключаем точно также, как файл стилей: <link rel=”stylesheet” href=”../dist/plagin.css”>. Эта ссылка располагается в теге head сразу же после скрипта со ссылкой на библиотеку. Следующим подключаем файл с расширением js. Это скрипт, и добавить его можно тем же способом, что и файл с библиотекой. Всего подключаем три файла: саму библиотеку jQuery, стили и скрипт.

Следующий шаг – запуск или инициализация плагина. На странице с документацией будет несколько вариантов кода для различных целей. Выбираем нужный, копируем его и вставляем в HTML, как скрипт в тег head. Для этого просто копируем написанный код в тег script. Теперь разберемся с синтаксисом плагина jQuery. На первой строчке скопированного кода будет название класса родительского блока, который необходимо добавить в HTML проекта. Подсказка о том, куда его вставить, будет на странице с документацией. В случае со слайдером, нужный класс добавляется к блоку со ссылками на изображения.

Внешний JavaScript

Если JavaScript-кода много – его выносят в отдельный файл, который, как правило, имеет расширение .

Чтобы включить в HTML-документ JavaScript-кoд из внешнего файла, нужно использовать атрибут (source) тега . Его значением должен быть URL-aдpec файла, в котором содержится JS-код:

В этом примере указан абсолютный путь к файлу с именем script.js, содержащему скрипт (из корня сайта). Сам файл должен содержать только JavaScript-кoд, который иначе располагался бы между тегами и .

По аналогии с элементом атрибуту элемента можно назначить полный URL-aдpec, не относящийся к домену текущей НТМL-страницы:

Подробнее о путях файлов читайте в разделе .

Чтобы подключить несколько скриптов, используйте несколько тегов:

Примечание: Элемент с атрибутом не может содержать дополнительный JаvаSсriрt-код между тегами и , хотя внешний сценарий выполняется, встроенный код игнорируется.

При наличии атрибута src внутренняя часть тега script игнорируется!

Выполнить код »
Скрыть результаты

Независимо от того, как JS-код включается в НТМL-документ, элементы интерпретируются браузером в том порядке, в котором они расположены в HTML-документе. Сначала интерпретируется код первого элемента , затем браузер приступает ко второму элементу и т. д.

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

Примечание: Во внешние файлы копируется только JavaScript-код без указания открывающего и закрывающего тегов и .

Как добавить библиотеку в html

Работать с фреймворком можно добавив ссылку в исходный код вашего блога с официального интернет-проекта Jquery, или же скачав библиотеку к себе на сервер.

Используем первый способ

Откроется страница, где нажимаем правой кнопкой мыши по «Download the compressed» и выбираем в открывшемся окне строку «Копировать адрес ссылки».

Далее осталось в исходном коде перед закрывающимся тегом head написать следующее:

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

В кавычках и будет адрес скопированной ссылки.

Атрибут «src» указывает путь к внешнему файлу. Хотелось бы отметить, что не обязательно подключать данный скрипт в тег «head». На момент написания статьи последняя версия была 3.2.1. Когда вы будете читать данный пост, она может измениться. Выйдет новая.

Важно! Перед началом работы с данным фреймворком у вас должны быть начальные знания в области веб-программирования. Это не так сложно, как кажется

На начальных этапах обучения рекомендую почитать статью «Первые шаги в коддинге».

Как подключить, скачав файл на свой сервер

На официальном сайте, так же, как и в первом способе, жмем на кнопку «Загрузить».

В новом окне нажимаем ссылку «Download the compressed» левой кнопкой мыши и прописываем путь, куда нужно скачать файл библиотеки.

На сервере создайте папку, например, «JS» и скопируйте в него этот файл.

Теперь его нужно подключить для этого в теге «head» пишем такой код:

<script type="text/javascript" src="js/ jquery-3.2.1.min.js"></script>

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

Они отличаются размером. Сжатая версия, та что использовалась в примере, имеет размер 85 килобайт, а полная — 260. В первом варианте были убраны все пробелы и переводы строк. Также сократили имена переменных. Больше между ними разницы нет. Я советую использовать способ, описанный выше, так как в нем размер подключаемого файла меньше и поэтому загружаться он будет быстрее. Полная версия используется разработчиками, и вебмастерами, которые захотят изучить работу библиотеки подробнее.

Подключение стороннего скрипта к WordPress

В данном примере подключается скрипт bootstrap.min.js с сервера CDN Google.

Подключение аналогично вышеперечисленным примерам, только указан адрес стороннего скрипта. Протокол httpss: не указывается.

Подключение скрипта к дочерней теме WordPress

Важно

При подключении скриптов в дочерней теме важно указывать директорию стилей CSS дочерней темы — get_stylesheet_directory_uri(). Иногда нужно поменять библиотеку jQery WordPress на более свежую

Для этого нужно использовать такой код:

Иногда нужно поменять библиотеку jQery WordPress на более свежую. Для этого нужно использовать такой код:

Метод jQuery prepend()

Метод prepend() используется для вставки содержимого в начало выбранных элементов.

блок 1

Следующий пример добавит некоторый HTML-код ко всем абзацам после загрузки документа, а при нажатии на кнопку, добавится еще и некоторый текст к основному блоку с id #container. В отличии от метода append(), метод prepend() добавляет содержимое в начало тэга:

<script type="text/javascript">
  $(document).ready(function(){
    // Добавление элемента ко всем параграфам после загрузки документа
    $("p").prepend("<strong>Note:</strong> ");
    // Добавление текста в блок с айди container
    $("button").click(function(){
      $("#container").prepend("This is demo text.");
    });
  });
</script>

How to use jQuery CDN

Normally we all first download & put the jQuery file in the website’s folder. Then we reference this file on the page head section.

<head>
    <script src="files/jquery-3.2.1.min.js"></script>
</head>

Instead we can use jQuery CDN by just providing the link of jQuery directly from Google, Microsoft, CloudFlare, etc.

So when using jQuery from the jQuery’s own CDN, you can do:

<head>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>

Notice the src path that links to jQuery file from code.jquery.com domain.

ADS: รับทำ seo

jQuery CDN hosted by Google

In the same way we can use jQuery CDN hosted by Google, as shown below:

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

jQuery CDN hosted by Microsoft

Microsoft also hosts jQuery and this CDN is used below:

<head>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
</head>

jQuery CDN hosted by CloudFlare

CloudFlare is a great CDN and also very popular too. It also has jQuery CDN which you can use in your website.

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

If you want to learn and understand all about the CloudFlare CDN technology then visit – How does CloudFlare works?. You can also host your full website in CloudFlare free of charge.

Метод jQuery append()

Метод jQuery append() используется для вставки содержимого в конец выбранных элементов.

Следующий пример добавит некоторый HTML-код ко всем абзацам после загрузки документа, а при нажатии на кнопку, добавится еще и некоторый текст к основному блоку с id #container:

<script type="text/javascript">
  $(document).ready(function(){
    // Добавление элемента ко всем параграфам после загрузки документа
    $("p").append(' <a href="#">read more...</a>');
    // Добавление текста в блок с айди container
    $("button").click(function(){
      $("#container").append("This is demo text.");
    });
  });
</script>

Selectors

Selectors are how we tell jQuery which elements we want to work on. Most jQuery selectors are the same as what you’re familiar with in CSS, with a few jQuery-specific additions. You can view the full list of jQuery selectors on their official documentation pages.

To access a selector, use the jQuery symbol , followed by parentheses .

Double-quoted strings are preferred by the jQuery style guide, though single-quoted strings are often used as well.

Below is a brief overview of some of the most commonly used selectors.

• — Wildcard: selects every element on the page.
• — Current: selects the current element being operated on within a function.
• — Tag: selects every instance of the tag.
• — Class: selects every element that has the class applied to it.
• — Id: selects a single instance of the unique id.
• — Attribute: selects any element with applied to the attribute.
• — Pseudo Element: selects the first .

Generally, classes and ids are what you will encounter the most — classes when you want to select multiple elements, and ids when you want to select only one.

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

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

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

Если вы не исправляете саму библиотеку jquery, а используете только версию Compressed (файлик  min.js), то есть смысл не загружать библиотеку на локальный сервер, а подключать его напрямую с CDN (Content Delivery Networks) — в данном случае библиотека jQuery находится физически в ctnb CDN — а мы просто ссылаемся на неё.

Что такое CDN

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

Строка подключения библиотеки jQuery с CDN сервера

Строка подключения к CDN серверу также находится на странице  http://jquery.com/download и выглядит следующим образом (в зависимости от версии):

Установка версии библиотеки jQuery UI, предназначенной для разработки

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

Вы должны скопировать в папку с файлами примеров следующие файлы и папки:

• development-bundle\ui\jquery-ui.custom.js;

• development-bundle\themes\sunny\jquery-ui.css;

• папка development-bundle\themes\sunny\images.

Содержащиеся в папках ui и themes файлы JavaScript и CSS используются отдельными компонентами и средствами, входящих в состав библиотеки. У вас не будет необходимости обращаться к ним, но они могут пригодиться в том случае, если вы захотите работать с ограниченным набором средств библиотеки jQuery UI.

Имена JavaScript- и CSS-файлов включают номер версии загруженного выпуска библиотеки. В моем случае это версия 1.10.3. Библиотека jQuery UI активно разрабатывается, и вы можете загрузить более позднюю версию, чем 1.10.3.

Подключение библиотеки jQuery UI к HTML-документу

Все, что вам теперь остается сделать — это включить библиотеку jQuery UI в свой HTML-документ. Это можно сделать, добавив в документ элементы script и link, содержащие ссылки на файлы JavaScript и CSS, которые вы загрузили, как показано в примере ниже:

Ссылаться непосредственно на папку images необязательно. Коль скоро папка images и CSS-файл находятся на своих местах, jQuery UI сможет самостоятельно найти все необходимые ресурсы.

Библиотека jQuery UI зависит от библиотеки jQuery. Для того чтобы использовать jQuery UI в документе, ее следует предварительно подключить к нему. Библиотека jQuery UI не относится к числу автономно используемых библиотек.

Показанный в примере выше документ содержит простой тест, позволяющий проверить правильность подключения библиотеки jQuery UI. В случае нормального открытия страницы вы должны увидеть кнопку, похожую на ту, которая показана на рисунке. Не обращайте пока внимания на вызов метода button() в элементе script. О том, для чего он предназначен и как работает, вы узнаете в следующей статье.

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