Co to jest jQuery querySelector?
jQuery querySelector wybierz lub znajdź element DOM (model obiektu dokumentu) w dokumencie HTML. JQuery pozwala nam manipulować elementami HTML. Służy do wybierania jednego lub więcej elementów HTML na podstawie identyfikatora, nazwy, typów, atrybutów, klasy, wartości atrybutów itp. Opiera się na istniejących selektorach CSS.
Wprowadzenie do querySelector
Metoda querySelector () zwraca tylko pierwszy element pasujący do określonych selektorów CSS w dokumencie. Jeśli identyfikator w dokumencie zostanie użyty więcej niż jeden raz, zwróci pierwszy pasujący element.
Składnia querySelector
Poniżej znajduje się składnia querySelector:
- querySelector (selektory CSS)
- Zwraca pierwszy element, który pasuje do określonych selektorów.
- Aby zwrócić wszystkie pasujące elementy, używamy metody querySelectorAll ().
- Selektory CSS, które mijamy, powinny być typu łańcuchowego.
- Przekazywanie selektorów CSS jest obowiązkowe.
- Ciąg, który przekazujemy, musi być prawidłowym selektorem CSS.
- Jeśli przekazany ciąg jest nieprawidłowy, generowany jest wyjątek SYNTAX_ERRexception.
- Jeśli nie zostanie znalezione dopasowanie, zwróci wartość null.
- Dopasowywanie pierwszego elementu odbywa się za pomocą przemierzania dokumentu w pierwszej kolejności na głębokość.
- Określa jeden lub więcej selektorów CSS pasujących do elementu.
- W przypadku wielu selektorów oddziel je przecinkiem.
- Znaki, które nie są częścią standardowej składni CSS, muszą być poprzedzane znakami odwrotnego ukośnika.
Przykłady metody querySelector ()
Poniżej znajdują się przykłady metod querySelector ():
W jQuery można wybierać elementy na stronie przy użyciu wielu różnych właściwości elementu, którymi są Typ, Klasa, ID, Posiadanie atrybutu, Wartości atrybutów itp. Poniżej znajduje się przykład Jquery przy użyciu typu.
Przykład # 1 - Wybór według typu
1. Poniższy selektor zapytań zawiera dwa <a>
Wyjaśnienie powyższego kodu: W tym przykładzie możemy zaobserwować, że użyliśmy dwóch tagów zakotwiczenia, a wewnątrz tagu zakotwiczenia przekazaliśmy hiperłącze dwóch obrazów. Korzystając z querySelector („a”). Style.backgroundColor = „red”; przekazaliśmy tag anchor („a”) do querySelector. W metodzie querySelector (), jeśli przekażemy wiele selektorów, zwróci pierwszy element, który pasuje do określonych selektorów. Mimo że zawiera dwa znaczniki zakotwiczenia, pierwszy znaleziony znacznik zakotwiczenia zastosował swój style.backgroundColor = „red”; tylko dla pierwszego tagu kotwicy.
Wyjście 1: Przed kliknięciem przycisku („Kliknij mnie”).
Wyjście 2: Po kliknięciu przycisku („Kliknij mnie”) kolor tła kwiatu zmienia się na „czerwony”.
Wyjście 3: Kliknięcie hiperłączy spowoduje otwarcie odpowiednich obrazów.
2. Ten querySelector zawiera również dwa Ale w poniższym przykładzie zmieniłem kolejność obrazu. Najpierw trzymałem hiperłącze pustyni, a potem hiperłącze kwiatu.
Objaśnienie powyższego kodu: W tym przykładzie możemy również zauważyć, że użyliśmy dwóch tagów zakotwiczenia, a wewnątrz tagu zakotwiczenia przekazaliśmy hiperłącze dwóch obrazów. Korzystając z querySelector („a”). Style.backgroundColor = „red”; przekazaliśmy znacznik zakotwiczenia („a”) do selektora zapytań. Tym razem w querySelector () najpierw znajdzie hiperłącze „Pustynia”, gdy zmienimy sekwencję. Mimo że zawiera dwa znaczniki zakotwiczenia, pierwszy znaleziony znacznik zakotwiczenia zastosował swój style.backgroundColor = „red”; tylko dla pierwszego tagu kotwicy.
Wyjście 1: Na wyjściu możemy zaobserwować, że pierwszym obrazem jest Pustynia. Zatem z powodu metody querySelector () kolor tła Pustyni zmienił się na czerwony.
Wyjście 2: Po kliknięciu hiperłącza otworzy się obraz pustyni.
Wyjście 3: Po kliknięciu hiperłącza kwiatu obraz kwiatu zostanie otwarty.
Przykład # 2 - Wybór według klasy
W poniższym przykładzie wybieramy za pomocą nazwy klasy.
Objaśnienie powyższego kodu: W powyższym przykładzie używamy nazwy klasy, a tutaj nazwą klasy jest Selector. Ta sama nazwa klasy jest przekazywana zarówno dla h2 (tag nagłówka), jak i tagu akapitu. W przypadku metody querySelector () przekazujemy nazwę klasy, która sprawdzi, czy w programie znajduje się konkretna nazwa klasy. Teraz znalazł te tagi, które mają tę samą nazwę klasy, jak wspomniano. Przy użyciu przemierzania dokumentu w pierwszej kolejności na głębokość dokonuje się dopasowania pierwszego elementu. Pierwszym elementem w tym przykładzie, który zawiera nazwę klasy jako Selector, jest h2 (tag nagłówka). Metoda querySelector () pobiera znacznik h2 i według style.backgroundColor stosuje określony kolor tła do znacznika h2.
Wyjście 1: Przed kliknięciem przycisku („kliknij mnie”) zawartość znacznika h2 nie zmienia koloru tła na niebieski.
Wyjście 2: Po kliknięciu przycisku („kliknij mnie”) zawartość znacznika h2 zmienia kolor tła na niebieski.
Przykład # 3 - Wybór według ID
W poniższym przykładzie wybieramy za pomocą id.
Objaśnienie powyższego kodu: W tym przykładzie wybieramy za pomocą identyfikatora id jest tutaj Selector. W przypadku metody querySelector () przekazujemy identyfikator, który sprawdzi konkretną nazwę identyfikatora w programie. Teraz znalazł tag, który ma taki sam identyfikator jak wspomniano. Przy użyciu przemierzania dokumentu w pierwszej kolejności na głębokość dokonuje się dopasowania pierwszego elementu. Elementem w tym przykładzie, który zawiera nazwę identyfikatora jako Selector, jest znacznik akapitu. Metoda querySelector () pobiera tag akapitu i wprowadza określone zmiany do treści zgodnie z wymienionym kodem.
Wyjście 1: Przed kliknięciem przycisku „kliknij mnie” treść znacznika akapitu będzie brzmiała „To jest element ap z selektorem id =”.
Wyjście 2: Po kliknięciu przycisku „kliknij mnie” treść znacznika akapitu zostanie zmieniona na „Zmień tekst”.
Wykorzystuje jQuery querySelector
Poniżej znajdują się dwa punkty wyjaśniające zastosowania querySelector:
- Kody jQuery są bardziej precyzyjne, krótsze i prostsze niż standardowe kody JavaScript. Może wykonywać różne funkcje.
- Wywołanie querySelector () zwraca pierwszy element podczas wybierania jednego, dzięki czemu zapis jest szybszy i krótszy.
Polecane artykuły
Jest to przewodnik po jQuery querySelector. Tutaj omawiamy, co to jest jQuery querySelector, wprowadzenie do querySelector, składnia i przykład Jquery przy użyciu typu. Możesz również przejrzeć nasze inne powiązane artykuły, aby dowiedzieć się więcej -
- Zdarzenia jQuery
- Zastosowania JQuery
- Metody jQuery
- Jak zainstalować Jquery?
- Wydarzenia HTML
- Top 5 atrybutów zdarzeń HTML z przykładami
- Rzut vs Rzuty | 5 najważniejszych różnic, które powinieneś znać
- Przewodnik po przykładach paska postępu JQuery