ITコラム

jquery data

jQuery

2018.10.25

jQuery【 data 】要素に紐付けてデータを設定・取得

jQuery の data メソッドを使用すると、指定した要素に紐付けて データを設定したり 取得したりすることができます。
今回は、jQuery の data メソッドの使い方について紹介します。

目次

1.data メソッド
2.data でデータの設定と取得

1.data メソッド

 
data メソッドは、引数によって 4 通りの記述方法があります。

$(セレクタ).data( );

$(セレクタ).data( key, value );

$(セレクタ).data( obj );

$(セレクタ).data( key );

data メソッドの引数の内容は、それぞれ以下の通りです。

.data( key, value )

key
要素に紐付ける値のキーとなる文字列を指定

value
要素に紐付ける値を指定
(javaScript の型の値を複数指定可能)

.data( obj )

obj
キーと値のペアのオブジェクトを指定

.data( key )

key
要素に紐付いているキーを指定
(データ取得時)

▲目次へ戻る

 

2.data でデータの設定と取得

 
data メソッドを使用して、要素に紐付けるデータの設定と取得を行います。
データのキーと値を入力して、設定ボタンをクリックしてみて下さい。

キー:

値 :

 

 
上のサンプルのソースコードは次の通りです。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
<!--
$(function() {
  $("#btn1").on("click", function() {

    var wk_key = $("#key1").val();
    var wk_dat = $("#dat1").val();

  // データを設定
    $("#div1").data(wk_key, wk_dat);

  // データを取得
    $("#spn1").text("【キー:" + wk_key 
      + "】【値:" + $("#div1").data(wk_key)
      + "】としてデータが設定されました。");
  });
});
//-->
</script>

<div id="div1" style="background-color : #CCC; padding : 20px;">
  <div style="display:inline-flex; align-items:center;">
    キー:<input type="text" id="key1">
  </div><br>
  <div style="display:inline-flex; align-items:center;">
    値 :<input type="text" id="dat1">
  </div><br>
  <input type="button" id="btn1" value="設定">
  <span id="spn1"> </span>
</div>

 

データの設定

「 $(“#div1″).data(wk_key, wk_dat); 」として、データの設定を行っています。
上のサンプルでは、id=”div1” の div 要素に紐付けて データを設定していますが、「 $(“body”).data(キー, 値); 」として body 要素に紐付けることもできます。

データの取得

データを取得する際には、キーを指定して値を取得します。
上のサンプルでは、「 $(“#div1”).data(wk_key) 」という記述がデータの取得にあたります。

▲目次へ戻る

SHARE

最新記事

IMG_004

卒業生インタビュー

2019.08.20

【卒業生の声:渡邉さん】宮城の大学とプログラマカレッジへ通学を両立!限られた時間を有効活用し、希望するWEB系の会社へ内定。

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 某WEB系会社 プログラマカレッジ卒業生の渡邉さんにお話しをお伺いしました! 目次 新卒採用の切符を捨て、アイデアを形にできる仕事を目指す 質問が […]

続きを見る

DSC_3661

卒業生インタビュー

2019.08.16

【卒業生の声:前田さん】大学中退の未経験エンジニアが4社から内定獲得!初めての就活を成功させた秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 株式会社リヴァンプ プログラマカレッジ卒業生のマエダさん(23歳)にお話しをお伺いしました! 目次 勉強に興味が持てなくて大学中退 就職できるか不 […]

続きを見る

DSC_0077

卒業生インタビュー

2019.08.08

【卒業生の声:オチアイさん】高校教師からプログラマーへ転身!最初の2ヶ月は理解に苦しむ日々。楽しめるまでに至った秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 プライムソリューションズ株式会社 プログラマカレッジ卒業生のオチアイさんにお話しをお伺いしました! 目次 大学院卒業後は高校教師に そこから思い切 […]

続きを見る

無料相談する

INTERNOUS,inc. All rights reserved.