jQuery Verileri vs Attr?

Kullanırken $.datave $.attrkullanırken kullanım arasındaki fark nedir data-someAttribute?

Benim anlayış DOM değil $.datajQuery içinde saklanır olduğunu $.cache. Bu nedenle, $.cacheveri depolama için kullanmak istersem kullanmalıyım $.data. HTML5 veri öznitelikleri eklemek istersem kullanmalıyım $.attr("data-attribute", "myCoolValue").

Verileri sunucudan bir DOM öğesine iletiyorsanız, öğe üzerindeki verileri ayarlamanız gerekir:

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

Verilere daha sonra .data()jQuery'de erişilebilir :

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

Ancak verileri kullanarak jQuery'de bir DOM düğümünde depoladığınızda, değişkenler düğüm nesnesinde depolanır . Bu, karmaşık nesnelerin ve referansların, düğüm öğesinde bir öznitelik olarak depolanmasının yalnızca dize değerlerini içereceğinden uyum sağlamaktır.

$('#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 özellikleri için adlandırma kuralında gizli bir "gotcha" vardır:

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

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

Tireli anahtar yine de çalışır:

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

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

Ancak, döndürülen nesnede .data()tireli anahtar ayarlanmaz:

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

Bu nedenle javascriptte tireli anahtardan kaçınmanızı öneririm.

HTML için tireli formu kullanmaya devam edin. HTML özellikleri ASCII küçük harfli otomatik almak gerekiyordu , bu yüzden <div data-foobar></div>, <DIV DATA-FOOBAR></DIV>ve <dIv DaTa-FoObAr></DiV>vardır sözde özdeş olarak kabul edilecek, ancak en iyi uyumluluk için küçük harf formu tercih edilmelidir.

.data()Değeri tanınmış model eşleşirse yöntem, aynı zamanda bazı temel otomatik döküm gerçekleştirecektir:

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

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

Bu otomatik döküm özelliği, widget'ları ve eklentileri örneklemek için çok uygundur:

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

Dize olarak orijinal değere kesinlikle sahip olmanız gerekiyorsa, şunları kullanmanız gerekir .attr():

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

$('#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 tartışmalı bir örnekti. Renk değerlerini saklamak için sayısal onaltılı gösterim (yani 0xABC123) kullandım, ancak hex'in 1.7.2'den önceki jQuery sürümlerinde yanlış ayrıştırıldığını ve artık NumberjQuery 1.8 rc 1'den itibaren ayrıştırılmadığını belirtmek gerekir .}

jQuery 1.8 rc 1 otomatik döküm davranışını değiştirdi . Önce, bir geçerli bir temsili oldu herhangi bir biçimde Numberdönüştürülürdü Number. Şimdi, sayısal değerler yalnızca gösterimleri aynı kalırsa otomatik olarak yayınlanır. Bu en iyi şekilde bir örnekle gösterilmiştir.

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

                              // 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"

Sayısal değerlere erişmek için alternatif sayısal sözdizimleri kullanmayı planlıyorsanız, değeri Numbertekli bir +işleç gibi bir ilke verdiğinizden emin olun .

+$('#foo').data('hex'); // 1000

İkisi arasındaki temel fark, nerede depolandığı ve nasıl erişildiği.

$.fn.attr bilgileri doğrudan inceleme üzerine halka açık olarak görülebilen ve ayrıca öğenin doğal API'sından edinilebilen özelliklerde saklar.

$.fn.databilgileri gülünç derecede belirsiz bir yerde saklar . Yerel data_userolarak tanımlanmış işlev Verisinin bir örneği olarak adlandırılan kapalı bir yerel değişkente bulunur . Bu değişkene doğrudan jQuery dışından erişilemez.

İle veri kümesi attr()

• erişilebilir $(element).attr('data-name')
• erişilebilir element.getAttribute('data-name'),
• değeri biçiminde ise data-namede erişilebilen $(element).data(name)ve element.dataset['name']veelement.dataset.name
• inceleme sırasında eleman üzerinde görünür
• nesne olamaz

İle veri kümesi .data()

• sadece şuradan erişilebilir.data(name)
• .attr()başka bir yerden veya başka bir yerden erişilemez
• inceleme sonrasında elemanda herkes tarafından görülemez
• nesne olabilir

data-*Özel verileri gömmek için özniteliği kullanabilirsiniz . data-*Özellikler tüm özelliklerini HTML öğelerinde bize embed özel verileri olanağı verir.

jQuery .data()yöntemi, dairesel referanslardan ve dolayısıyla bellek sızıntılarından güvenli olacak şekilde herhangi bir türdeki verileri DOM öğelerine almanızı / ayarlamanızı sağlar.

jQuery .attr()yöntemi yalnızca eşleşen kümedeki ilk öğe için öznitelik değerini alır / ayarlar.

Misal:

<span id="test" title="foo" data-kind="primary">foo</span>

$("#test").attr("title");
$("#test").attr("data-kind");
$("#test").data("kind");
$("#test").data("value", "bar");