// 
//     Licensed to the Apache Software Foundation (ASF) under one
//     or more contributor license agreements.  See the NOTICE file
//     distributed with this work for additional information
//     regarding copyright ownership.  The ASF licenses this file
//     to you under the Apache License, Version 2.0 (the
//     "License"); you may not use this file except in compliance
//     with the License.  You may obtain a copy of the License at
// 
//       http://www.apache.org/licenses/LICENSE-2.0
// 
//     Unless required by applicable law or agreed to in writing,
//     software distributed under the License is distributed on an
//     "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
//     KIND, either express or implied.  See the License for the
//     specific language governing permissions and limitations
//     under the License.
//

= Начало работы по созданию приложения Cordova
:jbake-type: tutorial
:jbake-tags: tutorials 
:jbake-status: published
:icons: font
:syntax: true
:source-highlighter: pygments
:toc: left
:toc-title:
:description: Начало работы по созданию приложения Cordova - Apache NetBeans
:keywords: Apache NetBeans, Tutorials, Начало работы по созданию приложения Cordova

В этом документе описывается создание проекта HTML5 в среде IDE, который упакован в виде мобильного приложения и запускается в симуляторе мобильного устройства. При создании приложения HTML5 можно воспользоваться шаблоном сайта Apache Cordova. Apache Cordova предоставляет группу методов API, которые позволяют разрабатывать приложение с HTML, CSS и JavaScript, для которого создается пакет в виде оригинального мобильного приложения. Приложение запускается на мобильном устройстве и может получать доступ к оригинальным функциям устройства, таким как GPS или камера. С помощью методов API Cordova разработчик может создать мобильное приложение без необходимости написания оригинального кода.

В этом документе описана установка обязательного программного обеспечения и разработка приложения с помощью Cordova. После установки Cordova можно в мастере 'Новый проект' использовать шаблон Cordova для создания приложения Cordova. Затем необходимо добавить код и запустить приложение в симуляторе мобильного устройства. В этом учебном руководстве используется симулятор iOS. Если вы собираетесь использовать эмулятор устройства под управлением Android, выполните аналогичные действия.

Демонстрация развертывания приложения Cordova в эмуляторе Android: link:../web/html5-cordova-screencast.html[+Видеоролик 'Основы разработки на Cordova'+].


image::images/netbeans-stamp.png[title="Содержимое этой страницы применимо к IDE NetBeans 7.3"]


==== Для выполнения этого учебного курса потребуются следующие материалы.

|===
|Программное обеспечение или ресурс |Требуемая версия 

|link:https://netbeans.org/downloads/index.html[+IDE NetBeans, Java+] |8.0 

|link:http://www.oracle.com/technetwork/java/javase/downloads/index.html[+Комплект для разработчика на языке Java (JDK)+] |версия 7 

|link:http://cordova.apache.org/[+Apache Cordova+] |-- 

|link:http://nodejs.com/[+NodeJS+] |-- 

|link:http://git-scm.com/[+Git+] |-- 

|SDK для мобильных платформ
 |Android или
iOS 
|===

*Примечания.*

* Предполагается, что совместимый комплект SDK для целевой мобильной платформы и эмулятор устройства уже установлены.
* Предполагается, что читатель обладает базовыми знаниями или опытом программирования на HTML, CSS и JavaScript. Для получения дополнительных сведений о поддержке HTML5 в среде NetBeans IDE см. раздел link:html5-gettingstarted.html[+Начало работы с приложениями HTML5+]


== Установка Cordova

Вам необходимо установить Cordova в локальной системе для упаковки приложения HTML5 в виде оригинального мобильного приложения с помощью среды IDE NetBeans. Используйте *npm*, диспетчер пакетов NodeJS, для установки и обновления Cordova. Кроме того, убедитесь, что в локальной системе выполнена установка и корректная настройка Git. Cordova использует Git для извлечения из репозитория необходимых исходных файлов Cordova при упаковке приложения в виде внутреннего мобильного приложения.

Большинство следующих действий этого упражнения будут выполнены в окне терминала.

1. Загрузите и установите Node.js, если не сделали этого раньше.

