1. Главная страница » Компьютеры » Jquery заменить содержимое блока

Jquery заменить содержимое блока

Автор: | 16.12.2019

Статья, в которой рассмотрим, какие в jQuery есть методы для чтения и изменения содержимого HTML элементов.

В jQuery имеются три метода, которые позволяют напрямую работать с контентом элемента:

  • html – для чтения и изменения HTML содержимого элемента;
  • text – для чтения и изменения текстового содержимого элемента;
  • val – для чтения и изменения значения элементов формы.

Чтение HTML контента элемента

Например, получим HTML содержимое элемента с идентификатором ( id ) contact :

Если выборка содержит несколько элементов, то данный метод вернёт HTML контент только первого элемента:

Для того чтобы получить HTML контент всех найденных элементов необходимо воспользоваться циклом (например, each ):

Изменение HTML контента элемента

Например, заменим содержимое элемента ul :

Если на странице будет несколько элементов ul , то данный метод заменит содержимое каждого из них.

Если необходимо изменить контент только у одного элемента на странице, то наиболее просто это сделать через id .

Использование функции для замены HTML контента элемента:

Например, изменим контент элементов (зачеркнём старый контент и добавим рядом новый):

Получение текстового содержимого элемента

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

Например, получим текстовое содержимое элемента p и выведем его в контент другого элемента:

Метод text также как и html возвращает содержимое только первого элемента выборки (если в ней присутствуют несколько элементов).

Замена контента элемента указанным текстом

Метод text может использоваться не только для чтения, но и для изменения содержимого указанного элемента. При этом HTML теги (если они присутствуют в тексте) будут закодированы с помощью спецсимволов.

После выполнения, элемент div с классом info будет иметь следующий HTML код:

На экране данный элемент будет выглядеть так:

Если в выборке присутствует несколько элементов, то метод text заменит содержимое каждого из них:

Использование в качестве параметра метода text функции (добавим в скобках к содержимому каждого выбранного элемента длину его текстовой информации):

Удаление контента элемента

В jQuery для удаления содержимого элемента имеется метод empty . Данный метод не только удаляет элементы, но и другие его дочерние узлы, включая текст.

Например, удалим содержимое всех элементов с классом vote :

Получение значения элемента формы

В jQuery чтение значений элементов input , select и textarea осуществляется посредством метода val .

Например, получим значение элемента input :

Метод val , если в коллекции присутствует несколько элементов, вернёт значение только первого из них.

Для получения значения выбранного элемента ( select , checkbox , или radio кнопок) используйте :checked .

Если коллекции нет элементов, то метод val возвращает значение undefined .

Например, получим значение элемента textarea , имеющего имя description :

Получим значение элемента select :

Если элемент select имеет множественный выбор (атрибут multiple ), то метод val возвратит в качестве результата массив, содержащий значение каждой выбранной опции ( option ). Если ни одна опция не отмечена, то данный метод вернёт в качестве ответа пустой массив (до версии jQuery 3 значение null ).

Установка значения элементу формы

Изменение значения элемента формы в jQuery осуществляется с помощью метода val .

Например, при клике на кнопку установим элементу input её текст:

Данный метод устанавливает значение для всех элементов набора, к которому он применяется.

Например, преобразуем все буквы значения элемента input после потеря фокуса в прописные:

Например, поменяем значение элемента select :

Например, присвоим значения элементу select с множественным выбором ( multiple ):

Как изменить содержимое элементов в jQuery

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

Читайте также:  Lenovo yoga book отзывы

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

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

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

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

— text ( [3начение] ) — позволяет получить или задать текст элемента. Если параметр не указан, то метод возвращает текстовое значение без тегов. При наличии нескольких элементов в коллекции будут возвращены все значения в виде строки. Если необходимо получить значение только первого элемента из коллекции, то можно воспользоваться методом eq () .

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

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

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

— html ( [3начение] ) — позволяет получить или задать HTML-код элемента. Если параметр не указан, то метод возвращает значение вместе с тегами. При наличии нескольких элементов в коллекции будет возвращено значение только первого элемента.

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

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

— append (Выражение) — добавляет Выражение в конец содержимого выбранного элемента. В качестве параметра может быть указан HTML-код, DOM-элемент или коллекция элементов jQuery. Для примера добавим HTML-код в конец элемента.

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

