jQueryでテキストの内容を変更できますか?-フロントエンドQ&A-php.cn

jQueryでテキストの内容を変更できますか?

青灯夜游

リリース： 2022-09-08 19:28:49

オリジナル

3003 人が閲覧しました

jquery はテキストの内容を変更できます。変更方法: 1. text() を使用して通常の要素のテキスト内容を変更します。構文は「element object.text("新しいテキスト内容")」で、テキスト内容を新しい値に設定します。 2. val() を使用します。 ) フォーム要素を変更するには、入力のテキストコンテンツ。構文は「$("input").val("new text content")」です。

jQueryでテキストの内容を変更できますか?

このチュートリアルの動作環境: Windows7 システム、jquery3.6.1 バージョン、Dell G3 コンピューター。

jquery はテキストの内容を変更できます。

テキストコンテンツは 2 つの状況に分けられます。

通常の要素のテキストコンテンツ
フォーム要素のテキストinput Content

したがって、変更メソッドも分離する必要があります。

方法 1. text() を使用して通常の要素のテキストコンテンツを変更します。

text() は要素のテキストコンテンツを設定できます。テキストコンテンツを設定するだけです。新しい値に変更できます。

<!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>

ログイン後にコピー

jQueryでテキストの内容を変更できますか?

2. val() を使用して、フォーム要素のテキスト内容を変更します。 input

val() メソッドの戻り値または選択した要素の値を設定します。要素の値は value 属性を介して設定されます。このメソッドは主に入力要素に使用されます。

val() を使用して、テキストの内容を変更する新しい値に設定するだけです。

<!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>

ログイン後にコピー

jQueryでテキストの内容を変更できますか?

拡張知識: html() と text() の比較

text() に加えて、 a html() 通常の要素のコンテンツを変更することもできます。

ただし、html() メソッドによって設定または返されるコンテンツは、テキストと 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>

ログイン後にコピー

jQueryでテキストの内容を変更できますか?