Содержимое элементов
Веб-программирование --- jQuery --- Содержимое элементов
»» В данной статье используется исходный код для примеров. Сохраните эту страницу для тестирования приведенных ниже примеров.
До сих пор мы занимались поиском атрибутов элементов, но в jQuery предусмотрены средства, позволяющие работать также с содержимым элементов. Доступные для этого методы приведены в таблице ниже:
| Метод | Описание |
|---|---|
| text() | Получает объединенное текстовое содержимое всех элементов, содержащихся в объекте jQuery, и их потомков |
| text(значение) | Устанавливает текстовое содержимое для всех элементов, содержащихся В объекте jQuery |
| html() | Возвращает HTML-содержимое первого из элементов, содержащихся в объекте jQuery |
| html(значение) | Устанавливает HTML-содержимое для всех элементов, содержащихся в объекте jQuery |
| text(функция), html(функция) | Устанавливает текстовое и HTML-содержимое с помощью функции |
С методом text() связана одна особенность: если он вызывается без аргументов, то возвращаемый им результат генерируется на основе содержимого всех выбранных элементов. В отличие от этого поведение метода html() согласуется с поведением остальных методов jQuery, и он возвращает лишь содержимое первого элемента выбранного набора, как показано в примере ниже:
$(function() {
var html = $('div.dcell').html();
console.log(html);
});В этом сценарии метод html() используется для считывания HTML-содержимого первого из элементов, соответствующих селектору div.dcell, и вывода на консоль результата, который представлен ниже. Обратите внимание на то, что HTML-дескрипторы самого элемента в возвращаемый результат не включаются:
Изменение содержимого элементов
Для изменения содержимого элементов используются методы html() и text(). В нашем примере документа для цветочного интернет-магазина сколько-нибудь значимое текстовое содержимое элементов отсутствует, поэтому в примере ниже показано лишь применение метода html() для этой цели:
$(function() {
$('#row2 div.dcell').html($('div.dcell').html());
});Этот сценарий изменяет HTML-содержимое тех принадлежащих классу dcell элементов div, которые являются потомками элемента row2. Для получения содержимого, подлежащего вставке, используется метод html(), который считывает HTML-содержимое из первого элемента div.dcell. Это приводит к тому, что каждое из изображений в нижнем ряду элементов заменяется изображением астры, как показано на рисунке:
Изменение содержимого элементов с помощью функции
Как и в случае многих других методов, передача методам html() и text() функции в качестве аргумента обеспечивает возможность динамического изменения содержимого элементов. В обоих случаях аргументами функции являются позиция элемента в объекте jQuery и текущее текстовое или HTML-содержимое. Переменная this ссылается на объект HTMLElement соответствующий элементу, а возвращаемое значение функции содержит требуемый результат.
Пример использования функции совместно с методом text() приведен ниже:
$(function() {
$('label').css("border", "thick solid red").text(function(index, currentValue) {
return "Индекс " + index;
});
});В этом сценарии текстовое содержимое элементов label изменяется в зависимости от значения аргумента index, указывающего позицию элемента в выбранном наборе (для заключения изменяемых элементов в рамку используется метод css()). Результат представлен на рисунке:
