jQuery Veri vs bir Sorudur?

SORU

31 AĞUSTOS 2011, ÇARŞAMBA

jQuery Veri vs bir Sorudur?

data-someAttribute kullanırken $.data $.attr arasındaki kullanım farkı nedir?

Benim anlayış $.data jQuery içinde $.cache, DOM değil saklanır. Eğer veri depolama için $.cache kullanmak istiyorsanız, bu nedenle, $.data kullanmalıyım. Eğer HTML5 eklemek istiyorum eğer veri öznitelikleri $.attr("data-attribute", "myCoolValue") kullanmalıyım.

CEVAP

31 AĞUSTOS 2011, ÇARŞAMBA

Eğer sunucudan bir DOM öğesi için veri geçirmeden elemanı bu veri kümesi gerekir:

<a id="foo" data-foo="bar" href="#">foo!</a>

Bu veriler daha sonra bir WordPress kullanmak .data() kullanarak erişilebilir:

console.log( $('#foo').data('foo') );
//outputs "bar"

JQuery DOM düğüm üzerinde veri depolamak ancakkullanarakveri, değişken düğüm saklanırnesne. Bu düğümde veri depolama gibi karmaşık nesneleri ve başvuruları karşılamak içinelemannitelik olarak yalnızca dize değerleri ağırlayacak.

Yukarıda verdiğim örnek devam:

$('#foo').data('foo', 'baz');

console.log( $('#foo').attr('data-foo') );
//outputs "bar" as the attribute was never changed

console.log( $('#foo').data('foo') );
//outputs "baz" as the value has been updated on the object

Ayrıca, veri öznitelikleri için adlandırma gizli bir parça vardır"": . gotcha

HTML:

<a id="bar" data-foo-bar-baz="fizz-buzz" href="#">fizz buzz!</a>

JS:

console.log( $('#bar').data('fooBarBaz') );
//outputs "fizz-buzz" as hyphens are automatically camelCase'd

Hecelenmiş anahtar hala çalışır:

HTML:

<a id="bar" data-foo-bar-baz="fizz-buzz" href="#">fizz buzz!</a>

JS:

console.log( $('#bar').data('foo-bar-baz') );
//still outputs "fizz-buzz"

Ancak nesne .data() tarafından döndürülen hecelenmiş anahtar ayarlar değil:

$('#bar').data().fooBarBaz; //works
$('#bar').data()['fooBarBaz']; //works
$('#bar').data()['foo-bar-baz']; //does not work

Javascript hecelenmiş anahtar kaçınarak öneririm bu sebeple.

HTML için, hecelenmiş formunu kullanarak tutun. HTML attributes are supposed to get ASCII-lowercased automatically, <div data-foobar></div>, <DIV DATA-FOOBAR></DIV> <dIv DaTa-FoObAr></DiV>gerekiyoraynı gibi davranılması, ama iyi uyumluluk için küçük harf şeklinde tercih edilmelidir.

.data() yöntem de eğer değerini anladı desen eşleşirse otomatik döküm bazı temel gerçekleştirir:

HTML:

<a id="foo"
    href="#"
    data-str="bar"
    data-bool="true"
    data-num="15"
    data-json='{"fizz":["buzz"]}'>foo!</a>

JS:

$('#foo').data('str');  //`"bar"`
$('#foo').data('bool'); //`true`
$('#foo').data('num');  //`15`
$('#foo').data('json'); //`{fizz:['buzz']}`

Bu otomatik döküm yeteneği aletler ve eklentileri başlatmasını için çok uygun

$('.widget').each(function () {
    $(this).widget($(this).data());
    //-or-
    $(this).widget($(this).data('widget'));
});

Eğer kesinlikle bir dize olarak özgün değeri olmalı, o zaman .attr() kullanmanız gerekir:

HTML:

<a id="foo" href="#" data-color="ABC123"></a>
<a id="bar" href="#" data-color="654321"></a>

JS:

$('#foo').data('color').length; //6
$('#bar').data('color').length; //undefined, length isn't a property of numbers

$('#foo').attr('data-color').length; //6
$('#bar').attr('data-color').length; //6

Bu yapmacık bir örnek oldu. Saklanması için renk değerleri, kullanılan sayısal hex gösterimde (yani 0xABC123) ama belirtmekte fayda hex was parsed incorrectly in jQuery versions before 1.7.2 ve artık ayrıştırılmış bir Number jQuery 1.8 rc 1.

jQuery 1.8 1 rc otomatik döküm davranışları değişti. Önce Number geçerli bir temsili olduğunu herhangi bir biçimde 38* *dökme olacaktır. Şimdi, sayısal değerler, yalnızca onların temsil aynı kalır eğer otomatik atama. Bu iyi bir örnek ile gösterilmiştir.

HTML:

<a id="foo"
    href="#"
    data-int="1000"
    data-decimal="1000.00"
    data-scientific="1e3"
    data-hex="0x03e8">foo!</a>

JS:

                              // pre 1.8    post 1.8
$('#foo').data('int');        //    1000        1000
$('#foo').data('decimal');    //    1000   "1000.00"
$('#foo').data('scientific'); //    1000       "1e3"
$('#foo').data('hex');        //    1000     "0x03e8"

Eğer alternatif sözdizimi sayısal sayısal değerler erişim için kullanmayı planlıyorsanız, Number ilk, tekli bir operatör gibi değer atama emin olun.

JS (devam):