Spisie treści
Te elementy lub selektory można manipulować za pomocą Jquery i css, aby tworzyć efekty i uzyskiwać treści, ukrywać je lub dodawać i nadawać im jakiś efekt, ułatwiając pracę programistom. Niektóre selektory są lepiej znane z kodu css, na przykład:IDENTYFIKATORY
Są elementem najwyższej hierarchii i definiują ogólne parametry dla elementów bloku, są zdefiniowane jako #id i są zwykle stosowane do list lub bloków.
To jest selektor identyfikatora akapitu
Akapit bez selektora
LEKCJE
Są to elementy niższej hierarchii i są używane dla poszczególnych elementów lub do definiowania klas w ramach identyfikacji, takich jak:
To jest selektor identyfikatora akapitu
Niebieski akapit z p
Niebieski akapit z divCzerwony akapit z div
Chociaż niezależna klasa .parrafoazul może zastosować element p, który nie zależy od nikogo, możemy nawet zastosować go do innych elementów, takich jak div, ale jeśli spróbujemy zastosować klasę parraforojo niezależnie od identyfikatora #paragraph, zobaczymy, że tak nie działa, ponieważ nie spełnia hierarchii, która narzuca jego identyfikator #paragraph.
Istnieje wiele selektorów, których możemy użyć, tutaj zobaczymy kilka
Selektor parzysty (parzysty) i nieparzysty (nieparzysty)
Selektor ten jest stosowany do tablicy elementów, które używają tej samej klasy i może wpływać na elementy parzyste lub nieparzyste, na przykład kolorujemy tło listy akapitów.
AKAPITÓW
Użytkownik 1 zostawił wiadomość
Użytkownik 2 zostawił wiadomość
Użytkownik 3 zostawił wiadomość
Użytkownik 4 zostawił wiadomość
LISTA UL
- Użytkownik 1 zostawił wiadomość
- Użytkownik 2 zostawił wiadomość
- Użytkownik 3 zostawił wiadomość
- Użytkownik 4 zostawił wiadomość
SELEKTOR PIERWSZY (PIERWSZY) I OSTATNI (OSTATNI)
Selektory te pozwalają nam manipulować pierwszym i ostatnim elementem danej listy, np. ustawiamy listę na szaro, pierwszy element na zielono, a ostatni na niebiesko.
LISTA UL
- Użytkownik 1 zostawił wiadomość
- Użytkownik 2 zostawił wiadomość
- Użytkownik 3 zostawił wiadomość
- Użytkownik 4 zostawił wiadomość
WYBÓR OSTROŚCI
Fokus na elemencie jest aktywowany po kliknięciu elementu i dezaktywowany po kliknięciu innego obszaru sieci lub innego elementu. Zobaczymy przykład z formularzem logowania, tworzymy klasę .focologin a następnie nanosimy ją na identyfikator formularza #login aby wpłynąć na wszystkie zawarte w nim elementy. Możemy również nałożyć go na warstwę lub blok div i umieścić formę wewnątrz bloku.
FORMULARZ
Hasło użytkownika:
Przypisz lub zmień styl CSS do elementu za pomocą AddClass
Jeśli chcemy dynamicznie przypisać styl css lub zmienić go zgodnie z ustalonymi warunkami, użyjemy AddClass. W tym przypadku mamy przycisk class .green i do tekstu typu input przypisujemy klasę .box z Jquery. Nie ma to wpływu na dane wejściowe typu hasła i przycisk przesyłania, ponieważ nie przypisaliśmy do nich żadnej klasy css.
FORMULARZ REJESTRACYJNY
Nazwa:
Adres:
Telefon:
E-mail:
Ten selektor pozwala zidentyfikować element tablicy elementów na podstawie pozycji, w której znajduje się komórka tabeli, na przykład musimy pamiętać, że elementy są wymienione jako indeksy macierzy zaczynające się od 0,1,2 itd. .
| Tytuł A | Tytuł B | Tytuł C |
|---|---|---|
| Komórka 0 | Komórka 1 | Komórka 2 |
| Komórka 3 | Komórka 4 | Komórka 5 |
Kontynuując tabele i zastosowanie selektorów, zobaczymy, jak stworzyć projekt tła naprzemiennie w kolorach wierszy tabeli, podobnie jak wcześniej stosowano w przypadku akapitów i list. Nie dodajemy tak dużo css czy designu, żeby efekt był w zasadzie lepiej doceniony.
SELEKTOR n-te dziecko
Kontynuując poprzedni przykład, możemy użyć selektora n-tego dziecka jako dopełnienia, podobnie jak selektor eq, ale różnica polega na tym, że w przypadku n-tego dziecka pozycje można wskazać w formie operacji arytmetycznej. Służy do wybrania jednego lub więcej elementów, ale pod warunkiem, że jest n-tym dzieckiem swojego rodzica. Ten selektor jest przydatny do wybierania drugiego akapitu bloku lub trzeciego elementu listy itp. Elementy nie są traktowane jako tablica, ale w kolejności pierwsze, drugie itd.
Na przykład, jeśli w poprzednim skrypcie dodamy
W tym przypadku zostaną wybrane nieparzyste kolumny
- Kolumny nieparzyste n-te dziecko (2n + 1)
- Sparowane kolumny n-te dziecko (2n)
- Pierwsza i czwarta kolumna n-te dziecko (3n + 1)
