Oldalelemek kiválasztása

Referenciaanyag a főbb programozási nyelvekről és az oldalak elrendezéséről.

Egy kész technika egyszerű és összetett dinamikus webhelyek létrehozására, PHP és MySQL használatával.

Webhelyek fejlesztése a "kulcs" alatt.

A webhelyek elkülönített töredékeinek fejlesztése, tanácsadás a weboldal elrendezésével és a webes programozással kapcsolatban.

Webalapú eszköz

webáruház

Webszolgáltatások

Webgrafika

Webes források

Oldalelemek kiválasztása







Szeretne lépést tartani a webhelyen zajló eseményekkel? Feliratkozás a legfrissebb hírek és cikkek fogadására.

Nézd meg a Google-t

Oldalelemek kiválasztása

Oldalelemek kiválasztása

A jQuery könyvtár hatékony eszközt kínál az elemek gyűjteményének kiválasztásához és a CSS szelektorok kiválasztásához. A CSS választó csak egy utasítás, amely megmutatja a böngészőnek, hogy melyik elem vonatkozik a stílusra.

A jQuery könyvtár használatával egy vagy több elemet kiválaszthat egy speciális jQuery objektum parancs segítségével.

Az alapvető szintaxis:

Gyakorlatilag minden CSS 2.1 gyűjtőt és sok CSS 3 kollektort használhat.

Vegyünk egy kis példát a jQuery használatára. Válassza ki az oldal egyik elemét a #banner CSS választóból, és nézze meg, mi történik.




Elemek kiválasztása azonosító szerint

A fő CSS gyűjtők. mint például a klasszikus és elemes indexerek a CSS magját alkotják.

Érdemes észrevenni, hogy a jQuery függvénynek átadott karakterláncnak megegyeznie kell a CSS választóazonosítóval. Mivel az azonosítónak egyedinek kell lennie, azt várjuk, hogy ennek eredményeképpen csak egy elem kerül vissza. Mostantól a jQuery linkre fog hivatkozni ehhez az elemhez.

