На переднем крае

Изучение широкого спектра возможностей для создания сценариев на стороне клиента, которые предоставляются jQuery, часть 1

Дино Эспозито (Dino Esposito)

Содержание

Объект jQuery
Селекторы
Фильтры
Фильтры форм
Операции над упакованными наборами
Возможность соединения jQuery в цепочки
Знай свой HTML

Читатели знают, как это бывает. Чем больше возможностей хочешь выжать из веб-браузера, тем больше приходится писать на JavaScript. Язык JavaScript, который был разработан около 1995 года для того, чтобы добавить динамики к страницам HTML, не создавался специально для разработчиков. Он был предназначен для управления событиями HTML, установки стилей и реагирования на ввод пользователя. Он также широко использовался для проверки введенных данных на стороне клиента и других простых операций.

Видя достаточно простые задачи, для которых был использован JavaScript, можно подумать, что писать на нем несложно. Но как указал Рэй Джажадината (Ray Djajadinata) в своей статье «Создание усовершенствованных веб-приложений с помощью объектно-ориентированных приемов» из выпуска журнала MSDN Magazine за май 2007, писать качественный код на JavaScript совсем не просто. Зато при хорошем понимании языка это позволяет добиться довольно широкой функциональности.

Один из недостатков JavaScript состоит в том, что это интерпретируемый (а не компилируемый) язык, в результате чего он, естественно, подвергается интерпретации браузером. Не все браузеры одинаково обрабатывают одинаковый код JavaScript. Но библиотеки, вроде jQuery, могут сделать использование кода JavaScript в различных браузерах более предсказуемым.

Теперь корпорация Майкрософт полностью поддерживает библиотеку jQuery и распространяет ее вместе с платформой MVC ASP.NET. Более того, были разработаны расширения для полной интеграции jQuery IntelliSense в Visual Studio 2008 с пакетом обновления 1.

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

Краткий обзор jQuery

С помощью jQuery написание кода на JavaScript становится проще и быстрее. Библиотека предоставляет вспомогательные функции, радикально повышающие производительность и облегчающие жизнь. В итоге написанный код проще читается и более надежен, поскольку более высокий уровень абстракции скрывает ряд проверок и процедур обработки ошибок.

Эта библиотека, написанная Джоном Ресигом (John Resig) состоит из единственного файла JS, который можно загрузить с docs.jquery.com/Downloading_jQuery. Последняя версия, 1.2.6, была выпущена весной 2008. Вышеупомянутый веб-сайт предлагает три версии библиотеки: несжатую, заархивированную и минимизированную.

Размер несжатой версии приближается к 100 КБ, она полностью удобочитаема и снабжена комментариями. Для внимательного рассмотрения и отладки определенно стоит взять эту версию.

Размер минимизированной версии — около 50 КБ. Из ее исходного кода были удалены все дополнительные символы, которые не являлись совершенно необходимыми для ее работы. Человеку читать этот код неудобно, хотя и возможно, но для компьютеров все работает нормально.

Наконец, заархивированная версия едва достигает размера в 30 КБ, но требует больше времени для инициализации на клиенте. Официальный веб-сайт jQuery рекомендует подумать насчет использования минимизированной версии, вместо заархивированной, для производственных сред. Помимо этого следует учесть, что сжатие данных «на лету» с помощью GZip является стандартной практикой и выполняется всеми современными веб-серверами и браузерами. Сжатие GZip уменьшает размер примерно до 20 КБ. В случае использования GZip заархивированная версия практически бесполезна.

В проекте ASP.NET также необходим файл jquery-1.2.6-vsdoc.js для включения IntelliSense и патч Visual Studio 2008 (обратитесь к статье Базы знаний «KB958502 JScript Editor support for “-vsdoc.js” IntelliSense documentation files» (поддержка файлов с расширением '-vsdoc.js' IntelliSense в редакторе сценариев JScript Editor)) для полноценной поддержки jQuery в IntelliSense.

Для ссылки на библиотеку в ASP.NET можно либо использовать тег <script>, либо занести ее в раздел сценариев элемента управления ScriptManager:

