jQuery の data メソッドを使用すると、指定した要素に紐付けて データを設定したり 取得したりすることができます。
今回は、jQuery の data メソッドの使い方について解説いたします。
なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3%で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。
data メソッドは、引数によって 4 通りの記述方法があります。
$(セレクタ).data( );
$(セレクタ).data( key, value );
$(セレクタ).data( obj );
$(セレクタ).data( key );
data メソッドの引数の内容は、それぞれ以下の通りです。
.data( key, value )
key |
---|
要素に紐付ける値のキーとなる文字列を指定 |
value |
要素に紐付ける値を指定 (javaScript の型の値を複数指定可能) |
.data( obj )
obj |
---|
キーと値のペアのオブジェクトを指定 |
.data( key )
key |
---|
要素に紐付いているキーを指定 (データ取得時) |
data メソッドを使用して、要素に紐付けるデータの設定と取得を行います。
データのキーと値を入力して、設定ボタンをクリックしてみて下さい。
上のサンプルのソースコードは次の通りです。
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function() {
$("#btn1").on("click", function() {
const wk_key = $("#key1").val();
const 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)
」という記述がデータの取得にあたります。
jQueryのdataメソッドについて、いかがでしたでしょうか。
「Webプログラマになりたいけど、独力では限界がある」と感じている方には、「プログラマカレッジ」がおすすめです。
「プログラマカレッジ」は本気でプログラマを目指す方のための、就職支援付き、受講料無料のプログラミングスクールです。
今回ご紹介した「jQuery」を含む豊富なカリキュラムで、IT初心者からWebプログラマとして就職するまで、プロが完全にサポートします。
本気でプログラマとして就職・転職したいという方は、一度のぞいてみてはいかがでしょうか。
INTERNOUS,inc. All rights reserved.