Очередная глава из книги «jQuery in Action» (авторы Bear Bibeault и Yehuda Katz). Прежде всего извиняюсь перед читателями за столь большой промежуток между публикациями глав. Но все-таки я это сделал, чему, конечно же, рад. Надеюсь, что и вы тоже не останетесь равнодушными. Итак, продалжаем.

Глава 3. Оживляем страницу с jQuery.

3.1. Манипулирование свойствами и атрибутами объектов.

3.1.1. Манипулирование со свойствами объектов.

Самый простой способ проверить или изменить элементы выбранного нами набора позволяет нам команда each():

$(‘img’).each(function(n){
this.alt=’Это image[’+n+’] с id равным ‘+this.id;
});

Это выражение применит указанную функцию к каждому элементу <img> на странице, при этом будет изменен атрибут alt используя порядковый номер элемента и его id.

3.1.2, 3.1.3 Получение и изменение значения атрибутов.

Как мы убедимся позже, многие методы в jQuery используются как для чтения, так и для записи, в зависимости от атрибутов и их количества, передаваемых методу.

Так, метод attr() может использоваться как для получения значения атрибутов, так и для их установки. Если методу будет передано только название атрибута, он вернет его значение, например:

$(“#myImage”).attr(“alt”)

так мы получим alt для элемента с id #myImage.

А так:

$(“#myImage”).attr(“alt”,”Му picture”)

как вы уже наверное догадались, установим этому же элементу alt “My picture”.

Стоит отметить, что вместо нового значения атрибута можно передавать этому методу функцию. Пример:

$(‘*’).attr(‘title’,function(index) {
return ‘I am element ’+index+’ and my name is ‘ +
(this.id ? this.id : ‘unset’);
});

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

Более того, метод attr() позволяет изменять несколько атрибутов одновременно:

$(‘input’).attr({value: ‘’, title: ‘Please enter a value’});

Таким образом мы можем очистить все значения инпутов и установить их title как «Please enter a value».

3.1.4 Удаление атрибутов.

Для того, чтобы удалить атрибут у элемента DOM, в jQuery есть специальный метод removeAttr(). Например:

$(‘img’).removeAttr(‘alt’);

так мы удалим атрибут alt у всех выбранных элементов img.

3.2 Работа со стилями элементов.

3.2.1 Добавление и удаление имен классов.

Определение класса делается очень просто с помощью метода addClass(), который присваивает переданное ему имя класса всем элементам в наборе. Например:

$(‘img’).addClass(‘noBorder’);

Удаление класса делается командой removeClass():

$(‘img’). removeClass (‘noBorder’);

Следующий метод довольно интересный: toggleClass() назначает класс элементу в наборе, если этот класс для него не был определен, и, наоборот, удаляет класс у элемента в наборе, если класс был назначен.

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

$(‘tr’).toggleClass(‘striped’);

где striped было названием класса для закрашенной строки.

3.2.2 Получение и установка стилей.

Работа напрямую со стилями дает нам большие возможности.

Метод css() работает аналогично методу attr(), позволяя нам устанавливать индивидуальные свойства CSS для элемента, передавая методу пару имя-значение или даже менять несколько свойств, передавая новые значения для них в объекте.

Более того, метод также прекрасно обрабатывает функции, переданные ему в качестве значения для свойства. Например, увеличим ширину элементов в наборе на 20 пикселей:

$(‘div.expandable’).css(‘width’,function(){
return $(this).width() + 20 + “px”;
});

Следующий пример показывает возможность передачи методу группы параметров в качестве объектов:

$(‘div.example’).css({width: ‘100px’, height: ‘200px’});

И, наконец, метод css() позволяет получить значение свойства, переданного методу. Например, узнать ширину элемента можно так:

$(‘div.examle’).css(‘width’);

Для часто используемых свойств в jQuery есть специальные команды. Так, мы можем узнать или изменить высоту и ширину объектов специальными методами height() и width(). Соответственно, если мы передаем методу значение – мы устанавливаем это значение согласно методу, его получившему, а если просто вызываем метод – получим нужное нам значение (при этом переданное значение будет установлено в пикселях), то есть:

$(‘div.example’).width(500)

установит ширину блока в 500 пикселей. Кстати, это то же самое, что и

$(‘div.example’).css(“width”,”500px”)

Узнать теперь ширину блока можно так:

$(‘div.example’).width()

3.2.3 Еще немного полезных команд для работы со стилями.

Иногда необходимо проверить, принадлежит ли элемент к определенному классу или нет. Сделать это поможет функция hasClass():

$(‘p:first’).hasClass(‘supriseMe’)

Если какой-нибудь элемент в наборе принадлежит к указанному классу, функция вернет true.

3.3 Установка контента элементов.

3.3.1 Замена HTML или текста.

Самая простая команда – html() – возвращает нам HTML-код первого соответствующего элемента, если параметр не был задан, или устанавливает HTML-фрагмент, переданный как параметр, содержимым всех выбранных элементов.

Также, есть возможность получить только текстовое содержимое элементов. Для этого есть команда text().

<ul id="theList">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>

var text=$('#theList’).text();

В результате переменная text будет содержать строку «OneTwoThreeFour».

Как и с предыдущей функцией, мы можем устанавливать текстовое содержимое для элемента, если функции test() будет как параметр необходимый текст. При этом если в тексте будут символы < или > они будут заменены на спецсимволы.

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

3.3.2 Перемещение и копирование элементов.

Для добавления контента в конец существующего служит команда append().

Функция добавляет строку или HTML-фрагмент, переданные ей как параметры, к новому или существующему элементу DOM либо к набору вложенных элементов jQuery. Рассмотрим несколько примеров.

$('p').append('<b>some text</b>');

Это выражение присоединит HTML-фрагмент, созданный из переданной функции строки, к концу уже существующего содержимого всех элементов <p> на странице.

Более комплексное использование этой команды позволяет назначить существующие элементы DOM дочерними к другим элементам. То есть:

$("p.appendToMe").append($("a.appendMe"))

позволит назначить все ссылки класса appendMe дочерними элементами всех <p> на странцие класса appendToMe. При этом конечное положение назначаемых элементов зависит от числа целевых элементов. Если такой один, то назначаемые элементы будут перемещены с их первоначального положения на странице, если же целевых элементов несколько, то назначаемые элементы останутся на своем прежнем месте, а целевым элементам будут назначены их копии.

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

$(" a.appendMe").appendTo($("p.appendToMe "))

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

Принцип работы следующих команд похож на работу append() и appendTo():
• prepend() и prependTo() – вставляет исходный элемент перед целевым, а не после.
• before() и insertBefore() – вставляет элемент перед целевыми элементами, а не перед первым потомком.
• after() и insertAfter() – вставляет элемент после целевых элементов, а не после последнего потомка.

Рассмотрим следующий пример:

$(‘<p>Привет!</p>’).insertAfter(‘p img’);

Это выражение создаст новый абзац и вставит копии его после каждого рисунка внутри абзаца.

3.3.3 Вложение элементов

Другой тип DOM-манипуляций, к которому мы часто обращаемся это вложение элементов (или группы элементов) в какой-то другой элемент. Например, нам захочется поместить все ссылки определенного класса внутрь <div>. Сделать это можно с помощью команды wrap(). Этот метод вкладывает выбранный набор элементов внутрь переданного HTML-кода либо клона переданного элемента.

Например, чтобы вложить каждую ссылку класса surprise в <div> класса hello сделаем следующее:

$(“a.surprise”).wrap(“<div class=’hello’></div>”);

Если же мы хотим вложить каждую ссылку в копию первого элемента <div> на странице:

$(“a.surprise”).wrap($(“div:first”)[0]);

Что же делать, если нам нужно поместить все выбранные элементы не по одному, а вместе в какой то общий контейнер? В этом нам поможет функция wrapAll().

Ну а когда мы хотим поместить в нужный нам контейнер не каждый элемент, а только его содержимое – используем функцию wrapInner().

3.3.4 Удаление элементов

Если мы хотим очистить или удалить набор элементов, это легко сделать с помощью команды remove(), которая удаляет все элементы вложенного набора из DOM на странице.

При этом стоит учитывать, что, как и многие другие команды jQuery, результатом работы этой команды является опять же набор элементов. И пусть мы удалили его из DOM, мы все равно можем его дальше использовать в других функциях, например, тех же appendTo() или insertAfter() или другими похожими.

Чтобы очистить элементы от их содержимого можно использовать команду empty(). Она удаляет содержимое всех элементов DOM в наборе.

Распространено применение remove() и after() для операции замены. Делается это подобным образом:

$(‘div.elementToReplace’).after(‘<p>Я заменяю блок</p>’).remove();

Поскольку after() возвращает исходный элемент <div>, мы можем попросту убрать его, оставив только новый абзац <p>.

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

$.fn.replaceWith = function(html) {
return this.after(html).remove();
}

Тогда предыдущую операцию мы выполним уже так:

$(‘div.elementToReplace’).replaceWith(‘<p>Я заменяю блок</p>’);

А что же делать, когда мы хотим не переместить элементы, а только скопировать?..

3.3.5 Клонирование элементов

Для этого в jQuery есть команда clone(). Она создает и возвращает копию набора. Все элементы и потомки копируются. При переданном параметре true копируются также все обработчики.

Клонирование элементов малоэффективно, пока мы не сделаем что-нибудь с копией. Тут уже все зависит от нашей фантазии. Вот пара примеров:

$(‘img’).clone().appendTo(‘fieldset .photo’);

Это выражение делает копию всех изображений и помещает их во все элементы <fieldset> класса photo.

Еще один пример:

$(‘ul’).clone().insertBefore(‘#here’);

Выполняет похожую операцию. Здесь стоит отметить, что клонируются все элементы <ul>, включая их потомков <li> (если такие, конечно, есть).

И последний пример:

$(‘ul’).clone().insertBefore(‘#here’).end().hide();

Это выражение похоже на предыдущую операцию, но после вставки копии команда end() выбирает исходный набор, после чего он скрывается командой hide().

3.4 Операции с элементами форм

Основное действие, которое выполняется с формами – это работа с их данными. Команда val() возвращает содержимое атрибута value первого элемента в наборе. Когда элемент формы содержит несколько вариантов выбора, возвращается массив значений всех этих вариантов.

Эта команда, хотя и довольно полезная, имеет ряд ограничений. Если первый элемент набора не является элементом формы – получим сообщение об ошибке. Также эта команда не различает отмеченные и не отмеченные элементы чекбоксов или радиобатонов.

Для случая с радиобатоном можно поступить следующим образом:

$(‘[name=radioGroup]:checked’).val()

Это выражение вернет значение единственного выбранного радиобатона с именем radioGroup (или же вернет значение undefined если ни один радиобатон не был выбран). Этот пример не может быть применен к чекбоксам, так как здесь возможно более одного выбранного значения, а как уже говорилось, val() возвращает содержимое атрибута value первого элемента в наборе.

При передаче команде параметра, он будет установлен как значение для value всех выбранных элементов набора. При этом опять же есть ряд ограничений. Например, нельзя установить несколько значений для элемента с множественным выбором.

Еще одно направление использования val() – установка флажков чекбоксов и радиобатонов или выбор опций <select>. При этом передается массив значений, и, если любое из них совпадет со значением элемента, элемент будет выбран (отмечен). Например:

$(‘input,select’).val([‘one’,’two’,’three’]);

Это выражение проверит все элементы <input> и <select> на совпадение их значений с любой из переданных строк: one, two или three. При совпадении значений чекбоксы или радиобатоны будут отмечены, опция селекта будет выбрана.

Очередная глава подошла к концу. Опять же буду рад здоровой критике. Спасибо.

Также напомню, что эту и другие статьи вы всегда сможете найти в моем блоге, там же можно и подфидиться;-)