Co je jQuery querySelector?
jQuery querySelector vyberte nebo najděte prvek DOM (objektový model dokumentu) v dokumentu HTML. JQuery nám umožňuje manipulovat s HTML prvky. Používá se k výběru jednoho nebo více prvků HTML na základě id, názvu, typů, atributů, třídy, hodnot atributů atd. Je založen na existujících selektorech CSS.
Úvod do querySelector
Metoda querySelector () vrací pouze první prvek, který odpovídá zadaným selektorům CSS v dokumentu. Pokud je ID v dokumentu použito vícekrát, vrátí první odpovídající prvek.
Syntaxe querySelector
Níže je uvedena syntaxe querySelector:
- querySelector (CSS selektory)
- Vrací první prvek, který odpovídá zadaným selektorům.
- K vrácení všech prvků, které se shodují, použijeme metodu querySelectorAll ().
- Selektory CSS, které předáváme, by měly být typu řetězce.
- Je povinné složit selektory CSS.
- Řetězec, kterým procházíme, musí být platným selektorem CSS.
- Pokud je předaný řetězec neplatný, vyvolá se SYNTAX_ERRexception.
- Pokud není nalezena žádná shoda, vrátí se null.
- Přizpůsobení prvního prvku se provádí pomocí průchodu dokumentu s předběžnou objednávkou hloubky.
- Určuje jeden nebo více selektorů CSS, které odpovídají prvku.
- U více selektorů oddělte čárkou.
- Znaky, které nejsou součástí standardní syntaxe CSS, musí být odstraněny pomocí znaku zpětného lomítka.
Příklady metody querySelector ()
Níže jsou uvedeny příklady metod querySelector ():
V jQuery můžete vybrat prvky na stránce pomocí mnoha různých vlastností prvku, jako jsou Typ, Třída, ID, Vlastnost atributu, Hodnoty atributů atd. Níže je uveden příklad JQuery pomocí typu.
Příklad č. 1 - Výběr podle typu
1. Následující selektor dotazů obsahuje dva <a>
Vysvětlení výše uvedeného kódu: V tomto příkladu můžeme pozorovat, že jsme použili dvě kotevní značky a uvnitř kotevní značky jsme předali hypertextový odkaz dvou obrázků. Pomocí querySelector („a“). Style.backgroundColor = „red“; předali jsme kotevní značku („a“) dotazuSelector. Pokud v metodě querySelector () předáme více selektorů, vrátí první prvek, který odpovídá zadaným selektorům. Ačkoli obsahuje dvě kotevní značky první nalezenou kotevní značku, použil její styl.backgroundColor = “red”; pouze pro první značku kotvy.
Výstup 1: Před kliknutím na tlačítko („Click me“).
Výstup 2: Po kliknutí na tlačítko („Click me“) se barva pozadí květu změní na „červenou“.
Výstup 3: Po kliknutí na hypertextové odkazy se otevřou příslušné obrázky.
2. Tento querySelector také obsahuje dva Ale v níže uvedeném příkladu jsem změnil pořadí obrázku. Zachoval jsem pouštní hypertextový odkaz nejprve a poté hypertextový odkaz na květ.
Vysvětlení výše uvedeného kódu: V tomto příkladu také můžeme pozorovat, že jsme použili dvě kotevní značky a uvnitř kotevní značky jsme předali hypertextový odkaz dvou obrázků. Pomocí querySelector („a“). Style.backgroundColor = „red“; předali jsme značku kotvy („a“) selektoru dotazů. Tentokrát v querySelector () zjistí hypertextový odkaz „Poušť“ jako první, když jsme změnili sekvenci. Ačkoli obsahuje dvě kotevní značky první nalezenou kotevní značku, použil její styl.backgroundColor = “red”; pouze pro první značku kotvy.
Výstup 1: Na výstupu můžeme pozorovat, že prvním obrázkem je Poušť. Díky metodě querySelector () se barva pozadí pouště změnila na červenou.
Výstup 2: Po kliknutí na hypertextový odkaz se otevře pouštní obrázek.
Výstup 3: Po kliknutí na hypertextový odkaz na květ se otevře obrázek květu.
Příklad č. 2 - Výběr podle třídy
V níže uvedeném příkladu vybereme pomocí názvu třídy.
Vysvětlení výše uvedeného kódu: Ve výše uvedeném příkladu používáme název třídy a zde je název třídy Selector. Stejný název třídy je předán jak pro h2 (značka nadpisu), tak pro značku odstavce. U metody querySelector () předáváme název třídy, který v programu zkontroluje konkrétní název třídy. Nyní našel ty značky, které mají stejný název třídy, jak bylo uvedeno. Použitím hloubkového prvního předobjednávkového průchodu dokumentu je provedeno párování prvního prvku. Prvním prvkem v příkladu, který obsahuje název třídy jako Selector, je h2 (značka záhlaví). Metoda querySelector () vyvolá značku h2 a podle style.backgroundColor použije konkrétní barvu pozadí na značku h2.
Výstup 1: Před kliknutím na tlačítko („click me“) se obsah značky h2 nezmění barvu pozadí na modrou.
Výstup 2: Po kliknutí na tlačítko („klikni na mě“) změní obsah značky h2 barvu pozadí na modrou.
Příklad č. 3 - Výběr podle ID
V níže uvedeném příkladu vybíráme pomocí id.
Vysvětlení výše uvedeného kódu: V příkladu vybereme pomocí id id id Selector. U metody querySelector () předáváme ID, které v programu zkontroluje konkrétní jméno id. Nyní našel značku, která má stejné id jméno, jak bylo uvedeno. Použitím hloubkového prvního předobjednávkového průchodu dokumentu je provedeno párování prvního prvku. Prvek v příkladu, který obsahuje jméno id jako Selector, je značka odstavce. Metoda querySelector () vyvolá značku odstavce a provede konkrétní změny obsahu podle zmíněného kódu.
Výstup 1: Před kliknutím na tlačítko „klikni na mě“ bude obsah odstavce označen „Toto je prvek AP s voličem id =“.
Výstup 2: Po kliknutí na tlačítko „klikni na mě“ se obsah značky odstavce změní na „Změnit v textu“.
Použití jQuery querySelector
Níže jsou uvedeny dva body vysvětlující použití querySelector:
- Kódy jQuery jsou přesnější, kratší a jednodušší než standardní JavaScript kódy. Může plnit řadu funkcí.
- Volání querySelector () vrací první prvek, jakmile je vybírá, takže je rychlejší a kratší pro zápis.
Doporučené články
Toto je průvodce jQuery querySelector. Zde diskutujeme, co je jQuery querySelector, úvod do querySelector, syntaxe a příklad Jquery pomocí typu. Další informace naleznete také v dalších souvisejících článcích -
- jQuery Události
- Použití JQuery
- jQuery metody
- Jak nainstalovat Jquery?
- Události HTML
- Prvních 5 atributů události HTML s příklady
- Throw vs Throw | 5 hlavních rozdílů, které byste měli vědět
- Průvodce příklady JQuery Progress Bar