Порядок локальной установки jQuery

Для установки следует скачать последнюю версию по адресу https: //jquery.com. Главная страница ресурса показана на рисунке 76.

Рисунок 76 – Главная страница сайта jQuery.com

Поместите скаченный файл в директорию сайта. Подключите размещенный файл к странице сайта, используя следующий код:

< script type = " text/javascript" src = " путь до файла/jquery-2.1.3.min.js" > < /script>

Пример.

< html>

< head>

< title> Пример jQuery< /title>

< script type = " text/javascript" src = " /jquery/jquery-2.1.3.min.js" > < /script> //подключение библиотеки jQuery

< script type = " text/javascript" >

$(document).ready(function(){

document.write(" Hello, World! " );

});

< /script>

< /head>

< body>

< h1> Hello< /h1>

< /body>

< /html>

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

В последнее время библиотеки не загружают на локальный сервер, а подключают версию фреймворка из сети Интернет. Так как наличие интернета является неотъемлемым условием работы любого web-сайта, то хранение постоянно устаревающей версии библиотеки на локальном компьютере становится нецелесообразным. Гораздо проще один раз подключить библиотеку из сети CDN и не загружать каждую новую версию на локальный компьютер.

CDN( от англ. Content Delivery Network – сеть доставки контента). Контент в данном случае – это статические ресурсы, используемые на сайте: JavaScript библиотеки, файлы каскадных стилей (CSS), изображения в форматах (PNG, JPEG, GIF), FLASH (SWF) файлы, архивы (ZIP, RAR и другие).

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

Самая популярная сеть CDN–это сеть от GOOGLE. Есть CDN предоставляемый и самими разработчиками jQuery, однако у этой сети нет такой поддержки, как у сети GOOGLE, и в работе сети иногда возникают сбои. Кроме того, эта сеть предоставляет доступ только к jQuery, в то время, как GOOGLE предлагает большое количество библиотек, в том числе и последние версии jQuery.

При подключении библиотеки из CDN достаточно прописать одну строку в голове документа

< script type = " text/javascript" src" http: //ajax. Googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" > < /script>

Подключение с использованием менеджера пакетов bower.io

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

Практически у каждого языка программирования есть стандартный менеджер пакета, к примеру, у Ruby это менеджер gem, у Питона pip, у серверного JavaScript - менеджер npm. Для работы с клиентскими библиотеками самым популярным и полным является менеджер пакетов bower.

Bower был разработан программистами компании Twitter и выложен в сеть как open source проект в 2012 году. Все действия с менеджером пакетов bower осуществляются через командную строку и требуют установки node на компьютер. Подробнее об установке node на компьютер можно прочитать на официальном сайте разработчиков node.

Установка Bower

По своей сути Bower является утилитой командной строки и устанавливается с использованием npm. После установки node на компьютер в командной строке прописывается команда установки bower.

$ npm install -g bower

После установки bower загрузка и установка версии нужной библиотеки сводится к написанию нескольких команд в окне командной строки

$ bower install < package>

# registered package// регистрация пакета

$ bower install jquery// установка последней версии библиотеки jQuery

По умолчанию все загруженные файлы сохраняются в папку bower_components/, имя папки можно изменить, применив соответствующую команду.

Подключается библиотека на страницу при помощи уже знакомой конструкции

< script src=" bower_components/jquery/dist/jquery.min.js" > < /script>

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

Работа с функциями jQuery

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

Функция $()

Запись селекторов jQuery всегда начинается со знака доллара и скобок –$(). Так, к примеру, запись селектора $('p') выберет все параграфы внутри документа.

Функция $() является синонимом функции JQuery (). Обычно запись JQuery() используется в случае использования одновременно нескольких библиотек, чтобы избежать конфликта имен, содержащих знак доллара. Кроме этого существует метод noConflict(). С помощью команды noConflict() можно заменить знак $ на любой другой.

var произвольное_имя=jQuery.noConflict();