<asp:ScriptManager id="ScriptManager1" runat="server">
    <Scripts>
        <asp:ScriptReference path="Scripts/jquery-1.2.6.min.js" />
    </Scripts>
</asp:ScriptManager>

Отмечу, что этот подход не рекомендуется использовать в текущей версии ASP.NET, если нежелательно, чтобы в страницу также была внедрена библиотека Microsoft AJAX. В ASP.NET версии 4.0 появится возможность не включать файлы клиентской платформы Microsoft AJAX, что сделает этот подход вполне приемлемым.

Весь набор функций jQuery можно разделить на четыре основных области: запросы к модели DOM и работа с ней, визуальные эффекты и анимация, AJAX, а также основные функции для работы с массивами, фильтрации данных и обнаружении возможностей браузера.

Объект jQuery

Слово «query» (запрос) в названии библиотеки не нуждается в комментариях. Оно обозначает выполнение запросов к DOM-модели страницы, что и является источником широких возможностей jQuery.

Библиотека предоставляет богатый возможностями интерфейс для выбора элементов модели DOM, который далеко выходит за рамки простого поиска элементов, соответствующих заданному идентификатору. Например, можно легко выбрать все элементы, у которых один и тот же класс CSS или которые обладают определенными атрибутами. А также элементы, которые занимают некоторую позицию в дереве или связаны с другими элементами. Что более важно, можно добавлять условия фильтра и связывать все эти возможности запроса вместе, как при запросе данных на SQL.

Основой библиотеки jQuery является функция jQuery, определенная следующим образом:

var jQuery = window.jQuery = window.$ = function( selector, context ) 
{
   return new jQuery.fn.init( selector, context );
};

Функция $ является псевдонимом для функции jQuery. При создании объекта jQuery передаются селектор и контекст. Селектор указывает выражение запроса, а контекст указывает, на какой части модели DOM следует выполнить запрос. Если контекст не указан, функция jQuery ищет элементы модели DOM в пределах модели DOM всей страницы.

Функция jQuery (как и ее псевдоним $) выполняет определенную работу над предоставленными аргументами, выполняет запрос и возвращает новый объект jQuery, который содержит результаты. К этому вновь созданному объекту jQuery, в свою очередь, может быть исполнен запрос, или же он может быть отфильтрован в новом операторе или в их цепи.

Конструктор базового объекта jQuery поддерживает следующие сигнатуры:

jQuery( expression, [context] )
jQuery( html, [ownerDocument] )
jQuery( elements )
jQuery( callback )

Первая принимает селектор CSS и возвращает упакованный массив элементов HTML — так называемый упакованный набор. Вторая принимает строку HTML, создает из нее соответствующее поддерево и прикрепляет его к указанным документам-владельцам, если таковые есть. Третья перегрузка принимает указанный элемент или элементы модели DOM. Наконец, четвертая перезагрузка принимает функцию обратного вызова и применяет ее ко всему документу, как только документ страницы загружается полностью.

Кроме того, объект jQuery также содержит несколько вспомогательных методов, перечисленных на рис. 1. Разработчикам должен быть особенно интересен метод each, который можно использовать в качестве краткой формы записи для цикла перебора содержимого объекта jQuery – обычно элементы модели DOM выбираются посредством селектора CSS. В следующем фрагменте кода каждый из методов показан в действии. Цикл обрабатывает все теги <input> в форме:

$("form input").each(
    function(i) {
            this.title = "Input #" + i;    
}
);

Различие между each() и циклом, написанном на языке JavaScript, состоит в том, что each() автоматически сопоставляет объект this с элементом в обрабатываемой коллекции. Тем не менее, функции обратного вызова можно передать необязательный целочисленный параметр, который является (начинающимся от нуля) индексом итерации. Давайте познакомимся поближе с селекторами jQuery и их синтаксисом на основе CSS.

Вот простейшее использование функции $:

var elem = $("#grid");

Функция $ во фрагменте кода извлекает все элементы модели DOM, свойство идентификатора которых совпадает с указанным выражением. Символ # не принадлежит строке ID, а является префиксом функции $, с помощью которого различаются строки идентификаторов, классы CSS и имена тегов HTML. (Символ # – это часть стандартного синтаксиса CSS для выбора идентификатора.) Предшествующий фрагмент кода функционально эквивалентен следующему оператору модели DOM:

