Web.fla

主食は、html/css/php/javascript(jQuery) デザートはactionscript!WEBに関することをメモってくサイト

*

html5の独自データ属性を設定してjQueryで取得してみる

      2015/07/18

さて、最近はhtml5もすっかり浸透してきましたがhtml5では新しく独自のデータ属性を設定できるようになりました。まぁカスタムデータ属性とも呼ばれているようです。

これに伴って自分でこういったデータを設定したいなぁと思った時やそのカスタムデータ属性をjQueryのattrで取得したりと可能性はさらに広がってきます。今回はそんな独自おnデータ属性が設定する方法を書いていこうかと思っています。



html5の独自データ属性とは?

当たり前ですが、cssで設定するときにid属性だったりclass属性、画像ではalt属性など付けたりしますが、html要素に適切な属性が無かった時に、独自データを追加することができます。

主にWebページで固有の独自データを取得する際に使用することが多いと思います。最近ですとjqueryMobileなどに利用されていたりします。

独自データ属性のマークアップ

独自データ属性は、よくカスタムデータ属性とかdata属性なんて呼ぶこともあるんですが、マークアップとしては、「data-」以降に文字列を指定することで設定できます。

複数の独自データ属性の設定する方法

data属性には複数の値を設定することも可能です。

一つの独自データ属性に複数の値を設定する方法

複数の独自データ属性を上記の方法で設定することもできますが、関連する情報を一つの独自データ属性に設定したい場合も出てくることがあると思いますが、その設定方法。

jQueryから独自データ属性の値を取得する方法

jQueryからアクセスする方法として2通りあります。

data()で値を取得する

jQueryのdataメソッドを利用する場合は、data()の引数に「data-」以降の文字列を指定し、ハイフンを含む場合はハイフンを取って、次の文字を大文字にします。

attr()で値を取得する

jQueryのattrメソッドを利用する場合は、attr()の引数に通常のIDとかclass名を指定するように「data-」以降の文字列もすべて記述する。

data()とattr()での取得の違いとは?

data()を利用すると独自データ属性の値は文字列、数値、オブジェクト、配列に型変換されるようです。

逆にattr()を利用した場合は独自データの値は文字列として扱われるようなので、文字列を取得するならattr()を利用して数値など扱うようであれば、data()を利用するのが良さそうです。下記のサイトが詳しく書いてありました。

 - html5, jquery

     

Message

  関連記事

【jQuery】マウスの座標をjQueryを使って調べる方法!

マウスに追従するようなツールチップなどを作るときにマウスの座標ってどう取得するか …

html5のwebStorage(localStorage)でデータを保存する

さて最近、html5が当たり前になってきましたね♪それに伴って新しい機能が追加さ …

【jQuery】画像のロード画面でフェードイン

画像をロードする時のロード画面ってなにげに分からないなーと思い調べてメモ。 基本 …

【JavaScript】複数の画像の読み込みが完了した時のイベントを感知するには??

複数のイメージ画像を読みが完了した時のイベントを感知するにはどうしたらいいのだろ …

【jQuery】配列から最大値を求めて、div要素の高さを揃える

よく対象のdiv要素のCSSで「padding-bottom:1000px; m …

no image
jQuery フォームで特定の条件で選択不可にする

フォームを選択不可にして入力不可にするにはどうするかをメモ。 動作確認 inpu …

【javascript】マウスホイールで減速するイージングを試してみた

マウスホイールで減速するイージングを試してみた ちょっとjavascriptとj …

no image
jQuery で時間差でアニメーション

よくFlashでTween系のアニメーションでdelay効果で時間差で表示させる …

【jquery】$.postを利用してCSVを読み込む

jQueryの$.postを利用してCSVを読み込む案件がありそうだったので、今 …

【jQuery】クリックイベントを切り替える

例えば、AとBボタンがあってAボタンをクリックしたらBボタンをクリックできないよ …