//Изменим стандартный символ $ на nsign

var nsign=jQuery.noConflict();

//Изменим цвет абзаца используя nsign вместо $

nsign(document).ready(function(){

nsign(" p" ).css(" color", " green" );

});

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

<! DOCTYPE html>

< html>

< head>

< title> Работа с jQuery< /title>

< script src=" bower_components/jquery/dist/jquery.min.js" > < /script>

< /head>

< body>

< h1> Изменение элементов с помощью jQuery< /h1>

< p> jQuery- это самая популярная библиотека JavaScript< /p>

< /body>

< /html>

Для этого добавим следующий jQuery код:

< script>

jQuery(" h1" ).css(" color", " green" );

< /script>

Исходная страница будет иметь вид:

<! DOCTYPE html>

< html>

< head>

< title> Работа с jQuery< /title>

< script src=" bower_components/jquery/dist/jquery.min.js" > < /script>

< script>

jQuery(" h1" ).css(" color", " green" );

< /script>

< /head>

< body>

< h1> Изменение элементов с помощью jQuery< /h1>

< p> jQuery- это самая популярная библиотека JavaScript< /p>

< /body>

< /html>

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

Для того чтобы понять почему так происходит, нужно вспомнить о том, что jQuery работает с объектной моделью документа, меняет узлы модели и отображает изменения, но в момент, когда jQuery обращается к тегу h1 с целью изменить его, DOM еще не построен и узел h1 еще не существует. А к моменту появления узла h1 код jQuery уже выполнился.

Именно поэтому перед выполнением любого кода, следует убедиться в том, что DOM загружен и готов к работе. Для этого предусмотрена функция $(document).ready(). Все внутри этой функции выполнится только после того, как DOM будет готов к манипуляциям.

$(document).ready(function() {

// Ваш код здесь

Также можно использовать сокращённый вариант без явного вызова метода ready():

< script>

$(function(){

$(" h1" ).css(" color", " green" );

});

< /script>

Перепишем код нашей страницы с учетом новой функции

<! DOCTYPE html>

< html>

< head>

< title> Работа с jQuery< /title>

< script src=" bower_components/jquery/dist/jquery.min.js" > < /script>

< script>

$(document).ready(function() {

jQuery(" h1" ).css(" color", " green" );

});

< /script>

< /head>

< body>

< h1> Изменение элементов с помощью jQuery< /h1>

< p> jQuery- это самая популярная библиотека JavaScript< /p>

< /body>

< /html>

jQuery можно комбинировать с обычным JavaScript.

Если строка начинается с $ - это jQuery, если $ в начале строки отсутствует - это строка JavaScript кода.

function start() {

//Скроем абзац с id=" hid" с помощью jQuery

$(" p#hid" ).hide();

//Изменим содержимое абзаца с id=" change"

document.getElementById(" change" ).innerHTML=" Данное содержимое было изменено с помощью JavaScript.";

}

⇐ Предыдущая23242526272829303132Следующая ⇒

Поделиться:

Популярное:

1. II. Организация локальной вычислительной сети.
2. Буровые установки на натянутых связях
3. Волновые, приливные энергоустановки
4. Вредоносные социальные установки, блокирующие развитие сознания
5. Время замедления начинает отсчитываться с момента установки лимба на требуемое деление.
6. Г.1.3 Описание режимов работы установки.
7. Геотермальные энергоустановки
8. Измерительные установки и системы.
9. Изучить исполнение установки, конструкции экспериментальных конденсаторов, типы диэлектриков, конструкции и типы промышленных конденсаторов.
10. Каким кабелем должна выполняться кабельная линия первичной цепи переносной (передвижной) электросварочной установки от коммутационного аппарата до источника сварочного тока?
11. Каковы сроки очередных проверок знаний у персонала, эксплуатирующего электроустановки напряжением до 1000В и выше?
12. Классификация схем установки электроприводов на стрелку