Jqueryのattrとpropの違い

jquery の上位バージョンで prop メソッドが導入された後、いつ prop を使用する必要がありますか? attr をいつ使用するか?両者の違いは何でしょうか？こうした問題が生じます。以下の記事では、Jquery の attr と prop の違いに関する関連情報を中心に紹介します。必要な方はぜひ参考にしてください。

実践的なプロセス

少し前に、同僚がページを作成しました。その効果は次のとおりです

ページ

左上のチェックボックスをクリックすると、下のチェックボックスをすべて選択する必要があります。私たちのコードは次のようなものです

 $("input[name='checkbox']").attr("checked",true);

しかし、それはまったく効果がありませんでしたが、後でこれに変更されました、ok

 $(function(){
  $("#all").click(function(){
   if($("#all").prop("checked")){
    $("input[name='checkbox']").prop("checked",true);
   }else{
    $("input[name='checkbox']").prop("checked",false);
   }
  });
 });

そこで、attrとpropの違いを確認するために公式ドキュメントを確認したところ、できないことがわかりました。以下のように全く分かりません

そこで実験してみました

  c1:<input id="c1" name="checkbox" type="checkbox" checked="checked" /></br>
  c2:<input id="c2" name="checkbox" type="checkbox" checked=true/></br>
  c3:<input id="c3" name="checkbox" type="checkbox" checked=""/></br>
  c4:<input id="c4" name="checkbox" type="checkbox" checked/></br>
  c5:<input id="c5" name="checkbox" type="checkbox" /></br>
  c6:<input id="c6" name="checkbox" type="checkbox" checked=false/></br>

   var a1=$("#c1").attr("checked");
   var a2=$("#c2").attr("checked");
   var a3=$("#c3").attr("checked");
   var a4=$("#c4").attr("checked");
   var a5=$("#c5").attr("checked");
   var a6=$("#c6").attr("checked");

   var p1=$("#c1").prop("checked");
   var p2=$("#c2").prop("checked");
   var p3=$("#c3").prop("checked");
   var p4=$("#c4").prop("checked");
   var p5=$("#c5").prop("checked");
   var p6=$("#c6").prop("checked");

   console.log("a1:"+a1);
   console.log("a2:"+a2);
   console.log("a3:"+a3);
   console.log("a4:"+a4);
   console.log("a5:"+a5);
   console.log("a6:"+a6);

   console.log("p1:"+p1);
   console.log("p2:"+p2);
   console.log("p3:"+p3);
   console.log("p4:"+p4);
   console.log("p5:"+p5);
   console.log("p6:"+p6);

結果はこんな感じ(chrome)

効果

attr はチェックされているか未定義であり、prop の戻り値は true と false のみです。

インターネットでの検索とテストの後、

prop() 関数の結果が要約されます。

1. 対応する属性がある場合は、指定された属性値を返します。

2. 対応する属性がない場合、戻り値は空の​​文字列です。

attr() 関数の結果:

1. 対応する属性がある場合は、指定された属性値を返します。

2. 対応する属性がない場合、戻り値は不定になります。

HTML要素自体の固有属性については、処理時にpropメソッドを使用します。

HTML 要素の独自にカスタマイズされた DOM 属性については、処理時に attr メソッドを使用します。

チェック、選択、無効など、true と false の 2 つの属性を持つ属性には、prop() を使用します

関連推奨事項:

jQuery の .attr() と .data() の違い

JavaScript で getAttribute の使い方の紹介

jquery セレクター [attribute=value] に関する問題の解決策

以上がJqueryのattrとpropの違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。