jQuery .data() und HTML5 data Attribute

Michael Kühnel

• Macht Internet seit Netscape 4.7

• Frontend Developer bei der SMA Solar Technology AG

• Twitter: @mkuehnel

• Website: www.michael-kuehnel.de

Was ist Query .data()?• .data() und .removeData() – seit jQuery 1.2.3

• hat nichts mit HTML5 zu tun

• Key-Value-Speicher an DOM Elementen

Nutzung kurz erklärt$('#elem').data( 'foo', 52 );

$('#elem').data( 'bar', { myType: 'test', count: 40 } );

$('#elem').data( 'foo' ); // 52$('#elem').data(); // { foo: 52, bar: { myType: 'test', count: 40 }, baz: [ 1, 2, 3 ] }

$('#elem').data( { baz: [ 1, 2, 3 ] } );

$('#elem').removeData('foo'); $('#elem').removeData();

Für was kann man das gebrauchen?

Nutzereingaben zwischenspeichern, Status von Elementen speichern, IDs aus Datenbanken … usw.

Was sind HTML5 data Attribute?

Custom Attribute in HTML-Markup (data-*)

<ul> <li data-foo="52">Element</li> <li data-foo-bar="{ myType: 'test', count: 40 }"> Element </li></ul>

Empfehlung: Hyphens wegen Namespacing (data-modulname-key).

Browsersupport

HTML-Markup:!

• Jeder Browser der den HTML5 Doctype versteht

Natives JavaScript:!

• Zugriff über element.dataset property ab IE11

• Zugriff über element.getAttribute ab IE5.5

Data Attribute und CSS Attribut Selektoren

Nur lowercase und Bindestriche verwenden

#element[data-fooBar="25"] { background-position: -16px 0; }

💩

#element[data-foo-bar="25"], #element[data-foobar="25"] { background-position: -16px 0; }

👍

jQuery 💖 HTML5 data-*Data Attribute lesen

<div id="element" data-foo-bar="25">Element</div>HTML-Markup:

var data = $('#element').data('fooBar');JavaScript:

Siehe: http://api.jquery.com/data/#data-html5

Datentypen-Konvertierung mit .data()

.data() »kennt« diese Datentypen: • booleans, strings, numbers, objects, arrays, null

<div id="element" data-foo-bar="25">Element</div>HTML-Markup:

// 25 -> string var data = $('#element').attr('data-foo-bar'); !// 25 -> number var data = $('#element').data('fooBar');

JavaScript:

Beachtenswert I.data() liest den Value des HTML5 data Attributes nur beim ersten Aufruf auf dem Element!

<div id="element" data-foo-bar="25">Element</div>HTML-Markup:

JavaScript:$('#element').data('fooBar'); // -> 25$('#element').attr('data-foo-bar', '50');$('#element').data('fooBar'); // -> 25

Lösung:!Entweder mit .attr() lesen oder mit .data() setzen.

Beachtenswert IIZu viel Magie?

HTML-Markup:<div data-tweet-id="4238802317582131"></div> <div data-tweet-id="423880231758213120"></div>

JavaScript:$('div').each(function() { console.log(typeof($(this).data('tweetId'))); }); // --> number // --> string // WTF?!?

Grund: Der Maximalwert einer JavaScript Zahl ist 253 – also 9007199254740992

Fragen?!Twitter: @mkuehnel E-Mail: mail@michael-kuehnel.de

💭

Links

• jQuery data im Browser sichtbar machen

• Chrome: https://chrome.google.com/webstore/detail/jquery-debugger/dbhhnnnpaeobfddmlalhnehgclcmjimi

• Firebug: http://firequery.binaryage.com/

Quellen• http://api.jquery.com/data/

• http://api.jquery.com/removeData/

• http://www.youtube.com/watch?v=9anCUpoiFVw&feature=youtu.be&t=19m46s

• http://www.learningjquery.com/2011/09/using-jquerys-data-apis/

• http://html5doctor.com/html5-custom-data-attributes/

• http://blog.jquery.com/2008/02/07/jquery-1-2-3-released/

• http://caniuse.com/#feat=dataset

• http://thinkco.de/jquery-data-considered-potentially-harmful/

• http://lookfirst.com/2011/12/dont-use-jquery-data-method-use-attr.html