var elem = document.getElementById("grid");

Стоить отметить, что в модели DOM HTML, в отличие от ASP.NET, несколько элементов могут иметь одинаковый идентификатор. Если заданному идентификатору соответствует не один элемент, а массив элементов, то метод getElementById возвратит только первый соответствующий элемент; метод же getElementsByName возвратит всю коллекцию.

На этом и заканчивается сходство между классическими методами модели DOM и функцией $; возможности $ простираются куда дальше. С помощью $ можно выбрать элементы модели DOM и применить функцию к каждому из них.

Выражение селектора управляется синтаксисом CSS 3.0 и может быть достаточно сложным. На рис. 2 показаны поддерживаемые селекторы. Список не содержит фильтров, о которых я поговорю чуть ниже. Очень важно отметить, что в иерархии селекторов «предок», «родитель» или предыдущий элемент может быть любым допустимым селектором, а не только элементом HTML. На рис. 3 показано несколько примеров запросов.

Селекторы можно дополнительно уточнять, применяя фильтры по атрибутам, содержимому, положению и видимости. На рис. 4 перечислены некоторые из наиболее популярных фильтров в jQuery. Полную справочную информацию о них можно найти по адресу docs.jquery.com/Selectors.

Такие фильтры, как first и last, выделяют элементы модели DOM, находящиеся на определенной позиции в возвращаемой коллекции. Для фильтрации элементов на основе их индексов можно использовать фильтры eq, gt и lt. Фильтр eq выбирает элемент, индекс которого совпадает с заданным индексом, тогда как gt и lt выбирают элементы с индексами, большими или меньшими, чем заданный.

Фильтры атрибутов являются мощными средствами, выбирающими такие элементы HTML, в которых заданный атрибут находится в заданной связи со значением. На рис. 4 я перечислил лишь наиболее часто используемые фильтры атрибутов. Существуют и другие фильтры для выбора элементов. Они, например, могут выбирать элементы, у которых заданный атрибут начинается с определенной строки, заканчивается определенной строкой или где значение атрибута содержит в себе определенную строку. Вот необходимый синтаксис:

[attribute^=value]  // begins with value
[attribute$=value]  // ends with value
[attribute*=value]  // contains value

Фильтры атрибутов можно сцеплять, размещая два или более фильтра рядом друг с другом, вот так:

[align=right][valign=top]

Особенно большими возможностями обладает фильтр nth-child. Как показано здесь, он поддерживает различные выражения:

:nth-child(index)
:nth-child(even)
:nth-child(odd)
:nth-child(sequence) 

Первый вариант выбирает n-й дочерний элемент элементов HTML в исходном селекторе, где n обозначает заданный индекс. Все элементы, помещенные на любую из нечетных или четных позиций (начиная от нуля), возвращаются при указании фильтров odd или even. Наконец nth-child можно передать как корневое выражение математической последовательности, такой как 3n, чтобы указать дочерние элементы, кратные 3.

Например, следующий селектор выбирает все строки в таблице (помеченной как DataGrid1), находящиеся в положениях, определенных последовательностью 3n+1, (то есть 1, 4, 7 и так далее, учитывая, что индекс начинается от нуля):

#DataGrid1 tr:nth-child(3n+1)

Следующее выражение намного сложнее и демонстрирует невероятную мощь и гибкость селекторов jQuery:

#DataGrid1 tr:nth-child(3n+1):has(td[align=right]) td:odd

Оно читается следующим образом: из всех строк таблицы, выбранных на предыдущем этапе (1-я, 4-я, 7-я и так далее), теперь выбираются только те, в которых есть ячейка (тег <td>), где атрибут align равен значению right. Более того, из оставшихся строк выбираются только ячейки в столбцах с нечетным индексом. Рассмотрим таблицу HTML, показанную на рис. 5. На рис. 6 результатом запроса является ячейка с желтым фоном.

Рис. 5. Таблица HTML