Egy elem kiválasztásához az azonosító típusa szerint, a CSS szintaxis id attribútumában meg kell adnia az értékazonosítót választóként, ezt megelőzően a "rács" szimbólum (#).

A jQuery alapvető működésének teszteléséhez és tanulmányozásához hozzon létre egy fájlt az alábbi forráskóddal.


Kattints rám


Hello mindenkinek!


Egy másik bekezdés. de már az osztályban.


Ez a tartály SPAN.


Bekezdés azonosítóval
És ez a tartály SPAN belül van.



A hitelesítő adatok bevitelének formája




















Ez a fajta oldal megnyílik előttünk.

Oldalelemek kiválasztása

A vízszintes menüben válassza a "Console" lehetőséget.

A $ parancsgal ("# bar"); megtalálja az elemeket a #bar azonosítóval.

Oldalelemek kiválasztása






A kód beírása után nyomja meg az Enter billentyűt, és a következő eredmény jelenik meg:

Oldalelemek kiválasztása

A kapott eredmény azt jelzi, hogy a dokumentumunkban csak egy elem van a #bar azonosítóval. nevezetesen p.

Descriptors kiválasztása osztálynév szerint

Az azonosító típusához hasonlóan a leírásokhoz rendelt osztály vagy osztály szerint választhatunk elemeket. Ehhez meg kell adnia az osztály nevét egy periódusban (.) Mielőtt:

A .foo osztály összes elemét kiválaszthatja a következő paranccsal:

A konzol a következő eredményt jeleníti meg:

Oldalelemek kiválasztása

Elemek kiválasztása leíró típus szerint

Az elemek leíró típusú típusok kiválasztásához adja meg a leírók nevét választóként, például p, div, span:

Az összes bekezdés kiválasztásához

írja be a következő parancsot:

A konzol a következő eredményt jeleníti meg:

Tisztított választók kombinált szelektorokkal

Vannak esetek, amikor csak egy bizonyos típusú deszkriptort kíván kiválasztani egy adott osztályban. Ezt a választóban a leíró és az osztálytípus kombinációja végezheti el.

A következő parancsot adjuk be a konzolba, a mintákat csak az osztály foo-val választjuk ki.

Nem szabad helyet a fogantyú és az osztály kódja között.

Amint az alábbi eredményből látható, a span elemet nem választották ki, bár az osztály foo.

Csoportválasztók

Azokban az esetekben, amikor több elemcsoportot kell elérni, csoportkiválasztókat kell használni. Például, ha kiválaszthatja a foo osztály mintáit és az elemeket, amelyek # bar azonosítóval rendelkeznek, a következő parancsot használjuk:

Ez a parancs visszaadja azokat az elemeket, amelyek megfelelnek legalább az egyikben meghatározott szelektorkészleteknek.

Hierarchikus szelektorok

Néha az elemek, osztályok vagy azonosítók típusán alapuló DOM objektumok kiválasztása nem megfelelő. Különösen olyan elemekhez kell hozzáférnünk, amelyek egy adott elem belsejében vagy azzal szomszédosak, vagy a dokumentum egy másik helyén találhatóak. Ez a feladat például akkor fordul elő, ha törölni szeretne egy adott aktív osztályt az összes menüelemről, kivéve azt a címet, amelyre rákattintott, kivonja az összes listatagot a kiválasztott rendezetlen listáról, vagy megváltoztatja a csomagolóelem attribútumait, amikor kiválaszt egy űrlapot.

Gyermekelemek kiválasztása

A leszármazottak kiválasztása, i.e. az elemek, amelyek más elemekben vannak, az úgynevezett ősei, olyan design alkalmazásával valósulnak meg, amely magában foglal egy ősi választót, egy helyet és egy leszármazot:

Az összes span elem kiválasztása. amelyek a testelem leszármazottai. hajtsa végre a következő parancsot a konzolban:

Ez a parancs minden span elemet visszaad. a dokumentum testében található, bár a bekezdések leírása is beletartozik.

Gyermekelemek kiválasztása

A gyermekelem-választó az elemek pontosabb kiválasztását végzi a gyermekválasztóhoz képest. Csak azokat az elemeket választja ki, amelyek az ősi elemek (szülők) közvetlen leszármazottjai. A gyermek elem kiválasztásához egy olyan konstrukciót használunk, amely magában foglalja a szülőelem választóját, a "több" (>) szimbólumot és a gyermekelem (gyermek) választóját:

Próbáljuk meg kiválasztani a szöveges fájlban a span elemeket, amelyek a testelem közvetlen leszármazottai:

Mivel nincs egyetlen spsn elem? amely közvetlenül a testelemben található, a kimenet üres lesz.

Kiválasztjuk az összes span elemet, amelyek az elemek azonnali leszármazottjai:

A megfelelő következtetés a következő:

Válassza ki a következő elemet

Néha egy forgatókönyvben előfordulhat, hogy ki kell választania a következő elemet a DOM struktúrában. Ennek a választónak a megtervezése tartalmazza a kezdeti (itt bármely sablonválasztót), a pluszjelet (+) és a szelektort az alábbiak szerint definiált elem kijelölésével:

Ellenőrizzük, hogyan működik a következő parancs beírásával:

Mivel a mi dokumentumunkban csak egy elem van az osztályú foo-val, csak egy bekezdéselem fog visszatérni.

Ezután létrehozunk egy általánosabb lekérdezést, és kiválasztjuk azokat a bekezdéseket, amelyek mindegyike közvetlenül bármely bekezdés után következik:

A jelölőnk négy bekezdést tartalmaz, és mindegyikre - az utolsó kivételével - a következő bekezdés van, így az eredménykészlet három elemet tartalmaz:

Az ápolási elemek kiválasztása

Minden olyan elem, amely ugyanabban az elemben található (közös azonnali őse van) egymás testvérei. Az ápolási elemek kiválasztása ugyanúgy történik, mint a következő elemek kiválasztása, azzal a kivétellel, hogy ez a választó az összes kezdeti, és nem csak a következő, azaz a következő Az, amelyik azonnal követi az elsőt.

A testvér elemek kiválasztásához meg kell adni a kezdeti elem választóját, a "tilde" szimbólumot (

) és az ápolási elemek választója:

Ahhoz, hogy megtalálja az összes olyan elemet, amelyek testvérek a bekezdéshez az osztály foo-val, hajtsa végre a következő parancsot:

Az eredmény így lesz.

JQuery kiválasztók

Táblázat. Az alábbi táblázatban felsoroljuk a szelektorképek minden lehetséges felhasználását:




Kapcsolódó cikkek