Cuprins
Aceste elemente sau selectoare pot fi manipulate cu Jquery și css pentru a crea efecte și a obține conținut, ascunde-l sau adăuga-l și aplica un anumit efect, facilitând munca programatorilor. Unele selectoare sunt mai cunoscute pentru codul CSS, de exemplu:IDENTIFICATORI
Acestea sunt elemente ale celei mai înalte ierarhii și definesc parametri generali pentru elementele unui bloc. Sunt definite ca #id și sunt de obicei aplicate listelor sau blocurilor.
Acesta este selectorul de id al paragrafului
Paragraf fără selector
LECȚII
Acestea sunt elemente de ierarhie inferioară și sunt utilizate pentru elemente individuale sau pentru a defini clase în cadrul unei identificări, cum ar fi:
Acesta este selectorul de id al paragrafului
Paragraf albastru cu p
Paragraf albastru cu divParagraf roșu cu div
În timp ce clasa independentă .parrafoazul poate aplica elementul p care nu depinde de nimeni, îl putem aplica chiar și altor elemente precum div, dar dacă încercăm să aplicăm clasa parraforojo independent de identificatorul #paragraph vom vedea că nu funcționează deoarece nu îndeplinește ierarhia care impune identificatorul său #paragraph.
Există multe selecții pe care le putem folosi aici, vom vedea câteva
Selector par (par) și impar (impar)
Acest selector se aplică unei matrice de elemente care utilizează aceeași clasă și poate afecta elemente pare sau impare, de exemplu colorăm fundalul unei liste de paragrafe.
PARAGRAFE
Utilizatorul 1 a lăsat un mesaj
Utilizatorul 2 a lăsat un mesaj
Utilizatorul 3 a lăsat un mesaj
Utilizatorul 4 a lăsat un mesaj
LISTA UL
- Utilizatorul 1 a lăsat un mesaj
- Utilizatorul 2 a lăsat un mesaj
- Utilizatorul 3 a lăsat un mesaj
- Utilizatorul 4 a lăsat un mesaj
SELECTOR PRIM (PRIM) ȘI ULTIM (FINAL)
Aceste selectoare ne permit să manipulăm primul și ultimul element al unei anumite liste, de exemplu, setăm lista în gri, primul element în verde și ultimul element în albastru.
LISTA UL
- Utilizatorul 1 a lăsat un mesaj
- Utilizatorul 2 a lăsat un mesaj
- Utilizatorul 3 a lăsat un mesaj
- Utilizatorul 4 a lăsat un mesaj
FOCUS SELECTOR
Focalizarea pe un element este activată când faceți clic pe un element și dezactivată când faceți clic pe o altă zonă a webului sau pe un alt element. Vom vedea un exemplu cu un formular de autentificare, vom crea clasa .focologin și apoi îl vom aplica pe identificatorul formularului #login pentru a afecta toate elementele pe care le conține. De asemenea, îl putem aplica unui strat sau bloc div și putem plasa formularul în interiorul blocului.
FORMĂ
Parolă de utilizator:
Atribuiți sau modificați un stil CSS unui element cu AddClass
Dacă dorim să alocăm dinamic un stil CSS sau să modificăm în funcție de o anumită condiție stabilită, vom folosi AddClass. În acest caz, avem un buton de clasă .green și textului de tip de intrare îi atribuim clasa .box din Jquery. Introducerea tipului de parolă nu este afectată și nici butonul de trimitere nu este afectat deoarece nu le-am atribuit nicio clasă css.
FORMULAR DE ÎNREGISTRARE
Nume:
Abordare:
Telefon:
E-mail:
Acest selector permite identificarea unui element dintr-o matrice de elemente în funcție de poziția în care se află o celulă de tabel, de exemplu, trebuie să avem în vedere că elementele sunt listate ca indici ai unei matrice începând cu 0,1,2 etc. .
| Titlul A | Titlul B | Titlul C |
|---|---|---|
| Celula 0 | Celula 1 | Celula 2 |
| Celula 3 | Celula 4 | Celula 5 |
Continuând cu tabelele și aplicarea selectorilor, vom vedea cum să creăm un design de fundal într-un mod alternativ în culorile rândurilor unui tabel, similar cu ceea ce a fost aplicat anterior cu paragrafe și liste. Nu adăugăm atât de multe css sau design, astfel încât efectul să fie mai bine apreciat practic.
SELECTOR al n-lea copil
Continuând cu exemplul anterior, putem folosi selectorul n-copil ca complement, similar cu selectorul eq, dar diferența este că, cu n-copil, pozițiile pot fi indicate sub forma unei operații aritmetice. Se folosește pentru a selecta unul sau mai multe elemente, dar cu condiția ca acesta să fie al nouălea copil al părintelui său. Acest selector este util pentru selectarea celui de-al doilea paragraf al unui bloc sau al treilea element al unei liste etc. Elementele nu sunt luate ca o matrice, ci în ordine prima, a doua etc.
De exemplu, dacă în scriptul anterior adăugăm
Coloanele impare vor fi selectate în acest caz
- Coloane impare n-copil (2n + 1)
- Coloane împerecheate n-copil (2n)
- Prima și a patra coloană n-copil (3n + 1)
