Selektory JQuery | Wyjaśnione
Wybór elementów strony internetowej HTML może wziąć kilka wierszy kodu w JavaScript, ale z jQuery kod staje się zwięzły i wygląda na bardzo czytelnie. JQuery obsługuje wybór prawie wszystkich Selektory zdefiniowane w CS3, a także zapewnia wbudowane niestandardowe selektory.
Dodawanie JQuery do naszej strony HTML
Aby móc jQuery w naszym projekcie, najpierw musimy zaimportować JQuery, umieszczając link do pliku jQuery w znaczniku skryptu. Najbardziej skuteczną metodą importowania jQuery jest użycie jQuery hostowanej przez Google CDN, w pliku HTML użyj następujących wierszy w znaczniku skryptu:
Funkcja fabryczna
Funkcje wyboru jQuery są często określane jako funkcja fabryczna, zaczyna się od znaku dolara „$” a następnie okrągłe nawiasy lub nawias „()”. Ta funkcja fabryczna służy w odniesieniu do elementu strony internetowej i możesz dodać zdarzenie za pomocą operatora kropki. Na przykład:
$ (dokument).gotowy (funkcja ()// wewnątrz ciała funkcji
);
Selektory JQuery
Selektory jQuery lub funkcje fabryczne działają na trzech głównych selektorach, a mianowicie: Identyfikator tagu, nazwa tagu, klasa tagów.
- Nazwa znacznika: Służy do wyboru nazwy elementu z kopuły, na przykład, jeśli chcesz wybrać wszystkie Tagi H1.
- Klasa tagu: Służy do wyboru elementu z określoną klasą; Na przykład, jeśli chcesz wybrać element z klasą „moja klasa" możesz użyć $ ('.moja klasa')
- Identyfikator znacznika: Służy do wyboru elementu o określonym identyfikatorze; Na przykład, aby wybrać element z identyfikatorem „mój dokument tożsamości" możesz użyć $ ('#myid')
Wybór elementów według nazwy
Aby zaprezentować użycie selektorów jQuery, najpierw przejdziemy do wyboru elementów za pomocą nazwy znacznika. Załóżmy, że chcesz wybrać wszystkie Tag Kolejny tag P Kolejny tag P Powinieneś zobaczyć następujące dane wyjściowe na stronie: Manipulować Tagi używają następującego kodu skryptu: Z powyższymi liniami wyjście będzie wyglądać tak Mamy nawet selektory filtrów; Załóżmy, że chcemy tylko wybrać ostatni $ (dokument).gotowy (funkcja () To da nam następujące dane wyjściowe: Jak widać, mogliśmy wybrać konkretny etykietka Wybór elementów według identyfikatora Aby zademonstrować selektory identyfikacyjne, mamy następujące wiersze w pliku HTML: Tag P z identyfikatorem Hello Kolejny tag P Kolejny tag P Jak widać, pierwszy Tag ma identyfikator "Witam", Aby manipulować tym elementem za pomocą jego identyfikatora, możemy użyć następującego kodu skryptu: Jak widać na powyższym obrazku, mogliśmy wybrać element za pomocą jego identyfikatora i manipulować jego właściwością stylizacji za pomocą selektora identyfikatora jQuery. Wybór elementu według klasy Aby wybrać element za pomocą klasy, używamy kropka Przed nazwą klasy w funkcji fabrycznej, aby móc zademonstrować użycie selektora klasy jQuery, podajmy jeden z tagów P niektóre klasy. Nasz kod HTML będzie wyglądał tak: Tag P z identyfikatorem Hello Kolejny tag P Kolejny znacznik P, ale z jakąś klasą Aby wybrać klasę „MyClass” i nadać jej tło czerwieni, używamy następującego kodu skryptu: Z powyższym kodem zobaczysz następujące dane wyjściowe: Jak widać, byliśmy w stanie manipulować elementem za pomocą klasy „MyClass” za pomocą selektorów klas jQuery. Wniosek Najbardziej znana biblioteka JavaScript JQuery jest bardzo przydatna i oszczędzanie czasu, jeśli chodzi o manipulowanie elementami na stronie internetowej, jedynym wstępnym użyciem jQuery w projekcie jest dodanie linku do biblioteki jQuery za pomocą jQuery hostowanej przez Google CDN JQuery. JQuery składa się z funkcji, która nazywa się funkcją fabryczną, która pozwala użytkownikom wybrać elementy strony internetowej i manipulować ich właściwościami. Funkcja fabryczna „$ (”) ” Działa na 3 podstawowych selektorach, które są mianowicie, Selektor identyfikatora, Nazwa selektor i selektor klasowy.
$ („p”).CSS („tło”, „żółty”);
);
$ („p: last”).CSS („tło”, „żółty”);
);
$ (".moja klasa").CSS („tło”, „czerwony”);
);