InternetWeb design

Miért van szükség és hogyan kell felvenni JQuery-választó?

Modern web designer nem csak elsajátítani az alapokat a HTML, a CSS és a JavaScript, hanem képes dolgozni a jQuery könyvtár, melynek középpontjában a kölcsönhatás a JavaScript HTML-dokumentumokat. Ez lehetővé teszi a gyors hozzáférést biztosít bármely elemét DOM (application programming interface, amely hozzáférést biztosít a tartalomhoz html-fájlok) és manipulálja őket. A fő szerkezeti egységei a könyvtár a csapat. Annak érdekében, hogy egyik vagy a másik csapat, akkor kell egy JQuery-választó.

Formula szelektor jQuery könyvtár

A szelektor JQuery alapján használható CSS. Szükség van rájuk az elemek kiválasztásához HTML-fájlt, használja őket, hogy akadályozzák meg a vagy más módszerekkel manipulálja őket (a csapat). Keresés keresztül végezzük a választó $ () függvény. Például a $ ( 'div').

A szelektor sorolható attól függően, hogy a kiválasztott elemek:

  • alap;
  • attribútum szerint;
  • a hierarchia;
  • tartalom;
  • a helyzet;
  • választott forma mezők;
  • mások.

kulcsos kapcsoló

A 90% -ában, amikor ezt a könyvtárat használják JQuery-választó tartozó fő csoport. Mindegyikük egészen egyszerű és világos. Nézzük meg mindegyik:

  • * - kiválasztja az összes oldal elemet, beleértve a fej, test, stb.;
  • p / div / tálaló / ... - kiválasztja az összes vonatkozó elemeknek az előre meghatározott címkét (azaz p.div, tálaló, stb ...);
  • .myClass / p.myClass - kiválasztja az elemeket a megadott osztály nevét;
  • # MyID / p # sajatazonosito -. Kiválaszthat egy tétel az adott azonosítót.

Itt egy példa. Tegyük fel, hogy meg kell, hogy jelölje ki az összes elemet az oldalon par osztály bejegyzést az alábbiak lesznek: $ (par.). Szükség esetén csak p elemeit ebbe az osztályba, akkor írj: $ (p.par).

attribútum szelektor

Használhatja a JQuery fő-választó, ha szükségünk van egy elem kiválasztásához tartozó bármely osztálya, amelynek azonosítója, vagy jelölje ki az összes elemet az oldalon. Vannak azonban olyan esetek, amikor egy elem nem osztály vagy azonosítóját. Ez az, és van választás az attribútum. Ez lehetővé teszi, hogy a kiválasztás néhány tulajdonság a HTML-elemeket, mint például a href vagy src. Ez az attribútum van írva szögletes zárójelben [].

A legegyszerűbb példa: $ ([src]) - kiválasztja az összes elemet, amelyek src attribútum. Lehetőség van, hogy csökken a minta meghatároz bizonyos attribútum-érték: $ ([src = „http: // helyén / cikk / 132.222 / érték”]).

Akkor használhatja JQuery választókat, ha azt szeretné, hogy szűk területen a választás. Például, $ (p [color = blue] [size = 12]) - vannak kiválasztva csak azokat az elemeket p, amelyek a kék szín és 12-es méretű.

Szelektorok tartalom

Ebben az esetben, ha nem tudja kiválasztani elemek attribútum alapján vagy az alapvető szelektor, akkor olvassa el a tartalmát. Jelenleg összesen 4 választó ilyen típusú:

  • : Tartalmaz - kiválasztja elemek, amelyek a megadott szöveget;
  • : Has - kiválasztja elemek, amelyek más elemeket jellemző vonal;
  • : Szülő - kiválasztja elemek, amelyek bármely más;
  • : Üres - kiválasztja elemeket, amelyek nem tartalmaznak más.

Itt egy példa. Jelölje ki az összes elemet div, szövegét tartalmazó Hello, meg kell írni $ (div: tartalmaz ( „Hello”)).

Szelektorok hierarchia

Van egy másik módja annak, hogy válassza elemek JQuery, azaz - aszerint, hogy azok hierarchia (azaz az arány egymást a HTML-oldalon). Sokan közülük, így bemutatunk két legnépszerűbb, „gyermek” és a „leszármazottja”.

Az első esetben az elemek vannak kiválasztva, amelyek közvetlen leszármazottai (gyermek) egy adott elem (ős). Például válassza ki a lista elemei fényében osztály, amely a gyermek nav listán, akkor meg kell írni: $ (ul # nav> li.light).

A második esetben - egy általánosabb. Ott lehet kiválasztani és közvetett leszármazottai az elem. Például válassza ki a linkeket a listában nav felírni: $ (ul # nav a).

Így JQuery elemeket lehet kiválasztani különböző módokon paraméterek alkalmazása révén, mint például egy osztály, ID, attribútumok, tartalmat vagy hierarchiája HTML-dokumentum-elemek.

Similar articles

 

 

 

 

Trending Now

 

 

 

 

Newest

Copyright © 2018 hu.birmiss.com. Theme powered by WordPress.