Jquery peut-il modifier le contenu du texte ?-Questions et réponses frontales-php.cn

Jquery peut-il modifier le contenu du texte ?

青灯夜游

Libérer： 2022-09-08 19:28:49

original

3003 Les gens l'ont consulté

jquery peut modifier le contenu du texte. Méthode de changement : 1. Utilisez text() pour modifier le contenu du texte des éléments ordinaires, la syntaxe est "element object.text("new text content")", et définissez le contenu du texte sur une nouvelle valeur ; 2. Utilisez val( ) pour modifier l'élément de formulaire Le contenu textuel de l'entrée, la syntaxe est "$("input").val("new text content")".

Jquery peut-il modifier le contenu du texte ?

L'environnement d'exploitation de ce tutoriel : système windows7, version jquery3.6.1, ordinateur Dell G3.

jquery peut modifier le contenu du texte.

Le contenu du texte est divisé en deux situations :

Contenu du texte des éléments ordinaires
Contenu du texte de la saisie des éléments de formulaire

Par conséquent, les méthodes de modification doivent également être séparées.

Méthode 1. Utilisez text() pour modifier le contenu du texte des éléments ordinaires

text() peut définir le contenu du texte de l'élément. Définissez simplement le contenu du texte sur une nouvelle valeur pour le modifier.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-3.6.1.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$("p").text("修改后的新文本内容");
				});
			});
		</script>
	</head>
	<body>

		<button>改变所有p元素的文本内容</button>
		<p>这是一个段落。</p>
		<p>这是另一个段落。</p>

	</body>
</html>

Copier après la connexion

Jquery peut-il modifier le contenu du texte ?

2. Utilisez val() pour modifier le contenu du texte de l'élément de formulaire input

val() renvoie ou définit la valeur de l'élément sélectionné. La valeur d'un élément est définie via l'attribut value. Cette méthode est principalement utilisée pour les éléments d'entrée.

Utilisez simplement val() pour définir le contenu du texte sur une nouvelle valeur à modifier.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-3.6.1.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$("input").val("王小明");
				});
			});
		</script>
	</head>
	<body>

		<button>改变input元素的文本内容</button>
		<p>用户名: <input type="text" name="user" value="李华" /></p>
		<p>密　码: <input type="password" name="password" value="123456" /></p>
	</body>
</html>

Copier après la connexion

Jquery peut-il modifier le contenu du texte ?

Connaissances approfondies : Comparaison de html() et text()

En plus de text(), il existe également html() qui peut également modifier le contenu des éléments ordinaires

Mais le html( ) définit ou renvoie le contenu. Le contenu est un contenu qui contient du texte et des balises HTML.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="js/jquery-3.6.1.min.js"></script>
		<script>
			$(function () {
            var strHtml = $("p").html();
            var strText = $("p").text();
            $("#txt1").val(strHtml);
            $("#txt2").val(strText);
        })
    </script>
	</head>
	<body>
		<p><strong style="color:hotpink">PHP中文网</strong></p>
		html()是：<input id="txt1" type="text" /><br />
		text()是：<input id="txt2" type="text" />
	</body>
</html>

Copier après la connexion

Jquery peut-il modifier le contenu du texte ?

Comme vous pouvez le voir dans cet exemple, html() récupère tout le contenu à l'intérieur de l'élément, tandis que text() récupère uniquement le contenu du texte.

La différence entre les deux méthodes html() et text() peut être clairement comparée à partir du tableau ci-dessous.

[Apprentissage recommandé : , ]