<table id="DataGrid1" border="1">
    <tr>
       <td>Column1</td>
       <td>Column2</td></tr>
    <tr>
       <td>Val1</td>
       <td align="right">Num1</td></tr>
    <tr>
       <td>Val2</td>
       <td align="right">Num2</td></tr>
    <tr>
       <td>Val3</td>
       <td align="right">Num3</td></tr>
    <tr>
       <td>Val4</td>
       <td>Num4</td></tr>
    <tr>
       <td>Val5</td>
       <td>Num5</td></tr>
    <tr>
       <td>Val6</td>
       <td>Num6</td></tr>
    <tr>
       <td>Val7</td>
       <td>Num7</td></tr>
</table>

Рис. 6. Выбор определенной клетки в таблице

Фильтры форм

Как уже упоминалось, общий синтаксис селекторов jQuery близок к синтаксису селекторов CSS 3.0, расширенному некоторыми дополнительными псевдоэлементами, такими как перечисленные на рис. 7.

Фильтр :input, в частности, относится ко всем элементам логического ввода, которые можно найти на странице, и не ограничен тегами <input>. Он даже включает в себя элементы <textarea> и <select>, используемые для отображения списков и раскрывающихся списков. Селекторы на рис. 7 не совпадают с селекторами CSS, но предоставляют короткие выражения для выбора гомогенных элементов, например всех тегов ввода заданного типа. Например, селектор «:text» функционально эквивалентен следующему:

form input[type=text]

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

Операции над упакованными наборами

Элементы HTML, совпадающие с селектором, возвращаются упакованными в новом экземпляре объекта jQuery. Этот объект включает в себя массив JavaScript со всеми ссылками модели DOM. В таком виде результаты часто называются упакованным набором. Упакованный набор никогда не бывает null, даже при отсутствии соответствующих элементов. Эта ситуация проверяется путем проверки свойства длины объекта jQuery, как показано здесь:

// All TDs with a child IMG
var w_set = new jQuery("#DataGrid1 td:has(img))");
if (w_set.length == 0)
    alert("No match found.");
else
    alert(w_set.length)

Высокий уровень гибкости, демонстрируемый jQuery, очень полезен, но после получения всех нужных элементов их необходимо обработать. Простейший возможный подход включает организацию цикла и применение некоторой функции к каждому из элементов коллекции, как показано здесь:

var ws = $("#DataGrid1 tr:nth-child(3n+1)");
for(i = 0; i<ws.length; i++)
{
   processElement(ws[i]);
}
function processElement(elem)
{
   ...
}

При таком переборе вручную производится прямой доступ к элементам модели DOM, точно так же, как в классическом программировании на JavaScript.

Библиотека jQuery предлагает ряд альтернативных путей, которые функционально эквивалентны перебору вручную. Более того, способы перебора jQuery создают более компактный и даже более удобный для чтения код. Первый подход основан на функции each.

Как уже упоминалось, в jQuery функция each исполняет определенный пользователем обратный вызов над любым из элементов, входящих в упакованный набор. Существует, однако, довольно большое число операционных методов, которые делают исполнение обычных операций на упакованном наборе еще быстрее и проще. Например, можно использовать функцию css для применения стилей CSS к упакованному набору. Ниже приведен пример, который устанавливает цвет фона и стиль границы для всех элементов ввода в форме:

$("form input").css(
   {'background-color' : 'yellow', 
    'border-style' : 'dashed'}
); 

Следует признать, что этот короткий пример отчасти вводит в заблуждение, поскольку из него можно заключить, будто jQuery стоит использовать для выполнения тех же действий, что хорошо выполняет и CSS. Функция css хороши при работе с динамически применяемыми стилями, которые зависят от действий пользователя или каких-то еще условий времени выполнения.

Точно так же на элементах упакованного набора можно добавлять, удалять и даже переключать класс CSS. Эти действия можно выполнить с помощью функций addClass, removeClass и toggleClass. Функция attr позволяет установить один или несколько атрибутов на всех элементах. Например, вот как можно отключить все элементы ввода:

$("form input").attr(
   {'disabled' : 'disabled'}
); 

