Typy selektorů v JQuery - Naučte se různé typy selektorů JQuery

Obsah:

Anonim

Úvod do JQuery Selectors a jejich t

Když pracujete s JavaScriptem, často se ocitnete v situaci, kdy potřebujete najít a upravit nějaký obsah na stránce. V těchto případech budete muset použít selektorovou podporu v JQuery. JQuery usnadňuje vyhledání prvků stránky na základě jejich typů, hodnot, atributů atd. Tyto prvky jsou založeny na selektorech CSS a jakmile budete mít nějakou praxi, uvidíte, že hledání prvků na stránkách je procházka. V závislosti na jejich použití můžeme klasifikovat různé typy JQuery Selectors do různých typů. Pojďme se podívat na některé z nejvíce používaných selektorů.

Použití selektoru

Následuje syntaxe selektoru JQuery:

  • $ (Selector) .methodname ():

Pokud potřebujete, můžete zřetězit více selektorů přidáním znaku „.“.

  • $ (selector) .method1 (). method2 (). method3 ();

Typy selektorů v JQuery

Zde jsou různé typy selektorů v JQuery

1) Základní selektory JQuery

Prvky stránky můžeme vybrat pomocí jejich ID, třídy nebo názvu značky. V případě potřeby lze také použít jejich kombinaci. Následuje několik základních selektorů:

  • : header Selector - Toto je základní typ selektoru, který nám umožňuje najít prvky s jejich hlavičkami HTML. K tomu použijeme podrobný volič $ („sekce h1, sekce h2, sekce h3“) nebo můžeme také použít mnohem kratší volič $ („section: header“).
  • : target Selector - Tento selektor najde cíle stránky nebo hash URI dokumentu. Pokud je například URI na stránce „https://example.com/#test“. Poté volič $ („h2: target“) vybere prvek

    .

  • : animated Selector - Tento selektor se používá k nalezení všech prvků, které mají animaci. Nezapomeňte, že aby byla vybrána animace, musí být spuštěna, když je spuštěn selektor.

2) Selektory na základě indexu

JQuery má svou vlastní sadu selektorů založených na indexech, které využívají indexování na základě nuly. Následuje několik příkladů:

  • : eq (k) Selektor - tento selektor vrací prvek v indexu k. Podporuje také záporné hodnoty indexu.
  • : lt (k) Selector - Tento selektor vrací všechny prvky, které mají index menší než k. Stejně jako výše jsou akceptovány i záporné hodnoty
  • : gt (n) Selektor - tento selektor je podobný: lt (k) Selektor kromě toho, že pracuje pro hodnotu indexu větší nebo rovnou k.

3) Výběr dětí

Pomocí JQuery můžete vybrat děti libovolného prvku na základě jejich typu nebo indexu.

  • : first-child - Tento selektor vrátí všechny prvky, které jsou prvním dítětem jejich rodičů.
  • : first-of-type - Tento selektor JQuery se používá k výběru všech prvků, které jsou prvním sourozencem
  • : last-child - Jak název napovídá, tento selektor vybere poslední dítě rodiče.
  • : last-of-type - Toto vybere všechny děti, které jsou posledním typem svého rodiče. Pokud existuje více než jeden rodič, vybere více prvků.
  • : only-of-type - Můžeme použít selektor typu pouze k nalezení všech prvků, které mají na stránce sourozence stejného typu.
  • : only-child - V situacích, kdy potřebujete najít a vybrat prvky, které jsou jediným dítětem jejich rodiče, můžete použít tento selektor. Pokud má rodič na stránce více než jedno dítě, bude ignorována.

4) Výběr atributů

Prvky lze vybírat na základě jejich atributů. Následuje několik běžných selektorů atributů:

  • $ (“(Attribute | = 'valuehere')”) - “Atribut obsahuje selektor předpony” vybere všechny prvky s atributy, jejichž hodnota je stejná nebo začíná daným řetězcem následovaným spojovníkem.
  • $ (“(Attribute ~ = 'valuehere')”) - Vrací všechny prvky s atributy, kde hodnota obsahuje dané slovo oddělené mezerami.
  • $ (“(Attribute * = 'valuehere')”) - vybere prvky, u kterých hodnota obsahuje dané podřetězce. Dokud se hodnota bude shodovat, umístění nezáleží

5) Výběr obsahu

Jak název napovídá, tyto selektory JQuery se používají k vyhledání a výběru obsahu uvnitř prvků.

  • : obsahuje (text) - Slouží k výběru prvků, které mají uvnitř zadaný textový obsah. Při používání tohoto selektoru je třeba mít na paměti, že test je citlivý na malá a velká písmena.
  • : has (selector) - Vrátí se s prvky, které mají uvnitř alespoň jeden prvek, který odpovídá zadanému voliči. Například $ (“section: has (h1)”) se vrátí se všemi sekcemi, které mají prvek h1.
  • : empty - Tento volič vrátí prvky stránky, které nemají žádné děti včetně textových uzlů.
  • : parent - Tento selektor se používá k výběru všech prvků webové stránky, které mají alespoň jeden podřízený uzel. Můžete to považovat za inverzní k: empty JQuery Selector.

6) Výběr hierarchie

  • $ („Potomek předka“) - Používá se k výběru všech potomků rodičů. Potomkem v našem případě může být dítě, vnouče a tak dále.
  • $ („Rodič> dítě“) - Používá se v případech, kdy musíme vybrat pouze přímé dítě konkrétního rodiče.
  • $ („Předchozí + další“) - V případě, že musíme vybrat všechny prvky, které odpovídají voliči „další“ a které mají nadřazené „předchozí“. K vybraným prvkům bude okamžitě přistupovat také „předchozí“, což je sourozenec.

7) Voliče viditelnosti

V JQuery jsou také k dispozici dva selektory: viditelný a: skrytý. Lze je použít k nalezení viditelných nebo skrytých prvků na webové stránce. Jakýkoli prvek na webové stránce se považuje za skrytý, pokud:

  • Jeho displej je správně nastaven na žádný.
  • Jeho šířka a výška jsou definovány nula.
  • V elementu formuláře je uveden typ = skrytý.
  • Jakýkoli předek prvku je již skrytý.

Mějte na paměti, že i když má prvek nastaven neprůhlednost, bude stále považován za viditelný, protože bude stále zabírat prostor.

8) Výběr formulářů

Pro úsporu času a potíží má JQuery třídicí verze selektorů pro vstupní prvky webových formulářů.

Například když $ (“button, input (type = 'button')”) bude pracovat na výběru tlačítka na stránce, můžeme to udělat rychle ($: “button”).

Podobně můžeme pomocí tlačítka $ („: radio“) vybrat přepínač.

Závěr - typy selektoru v JQuery

Selektory jsou jednou z důležitých funkcí JQuery, výběr na JavaScriptu není tak intuitivní a robustní bit s přidáním selektorů přes JQuery, programování pro web se stalo jednodušší.

Doporučené články

Toto je průvodce typy selektorů v JQuery. Zde diskutujeme o různých typech JQuery Selectors se Syntaxí. Další informace naleznete také v následujících článcích.

  1. jQuery metody
  2. jQuery Alternativy
  3. Použití JQuery
  4. Co dokáže Javascript?
  5. jQuery querySelector
  6. Průvodce příklady JQuery Progress Bar