ホームページ >ウェブフロントエンド >フロントエンドQ&A >jqueryで要素に属性を設定する方法
jqueryで要素に属性を設定する方法
- 青灯夜游オリジナル
- 2022-03-10 18:42:117055ブラウズ
設定方法: 1. attr()メソッドを使用し、構文「$(selector).attr(属性名, 値)」または「$(selector).attr({属性名:値;})」を使用します。 ;2. prop() メソッドを使用します。構文は「$(selector).prop(プロパティ名, 値)」です。
このチュートリアルの動作環境: 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 () {
$('input[type="radio"]').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 に示します。
分析
$().change(function(){
……
})上記はjQueryのchangeイベントを表しており、JavaScriptのonchangeイベントと同じです。後ほど詳しく紹介します。 。
この例では、実際に $(this).attr("checked") を使用して、ラジオ ボタンが選択されているかどうかを判断したいと考えています。選択されている場合は、ラジオ ボタンの値を取得します。しかし、コードを実行した後、まったく効果がないことがわかりました。どうしてこれなの？
実際には、attr() メソッドを使用して form 要素の selected、selected、disabled 属性を取得することはできません。prop() メソッドを使用する必要があります。したがって、attr() メソッドを prop() メソッドに置き換えると機能します。
実際、prop() メソッドは、フォーム属性操作における attr() メソッドの欠点を補っているようです。次の一文を思い出してください。attr() メソッドを使用してプロパティを取得または設定できない場合は、prop() メソッドを変更することで実現できます。
[推奨学習: jQuery ビデオ チュートリアル 、Web フロントエンド ビデオ ]
以上がjqueryで要素に属性を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。