PHP SQL
PHP SQL .ru
  Главная  Уроки  PHP  MySQL  jQuery  RegEx  CSS  Книги  Форум  
 Функции


  На главную

  Назад  Вперед

  Печать

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

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

Наиболее часто используемой операцией является изменение содержимого элемен-тов. Вне библиотеки 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>Новый TeKCT</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>");

 
Предыдущая   На главную   Следующая          

Ваш комментарий:

'

Реклама на сайте | Обмен ссылками | Ссылки | Контакты
Добавить статью | Добавить исходник
2010-2014 © phpsql.ru