Veri. JQuery dünyasında, her şey doğrudan öğelere eklenen bilgi bitleri ile ilgilidir (örneğin, yalnızca kendisine yüklenen bir değişken yerine). "İstemci tarafında" (sunucu yerine tarayıcıda) veri bitlerini kaydetmenin bir çok yolu vardır. Her çeşit değişken vardır, çerezler, localStorage, indexDB ve diğer her şeyi kim bilir. Veriler, bu veriler özellikle belirli bir öğeyle alakalı olduğunda kullanılır.
Birçok jQuery yöntemi gibi, hem bir ayarlayıcıya (iki parametre) sahiptir:
$("#thing").data("name", "value");ve bir alıcı (bir parametre):
$("#thing").data("name"); // "value"Herhangi bir jQuery nesnesinde kullanabilirsiniz. Bu nesnede birden fazla öğe varsa, ayarlayıcı olarak kullandığınızda hepsi bu veri değerini alır. Bir alıcı olarak kullandığınızda bu nesnede birden fazla öğe varsa, ilk öğeyi kullanır.
Verileri düşünmenin bir yolu, öğenin bir tür ad alanı gibi olmasıdır. Birçok öğe aynı veri "adını" kullanabilir ancak farklı değerlere sahip olabilir.
Eski bir CSS-Tricks demosu olan Google Maps Slider'da gerçek dünyada kullanım durumu vardır. Bu demoda, bir yer listesi ve gömülü bir Google Haritası var. Konumların üzerine geldiğinizde, harita bu konumu merkeze alır. Bunu yapmak için, harita API'sinin koordinatlara ihtiyacı vardır. Söz konusu verilerin bu konumlar için HTML'de olması mantıklıdır, ancak bizim görmemize gerek yoktur. Bu data-*, HTML'deki nitelikler için mükemmel bir kullanım örneğidir (HTML5'te yeni). Bu konum listesindeki bir liste öğesi şu durumda şöyle olabilir:
O'Hare Airport
Flights n' stuff
About: Info about location…
data-*sadece söylemenin bir yolu data- anything . Yalnızca veri niteliklerini oluşturabilirsiniz. İstediğin herhangi bir şey. Bu durumda enlem için bir tane ve boylam için farklı bir tane oluşturduk. Bu liste öğesinde bir fare üzerine gelme olayı .data()tetiklendiğinde, bilgiyi alıp API ile kullanmak için basitçe jQuery alıcıyı kullanırız.
Şimdi verilere iki şekilde baktık; hem JavaScript'in kendisinden ayarlanmış hem de elde edilmiş veriler ve HTML'de başlayan ve JavaScript tarafından kullanılan veriler. Her ikisi de iyi ve API aynı. .data()Rel = "jQuery"> içindeki bilgiler için alıcı olarak kullanmayı düşünebilirsiniz >$("#thing").attr("rel"); // or any other attribute
İsterseniz bu şekilde de kullanabilirsiniz:
$("#thing").attr("data-geo-lat");.data()Alıcı sadece bir kısa yoldur. Ve seni doğru zihniyete sokması hoşuma gidiyor.
Ancak, .data()bir ayarlayıcı olarak kullanmanın aslında data-*HTML'deki özniteliği değiştirmediğine dikkat etmek önemlidir . Bu iyi bir varsayılandır çünkü DOM'u değiştirmemek daha hızlı olduğu anlamına gelir. HTML'deki niteliği kesinlikle değiştirmeniz gerekiyorsa, .attr()yöntemi ayarlayıcı olarak kullanın . Ayrıca, kullanmanız .attr()gerekmeyen “veri-” önekini eklemeniz gerektiğini unutmayın .data().
$("#thing").attr("data-name", "Chris");Uygulamanın diğer bölümlerinin erişime sahip olduğundan emin olmak için bunu yapmanız gerekebilir ya da CSS seçicileri yazmak gibi bir şey yapıyorsanız (örneğin (data-something="whatever") ( ))