Теперь добавим DOM-элемент.

— prepend(Выражение) — добавляет Выражение в начало содержимого выбранного элемента. В качестве параметра может быть указан HTML-код, DOM-элемент или коллекция элементов jQuery. Метод полностью идентичен методу appendO, за исключением того, что добавляет Выражение не в конец элемента, а в его начало. Для примера добавим HTML-код в начало элемента.

— appendTo (Селектор) — добавляет коллекцию элементов jQuery в конец всех элементов, соответствующих указанному селектору. Для примера добавим HTML-код в конец элемента с идентификатором divl.

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

— prependTo (Селектор) — добавляет коллекцию элементов jQuery в начало всех элементов, соответствующих указанному селектору. Для примера добавим HTML-код в начало элемента с идентификатором divl.

Как добавить содержимое перед элементом или после него

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

— aftег (Выражение) — добавляет Выражение после всех элементов коллекции. В качестве параметра может быть указан HTML-код, DOM-элемент или коллекция элементов jQuery. Для примера добавим HTML-код после элемента.

А теперь добавим созданный элемент коллекции jQuery. $("#divl").after($("Новый текст"));

— before (Выражение) — добавляет Выражение перед всеми элементами коллекции. В качестве параметра может быть указан HTML-код, DOM-элемент или коллекция элементов jQuery. Метод полностью идентичен методу after (), за исключением того, что добавляет Выражение не после элемента, а перед ним. Для примера добавим HTML-код перед элементом.

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

— insertAfter (Селектор) — добавляет коллекцию элементов jQuery после всех элементов, соответствующих указанному селектору. Для примера добавим HTML-код после элемента с идентификатором divl.

Результат будет таким же, как и при использовании метода after () .
$("#divl").after("Новый текст");

— insertBefore (Селектор) — добавляет коллекцию элементов jQuery перед всеми элементами, соответствующими указанному селектору. Для примера добавим HTML-код перед элементом с идентификатором divl.

Читайте также:  Huawei с самой лучшей камерой

Результат будет таким же, как и при использовании метода before () .
$("#divl").before("Новый текст");

Вложение элементов

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

— wraplnner (HTML-элемент или BОМ-элемент) —вкладывает внутреннее содержимое каждого элемента коллекции в другой элемент. Для примера выделим содержимое всех тегов div.

Такого же эффекта можно достичь, передав в качестве параметра DOM-элемент.

Можно также передать элемент, созданный с помощью функции $ ().

— wrap (HTML-элемент или BОМ-элемент) —полностью вкладывает каждый элемент коллекции в другой элемент.

Результат выполнения таков:

— wrapAll (HTML-элемент или ВОМ-элемент) — собирает все элементы коллекции в одном месте и вкладывает их в другой элемент.

Результат будет выглядеть следующим образом.
Какой-то текст 1

Как видно из примера, все элементы коллекции были размещены после первого элемента и расположены внутри тега u.

Перемещение и клонирование элементов

Если в качестве параметра методов before (), prepend (), append () и after () указать коллекцию существующих элементов jQuery, то они будут перемещены. Куда будут вставлены элементы, зависит от конкретного метода: before () (перед элементом), ргеpend() (в начало содержимого), append () (в конец содержимого), after () (после элемента). Для примера найдем все ссылки на странице и добавим их в конец элемента.

В результате все ссылки будут перемещены в конец содержимого элемента с идентификатором divl, и мы получим следующий HTML-код.

Такого же эффекта можно достичь при помощи методов insertBefore (), prependTo (), appendTo () и insertAfter (). Куда будут вставлены элементы, зависит от конкретного метода: insertBefore О (перед элементом), prependTo () (в начало содержимого), appendTo () (в конец содержимого), insertAfter () (после элемента). Для примера найдем все ссылки на странице и добавим их перед элементом.

В результате все ссылки будут размещены непосредственно перед элементом с идентификатором divl, и мы получим следующий HTML-код.

