jqueryで要素の複数の属性値を設定する方法-フロントエンドQ&A-php.cn

jqueryで要素の複数の属性値を設定する方法

青灯夜游

リリース： 2023-01-28 14:23:41

オリジナル

1963 人が閲覧しました

要素の複数の属性値を設定する Jquery メソッド: 1. attr() を使用して、構文 "$(selector).attr({属性名: 属性値; 属性値:属性値...}) "; 2. prop() を使用して設定します。構文は "$(selector).prop({プロパティ名:プロパティ値;プロパティ値:プロパティ値...})" です。

jqueryで要素の複数の属性値を設定する方法

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

jquery では、次の 2 つのメソッドを使用して要素の属性 (値) を設定できます:

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

どちらのメソッドも、要素に 1 つ以上の属性値を設定できます。

複数の属性値を設定する方法を見てみましょう。

方法 1. attr() を使用して複数の属性値を設定します。

attr() メソッドは、選択した要素の属性値を設定または返します。メソッドのパラメータに応じて、動作方法も異なります。

構文:

//多个属性
$(selector).attr({属性名:属性值;属性值:属性值...})

ログイン後にコピー

例: 画像の幅と高さのプロパティを設定します

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="js/jquery-3.6.3.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("button").click(function() {
					$("img").attr({
						width: "50",
						height: "80"
					});
				});
			});
		</script>
	</head>
	<body>
		<img  src="img/1.jpg"    style="max-width:90%" / alt="jqueryで要素の複数の属性値を設定する方法" >
		<br />
		<button>设置图像的 width 和 height 属性</button>
	</body>
</html>

ログイン後にコピー

jqueryで要素の複数の属性値を設定する方法

2。 prop () を使用して複数の属性値を設定します。

prop() メソッドは、選択した要素の属性と値を設定または返します。

このメソッドを使用して属性値を設定すると、一致する要素のセットに対して 1 つ以上の属性/値のペアが設定されます。

文法:

//多个属性
$(selector).prop({属性名:属性值;属性值:属性值...})

ログイン後にコピー

例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="js/jquery-3.6.3.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("button").click(function() {
					$("img").prop({
						width: "50",
						height: "80"
					});
				});
			});
		</script>
	</head>
	<body>
		<img  src="img/1.jpg"    style="max-width:90%" / alt="jqueryで要素の複数の属性値を設定する方法" >
		<br />
		<button>设置图像的 width 和 height 属性</button>
	</body>
</html>

ログイン後にコピー

jqueryで要素の複数の属性値を設定する方法

#拡張知識: attr() メソッドと prop() メソッド違い

prop() メソッドは attr() メソッドに似ており、どちらも要素の HTML 属性を取得または設定するために使用されますが、この 2 つには本質的な違いがあります。

jQuery 公式推奨:checked、selected、disabled など、true と false の 2 つの値を持つ属性については、prop() メソッドを使用して操作することを推奨し、その他の属性については、prop() メソッドを使用して操作することを推奨します。操作には attr() メソッドを使用することをお勧めします。

例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(function () {
            $(&#39;input[type="radio"]&#39;).change(function(){
                var bool = $(this).attr("checked");
                if(bool){
                    $("p").text("你选择的是：" + $(this).val());
                }
            })
        })
    </script>
	</head>
	<body>
		<div>
			<label><input type="radio" name="fruit" value="苹果" />苹果</label>
			<label><input type="radio" name="fruit" value="香蕉" />香蕉</label>
			<label><input type="radio" name="fruit" value="西瓜" />西瓜</label>
		</div>
		<p></p>
	</body>
</html>

ログイン後にコピー

プレビュー効果を図 1 に示します。

jqueryで要素の複数の属性値を設定する方法