cpp

Манипуляции с элементами

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

Изменение содержимого элементов

Наиболее часто используемой операцией является изменение содержимого элементов. Вне библиотеки jQuery для этой цели используется свойство innerHTML объекта document. Например, чтобы вставить новый фрагмент в элемент с идентификатором div1 можно воспользоваться следующим кодом:

<div id="div1">Текст</div>

document.getElementById('div1').innerHTML = 'Новый текст';

Библиотека jQuery также позволяет использовать это свойство. Для этого находим элемент с помощью функции $(), а затем преобразуем коллекцию элементов jQuery в набор DOM-элементов:

$('#div1')[0].innerHTML = 'Новый текст';

Для этой цели можно также воспользоваться методом get():

$('#div1').get(0).innerHTML = 'Новый текст';

В библиотеке jQuery для изменения содержимого элементов предназначены следующие методы.

  • text([<Значение>]) — позволяет получить или задать текст элемента. Если параметр не указан, то метод возвращает текстовое значение без тегов. При наличии нескольких элементов в коллекции будут возвращены все значения в виде строки. Если необходимо получить значение только первого элемента из коллекции, то можно воспользоваться методом eq():
<p>Абзац 1</p>
<p>Абзац 2</p>
<p>Абзац 3</p>
console.log( $('p').eq(0).text() );

Можно также ограничить набор с помощью метода first():

console.log( $('p').first().text() );

При указании строки в качестве параметра она заменит содержимое всех элементов коллекции. В случае наличия в строке специальных символов они будут заменены HTML-эквивалентами:

$('p').text('<b>Новое значение</b>');

В этом примере содержимое абзаца после замены в исходном HTML-коде будет выглядеть следующим образом:

<p>&lt;b&gt;Новое значение&lt;/b&gt;</p>

Если в качестве параметра указать число или логическое значение, то производится преобразование в строку. Выведем число 10 в последнем абзаце:

$('p').last().text(10);

В качестве параметра можно также указать ссылку на функцию следующего формата:

function <Название функции>([<Индекс>[, <Старое значение>]]) {
   // ...
}

Текущий элемент доступен внутри функции через указатель this. Обратите внимание: указатель this ссылается на текущий элемент объектной модели документа, а не на элемент коллекции jQuery. Текущий индекс элемента в коллекции доступен через параметр <Индекс>. Через второй параметр доступно старое значение элемента без тегов. Функция должна вернуть новое значение, которое после замены всех спецсимволов HTML-эквивалентами станет новым текстом элемента. К старому тексту внутри абзаца добавим индекс абзаца внутри документа:

$('p').text( function(i, oldValue) {
   return oldValue + '; индекс ' + i;
});
  • html([<Значение>]) — позволяет получить или задать HTML-код элемента. Если параметр не указан, то метод возвращает значение вместе с тегами. При наличии нескольких элементов в коллекции будет возвращено значение только первого элемента:
console.log( $('p').html() );

При указании HTML-кода в качестве параметра он заменит содержимое всех элементов коллекции, и объектная модель документа будет обновлена. Выведем HTML-код во всех тегах <p>:

$('p').html('<b>Новое значение</b>');

Результат:

<p><b>Новое значение</b></p>

Если необходимо изменить значение только первого элемента из коллекции, то можно воспользоваться методами eq() или first():

$('p').first().html('<b>Новое значение</b>');

В качестве параметра можно также указать ссылку на функцию следующего формата:

function <Название функции>([<Индекс>[, <Старое значение>]]) {
   // ...
}

Текущий элемент доступен внутри функции через указатель this. Обратите внимание: указатель this ссылается на текущий элемент объектной модели документа, а не на элемент коллекции jQuery. Текущий индекс элемента в коллекции доступен через параметр <Индекс>. Через второй параметр доступно старое значение элемента в формате HTML. Функция должна вернуть новое значение, которое заменит старое значение элемента. К старому значению внутри абзаца добавим выделенный индекс абзаца внутри документа:

$('p').html( function(i, oldHTML) {
   return oldHTML + '; <b>индекс ' + i + '</b>';
});
Внимание!
  • append(<Выражение>[, <Выражение>]) — добавляет <Выражение> в конец содержимого выбранного элемента. В качестве параметра может быть указан HTML-код, текст, DOM-элемент, коллекция элементов jQuery или массив. Для примера добавим HTML-код в конец элемента с идентификатором div1:
<div id="div1">
   <b>Текст</b>
</div>
$('#div1').append('<u>Новый текст</u>');

Результат будет выглядеть следующим образом:

<div id="div1">
   <b>Текст</b>
<u>Новый текст</u></div>

Можно указать сразу несколько значений через запятую или в виде массива:

$('#div1').append('1', ' 2', ' 3')
          .append([' 4', ' 5', ' 6'], [' 7']);

Добавим DOM-элемент:

