# 20: Adatok! adat-*! .adat()! .attr (adatok- *)! - CSS-trükkök

Anonim

Adat. A jQuery világában az információk bitjeiről van szó, amelyek közvetlenül az elemekhez vannak kötve (nem pedig egy olyan változó helyett, amelynek csak saját feladata van). Rengeteg mód van arra, hogy az „ügyfél oldalon” (a böngészőben, nem pedig a kiszolgálón) mentse el az adatokat. Bármilyen változók léteznek, cookie-k, localStorage, indexDB, és ki tudja, mi minden más. Az adatokat akkor használják, ha ezek az adatok kifejezetten relevánsak egy adott elem számára.

Mint sok jQuery módszerhez, mindkettő rendelkezik szetterrel (két paraméter):

$("#thing").data("name", "value");

és egy getter (egy paraméter):

$("#thing").data("name"); // "value"

Bármely jQuery objektumon használható. Ha több elem van az objektumban, akkor mindegyik megkapja ezt az adatértéket, amikor szetterként használja. Ha több elem van az objektumban, amikor getterként használja, akkor az első elemet fogja használni.

Az adatok gondolkodásának egyik módja az, hogy az elem olyan, mint egy névtér. Sok elem használhatja ugyanazt az adat „nevet”, de eltérő értékekkel rendelkezik.

Van egy valós használati eset egy régi CSS-Tricks bemutatóban, a Google Maps Sliderben. Ebben a bemutatóban megtalálható a helyek listája és a beágyazott Google Map. Amikor a helyek fölé viszi az egeret, a térkép a hely közepére mozog. Ehhez a térkép API-nak koordinátákra van szüksége. Van értelme, ha ezeket az adatokat a HTML-kódban tartalmazzák ezekre a helyekre, de nem kell látnunk őket. Ez tökéletes felhasználási eset a data-*HTML-ben található attribútumok számára (új a HTML5-ben). A helyek listájában szereplő listaelem ekkor lehet ilyen:


  • O'Hare Airport

    Flights n' stuff

    About: Info about location…

  • data-*csak egy módja annak, hogy elmondjuk data- anything . Csak összeállíthatja az adatattribútumokat. Amit csak akarsz. Ebben az esetben a földrajzi szélességre és a hosszúságra egy másikat alakítottunk ki. Amikor az egérrel lebegő esemény .data()elindul az adott listaelemen, akkor egyszerűen a jQuery getter segítségével rángatjuk le az információkat és használjuk az API-val.

    Tehát most kétféleképpen vizsgáltuk az adatokat: az adatokat, amelyeket egyszerre állítottak be, és amelyek a Java-ból származnak, valamint azokat az adatokat, amelyek a HTML-ből indulnak, és amelyeket a JavaScript használ. Mindkettő rendben van, és az API ugyanaz. Gondolhatja, hogy .data()a rel = "jQuery"> könyvtárban található információkat getterként használja$("#thing").attr("rel"); // or any other attribute

    Használhatja így is, ha úgy tetszik:

    $("#thing").attr("data-geo-lat");

    A .data()getter csak egy parancsikon. És nekem nagyon tetszik, mivel ez a helyes gondolkodásmódba visz.

    Fontos azonban megjegyezni, hogy .data()a szetterként való használat nem változtatja data-*meg a HTML attribútumát . Ez jó alapértelmezés, mert a DOM nem módosítása azt jelenti, hogy gyorsabb. Ha feltétlenül meg kell változtatnia az attribútumot a HTML-ben, használja a .attr()módszert beállítóként. Ne feledje, .attr()hogy használnia kell az „data-” előtagot, amelyet nem kell használnia .data().

    $("#thing").attr("data-name", "Chris");

    Lehet, hogy ezt meg kell tennie, így biztos lehet benne, hogy az alkalmazás más részeihez is van hozzáférés, vagy ha olyasmit csinál, mint például a CSS-választók írása (pl. (data-something="whatever") ( ))