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

  関連記事

html5でドラッグ&ドロップの処理

ドラッグ&ドロップって昔から使われてたらしいけど、とりあえず知っておこうと思って …

no image
jQuery 簡易画像ビュアー

今回は画像ビュアーを作成してみました。相変わらず簡易ですけど。 目次1 クリック …

【jQuery】スライドコンテンツをjQueryのプラグインで作ってみた!!

以前、作成したjQueryの簡易画像ビュアーのコンテンツバージョンを作成しました …

【jQuery】親要素のさらに上の要素を選択したい

とある案件にて、ある要素の親要素のさらに親要素を選択したい時に普通に「paren …

html5のvideoで動画を再生してみた!!

動画を撮れるアプリでも・・て思った矢先に思いついたのがhtml5で追加されたvi …

IE6・7・8でもHTML5のvideoを利用できる方法とは!?

さて、html5のvideoタグを利用して動画を再生させるのは簡単なんですが、た …

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

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

no image
jQuery 簡易アコーディオン

jqueryで簡易アコーディオンを作成してみました。やり方は多々あると思うけども …

html5を学ぶに使用するにあたって

今後、html5を学ぶにあたって、下記のブログの導入するにあたり便利そうだったの …

【JavaScript】配列をシャッフルして要素をランダムに入れ替える方法

JavaScriptで配列をシャッフルしてその要素をランダムに表示させるにはどう …