Bevezetés a JQuery választókba és azok t
Amikor a JavaScript-rel dolgozik, gyakran olyan helyzetbe kerül, ahol meg kell találnia és módosítania kell az oldal egyes tartalmait. Ezekben az esetekben a JQuery programban választó támogatást kell használni. A JQuery meglehetősen egyszerűen megtalálja az oldal elemeit típusuk, értékek, attribútumok stb. Alapján. Ezek az elemek a CSS választóelemekre épülnek, és ha már gyakoroltak gyakorlati tapasztalatokat, látni fogod, hogy az elemek megtalálása az oldalakon egy gyalogút. Használatuktól függően a JQuery Selectors különféle típusait különféle kategóriákba sorolhatjuk. Vessen egy pillantást a leggyakrabban használt szelektorokra.
Kiválasztó használata
Az alábbiakban egy JQuery Selector szintaxisa látható:
- $ (Választó) .methodname ():
Ha szüksége van, akkor a több szelektor láncolatát „” betű hozzáadásával láncolhatja a módszerek között.
- $ (választó) .method1 (). method2 (). metódus 3 ();
A JQuery szelektor típusai
Itt található a JQuery választó típusa
1) Alapvető JQuery választók
Az oldal elemeit azonosítójuk, osztályuk vagy címkéjük alapján választhatjuk ki. Szükség esetén ezek kombinációja is használható. Az alábbiakban bemutatunk néhány alapvető választót:
- : header Selector - Ez egy alapvető választó típus, amely lehetővé teszi az elemek megtalálását a HTML fejlécükkel. Ehhez a szóbeli $ („h1. Szakasz, h2. Szakasz, h3. Szakasz”) választót vagy a sokkal rövidebb $ („szakasz: fejléc”) választót használjuk.
- : célválasztó - Ez a választó megtalálja a dokumentum URI oldalának vagy kivonatának célpontjait. Például, ha az oldal URI-je „https://example.com/#test”. Ezután a $ (“h2: target”) választó kiválasztja az elemet
.
- : animált választó - Ez a választó szeletelte az összes animációval rendelkező elem megtalálását. Ne feledje, hogy az animáció kiválasztásához a választó futtatásakor futnia kell.
2) Kiválasztók az Index alapján
A JQuery rendelkezik saját index-alapú választókészlettel, amely nulla alapú indexelést használ. Az alábbiakban bemutatunk néhány példát:
- : eq (k) választó - Ez a választó az elemet k indexben adja vissza. Támogatja a negatív index értékeket is.
- : lt (k) választó - Ez a választó minden elemet visszaad, amelynek indexe kisebb, mint k. A fentiekhez hasonlóan a negatív értékeket is elfogadják
- : gt (n) szelektor - Ez a szelektor similor: lt (k) szelektor, kivéve, ha k-nál nagyobb vagy azzal egyenértékű indexértékre működik.
3) Gyermekválasztók
A JQuery segítségével bármilyen elem gyermekeit kiválaszthatja típusuk vagy indexük alapján.
- : első gyermek - Ez a választó minden elemet visszaad, amely szüleik első gyermeke.
- : first-of-type - Ezt a JQuery választót az összes testvér elem kiválasztására használják
- : utolsó gyermek - ahogy a neve is sugallja, ez a választó kiválasztja a szülő utolsó gyermekét.
- : last-of-type - Ez kiválasztja az összes gyermeket, akik a szülőben az utóbbi típusúak. Ha egynél több szülő van, akkor több elemet választ ki.
- : Csak a típus - Az egyetlen típusú választóval felkutathatjuk az összes elemet, amelynek az azonos típusú testvérei vannak az oldalon.
- : csak gyermek - Olyan helyzetekben, amikor meg kell találnia és ki kell választania azokat az elemeket, amelyek szüleik egyetlen gyermeke, használhatja ezt a választógombot. Ha az oldalon egy szülőnek egynél több gyermeke van, akkor azt figyelmen kívül hagyják.
4) Attribútumválasztók
Az elemek az attribútumok alapján választhatók ki, az alábbiakban bemutatunk néhány általános attribútumválasztót:
- $ (“(Attribútum | = 'valuehere')”) - Az „attribútum tartalmaz előtagválasztót ” kiválaszt minden olyan attribútummal rendelkező elemet, ahol az érték megegyezik vagy az adott karakterlánccal kezdődik, amelyet kötőjelet követ.
- $ (“(~ = 'Valuehere' attribútum) '') - Visszatér minden olyan attribútummal rendelkező elemhez, ahol az érték egy szóközökkel elválasztott szót tartalmaz.
- $ (“(Attribútum * = 'valuehere')”) - Olyan elemeket fog kiválasztani, amelyekben az érték tartalmazza az adott alsávot. Mindaddig, amíg az érték megegyezik, a hely nem számít
5) Tartalomválasztók
Ahogy a neve is sugallja, ezeket a JQuery választókat az elemek belső tartalmának megkeresésére és kiválasztására használják.
- : tartalmaz (szöveget) - Ezt az elemet választják ki, amelyekben meghatározott szövegtartalom van. Ennek a szelektornak a használatakor egy dolgot kell szem előtt tartani, hogy itt a teszt kis- és nagybetűket érzékeny.
- : rendelkezik (választóval) - olyan elemekkel tér vissza, amelyeknek legalább egy eleme van benne, amely megegyezik a megadott választóval. Például a $ („szakasz: rendelkezik (h1)”) minden olyan szekcióval visszatér, amelyekben h1 elem van.
- : üres - Ez a választó az oldal azon elemeit adja vissza, amelyekben nincs gyermek, beleértve a szöveges csomópontokat is.
- : szülő - Ezt a választót a weboldal összes elemének kiválasztására használják, amelyek legalább egy alcsomópontot tartalmaznak. Fordítottnak tekintheti az: üres JQuery választót.
6) Hierarchiaválasztók
- $ („Őse leszármazottja”) - A szülő összes leszármazott elemének kiválasztására szolgál. A leszármazott esetünkben egy gyermek, unokája és így tovább.
- $ („Szülő> gyermek”) - Ezt az esetet használják, amikor csak az adott szülő közvetlen gyermekét kell kiválasztanunk.
- $ („Előző + következő”) - Abban az esetben, ha ki kell választanunk minden elemet, amely megfelel a „következő” választónak, és amelynek szülője „előző”. A kiválasztott elemeket az „előző”, azaz a testvér azonnal továbblépteti.
7) Láthatóság választók
Két választógomb: látható és rejtett szintén elérhető a JQuery-ben. Ezek felhasználhatók látható vagy rejtett elemek keresésére a weboldalon. A weboldal bármely elemét rejtettnek tekintik, ha:
- Megfelelően nincs kijelzője.
- Szélessége és magassága nulla.
- Type = rejtett formai elemben szerepel.
- Az elem ősei már rejtve vannak.
Ne feledje, hogy még ha az elem átlátszatlansága is nullára van állítva, akkor is láthatónak tekinthető, mivel az mégis helyet foglal el.
8) Űrlapválasztók
Az idő és a probléma megtakarítása érdekében a JQuery rendelkezik a webes űrlapok bemeneti elemeinek szelektorok szortírozott verzióival.
Például, míg a $ („gomb, bevitel (type = 'gomb')”) működni fog a gomb kiválasztásához az oldalon, a $ („: gomb”) segítségével gyorsan meg tudjuk csinálni.
Hasonlóképpen, a $ (“: radio”) segítségével választhatjuk ki a választógombot.
Következtetés - A szelektor típusai a JQuery-ben
A szelektorok a JQuery egyik legfontosabb tulajdonsága, a JavaScripten történő kiválasztás nem olyan intuitív és robusztus, ha a JQuery segítségével választóelemeket adunk hozzá, az interneten történő programozás egyszerűbbé vált.
Ajánlott cikkek
Ez egy útmutató a JQuery választó típusaihoz. Itt tárgyaljuk a JQuery Selectors különféle típusait a Szintaxissal. Lehet, hogy megnézi a következő cikkeket is, ha többet szeretne megtudni-
- jQuery Methods
- jQuery alternatívák
- A JQuery felhasználásai
- Mit tehet a Javascript?
- jQuery querySelector
- Útmutató a JQuery Progress Bar példákhoz