Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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...
Nächste SlideShare
Wird geladen in …5
×

jQuery .data() und HTML5 data Attribute

2.806 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

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

×