Библиотека jQuery позволяет создавать копии существующих элементов (клонировать). Для этого предназначен метод clone ( [true] ). Если в качестве параметра указано значение true, то будут также клонированы и обработчики событий. Создадим копию первой ссылки в документе, а затем выведем ее после элемента с идентификатором divl. $("а").eq(0).clone().insertAfter("#divl");

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

Очистка содержимого и удаление элемента

Для очистки содержимого и удаления элемента применяются следующие методы.

— empty () — удаляет все подэлементы текущего элемента.

Как видно из примера, после удаления содержимого элемента с идентификатором divl сам элемент все еще остается доступным для манипуляций.

— remove ( [Селектор] ) — полностью удаляет элементы из объектной модели документа.

Данный пример демонстрирует отсутствие элемента после щелчка на кнопке Удалить. Щелкнув на кнопке Количество элементов в первый раз, мы получим число 1, а если щелкнуть на ней после удаления элемента, то получим число 0.

Если коллекция состоит более, чем из одного элемента, то будут удалены все элементы. Метод remove () позволяет задать дополнительное условие, которому должны соответствовать удаляемые элементы. В качестве примера удалим все ссылки с расширением . php.

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

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

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

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

Читайте также:  Gps api что это такое

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

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

— text ( [3начение] ) — позволяет получить или задать текст элемента. Если параметр не указан, то метод возвращает текстовое значение без тегов. При наличии нескольких элементов в коллекции будут возвращены все значения в виде строки. Если необходимо получить значение только первого элемента из коллекции, то можно воспользоваться методом eq () .

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

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

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

— html ( [3начение] ) — позволяет получить или задать HTML-код элемента. Если параметр не указан, то метод возвращает значение вместе с тегами. При наличии нескольких элементов в коллекции будет возвращено значение только первого элемента.

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

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

— append (Выражение) — добавляет Выражение в конец содержимого выбранного элемента. В качестве параметра может быть указан HTML-код, DOM-элемент или коллекция элементов jQuery. Для примера добавим HTML-код в конец элемента.

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

Теперь добавим DOM-элемент.

— prepend(Выражение) — добавляет Выражение в начало содержимого выбранного элемента. В качестве параметра может быть указан HTML-код, DOM-элемент или коллекция элементов jQuery. Метод полностью идентичен методу append (), за исключением того, что добавляет Выражение не в конец элемента, а в его начало. Для примера добавим HTML-код в начало элемента.

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

— appendTo (Селектор) — добавляет коллекцию элементов jQuery в конец всех элементов, соответствующих указанному селектору. Для примера добавим HTML-код в конец элемента с идентификатором divl.

Результат будет таким же, как и при использовании метода append () .
$("#divl").append("Новый текст");

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

— prependTo (Селектор) — добавляет коллекцию элементов jQuery в начало всех элементов, соответствующих указанному селектору. Для примера добавим HTML-код в начало элемента с идентификатором divl.

Результат будет таким же, как и при использовании метода prepend () .
$("#divl").prepend("Новый текст");

Скрипт обертывания изображений в теги + исключение других классов + удаление некоторых атрибутов

Возвращает или изменяет текстовое содержимое выбранных элементов.

version added: 1.0 .text()

Получает текст выбранного элемента в наборе. Если таких элементов несколько, получит содержимое всех элементов, разделенные пробелом

version added: 1.0 .text( textString )

Получает текст выбранного элемента в наборе. Если таких элементов несколько, получит содержимое всех элементов, разделенные пробелом

version added: 1.4 .text( function(index, text) )

Заменяет содержимое каждого выбранного элемента в наборе на возвращенное функцией function текст. Функция вызывается, для каждого из выбранных элементов. Параметры функции:
index — позиция элемента в наборе,
value — текущей текст элемента.

Пример 1. Получим текстовое-содержимое элемента div:

HTML:
JS:

Пример 2. Заменим содержимое элемента div на введенный текст:

HTML:
JS:

Обратите внимание, что метод .text( textString ) преобразует htm-теги в их сущности, аналогично функции htmpspecialchars в php. Для проверки в примере выше попробуйте вставить какой-либо html-код.

Пример 3. Заменим HTML-содержимое элементов div c помощью функции, которая вернет первые 20 символов начального текста, полученный текст обернем в параграф, полученная строка вернется и заменит собой исходную:

HTML:
JS:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

code