Hvorfor trenger vi og hvordan du tar opp JQuery-velgeren?

Moderne webdesigner bør ikke bare mestre grunnleggende om HTML, CSS og Javascript, men også være i stand til å arbeide i JQuery bibliotek, som fokuserer på samspillet mellom Javascript med HTML-dokumenter. At det gir rask tilgang til noe element DOM (programmeringsgrensesnitt som gir tilgang til innhold html-filer) og manipulere dem. De viktigste strukturelle enheter av biblioteket er laget. For å bruke det ene eller det andre laget, trenger du en jQuery-velgeren.

Formel velgere i JQuery bibliotek

Velgerne i JQuery basert på bruk i CSS. De er pålagt å velge elementer HTML-fil, for å bruke dem til å forårsake disse eller andre metoder for å manipulere dem (lag). Søk utføres via velger $ () -funksjonen. For eksempel $ ( 'div').

Velgerne kan klassifiseres avhengig av hvordan valg av elementer:

• grunnleggende;
• etter egenskap;
• hierarkiet;
• innhold;
• på den situasjon;
• Valget av skjemafelt;
• andre.

nøkkel~~POS=TRUNC velgere

I 90% av tilfellene ved bruk av dette biblioteket blir brukt JQuery-velgeren tilhører hovedgruppen. Alle av dem er ganske enkel og klar. La oss se på hver av dem:

• * - velger alle sideelementer, inkludert hode, kropp, etc;.
• p / div / sidepanelet / ... - velges alle elementer som hører til den forhåndsbestemte kode (dvs. til p.div, sidepanelet, etc ...);
• .myClass / p.myClass - velger elementene med den angitte klasse navn;
• # MyID / p # myID -. Velger enkeltelementer med gitt ID.

Her er et eksempel. La oss si at vi må velge alle elementer på siden med par klassen oppføring vil være som følger: (. Par) $. Om nødvendig bare p elementer i denne klassen, og deretter skrive: $ (p.par).

attributt velgere

Du kan bruke JQuery hoved-velgeren, hvis vi trenger å velge et element som tilhører en klasse som har ID eller velg alle elementer på siden. Men det finnes tilfeller der en vare har ingen klasse eller ID. Det er for dette og det er valg av attributt. De lar deg gjøre et valg på noen egenskap av HTML-elementer, for eksempel href eller src. Dette attributtet er skrevet i hakeparenteser [].

Det enkleste eksemplet: $ ([kilde]) - velger alle elementene som har src attributt. Det er mulig å begrense prøven ved å spesifisere visse attributtverdi: $ ([src = 'http: // site / artikkel / 132222 / verdi']).

Du kan bruke noen jQuery velgere hvis du ønsker å begrense feltet av valget. For eksempel, $ (p [color = blue] [size = 12]) - er valgt bare de elementer p, som har en blå farge og størrelse 12.

velgere innhold

I så fall, hvis du ikke kan velge elementer basert på attributter eller grunnleggende velgere, bør du referere til innholdet. Det er totalt 4 velger av denne typen:

• : Inneholder - velger elementer som inneholder den angitte teksten;
• : Har - velger elementer som inneholder andre elementer som er karakteristiske for den linje;
• : Parent - velger elementer som inneholder en hvilken som helst annen;
• : Empty - velger elementer som ikke inneholder noe annet.

Her er et eksempel. Hvis du vil velge alle elementene div, som inneholder teksten i Hei, du må skrive $ (div: inneholder ( 'Hei')).

velgere hierarki

Det er en annen måte å velge elementer i JQuery, nemlig - i henhold til deres hierarki (det vil si forholdet mellom hverandre på HTML-siden). Mange av dem, så vi presentere to av de mest populære, "barn" og "etterkommer".

I det første tilfelle elementene er valgt, noe som er direkte etterkommere (barn) av et gitt element (stamfar). For eksempel, for å velge elementene i listen i lys klasse som er et barn nav liste, så må du skrive: $ (ul # nav> li.light).

Det andre tilfellet - et mer generelt. Det kan velges og indirekte etterkommere av elementet. For eksempel, for å velge koblinger innenfor listen nav fore: $ (ul # nav a).

Således, i JQuery elementer kan velges på forskjellige måter ved anvendelse av parametere slik som en klasse, ID, attributter, innhold eller hierarki av HTML-dokumentelementer.