Приднестровская поддержка XOOPS
Наиболее часто используемой операцией является изменение содержимого элементов. Вне библиотеки jQuery для этой цели используется свойство innerHTML объекта document. Например, чтобы вставить новый фрагмент в элемент с идентификатором div1, можно воспользоваться следующим кодом.
document.getElementById("div1").innerHTML = "Новый текст";
Библиотека jQuery также позволяет использовать это свойство. Для этого находим элемент с помощью функции $(), а затем преобразуем коллекцию элементов jQuery в набор DOM-элементов.
$("#div1") [0].innerHTML = "Новый текст";
Для этой цели можно также воспользоваться методом get() .
$("#div1").get(0).innerHTML = "Новый текст";
В библиотеке jQuery для изменения содержимого элементов предназначены следующие методы.
text([<3начение>]) — позволяет получить или задать текст элемента. Если параметр не указан, то метод возвращает текстовое значение без тегов. При наличии нескольких элементов в коллекции будут возвращены все значения в виде строки. Если необходимо получить значение только первого элемента из коллекции, то можно воспользоваться методом eq() .
alert($("div").eq(0).text());
Можно также ограничить набор с помощью селектора :first.
alert($("div:first").text());
При указании строки в качестве параметра она заменит содержимое всех элементов коллекции. В случае наличия в строке специальных символов они будут заменены на HTML-эквиваленты.
$("div").text("<b>Новое значение</b>");
В этом примере строка в исходном HTML-коде будет выглядеть следующим образом.
<b>Новое значение&^;/b>
html([<3начеиие>]) — позволяет получить или задать HTML-код элемента. Если параметр не указан, то метод возвращает значение вместе с тегами. При наличии нескольких элементов в коллекции будет возвращено значение только первого элемента.
alert($("div").html());
При указании HTML-кода в качестве параметра он заменит содержимое всех элементов коллекции, и объектная модель документа будет обновлена. Выведем HTML-код во всех тегах <div>.
$("div").text("<b>Новое значение</b>");
Если необходимо изменить значение только первого элемента из коллекции, то можно воспользоваться методом eq() или селектором :first.
$("div:first").html("<b>Новое значение</b>");
append{<Выражение>) — добавляет <Выражение> в конец содержимого выбранного элемента. В качестве параметра может быть указан HTML-код, DOM-элемент или коллекция элементов jQuery. Для примера добавим HTML-код в конец элемента.
$("#div1").append("<u>Новый текст</u>");
<div id="div1">
<b>Текст</b>
</div>
Результат будет выглядеть следующим образом.
<div id="div1">
<b>Текст</b>
<u>Новый текст</u>
</div>
Теперь добавим DOM-элемент.
$("#div1").append($("<u>Новый текст</u>").get(0));
А теперь добавим созданный элемент коллекции jQuery.
$("#div1").append($("<u>Новый текст</u>"));
prepend(<Выражение>) — добавляет <Выражение> в начало содержимого выбранного элемента. В качестве параметра может быть указан HTML-код, DOM-элемент или коллекция элементов jQuery. Метод полностью идентичен методу append(), за исключением того, что добавляет <Выражение> не в конец элемента, а в его начало. Для примера добавим HTML-код в начало элемента.
$("#div1").prepend("<u>Новый текст</u>");
<div id="div1">
<b>Текст</b>
</div>
Результат будет выглядеть следующим образом.
<div id="div1">
<u>Новый текст</u>
<b>Текст</b>
</div>
appendTo(<Селектор>) — добавляет коллекцию элементов jQuery в конец всех элементов, соответствующих указанному селектору. Для примера добавим HTML-код в конец элемента с идентификатором div1.
$("<u>Новый текст</u>").appendTo("#div1");
Результат будет таким же, как и при использовании метода append() .
$("#div1").append("<u>Новый текст</u>");
Как видно из примера, мы поменяли параметры местами и использовали метод append() вместо метода appendTo().
prependTo(<Селектор>) — добавляет коллекцию элементов jQuery в начало всех элементов, соответствующих указанному селектору. Для примера добавим HTML-код в начало элемента с идентификатором div1.
$("<u>Новый текст</u>").prependTo("#divl");
Результат будет таким же, как и при использовании метода prepend() .
$("#div1").prepend("<u>Новый текст</u>");
Отправитель | Нити |
---|
8 пользователь(ей) активно (4 пользователь(ей) просматривают Инструкции)
Участников: 0 Гостей: 8 далее... |