$('#div1').append( document.createTextNode('Новый текст') );

А теперь добавим созданный элемент коллекции jQuery:

$('#div1').append( $('<u>Новый текст</u>') );

Если передать ссылку на существующий в документе элемент, то он будет перемещен:

<div id="div1">
   <b>Текст</b>
</div>
<div id="div2">Текст</div>
$('#div1').append( $('#div2') );

Результат:

<div id="div1">
   <b>Текст</b>
<div id="div2">Текст</div></div>

В качестве параметра можно также указать ссылку на функцию следующего формата:

function <Название функции>([<Индекс>[, <Значение>]]) {
   // ...
}

Текущий элемент доступен внутри функции через указатель this. Обратите внимание: указатель this ссылается на текущий элемент объектной модели документа, а не на элемент коллекции jQuery. Текущий индекс элемента в коллекции доступен через параметр <Индекс>. Через второй параметр доступно значение текущего элемента в формате HTML. Функция должна вернуть значение, которое нужно добавить. К значению внутри абзаца добавим выделенный индекс абзаца внутри документа:

<p>Абзац 1</p>
<p>Абзац 2</p>
$('p').append( function(i, v) {
   return '; <b>индекс ' + i + '</b>';
});

Результат:

<p>Абзац 1; <b>индекс 0</b></p>
<p>Абзац 2; <b>индекс 1</b></p>
  • prepend(<Выражение>[, <Выражение>]) — добавляет <Выражение> в начало содержимого выбранного элемента. В качестве параметра может быть указан HTML-код, текст, DOM-элемент, коллекция элементов jQuery или массив. Метод полностью идентичен методу append(), за исключением того, что добавляет <Выражение> не в конец элемента, а в его начало. Для примера добавим HTML-код в начало элемента:
<div id="div1">
   <b>Текст</b>
</div>
$('#div1').prepend('<u>Новый текст</u>');

Результат будет выглядеть следующим образом:

<div id="div1"><u>Новый текст</u>
   <b>Текст</b>
</div>

Можно указать сразу несколько значений через запятую или в виде массива:

$('#div1').prepend([' 4', ' 5', ' 6'], [' 7 '])
          .prepend('1', ' 2', ' 3');

Добавим DOM-элемент:

$('#div1').prepend( document.createTextNode('Новый текст') );

А теперь добавим созданный элемент коллекции jQuery:

$('#div1').prepend( $('<u>Новый текст</u>') );

Если передать ссылку на существующий в документе элемент, то он будет перемещен:

<div id="div1">
   <b>Текст</b>
</div>
<div id="div2">Текст</div>
$('#div1').prepend( $('#div2') );

Результат:

<div id="div1"><div id="div2">Текст</div>
   <b>Текст</b>
</div>

В качестве параметра можно также указать ссылку на функцию следующего формата:

function <Название функции>([<Индекс>[, <Значение>]]) {
   // ...
}

Текущий элемент доступен внутри функции через указатель this. Обратите внимание: указатель this ссылается на текущий элемент объектной модели документа, а не на элемент коллекции jQuery. Текущий индекс элемента в коллекции доступен через параметр <Индекс>. Через второй параметр доступно значение текущего элемента в формате HTML. Функция должна вернуть значение, которое нужно добавить. Перед значением внутри абзаца добавим выделенный индекс абзаца внутри документа:

<p>Абзац 1</p>
<p>Абзац 2</p>
$('p').prepend( function(i, v) {
   return '<b>индекс ' + i + '</b>; ';
});

Результат:

<p><b>индекс 0</b>; Абзац 1</p>
<p><b>индекс 1</b>; Абзац 2</p>
  • appendTo(<Параметр>) — добавляет коллекцию элементов jQuery в конец всех элементов, соответствующих указанному параметру. В качестве параметра может быть указан селектор, DOM-элемент, массив DOM-элементов или коллекция элементов jQuery. Для примера добавим HTML-код в конец элемента с идентификатором div1:
$('<u>Новый текст</u>').appendTo('#div1');

Результат будет таким же, как и при использовании метода append():

$('#div1').append('<u>Новый текст</u>');

Как видно из примера, мы поменяли параметры местами и использовали метод append() вместо метода appendTo();

  • prependTo(<Параметр>) — добавляет коллекцию элементов jQuery в начало всех элементов, соответствующих указанному параметру. В качестве параметра может быть указан селектор, DOM-элемент, массив DOM-элементов или коллекция элементов jQuery. Для примера добавим HTML-код в начало элемента с идентификатором div1:
$('<u>Новый текст</u>').prependTo('#div1');

Результат будет таким же, как и при использовании метода prepend():

$('#div1').prepend('<u>Новый текст</u>');

Учебник по jQuery и AJAX
Учебник по jQuery и AJAX в формате PDF

Помощь сайту

ЮMoney (Yandex-деньги): 410011140483022

ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов

cpp