Мы приступаем к изучению jQuery , и самое первое, что нужно сделать - это установить jQuery к себе на страницу. Также рассмотрим, какие есть версии для установки. Это всё мы разберём в данной статье.
Первым делом, нужно скачать jQuery с официального сайта: http://jquery.com/download/ . Рекомендую скачивать jQuery версии 1.x , а 2.x , поскольку последняя не поддерживается IE6-IE8 .
Для скачивания имеются 2 вида библиотеки jQuery : сжатая (compressed ) и несжатая (uncompressed ). В плане работы они идентичны, но сжатая весит значительно меньше (за счёт удаления лишних пробельных символов), что крайне важно для страницы. Несжатая нужна, если Вам необоходимо будет заглядывать в исходный код jQuery , хотя такие ситуации случаются крайне редко, поэтому сразу скачивайте сжатую версию jQuery .
После того как Вы скачали jQuery , его нужно скопировать в папку на сайте. Допустим, путь к jQuery будет следующим: "js/jquery.js ". Тогда подключается библиотека jQuery следующим образом:
И последний шаг - это проверка работоспособности библиотеки jQuery . Это нужно для того, чтобы не использовать то, что ещё даже не на 100% подключено, а потом думать, где ошибка в коде, хотя ошибка исключительно в подключении jQuery . Итак, для проверки jQuery можно использовать следующий код:
if (window.jQuery) alert("jQuery подключен");
else alert("jQuery не подключен");
Если появилось всплывающее окно с текстом "jQuery подключен ", значит, можете стирать этот код и приступать к написанию скриптов с использованием этой библиотеки. Иначе ищите ошибку в подключении.
20.05.2013 Ромчик
Доброго времени суток. Мы продолжаем изучать библиотеку JavaScript — jQuery. В прошлой статье мы познакомились с достоинствами данной библиотеки и ее недостатками. А сегодня мы уже начнем изучение jQuery и первым делом, что мы сделаем - это подключим данную библиотеку к нашему проекту. А рассмотрим мы два способа подключия jQuery и остановимся на их плюсах и минусах. Так, что приступим.
Первое, что мы сделаем подготовим наш проект. Сразу уточню я не буду подробно останавливаться на верстке, все внимание будет сосредоточено на jQuery.
Создадим виртуальный хост, например, jquery. В нем будет основной файл index.php, директория js — со скриптами JavaScript, директория img - директория с картинками и директория css - директория с файлами стилей CSS.
В index.php добавим следующий код:
Изучаем jQuery Header Content Sidebar Footer
В файл style.css, который находится в директории css, поместим следующий код:
Html, body{ padding:0; margin:0; height:100%; position:relative; } /* Header */ #header { background-color: red; height: 100px; width: 900px; margin: 0 auto; } /* Content */ #wrapper{ background:#CCC; min-height:100%; margin: 0 auto; width: 900px; } #content{ float: left; width: 700px; } #clear{ clear: both; height: 50px; } /* Footer */ #footer{ background:#36F; height:50px; margin: 0 auto; width: 900px; margin-top:-50px; position:relative; }
Код для этих файлов я пояснять не буду. Просто давайте проверим, что у нас получилось. Переходим, в моем случае я набираю в браузере jquery и попадаю на локальный сервер apache, на виртуальный хост jquery и вижу:
Отлично проект к подключению jQuery готов. Теперь мы можем приступить к непосредственному подключению jQuery. JQuery можно подключить двумя способами: первый скачать библиотеку jQuery и разместить ее в нашем проекте и второй способ подключить jQuery библиотеку через CDN. И дальше мы рассмотрим оба способа.
Первый способ - подключение локальной библиотеки jQueryДля подключения библиотеки этим способом необходимо скачать ее с официального сайта. Для этого переходим на официальный сайт :
И жмем «Download jQuery»
Переходим на следующую страницу, где выбираем версию jQuery библиотеки. На момент написания можно было скачать две версии: jQuery 1.9.1 (устраевшая, но поддерживающая браузеры IE6/7/8) и jQuery 2.0.0 (последняя версия, которая уже не поддерживает браузеры IE6/7/8)
Если Вы качаете библиотеку для production, т. е. для готового проекта, то выбирайте сжатую версию Download the compressed, production jQuery… Если же качаете библиотеку для development, т. е. для разрабатываемого проекта, то качайте не сжатую библиотеку Download the uncompressed, development jQuery… Почему? Для рабочего проетак лучше сжатая версия, т. к. весит меньше. А для development - просто иногда хочется заглянуть в код, любопытство:)
Я скачал не сжатую версию jQuery 1.9.1 и назвал файл с этой библиотекой jquery.js Теперь помещаем этот файл в папку js нашего проекта.
Открываем файл index.php и между тегами и помещаем следующий код:
Т.о. мы подключили библиотек jQuery к нашему проекту. Давайте проверим.
Для этого создадим в директории js еще один файл script.js и поместим в него следующий код:
$(function(){ alert("jQuery работает"); });
Данный код ничего особенного не делает, просто выводит сообщение «jQuery работает». Проверим, открываем через браузер нашу страницу и видим:
Как видим jQuery мы подключили и она работает.
Плюсы данного способа Вы не зависите от других сервисов. Минус - пользователь постоянно загружает библиотеку jQuery (а это влияет на загрузку самого сайта).
Второй способ - используем CDN для подключения jQueryЧто такое CDN? CDN (Content Delivery Network) - сеть доставки контента. И так, при использовании CDN само ядро jQuery уже храниться на стороне. Это может быть Google, Microsoft, Yandex или сам jQuery. Выбирать Вам. Я использую CDN от Google (самый стабильный, может конечно я не прав). Хотя следует отметить и CDN от Yandex они выкладывают и плагины за что им огромное спасибо.
Для того, чтобы подключить jQuery через CDN от Google. Откройте файл index.php и в тегах строку:
замените на:
Проверяем.
Если же Вы хотите использовать CDN от Yandex, то замените на:
Проверяем и видим аналогичный результат.
Преимущество данного метода заключается в скорости загрузки Вашего сайта, а это происходит из-за тог, что если пользователь заходил на какой-либо сайт, который использует тот же самый CDN и ту же самую библиотеку (имеется ввиду версию) jQuery, то она у него уже закэширована и не требует повторной загрузки.
Вот в принципе и все. Мы с Вами рассмотрели два способа подключения библиотеки jQuery к проекту. Какой из способ использовать выбирать Вам. А на этом пока все.
Первый вопрос, возникающей в начале работы с билиотекой jQuery - как подключить её к сайту? Есть два варианта: подключать с другого сайта или скачать её к себе на сервер.
Подключение JQuery к сайту1. Первый и самый простой - используете файл с другого сайта . Для этого достаточно одной строки перед закрывающим тегом head Вашей страницы:
В данном коде указано подключение билиотеки с Google API. У данного способа есть и преимущества, и недостатки. Плюсом будет то, что данный тип подключения используется на многих сайтах и, допустим, если пользователь уже заходил на подобный сайт, то она библиотека у него закэширована
и не требует новой загрузки. Минусом же является то, что Вы зависите от стороннего сервера - его возможные проблемы с загрузкой становятся Вашими.
2. Вы загружаете на сервер свой файл библиотеки
Последнюю версию jQuery можно скачать с главной страницы официальнго сайта: jquery.com .
Скачиваем файл. В корневой директории (папке) сервера создаём папку js (если её нет) и закачиваем файл туда. Допустим файл называется jquery-1.10.1.js . Пример подключения ниже:
Строка с подключением к файлу jQuery ложна быть первой в списке подключаемых js-файлов (если у Вас имеются другие подключения js).
Также хочу обратить внимание на то, что подключение к jQuery должно быть на Всех страницах, где он используется. Подключения на одной из страниц мало.
Как уже говорилось, многие популярные CMS сегодня уже поставляются с jQuery, и ВордПресс не исключение. Однако, если библиотеку не подключают плагины, то jQuery автоматически не подгрузится. Чтобы подключить данный фреймворк корректно, нужно использовать функцию wp_enqueue_script(). Поместите следующий код в файле header.php вашей темы (откройте через редактор):
Как подключить библиотеку jQuery в WordPress? В настоящее время почти все CMS используют встроенный jQuery. Его остаётся подключить специальной командой. Не всегда плагины подключают библиотеку автоматически, поэтому некоторые блоки и модули могут не работать. Для подключения следует использовать функцию wp_enqueue_script() .Ниже приведён код, который нужно прописать в файле header.php (открыть через редактор)
Wp_enqueue_script("jquery");
Данная функция должна быть размещена между тегами head ДО вызова функции wp_head(). Такой порядок сэкономит время загрузки старницы.
$document = JFactory::getDocument();
$document->addScript("http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"); // здесь неважно откуда подключение, можно и из сети.
/* или же так */
$document->addScript("http://mysite/js/.js");
В случае с шаблонной версией страницы нужно вставить код PHP
jQuery(document).ready(function($){ // ссылка на файл AJAX обработчик var ajaxurl = ""; var nonce = ""; var files; // переменная. будет содержать данные файлов // заполняем переменную данными, при изменении значения поля file $("input").on("change", function(){ files = this.files; }); // обработка и отправка AJAX запроса при клике на кнопку upload_files $(".upload_files").on("click", function(event){ event.stopPropagation(); // остановка всех текущих JS событий event.preventDefault(); // остановка дефолтного события для текущего элемента - клик для тега // ничего не делаем если files пустой if(typeof files == "undefined") return; // создадим данные файлов в подходящем для отправки формате var data = new FormData(); $.each(files, function(key, value){ data.append(key, value); }); // добавим переменную идентификатор запроса data.append("action", "ajax_fileload"); data.append("nonce", nonce); data.append("post_id", $("body").attr("class").match(/postid-(+)/)); var $reply = $(".ajax-reply"); // AJAX запрос $reply.text("Загружаю..."); $.ajax({ url: ajaxurl, type: "POST", data: data, cache: false, dataType: "json", // отключаем обработку передаваемых данных, пусть передаются как есть processData: false, // отключаем установку заголовка типа запроса. Так jQuery скажет серверу что это строковой запрос contentType: false, // функция успешного ответа сервера success: function(respond, status, jqXHR){ // ОК if(respond.success){ $.each(respond.data, function(key, val){ $reply.append(""); }); } // error else { $reply.text("ОШИБКА: " + respond.error); } }, // функция ошибки ответа сервера error: function(jqXHR, status, errorThrown){ $reply.text("ОШИБКА AJAX запроса: " + status); } }); }); })