Программу установки можно загрузить с link:http://nodejs.org[+сайта Node.js+].

2. Откройте окно терминала.
3. Чтобы убедиться в наличии Node.js, выполните следующую команду.

[source,shell]
----

$ node -v
----

Если установка node.js выполнена, в окне терминала отобразится номер версии.

*Примечания.*

* При использовании прокси-сервера необходимо настроить node.js на использование данного прокси-сервера для доступа к сети. Для настройки прокси-сервера можно выполнить следующие команды, заменив  ``http://proxy:8080``  на нужный прокси-сервер.

[source,shell]
----

$ sudo npm config set proxy http://proxy:8080
$ sudo npm config set https-proxy http://proxy:8080
----

Для просмотра текущих параметров конфигурации выполните следующие команды.


[source,shell]
----

$ npm config list
----
* Для получения дополнительных сведений о настройке node.js см. link:https://npmjs.org/doc/config.html[+https://npmjs.org/doc/config.html+].
4. Для установки Cordova выполните следующую команду.

[source,shell]
----

$ npm install -g cordova
----

*Примечания.*

* Если при выполнении команды установки в окне терминала появляется сообщение об ошибке, убедитесь, что конфигурация прокси-сервера выполнена правильно.
* Для обновления Cordova до самой последней версии выполните следующую команду.

[source,shell]
----

$ npm update -g cordova
----
5. Чтобы убедиться в успешной установке Cordova и просмотр информацию об используемой версии, выполните следующую команду.

[source,shell]
----

$ cordova --version
----

Если установка Cordova выполнена, в окне терминала отобразится номер версии.

6. Загрузите и установите систему контроля версий Git, если не сделали этого раньше.

Программу установки можно загрузить с link:http://git-scm.com/[+сайта Git+].

*Примечание.* В среду Path требуется добавить Git.

7. Для проверки успешной установки Git выполните следующую команду.

[source,shell]
----

$ git --version
----

Если установка Git выполнена, в окне терминала отобразится номер версии.

*Примечания.*

* При использовании прокси-сервера необходимо настроить Git на использование данного прокси-сервера для доступа к сети. Для настройки прокси-сервера можно выполнить следующие команды, заменив  ``http://proxy:8080``  на нужный прокси-сервер.

[source,shell]
----

$ git config --global http.proxy http://proxy:8080
$ git config --global https.proxy http://proxy:8080
----

Для просмотра текущих параметров конфигурации выполните следующие команды.


[source,shell]
----

$ git config --list
----
* Для получения дополнительных сведений о настройке Git см. инструкции по установке link:http://git-scm.com/book/en/Getting-Started-First-Time-Git-Setup[+http://git-scm.com/book/en/Getting-Started-First-Time-Git-Setup+].

Теперь у вас есть все инструменты, необходимые для разработки и упаковки оригинального мобильного приложения в среде IDE. В следующем упражнении для создания приложения используется мастер создания проектов.


== Создание приложения Cordova

В этом упражнении мы используем мастер создания проектов в среде IDE, чтобы создать новое приложение Cordova. Приложение Cordova создается путем выбора шаблона Cordova Hello World в качестве шаблона сайта в мастере создания проекта. Приложение Cordova представляет собой приложение HTML5 с дополнительными библиотеками и файлами конфигурации. Если у вас уже есть приложение HTML5, вы можете использовать окно 'Свойства проекта' в среде IDE для добавления источников Cordova и других файлов, необходимых для упаковки приложения в виде приложения Cordova.

В этом учебном курсе создается очень простой проект HTML5, который содержит файл  ``index.html``  и несколько файлов JavaScript и CSS. При создании проекта в мастере мы выберем несколько библиотек jQuery JavaScript.

1. Выберите 'Файл' > 'Новый проект' (Ctrl-Shift-N; ⌘-Shift-N в Mac) в главном меню, чтобы открыть мастер создания проектов.
2. Выберите категорию *HTML5*, затем выберите *Приложение Cordova*. Нажмите кнопку "Далее".
image::images/cordova-newproject-wizard1.png[title="Шаблон приложения Cordova в мастере создания проектов"]
3. Введите *CordovaMapApp* в качестве имени проекта и укажите каталог на компьютере, где следует сохранить проект. Нажмите 'Далее'.
4. В шаге 3. "Шаблон сайта", убедитесь, что шаблоны Download Online и Cordova Hello World выбраны в списке. Нажмите кнопку "Далее".
image::images/cordova-newproject-wizard2.png[title="Панель шаблонов сайта в мастере создания приложений HTML5"]

