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

jqueryで要素に属性を設定する方法

青灯夜游

リリース： 2022-03-10 18:42:11

オリジナル

7063 人が閲覧しました

設定方法: 1. attr()メソッドを使用し、構文「$(selector).attr(属性名, 値)」または「$(selector).attr({属性名:値;})」を使用します。 ;2. prop() メソッドを使用します。構文は「$(selector).prop(プロパティ名, 値)」です。

jqueryで要素に属性を設定する方法

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

jquery は属性を要素に設定します

1. attr() メソッドを使用します

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

構文:

//单个属性
$(selector).attr(属性名,值)

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

ログイン後にコピー

2. prop() メソッドを使用します

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

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

文法:

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

ログイン後にコピー

3. attr() メソッドと prop() メソッドの違い

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

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で要素に属性を設定する方法