Функция html устанавливает содержимое HTML для тега. Внутри она использует свойство innerHTML. Для установки внутреннего текста тега используется функция text, которой передается текст в качестве аргумента. Это хорошая иллюстрация преимуществ библиотеки, которая хорошо работаюет в разных браузерах, например jQuery. Свойство innerHTML фактически можно считать стандартным свойством, которое все браузеры поддерживают одинаково.

Этого нельзя сказать про похожее свойство, которое только устанавливает текст. Это свойство innerText в Internet Explorer и textElement в Firefox. Текстовая функция jQuery скрывает эти различия и предоставляет одинаковую функциональность во всех браузерах.

Возможность соединения jQuery в цепочки

Одной из полезнейших возможностей jQuery является возможность образования цепочек, поскольку сам объект jQuery, как и большинство функций и фильтров, возвращают объект jQuery. Возвращенный объект содержит первоначальный упакованный набор вместе с изменениями, внесенными функцией. Например, если применить к упакованному набору функцию css, то возвращенный объект jQuery будет содержать тот же набор элементов вместе с измененным набором стилей CSS. Если применить фильтр, то будет возвращен меньший набор, состоящий из элементов, прошедших фильтрацию. Стоит отметить, что доступна также функция not для исключения всех элементов, соответствующих указанному запросу.

Что может быть проще сцепления jQuery! Достаточно лишь присоединить новый вызов функции к объекту jQuery, возвращенному предыдущим вызовом. Приведу пример:

$("form input")
.not("[type!=text]")
.css(
   {'background-color' : 'yellow', 
    'border-style' : 'dashed'})
.attr("value", "test"); 

В этом примере сначала выбираются все поля ввода с атрибутом типа, равным «text», затем устанавливаются несколько стилей CSS и также атрибут value для фиксированных значений. (Отметьте, что в этом примере я использовал функцию not просто для добавления третьего звена к цепочке. Результат условия not может быть интегрирован в запрос $, создавая еще более четкий код).

Не стоит и говорить, что объединение в цепочки дает более компактный код; но этот код не обязательно более быстрый. Использование цепочек– это такой способ программирования, с которым разработчик может работать комфортно, а может и нет. Тем разработчикам, у кого возникают сложности с пониманием этих компактных выражений, может быть удобнее разбить их на части, чтобы упростить отладку.

Наконец, обратите внимание на то, что не все методы jQuery возвращают измененный объект jQuery. Методы, подобные методам html или text, возвращают строку, которая указывает, соответственно, на HTML или текстовое содержимое первого элемента исходного упакованного набора. Точный синтаксис методов jQuery можно увидеть на docs.jquery.com/Main_Page.

Знай свой HTML

Чем глубже исследуешь jQuery, тем больше понимаешь, как важно хорошо знать HTML, с которым работаешь. Элементы управления сервера ASP.NET обычно скрывают структуру выдаваемого ими HTML. С другой стороны, элементы управления сервера появились, чтобы позволить разработчикам сосредотачиваться на декларативных атрибутах, а не на деталях HTML. Многолетний опыт показал, что этот подход не всегда верен.

В наше время необходимо полностью контролировать HTML, чтобы добиваться специальных возможностей, дизайна и соответствия XHTML. Этот факт устанавливает не вполне очевидную связь между jQuery и платформой MVC ASP.NET. И это не случайно, что в пакет платформы MVC ASP.NET входит последняя версия jQuery.

С другой стороны стоит отметить, что привязка логики к разметке с помощью селекторов jQuery может создать нежелательную сцепку между логикой и формой модели DOM, что потенциально ведет к сложностям в обслуживании приложения.

Наконец, тем читателям, которые заинтересованы в дополнительных идеях по интересным способам использования JavaScript, стоит заглянуть в список статей о JavaScript на MSDN.

Свои вопросы и комментарии для Дино отправляйте на cutting@microsoft.com.

Дино Эспозито (Dino Esposito) работает архитектором программного обеспечения в компании IDesign и является одним из соавторов книги Microsoft .NET: Создание архитектуры приложений для предприятия (издательство «Microsoft Press», 2008). Проживая в Италии, Дино часто выступает на различных профессиональных мероприятиях по всему миру. Связаться с ним можно в блоге по адресу weblogs.asp.net/despos.