*Примечание.* Вы должны быть подключены к сети, чтобы создать проект, который основан на одном из интернет-шаблонов в списке.

5. В шаге 4. "Файлы JavaScript" выберите библиотеки JavaScript  ``jquery``  и  ``jquery``  на панели 'Доступные' и щелкните кнопку со стрелкой вправо ( > ), чтобы переместить выбранные библиотеки на панель мастера 'Выбранное'. По умолчанию библиотеки создаются в папке проекта  ``js/libraries`` . В этом учебном курсе будут использоваться "уменьшенные" версии библиотек JavaScript.

Можно использовать текстовое поле на панели, чтобы отфильтровать список библиотек JavaScript. Например, введите *jq* в поле, чтобы найти библиотеки  ``jquery`` . Вы можете удерживать нажатой клавишу Ctrl и щелкнуть левой кнопкой мыши имена библиотек для выбора нескольких библиотек.

image::images/cordova-newproject-wizard3.png[title="Панель 'Библиотеки JavaScript' в мастере создания приложений HTML5"]

*Примечания.*

* Можно нажать номер версии библиотеки в столбце 'Версия', чтобы открыть всплывающее окно, в котором можно выбрать предыдущие версии библиотек. По умолчанию в мастере отображается самая последняя версия.
* Минимизированные версии библиотек JavaScript - это сжатые версии, и при просмотре в редакторе код не является доступным для понимания.
6. В шаге 5. "Служба поддержки Cordova", используйте значения по умолчанию. Для завершения мастера нажмите кнопку *Готово*.

После нажатия кнопки 'Готово' в IDE создается проект, отображается узел проекта в окне 'Проекты' и открывается файл  ``index.html``  в редакторе.

image::images/cordova-projects-window1.png[title="Окно проектов"]

Если развернуть папку  ``js/libs``  в окне 'Проекты', будет видно, что библиотеки JavaScript, которые были указаны в мастере создания проектов, были автоматически добавлены к проекту. Можно удалить библиотеку JavaScript из проекта, щелкнув правой кнопкой мыши файл JavaScript и выбрав 'Удалить' во всплывающем меню.

Чтобы добавить библиотеку JavaScript к проекту, щелкните правой кнопкой мыши узел проекта и выберите 'Свойства', чтобы открыть окно 'Свойства проекта'. Можно добавлять библиотеки к панели 'Библиотеки JavaScript' в окне 'Cвойства проекта'. Кроме того, можно скопировать файл JavaScript, который находится в локальной системе, напрямую в папку  ``js`` .

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

7. Щелкните значок выбора браузера на панели инструментов и убедитесь, что в столбце Cordova таблицы выбран эмулятор целевого мобильного устройства. В столбце Cordova можно выбрать эмулятор Android или симулятор iOS (потребуется OS X и XCode). 
image::images/cordova-select-browser.png[title="Браузер, выбранный в раскрывающемся списке на панели инструментов."]
8. Нажмите значок 'Выполнить' на панели инструментов.

При нажатии кнопки 'Выполнить' среда IDE выполняет развертывание приложения Cordova в эмуляторе.

image::images/cordova-ios7-run.png[title="Приложение в симуляторе iOS"]

*Примечание.* При развертывании симулятор iOS должен открываться автоматически. При развертывании приложения в эмуляторе Android требуется настроить и открыть симулятор перед выполнением приложения. Демонстрация развертывания приложения Cordova в эмуляторе Android: link:../web/html5-cordova-screencast.html[+Видеоролик 'Основы разработки на Cordova'+].


== Изменение приложения

В этом упражнении редактируются файлы  ``index.html``  и  ``index.js`` . Код, созданный в шаблоне Cordova Hello World, заменяется кодом для отображения карты текущего местоположения в приложении. Кроме того, необходимо изменить конфигурацию Cordova, удалив подключаемые модули Cordova, необязательные для приложения.


