ホームページ > 記事 > ウェブフロントエンド > jQuery で値を取得するために attr()、prop()、val() を使用する場合の類似点と相違点の詳細な説明

jQuery で値を取得するために attr()、prop()、val() を使用する場合の類似点と相違点の詳細な説明

小云云オリジナル: 2018-01-17 11:26:301941ブラウズ

この記事では主に、attr()、prop()、val() を使用して jQuery で値を取得する場合の類似点と相違点について詳しく説明します。編集者はこれがとても良いものだと思ったので、皆さんの参考として今から共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

jQuery には、要素の値を取得するのに似た 3 つの関数があります: attr()、prop()、val(); それらを比較してみましょう。

サンプルコード:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="jquery-2.1.4.js"></script>

</head>
<body>
<input type="text" value="123"/>
<button id="btn">click</button>
<script>

  $("#btn").click(function(){
    var attr=$("input").attr("value");
    var prop=$("input").prop("value");
    var val=$("input").val();
    console.log(attr);
    console.log(prop);
    console.log(val);
  })
</script>
</body>

コードは上に示したとおりです。入力ボックスには初期値: 123 が設定されています。このとき、ボタンをクリックすると、コンソール出力は次のようになります。

123
123
123

入力ボックスの値を変更します。この時点でコンソール出力は次のようになります:

123
123thgf
123thgf

テキストボックスの初期値を設定しない場合、つまり value= を削除した後123" で、引き続き上記の js コードを使用すると、対応する出力は次のようになります:

unknown

attr() 出力は未定義ですが、prop() と val() 出力は「空」です。

値を入力した後: コンソール出力は次のようになります:

undefined
asdasd
asdasd

attr() の出力はまだ未定義ですが、prop() と val() は実際の値を出力します。

prop() と val() の両方がテキストボックスの実際の値を取得できるのに対し、attr() は常にドキュメント構造内の value の属性値を取得しますが、これは実際のテキストボックスとは何の関係もないことがわかります。テキストボックスの値が変わります。

jQuery で値を取得するために attr()、prop()、val() を使用する場合の類似点と相違点の詳細な説明

関連記事