jqueryのvalueメソッドとは何ですか?-フロントエンドQ&A-php.cn

ホームページ

ウェブフロントエンド

フロントエンドQ&A

jqueryのvalueメソッドとは何ですか?

青灯夜游

May 17, 2022 pm 02:15 PM

jquery

値を取得する 5 つの方法: 1. "element object.text()" を使用して、指定された要素のテキストコンテンツを取得します。 2. "element object.html()" を使用して、次の内容を含むコンテンツを取得します。要素内のタグ; 3. "input box element.val()" を使用してユーザー入力コンテンツを取得します; 4. "element object.attr("属性名")" を使用して指定された属性の値を取得します。。

jqueryのvalueメソッドとは何ですか?

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

jqueryで値を取得する方法はたくさんありますが、以下で紹介していきます。

1. 要素のコンテンツ値を取得する 2 つのメソッド: text() または html()

text() メソッドは次のことができます。選択した要素のテキスト内容を返します。
html() メソッドは、選択した要素 (innerHTML) のコンテンツを返すことができます。

#例: text() を使用してテキストコンテンツを取得し、html() を使用してタグを含むコンテンツを取得します

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-3.2.1.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					console.log($("p").text());
					console.log($("p").html());
				});
			});
		</script>
	</head>
	<body>
		<button>获取p元素的内容</button>
		<p>这是一个<b>段落</b>。</p>
	</body>
</html>

jqueryのvalueメソッドとは何ですか?

# 2. 入力ボックスの入力値を取得します。

入力ボックスの入力値は、value 属性で制御されます。 val() メソッドを使用して直接取得することも、attr("value") メソッドを使用して取得することもできます。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-3.2.1.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					console.log($("input[type=text]").val());
					console.log($("input[type=password]").attr("value"));
				});
			});
		</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のvalueメソッドとは何ですか?

3. 要素の属性値の取得

要素の属性値は 2 つの方法で取得できます:

attr() メソッド
prop() メソッド

違い: true と false の 2 つの値があります。推奨されます。 prop() メソッドを使用して、checked、selected、disabled などのブール属性を操作しますが、他の属性は attr() メソッドを使用して操作することをお勧めします。

例 1: attr() を使用して共通属性の値を取得する

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-3.2.1.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					console.log($("input").attr("name"));
				});
			});
		</script>
	</head>
	<body>

		<button>获取name属性值</button>
		<p>用户名: <input type="text" name="user" value="李华" /></p>
	</body>
</html>

jqueryのvalueメソッドとは何ですか?

例 2: を使用します。 prop() ブール属性の値を取得します

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-3.2.1.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					console.log($("input").prop("disabled"));
				});
			});
		</script>
	</head>
	<body>

		<button>获取disabled属性值</button>
		<p>密　码: <input type="password" name="password" value="123456" disabled /></p>
	</body>
</html>

jqueryのvalueメソッドとは何ですか?