=== Редактирование файла HTML

В этом упражнении файл HTML редактируется в исходном редакторе с целью добавления ссылок в библиотеки и файлы CSS, а также для добавления элементов страниц.

1. Откройте в редакторе `index.html` (если он еще не открыт).

В редакторе можно увидеть, что среда IDE создала код на основе шаблона Cordova Hello World.

2. Добавьте в редакторе ссылки на библиотеки jQuery JavaScript и файлы CSS, которые добавлялись при создании проекта. Добавьте следующий код (*полужирным шрифтом*) между открывающим и закрывающим тегами  ``<head>`` .

[source,xml]
----

<html>
    <head>
        <meta charset=UTF-8">
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi">
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        
        *<link rel="stylesheet" href="js/libs/jquery-mobile/jquery.mobile.min.css"/>
        <script type="text/javascript" src="js/libs/jquery/jquery.min.js"></script>
        <script type="text/javascript" src="js/libs/jquery-mobile/jquery.mobile.min.js"></script>*
        <title>Hello World</title>
    </head>
    <body>
    ...
</html>
----

В окне 'Проекты' можно увидеть путь к файлам и использовать функцию автозавершения кода в редакторе.

image::images/cordova-code-completion.png[title="Автозавершение кода в редакторе"]
3. Добавьте следующую ссылку на Google Maps JavaScript API между тегами `<head>`.

[source,xml]
----

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
----

*Примечание.* Это ссылка на исключенную версию v2 JavaScript API. Эта версия JavaScript используется в данной учебной программе в демонстрационных целях. При создании настоящего приложения рекомендуется использовать новую версию.

4. Удалите код между тегами `<body>` за исключением следующих ссылок на файлы JavaScript `index.js` и `cordova.js`.

[source,xml]
----

   <body>
        
        *<script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>*
        
    </body> 
</html>
----

Файл `index.js` был автоматически сгенерирован при создании проекта. Он отображается в узле `js` в окне 'Проекты'. Далее во время учебного курса мы изменим код в `index.js`.

Файл `cordova.js` не отображается в окне 'Проекты', так как он генерируется при сборке приложения Cordova.

5. Добавьте следующий код (*полужирным шрифтом*) между тегами  ``body`` .

[source,html]
----

   <body>
        *<div data-dom-cache="false" data-role="page" id="mylocation">
            <div data-role="header" data-theme="b">
                <h1 id="header">Searching for GPS</h1>
                <a data-role="button" class="ui-btn-right" onclick="showAbout()">About</a>
            </div>
            
            <div data-role="content" style="padding:0;">
                <div id="map" style="width:100%;height:100%; z-index:50">
                </div>

            </div>
            <div data-role="footer" data-theme="b" data-position="fixed" >
                <h4>Google Maps</h4>
            </div>
        </div>
        <div data-dom-cache="false" data-role="page" id="about">
            <div data-role="header" data-theme="b">
                <a data-role="button" data-rel="back" href="#mylocation" data-icon="arrow-l" data-iconpos="left" class="ui-btn-left">Back</a>
                <h1>About</h1></div>
            <div data-role="content" id="aboutContent">
            </div> 
            <div data-role="footer" data-theme="b" data-position="fixed" >
                <h4>Created with NetBeans IDE</h4>
            </div>
        </div>
        *
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
    </body>
</html>
----


=== Изменение конфигурации Cordova

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

1. Правой кнопкой мыши щелкните узел проекта в окне "Проекты" и выберите "Свойства" во всплывающем меню.
2. Выберите *Cordova* в списке категорий. 
image::images/cordova-properties-application.png[title="Вкладка 'Подключаемые модули Cordova' в окне 'Свойства проекта'"]

Вкладка 'Приложение' может использоваться для просмотра и изменения данных конфигурации Cordova о приложении, указанных в файле `config.xml`.

3. Щелкните вкладку 'Подключаемые модули' на панели Cordova.

