Как изменить содержимое элементов в jQuery
В этом уроке мы попробуем свои силы в изменении содержимого элементов в jQuery.
Итак, наиболее часто используемой операцией является изменение
содержимого элементов. Вне библиотеки jQuery для этой цели используется
свойство innerHTML объекта document. Например, чтобы вставить новый
фрагмент в элемент с идентификатором divl, можно воспользоваться
следующим кодом.
document.getElementByld("divl").innerHTML = "Новый текст";
Библиотека jQuery также позволяет использовать это свойство. Для
этого находим элемент с помощью функции $ (), а затем преобразуем
коллекцию элементов jQuery в набор DOM-элементов.
$("#divl")[0].innerHTML = "Новый текст";
Для этой цели можно также воспользоваться методом get () .
$("#divl").get(0).innerHTML = "Новый текст";
В библиотеке jQuery для изменения содержимого элементов предназначены следующие методы.
- text ( [3начение] ) — позволяет получить или задать текст
элемента. Если параметр не указан, то метод возвращает текстовое
значение без тегов. При наличии нескольких элементов в коллекции будут
возвращены все значения в виде строки. Если необходимо получить значение
только первого элемента из коллекции, то можно воспользоваться методом
eq () .
alert($("div").eq(0).text());
Можно также ограничить набор с помощью селектора :
first. alert($("div:first").text());
При указании строки в качестве параметра она заменит содержимое всех
элементов коллекции. В случае наличия в строке специальных символов они
будут заменены на HTML-эквиваленты.
$("div").text("Новое значение");
В этом примере строка в исходном HTML-коде будет выглядеть следующим образом.
<b>Новое значение&1t;/b>
- html ( [3начение] ) — позволяет получить или задать HTML-код
элемента. Если параметр не указан, то метод возвращает значение вместе с
тегами. При наличии нескольких элементов в коллекции будет возвращено
значение только первого элемента.
alert($("div").html());
При указании HTML-кода в качестве параметра он заменит содержимое
всех элементов коллекции, и объектная модель документа будет обновлена.
Выведем HTML-код во всех тегах div.
$("div").text("Новое значение");
Если необходимо изменить значение только первого элемента из
коллекции, то можно воспользоваться методом eq () или селектором :
first.
$("div:first").html("Новое значение");
- append (Выражение) — добавляет Выражение в конец содержимого
выбранного элемента. В качестве параметра может быть указан HTML-код,
DOM-элемент или коллекция элементов jQuery. Для примера добавим HTML-код
в конец элемента.
$("#divl").append("<u>Новый текст</u>");
<div id="divl">
<b>Текст</b>
</div>
Результат будет выглядеть следующим образом.
<div id="divl"> <b>Текст</b>
<u>Новый Текст</u></div>
Теперь добавим DOM-элемент.
$("#divl").append($("<u>Новый текст</u>").get(0));
А теперь добавим созданный элемент коллекции jQuery.
$("#divl").append($("<u>Новый текст</u>") ) ;
- prepend(Выражение) — добавляет Выражение в начало содержимого
выбранного элемента. В качестве параметра может быть указан HTML-код,
DOM-элемент или коллекция элементов jQuery. Метод полностью идентичен
методу appendO, за исключением того, что добавляет Выражение не в конец
элемента, а в его начало. Для примера добавим HTML-код в начало
элемента.
$("#divl").prepend("<u>Новый текст</u>");
<div id="divl">
<b>Текст</b>
</div>
Результат будет выглядеть следующим образом.
<div id="divl"><u>Новый текст</u>
<b>Текст</b>
</div>
- appendTo (Селектор) — добавляет коллекцию элементов jQuery в конец
всех элементов, соответствующих указанному селектору. Для примера
добавим HTML-код в конец элемента с идентификатором divl.
$("<u>Новый текст</u>").appendTo("#divl");
Результат будет таким же, как и при использовании метода append () .
$("#divl").append("<u>Новый текст</u>");
Как видно из примера, мы поменяли параметры местами и использовали метод append () вместо метода appendTo ().
- prependTo (Селектор) — добавляет коллекцию элементов jQuery в
начало всех элементов, соответствующих указанному селектору. Для примера
добавим HTML-код в начало элемента с идентификатором divl.
$("<u>Новый текст</u>").prependTo("#divl");
Результат будет таким же, как и при использовании метода prepend () .
$("#divl").prepend("<u>Новый текст</u>");
Как добавить содержимое перед элементом или после него
В предыдущем разделе мы рассмотрели изменение внутреннего содержимого
элемента. Библиотека jQuery предоставляет также методы, которые
позволяют добавить какое-либо содержимое перед элементом или после него.
Рассмотрим эти методы.
- aftег (Выражение) — добавляет Выражение после всех элементов
коллекции. В качестве параметра может быть указан HTML-код, DOM-элемент
или коллекция элементов jQuery. Для примера добавим HTML-код после
элемента.
$("#divl").after("<u>Новый текст</u>");
<div id="divl">текст</div>
Результат будет выглядеть следующим образом.
<div id="divl" > текст </div><u> Новый текст</u>
Теперь добавим DOM-элемент.
$("#divl").after($("<u>Новый текст</u>").get(0));
А теперь добавим созданный элемент коллекции jQuery. $("#divl").after($("<u>Новый текст</u>"));
- before (Выражение) — добавляет Выражение перед всеми элементами
коллекции. В качестве параметра может быть указан HTML-код, DOM-элемент
или коллекция элементов jQuery. Метод полностью идентичен методу after
(), за исключением того, что добавляет Выражение не после элемента, а
перед ним. Для примера добавим HTML-код перед элементом.
$("#divl").before("<u>Новый текст</u>");
<div id="divl"> текст </div>
Результат будет выглядеть следующим образом.
<u>Новый текст </u><div id= "divl"> текст </div>
- insertAfter (Селектор) — добавляет коллекцию элементов jQuery
после всех элементов, соответствующих указанному селектору. Для примера
добавим HTML-код после элемента с идентификатором divl.
$("<u>Новый текст</u>").insertAfter("#divl");
Результат будет таким же, как и при использовании метода after () .
$("#divl").after("<u>Новый текст</u>");
- insertBefore (Селектор) — добавляет коллекцию элементов jQuery
перед всеми элементами, соответствующими указанному селектору. Для
примера добавим HTML-код перед элементом с идентификатором divl.
$("<u>Новый текст</u>").insertBefore("#divl");
Результат будет таким же, как и при использовании метода before () .
$("#divl").before("<u>Новый текст</u>");
Вложение элементов
Все элементы коллекции можно разместить в каком-либо другом элементе. Для вложения элементов предназначены следующие методы.
- wraplnner (HTML-элемент или BОМ-элемент) —вкладывает внутреннее
содержимое каждого элемента коллекции в другой элемент. Для примера
выделим содержимое всех тегов div.
$ ("div”) .wraplnner ("<b></b>”) ;
<div> текст l</div> <div> текст 2</div>
Результат будет выглядеть следующим образом.
<div><b> текст l</b></div>
<div><b>Текст 2</b></div>
Такого же эффекта можно достичь, передав в качестве параметра DOM-элемент.
$("div") .wraplnner(document.createElement ("b"));
Можно также передать элемент, созданный с помощью функции $ ().
$ ("div") .wraplnner ($ (MM) ) ;
- wrap (HTML-элемент или BОМ-элемент) —полностью вкладывает каждый элемент коллекции в другой элемент.
$("div") .wrap("<b></b>") ;
<div>Текст l</div> <div>Текст 2</div>
Результат выполнения таков:
<b><div>Текст l</div></b>
<b><div>Текст 2</div></b>
- wrapAll (HTML-элемент или ВОМ-элемент) — собирает все элементы коллекции в одном месте и вкладывает их в другой элемент.
<pre>
$ ("div") .wrapAll ("<u></u>H) ;
<b>Какой-то текст 1</b>
<div>Текст </div>
<b>Какой-то текст </b> <div>Текст 2</div>
<b>Какой-то текст 3</b> <div>Текст 3</div>
Результат будет выглядеть следующим образом.
<b>Какой-то текст 1</b>
<u><div>Текст l</div><div>Текст 2</div><div>Текст 3
</div></u> <b>Какой-то текст 2</b> <b>Какой-то текст 3</b>
Как видно из примера, все элементы коллекции были размещены после первого элемента и расположены внутри тега u.
Перемещение и клонирование элементов
Если в качестве параметра методов before (), prepend (), append () и
after () указать коллекцию существующих элементов jQuery, то они будут
перемещены. Куда будут вставлены элементы, зависит от конкретного
метода: before () (перед элементом), ргеpend() (в начало содержимого),
append () (в конец содержимого), after () (после элемента). Для примера
найдем все ссылки на странице и добавим их в конец элемента.
$("ttdivl").append($("а"));
<div id="divl">
<b>Текст</b>
</div>
<а href ="11.html">l</a><br>
В результате все ссылки будут перемещены в конец содержимого элемента с идентификатором divl, и мы получим следующий HTML-код.
<div id="divl">
<b>Текст</b><а href =»11. html» >1</а><а href =" 12 . html >2</a>
</div>
<br>
<br>
Такого же эффекта можно достичь при помощи методов insertBefore (),
prependTo (), appendTo () и insertAfter (). Куда будут вставлены
элементы, зависит от конкретного метода: insertBefore О (перед
элементом), prependTo () (в начало содержимого), appendTo () (в конец
содержимого), insertAfter () (после элемента). Для примера найдем все
ссылки на странице и добавим их перед элементом.
$("а").insertBefore($("#divl") ) ;
<div id="divl">
Текст</div>
<br>
<a href = "11 .html">l</axbr>
<a href = "12 . html" >2</a><br>
В результате все ссылки будут размещены непосредственно перед элементом с идентификатором divl, и мы получим следующий HTML-код.
<а href ="11 .html">l</a><a href =" 12 .html">2</a>
<div id="divl">Текст</div>
<br><br><br>
Библиотека jQuery позволяет создавать копии существующих элементов
(клонировать). Для этого предназначен метод clone ( [true] ). Если в
качестве параметра указано значение true, то будут также клонированы и
обработчики событий. Создадим копию первой ссылки в документе, а затем
выведем ее после элемента с идентификатором divl.
$("а").eq(0).clone().insertAfter("#divl");
<a href="/link.html">Ссылка</а>
<div id="divl">Текст</div>
Результат будет выглядеть следующим образом.
<а href="/link.html">Ссылка</а>
<div id="divl">Текст</div><a href ="link.html">Ссылка</а>
Очистка содержимого и удаление элемента
Для очистки содержимого и удаления элемента применяются следующие методы.
- empty () — удаляет все подэлементы текущего элемента.
<div id="divl"><b>Этот текст будет удален</b></^^>
<input type="button" value="Очистить"
onclick="$("#divl").empty();">
<input type="button" value="Вставить"
onclick=" $ ( " #divl1" ) . html ( " <b>Новый текст</b> " ) ;” >
Как видно из примера, после удаления содержимого элемента с
идентификатором divl сам элемент все еще остается доступным для
манипуляций.
- remove ( [Селектор] ) — полностью удаляет элементы из объектной модели документа.
<div id="divl"><b>Этот элемент будет полностью удален</b>
<input type="button" value="Удалить"
onclick="$("#divl1").remove();">
<input type="button" value="Количество элементов"
onclick="alert($("#divl").size());">
Данный пример демонстрирует отсутствие элемента после щелчка на
кнопке Удалить. Щелкнув на кнопке Количество элементов в первый раз, мы
получим число 1, а если щелкнуть на ней после удаления элемента, то
получим число 0.
Если коллекция состоит более, чем из одного элемента, то будут
удалены все элементы. Метод remove () позволяет задать дополнительное
условие, которому должны соответствовать удаляемые элементы. В качестве
примера удалим все ссылки с расширением . php.
$("а") . remove (" [href$=` .php`] ") ;
Изменение содержимого элементов
Получать коллекцию элементов и осуществлять доступ к отдельному ее
элементу мы уже научились. Теперь рассмотрим различные методы,
позволяющие изменять свойства и значения элементов коллекции. Некоторые
методы мы уже использовали в наших примерах для вывода результата или
изменения свойств элементов.
Наиболее часто используемой операцией является изменение содержимого
элементов. Вне библиотеки jQuery для этой цели используется свойство
innerHTML объекта document. Например, чтобы вставить новый фрагмент в
элемент с идентификатором divl, можно воспользоваться следующим кодом.
document.getElementByld("divl").innerHTML = "Новый текст";
Библиотека jQuery также позволяет использовать это свойство. Для
этого находим элемент с помощью функции $ (), а затем преобразуем
коллекцию элементов jQuery в набор DOM-элементов.
$("#divl")[0].innerHTML = "Новый текст";
Для этой цели можно также воспользоваться методом get () .
$("#divl").get(0).innerHTML = "Новый текст";
В библиотеке jQuery для изменения содержимого элементов предназначены следующие методы.
- text ( [3начение] ) — позволяет получить или задать текст
элемента. Если параметр не указан, то метод возвращает текстовое
значение без тегов. При наличии нескольких элементов в коллекции будут
возвращены все значения в виде строки. Если необходимо получить значение
только первого элемента из коллекции, то можно воспользоваться методом
eq () .
alert($("div").eq(0).text());
Можно также ограничить набор с помощью селектора :
first. alert($("div:first").text());
При указании строки в качестве параметра она заменит содержимое всех
элементов коллекции. В случае наличия в строке специальных символов они
будут заменены на HTML-эквиваленты.
$("div").text("Новое значение");
В этом примере строка в исходном HTML-коде будет выглядеть следующим образом.
<b>Новое значение</b>
- html ( [3начение] ) — позволяет получить или задать HTML-код
элемента. Если параметр не указан, то метод возвращает значение вместе с
тегами. При наличии нескольких элементов в коллекции будет возвращено
значение только первого элемента.
alert($("div").html());
При указании HTML-кода в качестве параметра он заменит содержимое
всех элементов коллекции, и объектная модель документа будет обновлена.
Выведем HTML-код во всех тегах div.
$("div").text("Новое значение");
Если необходимо изменить значение только первого элемента из
коллекции, то можно воспользоваться методом eq () или селектором :
first.
$("div:first").html("Новое значение");
- append (Выражение) — добавляет Выражение в конец содержимого
выбранного элемента. В качестве параметра может быть указан HTML-код,
DOM-элемент или коллекция элементов jQuery. Для примера добавим HTML-код
в конец элемента.
$("#divl").append("<u>Новый текст</u>");
<div id="divl">
<b>Текст</b>
</div>
Результат будет выглядеть следующим образом.
<div id="divl"> <b>Текст</b>
<u>Новый Текст</u></div>
Теперь добавим DOM-элемент.
$("#divl").append($("<u>Новый текст</u>").get(0));
А теперь добавим созданный элемент коллекции jQuery.
$("#divl").append($("<u>Новый текст</u>") ) ;
- prepend(Выражение) — добавляет Выражение в начало содержимого
выбранного элемента. В качестве параметра может быть указан HTML-код,
DOM-элемент или коллекция элементов jQuery. Метод полностью идентичен
методу append (), за исключением того, что добавляет Выражение не в
конец элемента, а в его начало. Для примера добавим HTML-код в начало
элемента.
$("#divl").prepend("<u>Новый текст</u>");
<div id="divl">
<b>Текст</b>
</div>
Результат будет выглядеть следующим образом.
<div id="divl"><u>Новый текст</u>
<b>Текст</b>
</div>
- appendTo (Селектор) — добавляет коллекцию элементов jQuery в конец
всех элементов, соответствующих указанному селектору. Для примера
добавим HTML-код в конец элемента с идентификатором divl.
$("<u>Новый текст</u>").appendTo("#divl");
Результат будет таким же, как и при использовании метода append () .
$("#divl").append("<u>Новый текст</u>");
Как видно из примера, мы поменяли параметры местами и использовали метод append () вместо метода appendTo ().
- prependTo (Селектор) — добавляет коллекцию элементов jQuery в
начало всех элементов, соответствующих указанному селектору. Для примера
добавим HTML-код в начало элемента с идентификатором divl.
$("<u>Новый текст</u>").prependTo("#divl");
Результат будет таким же, как и при использовании метода prepend () .
$("#divl").prepend("<u>Новый текст</u>");
|