jquery はチェックボックスのチェック状態を判断し、attr と prop_jquery を区別します。-jsチュートリアル-php.cn

jquery はチェックボックスのチェック状態を判断し、attr と prop_jquery を区別します。

WBOY

リリース： 2016-05-16 15:25:00

オリジナル

1952 人が閲覧しました

最近のプロジェクトでは、入力のチェックボックスが選択されているかどうかを判断するために jquery を使用する必要がありましたが、attr() を使用してもチェックボックスの変更された状態を取得できないことがわかりました。 jQuery 1.6 では、公式から借用した prop() メソッドが追加されました。その説明は次のとおりです:

jQuery 1.6 より前では、.attr() メソッドは一部の属性を取得するときにプロパティ値を考慮することがあり、これにより一貫性のない動作が発生する可能性がありました。 jQuery 1.6 では、.prop() メソッドはプロパティ値を明示的に取得する方法を提供し、.attr() は属性を取得します。
上記の翻訳はおそらく次のようになります: prop() は多くのネイティブプロパティを含むノードオブジェクトからの属性を処理し、attr() はオブジェクトの属性から取得します。要素ノードに属性を追加します。ノードのみが存在します。もちろん、上記の翻訳は私自身の見解を示しているだけです。間違いがあれば、ご指摘ください~~

。

簡単に言うと:

HTML要素自体の固有属性については、処理時にpropメソッドを使用します。
HTML 要素の独自のカスタム DOM 属性の場合、処理時に attr メソッドを使用します。
上記の説明は少し曖昧かもしれませんが、専門家のブログの内容を引用し、私のテストを追加していくつかの例を示します。

最初の例: 要素の固有属性とカスタム属性の説明

http://www.baidu.com" target="_self" class="btn">Baidu
この例では、要素の DOM 属性には「href、target、class」が含まれます。これらの属性は、W3C 標準にも含まれています。つまり、IDE でインテリジェントにプロンプトを表示できるプロパティは、組み込みプロパティと呼ばれます。これらのプロパティを扱う場合は、prop メソッドを使用することをお勧めします。

削除
この例では、要素の DOM 属性には「href、id、action」が含まれていますが、最初の 2 つは固有の属性ですが、要素はカスタマイズされています。それ自体にはこの属性はありません。これはカスタム DOM 属性です。これらの属性を扱う場合は、attr メソッドを使用することをお勧めします。 prop メソッドを使用して値を取得し、プロパティ値を設定すると、未定義の値が返されます。

2 番目の例: フォームアプリケーションの prop() と attr() の違い

まず、attr() メソッドを使用したコードを見てみましょう。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title> attr() vs prop()</title>
 </head>
 <body>
  <h3>用attr（）判断是否选中</h3>
  <input type="checkbox" id="input01" />我是第一个复选框A<br />
  <input type="checkbox" id="input02" checked="checked"/>我是第二个复选框B<br />
  <input type="button" id="button01" value="获取A的checked状态" />
  <input type="button" id="button02" value="获取B的checked状态" />
  <script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
   $(function(){
    $("#button01").click(function(){
     var $state01=$("#input01").attr("checked");
     alert($state01);
    })
    $("#button02").click(function(){
     var $state02=$("#input02").attr("checked");
     alert($state02);
    })
   })
  </script>
 </body>
</html>

ログイン後にコピー

上記のプログラムのテスト結果は次のとおりです:

動的ダイアグラムからわかるように、attr() を使用すると、ユーザーの選択状態を取得することはできず、フォームの初期値が返されるだけです。

prop() メソッドを使用したコードを見てみましょう:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title> attr() vs prop()</title>
 </head>
 <body>
  <h3>用prop（）判断是否选中</h3>
  <input type="checkbox" id="input01" />我是第一个复选框A<br />
  <input type="checkbox" id="input02" checked="checked"/>我是第二个复选框B<br />
  <input type="button" id="button01" value="获取A的checked状态" />
  <input type="button" id="button02" value="获取B的checked状态" />
  <script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
   $(function(){
    $("#button01").click(function(){
     var $state01=$("#input01").prop("checked");
     alert($state01);
    })
    $("#button02").click(function(){
     var $state02=$("#input02").prop("checked");
     alert($state02);
    })
   })
  </script>
 </body>
</html>

ログイン後にコピー

上記のプログラムのテスト結果は次のとおりです: