Úvod do JQuery Selectors a ich t
Keď pracujete s jazykom JavaScript, často sa ocitnete v situácii, keď potrebujete nájsť a upraviť nejaký obsah na stránke. V týchto prípadoch budete musieť použiť selektorovú podporu v JQuery. JQuery uľahčuje vyhľadanie prvkov stránky na základe ich typov, hodnôt, atribútov atď. Tieto prvky sú založené na výbere CSS a keď už ste mali nejakú prax, zistíte, že nájdenie prvkov na stránkach je prechádzka. V závislosti od ich použitia môžeme klasifikovať rôzne typy selektorov JQuery do rôznych typov. Pozrime sa na niektoré z najpoužívanejších selektorov.
Použitie selektora
Nasleduje syntax selektora JQuery:
- $ (Volič) .Metóda ():
Ak potrebujete, môžete reťazce viacerých selektorov pridať medzi znaky „.“.
- $ (Volič) .method1 () Method2 () METÓDA 3 () ..;
Typy selektora v JQuery
Tu sú rôzne typy selektora v JQuery
1) Základné selektory JQuery
Prvky stránky môžeme vyberať pomocou ich ID, triedy alebo názvu značky. V prípade potreby sa môže použiť aj ich kombinácia. Nasleduje niekoľko základných selektorov:
- : header Selector - Toto je základný typ selektora, ktorý nám umožňuje nájsť prvky s ich hlavičkami HTML. Na tento účel použijeme podrobný selektor $ (“oddiel h1, oddiel h2, oddiel h3”) alebo môžeme použiť aj oveľa kratší selektor $ (“section: header”).
- : target Selector - tento selektor nájde ciele stránky alebo hash URI dokumentu. Napríklad, ak je URI na stránke „https://example.com/#test“. Potom volič $ („h2: target“) vyberie prvok
,
- : animated Selector - tento selektor sa používa na nájdenie všetkých prvkov, ktoré majú animáciu. Nezabúdajte, že ak chcete vybrať animáciu, musí byť spustená, keď je spustený selektor.
2) Selektory na základe indexu
JQuery má svoju vlastnú sadu selektorov založených na indexoch, ktoré využívajú nulové indexovanie. Uvádzame niekoľko príkladov:
- : eq (k) Selektor - tento selektor vráti element v indexe k. Podporuje aj záporné hodnoty indexu.
- : lt (k) Selektor - tento selektor vracia všetky prvky, ktoré majú index menší ako k. Rovnako ako vyššie, sú akceptované aj záporné hodnoty
- : gt (n) Selektor - tento selektor je podobný: lt (k) Selektor okrem toho, že pracuje pre hodnotu indexu väčšiu alebo rovnú k.
3) Výber dieťaťa
JQuery môžete použiť na výber detí ľubovoľného prvku na základe ich typu alebo indexu.
- : first-child - Tento selektor vráti všetky prvky, ktoré sú prvým dieťaťom ich rodičov.
- : first-of-type - Tento selektor JQuery sa používa na výber všetkých prvkov, ktoré sú prvými súrodencami
- : last-child - Ako už názov napovedá, tento selektor vyberie posledné dieťa rodiča.
- : last-of-type - Toto vyberie všetky deti, ktoré sú poslednými typmi svojho rodiča. Ak existuje viac ako jeden rodič, vyberie viac prvkov.
- : only-of-type - Pomocou selektora jediného typu nájdeme na stránke všetky prvky, ktoré majú súrodencov rovnakého typu.
- : only-child - V situáciách, keď potrebujete nájsť a vybrať prvky, ktoré sú jediným dieťaťom ich rodičov, môžete použiť tento selektor. Ak má rodič na stránke viac ako jedno dieťa, bude ignorovaná.
4) Výber atribútov
Prvky je možné vyberať na základe ich atribútov. Ďalej uvádzame niektoré bežné selektory atribútov:
- $ (“(Attribute | = 'valuehere')”) - “Atribút obsahuje selektor predpony” vyberie všetky prvky s atribútmi, ktorých hodnota sa rovná alebo začína daným reťazcom nasledovaným spojovníkom.
- $ (“(Attribute ~ = 'valuehere')”) - Vracia všetky prvky s atribútmi, ktorých hodnota obsahuje dané slovo oddelené medzerami.
- $ (“(Attribute * = 'valuehere')”) - vyberie prvky, v ktorých hodnota obsahuje dané podreťazce. Pokiaľ sa hodnota zhoduje, na polohe nezáleží
5) Výber obsahu
Ako už názov napovedá, tieto selektory JQuery sa používajú na vyhľadávanie a výber obsahu vo vnútri prvkov.
- : obsahuje (text) - Používa sa na výber prvkov, ktoré majú vo vnútri určený text. Pri používaní tohto selektora je potrebné pamätať na to, že pri tomto teste sa rozlišujú malé a veľké písmená.
- : has (selector) - Vráti sa s prvkami, ktoré majú vo vnútri aspoň jeden prvok, ktorý zodpovedá zadanému voliču. Napríklad $ (“section: has (h1)”) sa vráti so všetkými sekciami, ktoré majú element h1.
- : empty - Tento volič vráti prvky stránky, ktoré nemajú žiadne deti vrátane textových uzlov.
- : parent - tento selektor sa používa na výber všetkých prvkov webovej stránky, ktoré majú najmenej jeden podradený uzol. Môžete to považovať za inverziu k: empty JQuery Selector.
6) Hierarchické selektory
- $ („Potomok predka“) - Používa sa na výber všetkých potomkovských prvkov rodiča. Potomkom v našom prípade môže byť dieťa, vnučka a tak ďalej.
- $ („Rodič> dieťa“) - Používa sa v prípadoch, keď musíme vybrať iba priame dieťa konkrétneho rodiča.
- $ („Previous + next“) - V prípade, že musíme vybrať všetky prvky, ktoré sa zhodujú s výberom „next“ a ktoré majú nadradenú položku „previous“. K vybraným prvkom bude okamžite pristúpiť aj „predchádzajúci“, ktorým je súrodenec.
7) Selektory viditeľnosti
V JQuery sú tiež k dispozícii dva selektory: viditeľný a: skrytý. Tieto môžu byť použité na nájdenie viditeľných alebo skrytých prvkov na webovej stránke. Akýkoľvek prvok na webovej stránke sa považuje za skrytý, ak:
- Jeho displej je správne nastavený na žiadny.
- Jeho šírka a výška sú definované ako nula.
- V elemente formulára je uvedený typ = skrytý.
- Všetci predkovia prvku sú už skrytí.
Majte na pamäti, že aj keď má prvok nastavený nepriehľadnosť, bude sa stále považovať za viditeľný, pretože bude stále zaberať miesto.
8) Výber formulára
Aby sme ušetrili čas a starosti, JQuery má triediace verzie selektorov pre vstupné prvky webových formulárov.
Napríklad, zatiaľ čo $ (“button, input (type = 'button')”) bude fungovať pri výbere tlačidla na stránke, môžeme to urobiť rýchlo pomocou $ (“: button”).
Podobne môžeme pomocou tlačidla $ („: radio“) zvoliť prepínač.
Záver - Typy selektora v JQuery
Selektory sú jednou z dôležitých funkcií JQuery, výber na JavaScripte nie je tak intuitívny a robustný bit, s pridaním selektorov cez JQuery, programovanie pre web sa stalo ľahším.
Odporúčané články
Toto je sprievodca Typmi selektora v JQuery. Tu diskutujeme o rôznych typoch selektorov JQuery so syntaxou. Môžete sa tiež pozrieť na nasledujúce články, kde sa dozviete viac -
- jQuery metódy
- jQuery Alternatívy
- Použitie JQuery
- Čo dokáže Javascript?
- jQuery querySelector
- Sprievodca príkladmi JQuery Progress Bar