简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

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

小云云
リリース： 2018-01-17 11:26:30
オリジナル
1890 人が閲覧しました

この記事では主に、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() と .data() の違い

jQuery の attr() と prop() の違い

jQuery .attr() と .要素の属性を操作するためのremoveAttr()メソッド example_jquery

以上がjQuery で値を取得するために attr()、prop()、val() を使用する場合の類似点と相違点の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
jquery prop
ソース：php.cn
前の記事：jQuery は、マウスを大きな画像上でスライドさせたときに大きな画像をプレビューする効果を実現します 次の記事：JavaScript の知識ポイントの最も完全な要約
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
Nuxt.js に jQuery をインストールする手順 プロジェクトに jQuery を追加しようとしましたが、定義されていないというエラーが表示されます。 plugins:[{src:'~/plugins/js/svgSprite.j...
から 2023-11-06 16:41:50
0
1
225
jQueryがデータ属性を取得するときに間違った値を取得する データ属性 <divclass='p1'data-location='1'></div> を持つ div があります。 $('button').click(...
から 2023-11-01 23:01:19
0
1
209
jQuery の Transfer-Encoding:chunked をサポート 私はウェブ開発者です。私のスクリプトでは、header() を使用して「Transfer-Encoding:chunked」を設定しています。そしてWebページにflush()を実...
から 2023-10-25 23:44:37
0
1
230
JavaScript または jQuery を使用して画像の自然な寸法を取得するにはどうすればよいですか? これまでのところ、私はこのコードを持っています: varimg=document.getElementById('draggable'); varwidth=img.clientW...
から 2023-10-21 13:53:08
0
2
275
テキストエリアを自動的に拡張する シンプルな自動拡張テキストエリアを作成しようとしています。これは私のコードです: textarea.onkeyup=function(){textarea.style.height...
から 2023-10-21 08:49:23
0
2
225
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！