Hva er nødvendig og hvordan skrives jQuery-väljeren?
En moderne webdesigner burde ikke bare eiegrunnleggende om HTML, CSS og JavaScript, men også å kunne jobbe i biblioteket av jQuery, som fokuserer på samspillet mellom JavaScript og HTML-dokumenter. Det lar deg raskt få tilgang til og manipulere eventuelle DOM-elementer (programgrensesnittet som åpner tilgang til innholdet i html-filer). De viktigste strukturelle enhetene i dette biblioteket er lagene. For å kunne bruke denne eller den kommandoen, trenger du en jQuery-velger.
Formelen for selektorer i jQuery-biblioteket
JQuery selectors er basert på de som brukes i CSS. De er nødvendige for å velge elementene i HTML-filen, for å bruke dem til å ringe en eller annen metode for å manipulere dem (teamet). Søk av väljeren utføres ved hjelp av funksjonen $ (). For eksempel $ ("div").
Selektorer kan klassifiseres etter hvordan elementene er valgt:
- grunnleggende;
- ved attributt;
- av hierarki;
- av innhold
- etter stilling;
- utvalg av skjemafelter;
- andre.
Grunnleggende selektorer
I 90% av tilfellene når du arbeider med dette biblioteket, brukes en jQuery-velger som tilhører hovedgruppen. Alle er ganske enkle og forståelige. La oss vurdere hver av dem:
- * - Velger alle elementene på siden, inkludert hodet, kroppen, osv.
- p / div / sidebar / ... - velger alle elementer relatert til den oppgitte taggen (dvs. p.div, sidebar, etc.);
- .myClass / p.myClass - velger elementer med spesifisert klassenavn;
- # myID / p. # myID - velger ett element med den oppgitte IDen.
La oss gi et eksempel. La oss si at vi må velge alle elementene på en side med klassepar, oppføringen vil se slik ut: $ (.par). Hvis bare elementene i denne klassen er nødvendige, vil vi skrive: $ (p.par).
Attributtvelgere
Hovedvelgeren JQuery kan brukes hvisvi må velge et element som tilhører en klasse som har en ID eller velg alle elementene på siden. Det er imidlertid tider når det ønskede elementet ikke har en klasse eller ID. Derfor er det selektorer ved attributt. De lar deg prøve på noen attributt av et HTML-element, for eksempel av href eller src. Denne attributtet er skrevet i firkantede parenteser [].
Det enkleste eksempelet: $ ([src]) - velger alle elementer som har src attributtet. Du kan begrense prøveområdet ved å sette attributtet til en bestemt verdi: $ ([src = "value"]).
Du kan bruke flere i jQueryselektorer, om nødvendig, begrense utvalgsområdet. For eksempel, $ (p [color = blue] [size = 12]) - bare de elementene av p som er blå og størrelse 12 blir valgt.
Innholdsvelger
I tilfelle det ikke er mulig å velge elementer etter attributtene eller av hovedselektorer, er det verdt å referere til innholdet. Det er 4 selektorer av denne typen:
- : inneholder - velger elementer som inneholder den angitte teksten;
- : har - velger elementer som inneholder andre elementer som er spesifikke for den linjen;
- : foreldre - velger elementer som inneholder noen andre;
- : tom - velger elementer som ikke inneholder noen andre.
La oss gi et eksempel. For å velge alle div-elementene som inneholder Hello-teksten, må du skrive $ (div: contains ("Hello")).
Hierarki velgere
Det er en annen måte å velge elementer i jQuery,nemlig - i henhold til deres hierarki (det vil si forholdet til hverandre på HTML-siden). Det er mange av dem, så her er to av de mest populære: "barn" og "barn".
I det første tilfellet velges elementeneer de direkte etterkommere (barn) av det gitte elementet (forfedre). For eksempel, for å velge listepostene i lysklassen som er barnet til navlisten, må du skrive: $ (ul # nav> li.light).
Det andre tilfellet er mer generelt. Her kan også de indirekte etterkommerne av et element velges. For eksempel, for å velge lenker i navlisten, skriver vi: $ (ul # nav a).
I JQuery kan elementene derfor velges på forskjellige måter ved å bruke parametere som klasse, ID, attributter, innhold eller hierarki av elementer i HTML-dokumentet.
