Html скрипты для работы с библиотекой jquery. Что такое jQuery

Перед тем, как приступить к изучению библиотеки 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?». Не зависимо какой движок используете на сайте, способ подключения всегда одинаковый. В шаблон помещаем нужную строчку - и все у вас будет работать.

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 - как подключить её к сайту? Есть два варианта: подключать с другого сайта или скачать её к себе на сервер.

Подключение 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(). Такой порядок сэкономит время загрузки старницы.

Как подключить библиотеку jQuery в Joomla? Код, который надо вставить в обработчик

$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