# 20: Подаци! подаци- *! .дата ()! .аттр (подаци- *)! -. - ЦСС-трикови

Anonim

Подаци. У свету јКуери-а ради се о битовима информација који су прикачени директно на елементе (уместо, рецимо, у променљиву која има само на себи). Постоји мноштво начина за чување битова података на „страни клијента“ (у прегледачу, а не на серверу). Постоје променљиве било које врсте, колачићи, лоцалСтораге, индекДБ и ко зна шта све још. Подаци се користе када су ти подаци посебно релевантни за одређени елемент.

Као и многе јКуери методе, и он има сеттер (два параметра):

$("#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") ( ))