ホームページ >ウェブフロントエンド >フロントエンドQ&A >jqueryで要素の複数の属性値を設定する方法
要素の複数の属性値を設定する Jquery メソッド: 1. attr() を使用して、構文 "$(selector).attr({属性名: 属性値; 属性値:属性値...}) "; 2. prop() を使用して設定します。構文は "$(selector).prop({プロパティ名:プロパティ値;プロパティ値:プロパティ値...})" です。
このチュートリアルの動作環境: 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>
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>
#拡張知識: 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 () { $('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 サイトの他の関連記事を参照してください。