Вкладка 'Подключаемые модули' содержит две панели. На панели 'Доступно' отображается список подключаемых модулей Cordova, доступных в настоящее время.

На панели 'Выбрано' отображается список подключаемых модулей Cordova, установленных в приложении. При использовании шаблона Cordova Hello World для создания приложения все подключаемые модули устанавливаются по умолчанию. Для большинства приложений не требуются все подключаемые модули. Вкладка 'Подключаемые модули' в окне 'Свойства проекта' используется для удаления подключаемых модулей, необязательных для вашего приложения.

*Примечание.* Кроме того, список установленных подключаемых модулей можно изменить путем внесения изменений в файл `nbproject/plugins.properties` в редакторе.

4. Удалите все подключаемые модули за исключением следующих: API устройства (Device API), Диалоги (Уведомления) ( Dialogs (Notifications)) и Геолокация (Geolocation). Нажмите кнопку "ОК". 
image::images/cordova-properties-plugins.png[title="Вкладка 'Подключаемые модули Cordova' в окне 'Свойства проекта'"]


=== Редактирование файла JavaScript

В данном упражнении выполняется удаление кода JavaScript, сгенерированного шаблоном, а также добавление нескольких простых методов для отображения карты текущего местоположения.

1. Откройте `index.js` в редакторе.

При создании проекта в `index.js` был сгенерирован шаблон кода. Для данного приложения можно удалить весь сгенерированный код.

2. Замените созданный код следующим: Сохраните изменения.

[source,java]
----

var map;
var marker;
var watchID;

$(document).ready(function() {
    document.addEventListener("deviceready", onDeviceReady, false);
    //uncomment for testing in Chrome browser
//    onDeviceReady();
});

function onDeviceReady() {
    $(window).unbind();
    $(window).bind('pageshow resize orientationchange', function(e) {
        max_height();
    });
    max_height();
    google.load("maps", "3.8", {"callback": map, other_params: "sensor=true&amp;language=en"});
}

function max_height() {
    var h = $('div[data-role="header"]').outerHeight(true);
    var f = $('div[data-role="footer"]').outerHeight(true);
    var w = $(window).height();
    var c = $('div[data-role="content"]');
    var c_h = c.height();
    var c_oh = c.outerHeight(true);
    var c_new = w - h - f - c_oh + c_h;
    var total = h + f + c_oh;
    if (c_h < c.get(0).scrollHeight) {
        c.height(c.get(0).scrollHeight);
    } else {
        c.height(c_new);
    }
}

function map() {
    var latlng = new google.maps.LatLng(50.08, 14.42);
    var myOptions = {
        zoom: 15,
        center: latlng,
        streetViewControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        zoomControl: true
    };
    map = new google.maps.Map(document.getElementById("map"), myOptions);

    google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
        watchID = navigator.geolocation.watchPosition(gotPosition, null, {maximumAge: 5000, timeout: 60000, enableHighAccuracy: true});
    });
}

// Method to open the About dialog
function showAbout() {
    showAlert("Google Maps", "Created with NetBeans 7.4");
}
;

function showAlert(message, title) {
    if (window.navigator.notification) {
        window.navigator.notification.alert(message, null, title, 'OK');
    } else {
        alert(title ? (title + ": " + message) : message);
    }
}

function gotPosition(position) {
    map.setCenter(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));

    var point = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
    if (!marker) {
        //create marker
        marker = new google.maps.Marker({
            position: point,
            map: map
        });
    } else {
        //move marker to new position
        marker.setPosition(point);
    }
}
----

*Примечание.* Для данного учебного курса вызов метода `onDeviceReady` добавлен только в виде комментария, так как метод является необязательным для развертывания приложения в эмуляторе мобильного устройства. При необходимости выполнения приложения в веб-браузере следует удалить символы комментария перед вызовом метода `onDeviceReady`.

3. Выполните сброс эмулятора, перезапустив эмулятор или сбросив его настройки.
4. Нажмите 'Выполнить' на панели инструментов для развертывания приложения в эмуляторе. 

В симуляторе iOS появится запрос на разрешение приложению использовать ваше текущее месторасположение.

image::images/cordova-ios7-run1.png[title="Запрос местоположения в приложении"]

