jQuery .data()
und HTML5 data Attribute
Michael Kühnel
•

Macht Internet seit Netscape 4.7

•

Frontend Developer bei der SMA Solar Technology
AG

•

Twitter: @mk...
Was ist Query .data()?
•

.data() und .removeData() – seit jQuery 1.2.3

•

hat nichts mit HTML5 zu tun

•

Key-Value-Spei...
Nutzung kurz erklärt
$('#elem').data( 'foo', 52 );
$('#elem').data( 'bar', { myType: 'test', count: 40 } );
$('#elem').dat...
Für was kann man das
gebrauchen?
Nutzereingaben zwischenspeichern, Status von
Elementen speichern, IDs aus Datenbanken … u...
Was sind HTML5 data
Attribute?
Custom Attribute in HTML-Markup (data-*)
<ul>
<li data-foo="52">Element</li>
<li data-foo-b...
Browsersupport
HTML-Markup:!
•

Jeder Browser der den HTML5 Doctype versteht


Natives JavaScript:!
•

Zugriff über elemen...
Data Attribute und CSS Attribut
Selektoren
Nur lowercase und Bindestriche verwenden
#element[data-fooBar="25"] {
backgroun...
jQuery 💖 HTML5 data-*
Data Attribute lesen
HTML-Markup:
<div id="element" data-foo-bar="25">Element</div>

JavaScript:
var...
Datentypen-Konvertierung
mit .data()
HTML-Markup:
<div id="element" data-foo-bar="25">Element</div>
JavaScript:
// 25 -> s...
Beachtenswert I
.data() liest den Value des HTML5 data Attributes nur
beim ersten Aufruf auf dem Element!
HTML-Markup:
<di...
Beachtenswert II
Zu viel Magie?
HTML-Markup:
<div data-tweet-id="4238802317582131"></div>
<div data-tweet-id="423880231758...
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/
db...
Quellen
•

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

•

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

•

http://www.youtube.com/watch?v=9anCUpoiFV...
Upcoming SlideShare
Loading in …5
×

jQuery .data() und HTML5 data Attribute

2,560 views

Published on

Präsentiert auf dem zweiten Kasseler Webmontag: http://webmontag.de/location/kassel/2014-01-20

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,560
On SlideShare
0
From Embeds
0
Number of Embeds
20
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

jQuery .data() und HTML5 data Attribute

  1. 1. jQuery .data() und HTML5 data Attribute
  2. 2. Michael Kühnel • Macht Internet seit Netscape 4.7 • Frontend Developer bei der SMA Solar Technology AG • Twitter: @mkuehnel • Website: www.michael-kuehnel.de
  3. 3. Was ist Query .data()? • .data() und .removeData() – seit jQuery 1.2.3 • hat nichts mit HTML5 zu tun • Key-Value-Speicher an DOM Elementen
  4. 4. Nutzung kurz erklärt $('#elem').data( 'foo', 52 ); $('#elem').data( 'bar', { myType: 'test', count: 40 } ); $('#elem').data( { baz: [ 1, 2, 3 ] } ); $('#elem').data( 'foo' ); // 52 $('#elem').data(); // { foo: 52, bar: { myType: 'test', count: 40 }, baz: [ 1, 2, 3 ] } $('#elem').removeData('foo'); $('#elem').removeData();
  5. 5. Für was kann man das gebrauchen? Nutzereingaben zwischenspeichern, Status von Elementen speichern, IDs aus Datenbanken … usw.
  6. 6. 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 (datamodulname-key).
  7. 7. 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
  8. 8. 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; } 👍
  9. 9. jQuery 💖 HTML5 data-* Data Attribute lesen HTML-Markup: <div id="element" data-foo-bar="25">Element</div> JavaScript: var data = $('#element').data('fooBar'); Siehe: http://api.jquery.com/data/#data-html5
  10. 10. Datentypen-Konvertierung mit .data() HTML-Markup: <div id="element" data-foo-bar="25">Element</div> JavaScript: // 25 -> string var data = $('#element').attr('data-foo-bar'); ! // 25 -> number var data = $('#element').data('fooBar'); .data() »kennt« diese Datentypen: • booleans, strings, numbers, objects, arrays, null
  11. 11. Beachtenswert I .data() liest den Value des HTML5 data Attributes nur beim ersten Aufruf auf dem Element! HTML-Markup: <div id="element" data-foo-bar="25">Element</div> 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.
  12. 12. Beachtenswert II Zu 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
  13. 13. Fragen?! 💭 Twitter: @mkuehnel E-Mail: mail@michael-kuehnel.de
  14. 14. Links • jQuery data im Browser sichtbar machen • Chrome: https://chrome.google.com/webstore/ detail/jquery-debugger/ dbhhnnnpaeobfddmlalhnehgclcmjimi • Firebug: http://firequery.binaryage.com/
  15. 15. 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

×