11 : Введение в JQUERY. Базовые концепты План:
Введение в jQuery. Синтаксис jQuery.
Способы использования jQuery.
Селекторы jQuery.
События jQuery.
jQuery пользовательский интерфейс.
Для начала давайте разберемся, что такое jQuery?
Таким образом, jQuery — это библиотека JavaScript с кроссбраузерной поддержкой (работает в Internet Explorer 6.0+, Mozilla Firefox 2+, Safari 3.0+, Opera 9.0+ и Chrome).
Автор библиотеки Джон Резиг впервые представил свою работу на компьютерной конференции в Нью-Йорке в январе 2006 года, а первая стабильная версия библиотеки была выпущена в августе того же года.
За прошедшие годы библиотека претерпела множество изменений и сегодня включает в себя функции, полезные для самого широкого круга задач. Он имеет небольшой размер (например, минифицированная версия — 55,9 Кбайт, а сжатая — 19 Кбайт) и не мешает глобальному пространству имен небольшими идентификаторами.
Отличные возможности механизма селектора, позволяющего легко получить доступ к любому элементу объектной модели документа, сделали jQuery очень популярным.
Судите сами. Метод getElementByld() используется для получения информации об элементе DOM с помощью Javascript. Например, измените HTML-код элемента с идентификатором divl.
Document.getElementByld("divl"). InnerHTML = «Новый текст»;
Код JQuery, который делает то же самое, будет стоить вдвое дешевле.
$("#дивл"). html («Новый текст»);
Конечно, связывать всю библиотеку только для этого направления не имеет смысла. Но все дело в том, что функции селекционеров не ограничиваются одним идентификатором. Возможности селекторов можно сравнить только с регулярными выражениями в Perl. В качестве примера изменим цвет текста всех элементов A, параметр href содержит ссылку на HTML-документ, а элемент A должен находиться внутри элемента DIV с классом стиля clsl.
$("div.clsl a"). css("цвет", "красный");
Выполните аналогичную операцию, используя JavaScript. Для этого потребуется несколько кодов.
Еще одной уникальной особенностью библиотеки jQuery является возможность связывать вызовы методов, поскольку большинство методов jQuery возвращают объект, которым затем можно манипулировать.
$(#message) // Есть ссылка на элемент с id = message
.html("Message") // Изменен текст внутри element.parent() // Есть ссылка на родительский элемент. ess ("background-color", "# fff4dd") // Устанавливаем цвет backgroundwidth(300) // Width.height(200) // Высота
// Изменяем прозрачность и плавно отображаем элемент
.fadeln(3000);
Библиотека jQuery не обошла вниманием технологию AJAX, позволяющую обмениваться информацией с сервером без перезагрузки веб-страницы. В главе 10 мы рассмотрим основные свойства и методы объекта XMLHttpRequest, а в главе 11 — интерфейс доступа AJAX, предоставляемый библиотекой jQuery.
Благодаря своей универсальности библиотека jQuery будет полезна практически любому разработчику. Подходит новичку, так как позволяет забыть о проблеме с кроссбраузерностью в браузере (вышел новый веб-браузер, поменял версию библиотеки и все снова работает). Библиотека отлично подойдет профессионалам, поскольку позволяет сократить код минимум в три раза. А это, в свою очередь, позволяет писать очень сложный код с минимальными потерями сил и времени.
Желаю вам приятного чтения и надеюсь, что эта книга станет надежным спутником в вашей повседневной деятельности и изменит ваш подход к программированию на JavaScript.
Основы jQuery
Все файлы, обсуждаемые в этой книге, хранятся в кодировке UTF-8. Поэтому, прежде чем изучать возможности библиотеки jQuery, рассмотрим, чем UTF-8 отличается от других кодировок и как правильно сохранить файл в этой кодировке.
Все символы, которые вы видите на экране монитора внутри компьютера, сохраняются в виде цифр. Каждому символу соответствует определенное число (код символа). Таблицы соответствий, называемые кодировками, предназначены для ответа на вопрос, как должен выглядеть символ, представленный определенным кодом. Кодировка может быть однобайтовой или многобайтовой.
При бит-байтовом кодировании символ кодируется одним байтом. Первые 7 бит позволяют закодировать 128 символов, соответствующих кодировке ASCII. Этими символами являются цифры, буквы латинского алфавита, знаки препинания и некоторые вспомогательные символы (например, переносы строк, метки и т. д.). Коды этих символов в однобайтовых кодировках практически идентичны. Восьмой бит предназначен для кодирования букв национальных алфавитов. Таким образом, однобайтовая кодировка позволяет закодировать в общей сложности 256 символов. Для кодировки русских букв разработаны пять кодировок — windows-1251 (cp1251), cp866, iso8859-5, koi8-r и mac-cyrillic. Сложность в том, что код одной и той же русской буквы в этих кодировках может быть разным. Это вызывает много проблем.
В кодировке UTF-8 один символ может быть закодирован несколькими байтами. Первые 128 символов закодированы в ASCII и закодированы только одним байтом. Остальные символы кодируются переменным количеством байтов — от двух до шести (на практике до четырех).
Буквы русского алфавита и некоторых других европейских языков кодируются двумя байтами. Другими словами, кодировка UTF-8 позволяет кодировать символы всех существующих алфавитов и способна заменить все кодировки сразу. Сайт может быть на русском или другом языке, кодировка будет одинаковая. Мы используем эту кодировку.
При сохранении файлов в кодировке UTF-8 следует помнить, что использовать для этого Блокнот нельзя, так как при сохранении в начале файла ставятся знаки обслуживания, называемые BOM (Byte Order Mark), сокращенно BOM. Для кодировки UTF-8 эти символы не являются обязательными и не позволят нам в дальнейшем устанавливать, например, заголовки ответов сервера. Для работы с кодировкой UTF-8 на вашем компьютере должен быть установлен Notepad++.
Вы можете скачать программу абсолютно бесплатно с веб-страницы http://notepad-plus. sourceforge.net/ru/site.htm. Из обоих вариантов (ZIP-архив и установщик) рекомендую выбрать именно установщик, так как в этом случае при установке вы сможете выбрать язык интерфейса программы. Процедура установки Notepad++ очень проста и не нуждается в комментариях. При создании нового документа установите флажок «Код UTF-8 (без PTO)» в меню «Кодировки».
Использование нами кодировки UTF-8 не означает, что библиотека jQuery работает только с этой кодировкой. В своих проектах вы можете использовать любую другую кодировку. Но имейте в виду, что запросы AJAX по умолчанию выполняются в кодировке UTF-8. Если вы используете другие методы кодирования, вам придется перекодировать.
Подключение к библиотеке jQuery
Прежде чем использовать библиотеку jQuery, вам необходимо загрузить ее с http://jquery.com/, развернуть на своем сервере, а затем связать с вашим HTML-документом. Связывание осуществляется с помощью тега скрипта с абсолютным или относительным путем к библиотеке, указанным в параметре src.
Сам тег сценария должен быть помещен в раздел HEAD HTML-документа.
Библиотеку jQuery можно загрузить по адресу http://ajax.googleapis.com/. В данном случае подключение происходит следующим образом.
Если вы ранее посещали другой сайт, на который была загружена библиотека jQuery с http://ajax.googleapis.com/, веб-браузер не будет перезагружать библиотеку и использовать кэшированную информацию. Таким образом, скорость вашего сайта может увеличиться. Преимущество этого метода. Однако если http://ajax.googleapis.sot/ не существует, могут возникнуть проблемы.
Определение готовности документов
Обычно большинство действий выполняется в элементах HTML-документа. Поэтому запускать скрипты следует только после полной загрузки документа. При отсутствии библиотеки jQuery для этой цели обычно используется событие загрузки объекта окна.
windows.onload = function() (
предупреждение («Документ полностью загружен»); }
Однако это событие происходит только после полной загрузки самого HTML-документа и всех других элементов, таких как изображения. Загрузка изображений (или баннеров с других доменов) может занять некоторое время, в течение которого работа скриптов будет приостановлена.
Библиотека jQuery избавляет нас от пустой траты времени и позволяет выполнять скрипты сразу после создания структуры документа, не дожидаясь загрузки других элементов. Вы можете обработать это событие, используя метод Ready().
jQuery (документ). уже (функция () (
});
Функция JQuery() имеет псевдоним $(). Используя этот псевдоним, вы можете обработать событие следующим образом.
alert("Документ доступен для выполнения скриптов"); });
Если в качестве параметров функции jQuery() указать ссылку на функцию, она будет выполнена сразу после создания структуры документа.
jQuery( function() (
alert( "Документ доступен для выполнения скриптов"); });
Этот код все еще можно сократить.
$( function() (
alert( "Документ доступен для выполнения скриптов" ); });
Также следует отметить, что программа может иметь несколько вызовов методов Ready(). В этом случае методы выполняются в порядке, указанном в программе.
Как работать с HTML в jQuery
Давайте рассмотрим основные методы работы с HTML и методы для этих элементов. Итак, основные методы:
html(val) — добавляет элемент html-кода.
Пример:
$("div.sp").html("Привет");
Текст Добавляет слово «Hello» в раздел div-sp all с помощью span.
text()/val() -element/value добавляет текстовое содержимое элемента.
Пример:
$("p").text();
Этот абзац добавляет текстовый элемент абзаца.
text(val) / val(val) — товар/значение, позволяющее указать коррекцию текста для элемента.
Пример:
$ ("P") Текст ("Привет!");
Эти инструкции добавляют в абзац слово «Привет».
HTML-код:
html в jQuery
Текст первый абзац!
Функция следующая
функция addHtml(){
var tp1=$("#p1").text();$("#p2").text(tp1);}
Первая переменная tP1 предназначена для записи текстового содержимого в первый абзац (первая строка), а затем вывода данных во второй абзац (вторая строка).
Теперь познакомимся с методами манипуляции, в которых размещается элемент.
append(content) — добавляет слово во все выбранные объекты после существующего содержимого.
Пример:
$ ("P") присоединить (" Привет ");
В этих инструкциях к вложению в конце добавляется жирный текст «Привет».
AppendTo(content)-action добавляет все выбранные объекты содержимого.
Пример:
$("p").appendTo("#main");
В этом руководстве идентификатор добавляется в конец «основного» элемента.
Другими словами:
$(A).append(B) — добавление из B в A
$(A).appendTo(B) — добавление из A в B
prepend(content) — добавляет слово во всех выбранных объектах к существующему содержимому.
Пример:
$("p").prepend("Привет");
Эти инструкции включают слово «Здравствуйте» в начале текста, выделенного жирным шрифтом в начале абзаца.
prependTo(content) — добавляет обратную функцию ко всем выбранным объектам контента.
Пример:
$("p").prependTo("#main");
Это руководство появится в верхней части страницы с элементом id «main».
$(A).prepend(B) — добавляет из B в A.
$(A).prependTo(B) — добавляет от A к B.
как и в случае after(content)-append , добавляет выбранные элементы после конца элемента (обратите внимание на весь раздел содержимого последовательно после).
Пример:
$("p").after("Привет");
В данной инструкции слово «Здравствуйте» выделяется жирным шрифтом до конца текста абзаца (повторяется слово «Здравствуйте» с начала абзаца).
before(content) — добавляет все выбранные элементы в раздел контента.
Пример:
$("p").before("Привет");
Эти инструкции вводятся жирным шрифтом перед текстом «Здравствуйте» в абзаце.
InsertAfter(content) — вставляет все выбранные объекты после content-a.
Пример:
$("p").insertAfter("#main");
Это руководство будет выводить от начала буквы до конца элемента с идентификатором «main».
Другими словами:
$(A).after(B) добавляется из -B и заканчивается на A.
$(A).insertAfter(B) — добавляется из A и заканчивается в B.
InsertBefore(content) — добавляет все выбранные объекты перед порядком добавления содержимого.
Пример:
$("p").insertBefore("#main")
В этом руководстве выводится первая буква с префиксом элемента id «main».
Другими словами:
$(A).before(B) добавляется из -B и заканчивается на A.
$(A).insertBefore(B) — добавляется из A и заканчивается в B.
Давайте посмотрим на пример. Если внутри красного прямоугольника появились желтые квадраты, нажмите кнопку «Добавить», (- квадратик повторяется в один клик) создадим его.
HTML-код:
jQuery html
