Inhoudsopgave
Deze elementen of selectors kunnen worden gemanipuleerd met JQuery en CSS om effecten te creëren en inhoud te verkrijgen, deze te verbergen of toe te voegen en er een bepaald effect op toe te passen, wat het werk van programmeurs vergemakkelijkt. Sommige selectors zijn bijvoorbeeld beter bekend om de css-code:IDENTIFICATIES
Ze maken deel uit van de hoogste hiërarchie en definiëren algemene parameters voor de elementen van een blok.Ze worden gedefinieerd als #id en worden meestal toegepast op lijsten of blokken.
Dit is de alinea-ID selector
Paragraaf zonder selector
LESSEN
Het zijn elementen van een lagere hiërarchie en worden gebruikt voor individuele elementen of om klassen binnen een identiteit te definiëren, zoals:
Dit is de alinea-ID selector
Blauwe alinea met p
Blauwe alinea met divRode alinea met div
Hoewel de onafhankelijke klasse .parrafoazul element p kan toepassen dat van niemand afhankelijk is, kunnen we het zelfs toepassen op andere elementen zoals div, maar als we proberen de klasse parraforojo onafhankelijk van de #paragraph-identificatie toe te passen, zullen we zien dat dit wel het geval is werkt niet omdat het niet voldoet aan de hiërarchie die zijn identifier #paragraph oplegt.
Er zijn veel selectors die we hier kunnen gebruiken, we zullen er enkele zien
Even (even) en oneven (oneven) selector
Deze selector wordt toegepast op een array van elementen die dezelfde klasse gebruiken en kan even of oneven elementen beïnvloeden, we kleuren bijvoorbeeld de achtergrond van een lijst met alinea's.
PARAGRAAF
Gebruiker 1 heeft een bericht achtergelaten
Gebruiker 2 heeft een bericht achtergelaten
Gebruiker 3 heeft een bericht achtergelaten
Gebruiker 4 heeft een bericht achtergelaten
UL LIST
- Gebruiker 1 heeft een bericht achtergelaten
- Gebruiker 2 heeft een bericht achtergelaten
- Gebruiker 3 heeft een bericht achtergelaten
- Gebruiker 4 heeft een bericht achtergelaten
SELECTOR EERSTE (Eerste) EN LAATSTE (Laatste)
Met deze selectors kunnen we het eerste en het laatste element van een bepaalde lijst manipuleren, we zetten bijvoorbeeld de lijst in grijs, het eerste element in groen en het laatste element in blauw.
UL LIJST
- Gebruiker 1 heeft een bericht achtergelaten
- Gebruiker 2 heeft een bericht achtergelaten
- Gebruiker 3 heeft een bericht achtergelaten
- Gebruiker 4 heeft een bericht achtergelaten
FOCUS SELECTOR
De focus op een element wordt geactiveerd wanneer u op een element klikt en gedeactiveerd wanneer u op een ander deel van het web of op een ander element klikt. We zullen een voorbeeld zien met een login-formulier, we creëren de klasse .focologin en dan passen we het toe op de identifier van het #login-formulier om alle elementen die het bevat te beïnvloeden. We kunnen het ook toepassen op een laag- of div-blok en het formulier in het blok plaatsen.
HET FORMULIER
Gebruikerswachtwoord:
Wijs een css-stijl toe aan of wijzig een element met AddClass
Als we een css-stijl dynamisch willen toewijzen of willen wijzigen volgens een vastgestelde voorwaarde, zullen we AddClass gebruiken. In dit geval hebben we een class .green-knop en aan het invoertype tekst wijzen we de class .box van JQuery toe. De invoer van het wachtwoordtype wordt niet beïnvloed en de verzendknop wordt ook niet beïnvloed, omdat we er geen css-klasse aan hebben toegewezen.
REGISTRATIEFORMULIER
Naam:
Adres:
Telefoon:
E-mailadres:
Deze selector maakt het mogelijk om een element van een array van elementen te identificeren op basis van de positie waarin een tabelcel zich bevindt, bijvoorbeeld, we moeten er rekening mee houden dat de elementen worden vermeld als de indexen van een matrix beginnend met 0,1,2, enz. .
| Titel A | Titel B | Titel C |
|---|---|---|
| cel 0 | cel 1 | cel 2 |
| cel 3 | cel 4 | cel 5 |
Als we verder gaan met de tabellen en het toepassen van selectors, zullen we zien hoe we op een afwisselende manier een achtergrondontwerp kunnen maken in de kleuren van de rijen van een tabel, vergelijkbaar met wat eerder werd toegepast met alinea's en lijsten. We voegen niet zoveel css of design toe zodat het effect in principe beter wordt gewaardeerd.
SELECTOR nde-kind
Als we verder gaan met het vorige voorbeeld, kunnen we de n-de-kind selector gebruiken als een aanvulling, vergelijkbaar met de eq-selector, maar het verschil is dat met n-de-kind posities kunnen worden aangegeven in de vorm van een rekenkundige bewerking. Het wordt gebruikt om een of meer elementen te selecteren, maar met de voorwaarde dat het het zoveelste kind is van het bovenliggende element. Deze selector is handig voor het selecteren van de tweede alinea van een blok of het derde item van een lijst, enz. De elementen worden niet als een array genomen, maar in volgorde als eerste, tweede, enz.
Als we bijvoorbeeld in het vorige script toevoegen
In dit geval worden oneven kolommen geselecteerd
- Oneven kolommen n-de kind (2n + 1)
- Gepaarde kolommen n-de kind (2n)
- Eerste en vierde kolom n-de kind (3n + 1)
