3 yanıt
  1. 5
    Sancar Acunal
    ~ · 5 ay önce

    Konuyla ilgili büyük bir yanlış anlaşılma var. data() metodunun attr()'dan en büyük farklı DOM'u manipüle etmiyor olmasıdır. attr()'la yaptığınız işlemlerde ögenin HTML yapısı değişirken data() bu yapıyı değiştirmemektedir, bunun yerine ögeyi temsil eden jQuery nesnesinde değişiklikler olmaktadır. Bunu test etmek için şu adımları izleyin:

    F12'ye basıp konsolu açın

    $('body').attr('data-deneme', 1); // body etiketine data-deneme adına bir özellik ekleyip değerini 1 olarak belirliyoruz
    $('body').attr('data-deneme'); // bilgiyi çekelim ve başarılı oldu mu görelim. (konsolda 1 şeklinde çıktı oluşmalı)
    $('body').data('deneme', 100); // bu kez data() ile özelliği değiştirmeye çalışalım
    $('body').attr('data-deneme'); // bilgiyi çekelim ve başarı oldu mu görelim. (konsolda 100 yerine hala 1 çıktısı oluşmalı)
    $('body').data('deneme'); // bir de data() ile bilgiyi çekelim. (bu sefer konsolda 100 çıktısını görüyoruz)
    

    Tüm bunlar ne demek oluyor?

    Bu işlemlerden sonra sayfanın HTML yapısına göz atarsanız <body data-deneme="1"> şeklinde bir yapı göreceksiniz. Yani data() metodu gerçekte data-deneme özelliğini değiştirmedi. Yalnızca jQuery objesi içerisinde "deneme" adında bir değeri değiştirdi.

    Yapılan işlemlerden sonra body ögesinin jQuery nesnesi şu şekilde görünüyor:

    ryggbmrwxnc7dmthuvty

    Görüldüğü gibi HTML ögesini temsil eden jQuery objesinde attributes içerisinde data-deneme'nin değeri hala 1. Aşağıda ise data() ile yapılan işlemlerde değişen değeri görüyoruz. Bu HTML yapısından tamamen farklı bir yerde saklanıyor.

    Yeri gelmişken bir küçük ayrıntıyı daha aktarmak yerinde olur. data('deneme') ile veri çekerken, jQuery ilk önce HTML ögesini temsil eden jQuery objesi içerisinde daha önce oluşturulmuş 'deneme' adlı bir değer arıyor. Eğer bunu bulamazsa data-deneme özelliğine bakıyor ve getiriyor. Bu yüzden attr() ile data()'nın aynı özellik için kullanılması hatalara yol açabilir.

    data() metodunun json ögelerini doğrudan decode ederek çektiğini de belirtelim.

    1. 0

      Hmm biz toptan yanılmışız :D karışıkmış

  2. 2
    Ertunç Tarcan
    Front-end Developer / Freelancer · 5 ay önce

    attr() daha çok genel geçer html özellikleri için kullanılıyor. data() sayesinde data-* önekiyle birlikte daha nezih şekilde işlem yapabiliyoruz. Şurada bir arkadaş örneğini paylaşmış mesela http://codepen.io/anon/pen/LpNoxG