ホームページ >ウェブフロントエンド >フロントエンドQ&A >jqueryのvalueメソッドとは何ですか?

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

青灯夜游
青灯夜游オリジナル
2022-05-17 14:15:553334ブラウズ

値を取得する 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メソッドとは何ですか?

[推奨学習:

jQuery ビデオ チュートリアル Web フロントエンドビデオ###]## #

以上がjqueryのvalueメソッドとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。