Filtry w selektorach z Jquery i CSS3 II

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

Widzimy, jak identyfikator wpływa na akapit wewnątrz bloku, ale nie wpływa na akapit zewnętrzny.
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

Tutaj widzimy, że klasa .parraforojo definiuje kolor paragrafu, ale zależy od rozmiaru, który definiuje identyfikator wyższej hierarchii #pararafo.
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:

SELEKTOR RÓWNA LUB RÓWNE
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.

 
KALENDARZ KURSÓW


 
Harmonogramy
 
PONIEDZIAŁEK
 
WTOREK
 
ŚRODA
 
CZWARTEK
 
PIĄTEK
 

 
 
10:00 - 12:00
 
Tworzenie stron internetowych / CSS
 
Tworzenie stron internetowych / JQUERY
 
Programowanie WWW / PHP
 
Tworzenie stron internetowych / JQUERY
 
Programowanie / JAVA
 

 
 
21:00 - 22:00
 
Bazy danych / MYSQL
 
Tworzenie stron internetowych / JQUERY
 
Programowanie / JAVA
 
Programowanie WWW / PHP
 
 
 

 
 
22:00 - 23:00
 
Programowanie WWW / PHP
 
Tworzenie stron internetowych / CSS
 
Programowanie / JAVA
 
 
 
 
 

 

 

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

Inne przykłady praktycznego zastosowania tego selektora to:

• Kolumny nieparzyste n-te dziecko (2n + 1)
• Sparowane kolumny n-te dziecko (2n)
• Pierwsza i czwarta kolumna n-te dziecko (3n + 1)

Podobał Ci się i pomógł ten samouczek?Możesz nagrodzić autora, naciskając ten przycisk, aby dać mu pozytywny punkt