Создание динамического наполнения страницы. JavaScript-библиотеки и технология Comet
13.3.2. Объектно-ориентированное программирование
Prototype также добавляет поддержку более традиционного объектно-ориентированного программирования.
Для создания нового класса используется метод Class.create(). Классу присваивается прототип prototype, который выступает в качестве основы для каждого экземпляра класса. Старые классы могут быть расширены новыми с помощью Object.extend:
// создания нового класса в стиле prototype 1.6
var FirstClass = Class.create({
// Инициализация конструктора
initialize: function() {
this.data = "Hello World";
}
});
// создания нового класса в стиле prototype 1.5
var DataWriter = Class.create();
DataWriter.prototype = {
printData: function() {
document.write(this.data);
}
};
Object.extend(DataWriter, FirstClass);13.4. Библиотека jQuery
jQuery – библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML [9, 10]. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими. Также библиотека jQuery предоставляет удобный API по работе с Ajax.
Возможности:
- переход по дереву DOM, включая поддержку XPath как плагина;
- события;
- визуальные эффекты;
- AJAX -дополнения;
- JavaScript -плагины.
13.4.1. Философия
Точно так же, как CSS отделяет визуализацию от структуры HTML, JQuery отделяет поведение от структуры HTML. Например, вместо прямого указания на обработчик события нажатия кнопки, управление передается JQuery, идентифицирующей кнопки и затем преобразовывающий его в обработчик события клика. Такое разделение поведения и структуры также называется принципом ненавязчивого JavaScript.
Библиотека jQuery содержит функционал, полезный для максимально широкого круга задач. Тем не менее, разработчиками библиотеки не ставилась задача совмещения в jQuery функций, которые подошли бы всюду, поскольку это привело бы к большому коду, большая часть которого не востребована. Поэтому была реализована архитектура компактного универсального ядра библиотеки и плагинов. Это позволяет собрать для ресурса именно тот JavaScript -функционал, который на нем был бы востребован.
13.4.2. Использование
jQuery, как правило, включается в веб-страницу как один внешний JavaScript -файл:
<head>
<script type="text/javascript" src="путь/к/jQuery.js"></script>
</head>Вся работа с jQuery ведется с помощью функции $. Если на сайте применяются другие JavaScript библиотеки, где $ может использоваться для своих нужд, то можно использовать ее синоним – jQuery. Второй способ считается более правильным, а чтобы код не получался слишком громоздким можно писать его следующим образом:
jQuery(function($) {
// Тут код скрипта, где в $ будет jQuery
})Работу с jQuery можно разделить на 2 типа:
- Получение jQuery -объекта с помощью функции $(). Например, передав в нее CSS-селектор, можно получить jQuery -объект всех элементов HTML попадающих под критерий и далее работать с ними с помощью различных методов jQuery -объекта.
- Вызов глобальных методов у объекта $, например, удобных итераторов по массиву.
Типичный пример манипуляции сразу несколькими узлами DOM заключается в вызове $ функции со строкой селектора CSS, что возвращает объект jQuery, содержащий некоторое количество элементов HTML-страницы. Эти элементы затем обрабатываются методами jQuery. Например:
$("div.test").add("p.quote").addClass("blue").slideDown("slow");находит все элементы <div> с классом test, а также все элементы <p> с классом quote, и затем добавляет им всем класс blue и визуально плавно спускает вниз.
Методы, начинающиеся с $., удобно применять для обработки глобальных объектов. Например:
$.each([1, 2, 3], function() {
document.write(this + 1);
});добавит на страницу 234.
Оператор $.ajax и соответствующие функции позволяют использовать методы AJAX. Например:
$.ajax({
type: "POST",
url: "some.html",
data: { name: 'John', location: 'Boston' },
success: function(msg) {
alert("Data Saved: " + msg);
}
});В этом примере идет обращение к скрипту some. HTML с параметрами name=John&location=Boston и полученный результат выдается в сообщении посредством alert().
Пример добавления к элементу обработчика события click с помощью jQuery:
jQuery(function($) {
$("a").click(function() {
alert("Привет, Мир!");
});
});В данном случае при нажатии на элемент <A> происходит вызов alert("Привет, Мир!").
Рассмотрим пример, в котором необходимо раскрасить таблицу в следующем стиле [11, 12]:
| Один | Два | Три | Четыре |
|---|---|---|---|
| Один | Два | Три | Четыре |
| Один | Два | Три | Четыре |
| Один | Два | Три | Четыре |
| Один | Два | Три | Четыре |
| Один | Два | Три | Четыре |
| Один | Два | Три | Четыре |
Предполагается, что есть CSS-файл, в котором определен класс "odd". Все, что нужно сделать, – это наделить нечетные строки в таблице этиv классом.
Для начала – решение на чистом JavaScript:
var tables = document.getElementsByTagName("table");
for (var t = 0; t < tables.length; t++) {
var rows = tables[t].getElementsByTagName("tr");
for (var i = 1; i < rows.length; i += 2)
if (!/(^|s)odd(s|$)/.test(rows[i].className))
rows[i].className += " odd";
}Теперь – решение, использующее одну из самых популярных на сегодняшний день библиотек, Prototype:
$$("table").each(function(table) {
Selector.findChildElements(table, ["tr"])
.findAll(function(row, i) { return i % 2 == 1; })
.invoke("addClassName", "odd");
});$("tr:nth-child(odd)").addClass("odd");Как видно из этого примера, библиотека jQuery позволяет находить простые и изящные решения для, казалось бы, сложных задач.
13.4.3. Функция $()
Ключом к пониманию работы jQuery является функция $(). Эта функция, так или иначе, вызывается всеми методами jQuery.
Определение функции $ можно увидеть в следующем примере:
$(html) $(elems) $(fn) $(expr, context)
Вне зависимости от параметров, переданных в функцию, знак доллара вернет список объектов, над которым уже определены все доступные jQuery -функции. Это позволяет работать с любыми объектами – уже существующими на странице, созданными динамически или полученными через AJAX – так, как будто это одни и те же элементы, уже существующие на странице.
Рассмотрим каждый объект подробнее.
13.4.3.1. $(html)
Позволяет создать html-элементы "на лету" из "чистого" HTML. Например, можно создать элемент div, содержащий параграф с текстом "Привет!" и добавить его к элементу с id="body" таким образом:
var my_div = $("<div><p>Привет, Мир!</p></div>");
my_div.appendTo("#body");Или еще короче:
$("<div><p>Привет, мир!</p></div>").appendTo("#body");Элемент до отработки скрипта:
<div id="body"></div>
Элемент после отработки скрипта:
<div id="body"><div><p>Привет, Мир!</p></div></div>
13.4.3.2. $(elems)
Позволяет "прицепить" всю функциональность jQuery к уже существующим элементам страницы (а именно, к элементам из объектной модели документа, из DOM). Примеры:
$(document.body).css("background-color", "black");
$(myForm.elements).hide();13.4.3.3. $(expr[, context])
Это наиболее часто используемая форма функции $. Первый, обязательный, параметр – это выражение, которое позволит jQuery найти элемент на странице. Второй, необязательный, параметр указывает, где искать этот элемент (по умолчанию jQuery будет искать по всей странице).
Пример поиска всех элементов p, находящихся внутри всех элементов div на странице:
$("div > p");В документе:
<p>один</p> <div><p>два</p></div> <p>три</p>
Результат:
[ <p>два</p> ]
Пример поиска всех радиокнопок в первой форме на странице:
$("input:radio", document.forms[0]);Пример поиска всех элементов div в XML, что прислан с сервера с помощью технологии AJAX:
$("div", xml.responseXML);Рассмотрим, принцип работы. Дело в том, что в jQuery реализован механизм поиска элементов, использующий CSS и Xpath. То есть, для нахождения требуемого элемента можно воспользоваться как механизмом селекторов CSS, так и запросами по документу в стиле Xpath. CSS в версиях 1-3 предлагает разработчику богатые возможности оформления страниц (как минимум, теоретически). Например, чтобы пометить элементы div в параграфах с классом "highlight" красным цветом, разработчик может составить такую конструкцию:
p.highlight > div
{
color: #F00;
}Если обратиться к рассмотренному ранее примеру с раскраской таблицы, то согласно CSS 3 раскрасить таблицу можно следующим образом:
table tr:nth-child(odd)
{
background-color: magenta;
}С помощью jQuery таблица была раскрашена следующим образом:
$("tr:nth-child(odd)").addClass("odd");Практически все селекторы из CSS 1-3 можно использовать для нахождения элементов на странице.
Рассмотрим примеры.
Поиск элемента с id="unique":
$("#unique"); // аналог из CSS: #unique {...}Поиск всех элементов A, имеющие класс "external" (то есть все <a class="external"> ):
$("a.external"); // аналог из CSS: a.external {...}Поиск всех нечетных элементов div, находящиеся внутри элементов div с классом news-item, который находится внутри элемента div с id="outer"
$("#outer > div.news-item > p:nth-child(odd)");Как видно, фантазия разработчика ограничена только возможностями CSS. Когда же возможностей CSS не хватает, на помощь приходит XPath.
XPath (XML Path Language) является языком для обращения к частям XML-документа, а соответственно с помощью него можно обращаться к частям HTML-документа. Из этого следует, что тоже можно сделать и с помощью jQuery, так как эта библиотека поддерживает довольно большое подмножество XPath, объединяя его с некоторыми селекторами CSS для создания гибкого механизма поиска элементов на странице.
Поиск всех элементов P, которые содержат ссылку:
$("p[a]");Поиск всех элементов A, которые содержат атрибут rel, равный "nofollow":
$("//a[@rel='nofollow']");Поиск всех видимых элементов LI внутри элемента UL:
$("ul/li:visible"); // XPath + селектор
$("ul > li:visible"); // CSS + селекторКак видно, если известно, какой элемент необходимо выбрать, jQuery позволит это сделать.