Post on 13-Dec-2014
description
transcript
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
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