jQuery метод .text()

Определение и применение

jQuery метод .text() задает или возвращает текстовое содержимое выбранных элементов.

Обращаю Ваше внимание, что если вы передаете в качестве значения спецсимволы, то они будут кодированы. То есть, если вы передаете следующую строку - <b>текст</b>, то в таком виде и будет произведен вывод (не преобразуется в HTML элемент). А вот если вы решите вернуть значение такой строки (использовать метод без параметра), то в этом случае декодирование не происходит, что может привести к нежелательной ошибке (строка преобразуется в HTML элемент), будьте внимательны.

jQuery синтаксис:

Синтаксис 1.0:
$( selector ).text() // метод используется без параметров
$( selector ).text( text )

text - String, (Number и Boolean преобразуются в String)

Синтаксис 1.4:

$( selector ).text()
$( selector ).text( text )
$( selector ).text( function(index, text ))

text - String, (Number и Boolean преобразуются в String)
function - Function // возвращает текстовое содержимое
index - Integer

Добавлен в версии jQuery

1.0 (синтаксис расширен в версиях 1.3 и 1.4)

Значения параметров

Параметр	Описание
text	Текст, который будет установлен в качестве содержания каждого соответствующего элемента. Число, или логическое значение будет преобразовано в строковое представление.
function	Функция, которая возвращает текстовое содержимое, которое будет установлено. В качестве параметров получает индекс элемента и его содержимое. index - возвращает индекс позиции элемента в наборе (среди выбранных элементов). text - возвращает текущее содержимое выбранных элементов.

Параметр

Описание

text

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

function

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

index - возвращает индекс позиции элемента в наборе (среди выбранных элементов).
text - возвращает текущее содержимое выбранных элементов.

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Использование jQuery метода .text()</title>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function(){
	  $("button").click(function(){ // задаем функцию при нажатиии на элемент <button>
	   $("p").text('No'); // задаем содержимое элементов <p>
	   $("span").append("Элементы имеют следующий текст: " + $("p").text()); // добавляем содержимое всех элементов <p> в документ 
	  });
	});
		</script>
	</head>
	<body>
		<button>Клик</button>
		<p>Yes</p>
		<p>Yes</p>
		<p>Yes</p>
		<span></span>
	</body>
</html>

В этом примере с использованием jQuery метода .text() мы задаем (изменяем) содержимое для всех элементов <p> и с помощью методов .text(), и .append() выводим содержимое выбранных элементов в элемент <span> (после того как они были изменены).

Результат нашего примера:

Пример использования jQuery метода .text()

Рассмотрим пример в котором в качестве параметра метода .text() передадим функцию:

<!DOCTYPE html>
<html>
	<head>
		<title>Использование функции в качестве параметра метода .text()</title>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function(){	  
          $("button").click(function(){  // задаем функцию при нажатиии на элемент <button> 
            $("p").text(function(index, text){ // передаем функцию в качестве параметра метода 	
              return "Этот элемент имеет индекс - " + index + (". Старое содержимое: " + text);  // возвращаем значение индекса элемента и старое содержимое элемента
	    });
	  });
	});
		</script>
	</head>
	<body>
		<button>Клик</button>
		<p>Раз</p>
		<p>Два</p>
		<p>Три</p>
	</body>
</html>

В этом примере с использованием jQuery метода .text() и функции, переданной в качестве параметра метода, мы при нажатии на кнопку (элемент <button>) заменяем содержимое абзацев. Наша функция возвращает значение индекса элемента и старое содержимое элемента (до изменения).

Результат нашего примера:

Пример использования функции в качестве параметра метода .text().

jQuery DOM методы