Подаци. У свету јКуери-а ради се о битовима информација који су прикачени директно на елементе (уместо, рецимо, у променљиву која има само на себи). Постоји мноштво начина за чување битова података на „страни клијента“ (у прегледачу, а не на серверу). Постоје променљиве било које врсте, колачићи, лоцалСтораге, индекДБ и ко зна шта све још. Подаци се користе када су ти подаци посебно релевантни за одређени елемент.
Као и многе јКуери методе, и он има сеттер (два параметра):
$("#thing").data("name", "value");
и гетер (један параметар):
$("#thing").data("name"); // "value"
Можете га користити на било ком јКуери објекту. Ако у том објекту постоји више елемената, сви они добијају ту вредност података када га користите као постављач. Ако у том објекту постоји више елемената када га користите као гетер, користиће први елемент.
Један од начина за размишљање о подацима је да је елемент налик на простор имена. Много елемената може да користи исто „име“ података, али имају различите вредности.
У старом демо ЦСС-Трицкс, Гоогле Мапс Слидер, постоји случај употребе из стварног света. У тој демонстрацији налази се листа локација и уграђена Гоогле карта. Док лебдите изнад локација, мапа се центрира на ту локацију. Да би то урадио, АПИ-ју мапе требају координате. Има смисла имати те податке у ХТМЛ-у за те локације, али не морамо их видети. То је савршен случај употребе data-*
атрибута у ХТМЛ-у (ново у ХТМЛ5). Ставка листе на тој листи локација тада може бити оваква:
O'Hare Airport
Flights n' stuff
About: Info about location…
data-*
је само начин да се каже data- anything
. Можете само израдити атрибуте података. Шта год пожелиш. У овом случају надокнадили смо једну за географску ширину и другу за географску дужину. Када се догађај лебдења миша активира на тој ставци листе, ми једноставно користимо јКуери геттер фор .data()
да бисмо истргнули информације и користили их са АПИ-јем.
Дакле, податке смо гледали на два начина, податке који су постављени и добијени из самог ЈаваСцрипт-а, и подаци који почињу у ХТМЛ-у и које користи ЈаваСцрипт. И једно и друго је у реду, а АПИ је исти. Можда бисте помислили да користите .data()
као гетер за информације у рел = "јКуери">$("#thing").attr("rel"); // or any other attribute
Можете га користити и на тај начин ако желите:
$("#thing").attr("data-geo-lat");
.data()
Геттер је само пречица. И некако ми се свиђа, јер вас доводи у прави начин размишљања.
Међутим, важно је напоменути да употреба .data()
као постављача заправо не мења data-*
атрибут у ХТМЛ-у . То је добро по дефаулту, јер ако не промените ДОМ, то значи да је бржи. Ако апсолутно требате променити атрибут у ХТМЛ-у, користите .attr()
метод као постављач. Такође имајте на уму да .attr()
приликом употребе морате да укључите префикс „дата-“ који вам није потребан .data()
.
$("#thing").attr("data-name", "Chris");
Можда ћете то морати да урадите како бисте били сигурни да други делови апликације имају приступ или ако радите нешто попут писања ЦСС селектора пре њих (нпр. (data-something="whatever") ( )
)