Hvad er der brug for, og hvordan er jQuery-vælgeren skrevet?
En moderne webdesigner burde ikke kun ejedet grundlæggende i HTML, CSS og JavaScript, men også være i stand til at arbejde i JQuery bibliotek, der fokuserer på samspillet af JavaScript med HTML-dokumenter. At det giver hurtig adgang til ethvert element DOM (application programming interface, der giver adgang til indhold html-filer) og manipulere dem. De vigtigste strukturelle enheder i dette bibliotek er holdene. For at kunne anvende denne eller den kommando, har du brug for en jQuery-vælger.
Formlen for selektorer i jQuery-biblioteket
JQuery-selektorer er baseret på dem, der anvendes i CSS. De er nødvendige for at vælge elementerne i HTML-filen, for at bruge dem til at kalde en eller anden metode til at manipulere dem (holdet). Søgning af vælgeren udføres ved hjælp af funktionen $ (). For eksempel $ ("div").
Selektorer kan klassificeres efter den måde, elementerne er valgt på:
- grundlæggende;
- ved attributt;
- ved hierarki
- efter indhold
- efter stilling
- udvælgelse af formularfelter
- andre.
Grundlæggende selektorer
I 90% af tilfældene, når der arbejdes med dette bibliotek, anvendes en jQuery-vælger tilhørende hovedgruppen. Alle er ret enkle og forståelige. Lad os overveje hver enkelt af dem:
- * - markerer alle elementer på siden, herunder hoved, krop osv.
- p / div / sidebar / ... - vælger alle elementer relateret til den givne tag (dvs. p.div, sidebar, etc.);
- .myClass / p.myClass - vælger elementer med det angivne klassenavn;
- # myID / p. # myID - vælger et element med det givne ID.
Lad os give et eksempel. Lad os sige, at vi skal vælge alle elementerne på en side med klasseparret. Indgangen vil se sådan ud: $ (.par). Hvis kun elementerne i p af denne klasse er nødvendige, så vil vi skrive: $ (p.par).
Attribut vælgerne
Den vigtigste JQuery-vælger kan bruges, hvisvi skal vælge et element, der tilhører en klasse, der har et id eller vælg alle elementerne på siden. Der er dog tidspunkter, hvor det ønskede element ikke har en klasse eller et id. Derfor er der selektorer ved attributtet. De giver dig mulighed for at prøve på nogle attributter af et HTML-element, for eksempel ved href eller src. Denne attribut er skrevet i firkantede parenteser [].
Det enkleste eksempel: $ ([src]) - vælger alle elementer, der har src attributten. Du kan indsnævre prøveområdet ved at indstille attributten til en bestemt værdi: $ ([src = "value"]).
Du kan bruge flere i jQueryselektorer, om nødvendigt, indsnævre markeringsområdet. For eksempel $ (p [farve = blå] [størrelse = 12]) - kun de elementer af p, der er blå og størrelse 12, bliver valgt.
Content selectors
I tilfælde af at det ikke er muligt at vælge emner efter attributter eller af hovedvælgere, er det værd at henvise til deres indhold. Der er 4 selektorer af denne type:
- : indeholder - vælger elementer indeholdende den angivne tekst;
- : har - vælger elementer, der indeholder andre elementer, der er specifikke for den pågældende linje
- : forælder - vælger elementer, der indeholder andre;
- : tom - markerer elementer, der ikke indeholder andre.
Lad os give et eksempel. For at vælge alle de div-elementer, der indeholder Hello-teksten, skal du skrive $ (div: contains ("Hello")).
Hierarki selektorer
Der er endnu en måde at vælge emner i jQuery,nemlig - i henhold til deres hierarki (det vil sige forholdet til hinanden på HTML-siden). Der er mange af dem, så her er to af de mest populære: "barn" og "barn".
I det første tilfælde vælges de valgte elementerer de direkte efterkommere (barn) af det givne element (forfader). Hvis du f.eks. Skal vælge listeposterne i den lysklasse, der er barnet på navlisten, skal du skrive: $ (ul # nav> li.light).
Det andet tilfælde er mere generelt. Her kan de indirekte efterkommere af et element også vælges. For eksempel, for at vælge links inden for navlisten, skriver vi: $ (ul # nav a).
Således i JQuery elementer kan vælges på forskellige måder ved anvendelse af parametre, såsom en klasse, ID, attributter, indhold eller hierarki af HTML-dokumentelementer.
