Innehållsförteckning
Dessa element eller väljare kan manipuleras med Jquery och css för att skapa effekter och hämta innehåll, dölja det eller lägga till det och tillämpa någon effekt på det, vilket underlättar programmerarnas arbete. Vissa väljare är bättre kända för css -koden till exempel:IDENTIFIERARE
De är element i den högsta hierarkin och definierar allmänna parametrar för elementen i ett block. De definieras som #id och tillämpas vanligtvis på listor eller block.
Detta är stycke -ID -väljaren
Stycke utan väljare
LEKTIONER
De är element i den lägre hierarkin och används för enskilda element eller för att definiera klasser inom en identifier, till exempel:
Detta är stycke -ID -väljaren
Blått stycke med s
Blått stycke med divRöd stycke med div
Även om den oberoende klassen .parrafoazul kan tillämpa element p som inte är beroende av någon, kan vi till och med tillämpa det på andra element som div, men om vi försöker tillämpa parraforojo -klassen oberoende av #paragraph -identifieraren ser vi att det gör det fungerar inte eftersom det inte uppfyller hierarkin som inför dess identifierare #paragraph.
Det finns många väljare som vi kan använda här, vi kommer att se några
Även (jämn) och udda (udda) väljare
Denna väljare tillämpas på en rad element som använder samma klass och det kan påverka jämna eller udda element, till exempel färgar vi bakgrunden till en lista med stycken.
PARAGRAFER
Användare 1 har lämnat ett meddelande
Användare 2 har lämnat ett meddelande
Användare 3 har lämnat ett meddelande
Användare 4 har lämnat ett meddelande
UL LIST
- Användare 1 har lämnat ett meddelande
- Användare 2 har lämnat ett meddelande
- Användare 3 har lämnat ett meddelande
- Användare 4 har lämnat ett meddelande
VÄLJARE FÖRST (Första) OCH SENASTE (Sista)
Dessa väljare tillåter oss att manipulera det första och det sista elementet i en viss lista, till exempel sätter vi listan i grått, det första elementet i grönt och det sista elementet i blått.
UL LIST
- Användare 1 har lämnat ett meddelande
- Användare 2 har lämnat ett meddelande
- Användare 3 har lämnat ett meddelande
- Användare 4 har lämnat ett meddelande
FOKUSVÄLJARE
Fokus på ett element aktiveras när du klickar på ett element och inaktiveras när du klickar på ett annat område på webben eller på ett annat element. Vi kommer att se ett exempel med ett inloggningsformulär, vi skapar klassen .focologin och sedan applicerar vi det på identifieraren för #login -formuläret för att påverka alla element som det innehåller. Vi kan också applicera det på ett lager eller div -block och placera formuläret inuti blocket.
FORM
Användarlösenord:
Tilldela eller ändra en css -stil till ett element med AddClass
Om vi vill tilldela en css -stil dynamiskt eller för att ändra i enlighet med ett fastställt villkor använder vi AddClass. I det här fallet har vi en klass. Grön knapp och till inmatningstypstexten tilldelar vi klassen .box från Jquery. Lösenordstypen påverkas inte och skicka -knappen påverkas inte heller eftersom vi inte har tilldelat någon css -klass till dem.
ANMÄLNINGSBLANKETT
Namn:
Adress:
Telefon:
E-post:
Denna väljare gör det möjligt att identifiera ett element i en uppsättning element enligt positionen i vilken en tabellcell är, till exempel måste vi komma ihåg att elementen är listade som index för en matris som börjar med 0,1,2, etc .
| Avdelning A | Avdelning B | Avdelning C |
|---|---|---|
| Cell 0 | Cell 1 | Cell 2 |
| Cell 3 | Cell 4 | Cell 5 |
Fortsätt med tabellerna och tillämpningen av väljare, vi kommer att se hur man skapar en bakgrundsdesign på ett växlande sätt i färgerna på raderna i en tabell, liknande det som tidigare tillämpades med stycken och listor. Vi lägger inte till så mycket css eller design så att effekten uppskattas i grunden.
VÄLJARE n: e barnet
Om vi fortsätter med föregående exempel kan vi använda n-barnväljaren som ett komplement, liknande eq-väljaren, men skillnaden är att med n-barnet kan positioner anges i form av en aritmetisk operation. Den används för att välja ett eller flera element men med villkoret att det är det n: e barnet till föräldern. Denna väljare är användbar för att välja det andra stycket i ett block eller det tredje objektet i en lista, etc. Elementen tas inte som en array utan i ordning först, andra, etc.
Om vi till exempel lägger till i föregående skript
Udda kolumner kommer att väljas i det här fallet
- Udda kolumner nth-barn (2n + 1)
- Parade kolumner nth-child (2n)
- Första och fjärde kolumn n-barn (3n + 1)