Вы можете проверить смоделированное местоположение в симуляторе IOS, выбрав 'Отладка > Местоположение > Пользовательское местоположение' в главном меню симулятора IOS, чтобы открыть диалоговое окно 'Пользовательское местоположение'.

image::images/cordova-ios-customlocation.png[title="Диалоговое окно 'Пользовательское местоположение' в симуляторе iOS"]

Если для вашего текущего местоположения в поле 'Широта' ввести значение 48.8582, а в поле 'Долгота' - 2.2945, приложение отобразит на карте Эйфелеву башню.

image::images/cordova-ios7-run3.png[title="Приложение при использовании текущего местоположения в симуляторе iOS"]


== Отладка приложения

В этом упражнении описывается установка точки останова в файле JavaScript и повторное выполнение приложения.

1. Выполните сброс или перезапуск эмулятора.
2. Откройте `index.js` в редакторе.
3. Установите точку останова, щелкнув в левой части следующей строки метода `gotPosition`.

[source,java]
----

var point = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
----
4. Нажмите 'Выполнить' на панели инструментов, чтобы повторно выполнить приложение.

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

image::images/cordova-debug-breakpoint1.png[title="Отладчик остановился по достижении точки останова"]

Если навести курсор на переменную, отобразится всплывающая подсказка со сведениями о данной переменной. Если навести курсор на переменную `latitude`, в подсказке отобразится значение переменной.

image::images/cordova-debug-variables1b.png[title="Подсказка с переменными"]

Если навести курсор на переменную `position` или `coords` появится стрелка, которую можно нажать, чтобы развернуть подсказку.

image::images/cordova-debug-variables1a.png[title="Подсказка с переменными"]

Развернутая подсказка позволяет просматривать значения более подробно.

image::images/cordova-debug-variables2.png[title="Подсказка с переменными"]

В этом случае удобнее просматривать значения в окне 'Переменные'. В окне 'Переменные' отображается широта и долгота текущего местоположения.

image::images/cordova-debug-variables.png[title="Окно &quot;Переменные&quot;"]

В окне 'Сетевой монитор' отображается список запросов приложения.

image::images/cordova-network-monitor.png[title="Окно &quot;Переменные&quot;"]


[[summary]]
== Заключение

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

link:/about/contact_form.html?to=3&subject=Feedback:%20Getting%20Started%20with%20Creating%20a%20Cordova%20Applications[+Отправить отзыв по этому учебному курсу+]


[[seealso]]
== См. также

Подробнее о поддержке приложений HTML5 в IDE см. в следующих материалах на сайте link:https://netbeans.org/[+www.netbeans.org+]:

* [Видеоролик] link:../web/html5-cordova-screencast.html[+Основы разработки на Cordova+]
* link:html5-editing-css.html[+Работа со страницами стилей CSS в приложениях HTML5+] Документ, который продолжает работу с приложением, которое было создано в этом учебном курсе. Он показывает, как использовать некоторые из мастеров CSS и окон в IDE и как использовать режим проверки в браузере Chrome для визуального определения элементов в источниках проекта.
* link:html5-js-support.html[+Отладка и тестирование JavaScript в приложениях HTML5+] Документ, который демонстрирует, как IDE предоставляет инструменты, которые могут использоваться в отладке и тестировании файлов сценариев JAVA в IDE.
* link:http://www.oracle.com/pls/topic/lookup?ctx=nb8000&id=NBDAG2272[+Создание файлов JavaScript+] в документе _Разработка приложений в IDE NetBeans_

Дополнительные сведения о jQuery доступны в официальной документации:

* Официальная домашняя страница: link:http://jquery.com[+http://jquery.com+]
* Домашняя страница UI: link:http://jqueryui.com/[+http://jqueryui.com/+]
* Учебные курсы: link:http://docs.jquery.com/Tutorials[+http://docs.jquery.com/Tutorials+]
* Главная страница документации: link:http://docs.jquery.com/Main_Page[+http://docs.jquery.com/Main_Page+]
* Демонстрации интерфейса пользователя и документация: link:http://jqueryui.com/demos/[+http://jqueryui.com/demos/+]