InternetWeb design

Hvorfor har vi brug for, og hvordan du optager JQuery-vælgeren?

Moderne webdesigner bør ikke kun mestrer det 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 af biblioteket er holdet. For at anvende en eller det andet hold, du har brug for en JQuery-vælgeren.

Formel selektorer i JQuery bibliotek

De vælgere i JQuery baseret på brug i CSS. De er forpligtet til at vælge elementer HTML-fil, for at bruge dem til at forårsage disse eller andre metoder til at manipulere dem (holdet). Søg foregår via funktionsvælgeren $ (). For eksempel, $ ( 'div').

De vælgere kan klassificeres afhængigt af, hvordan udvælgelsen af elementer:

  • grundlæggende;
  • efter attribut;
  • hierarkiet;
  • indhold;
  • på situationen;
  • valg af formularfelter;
  • andre.

Vigtige vælgere

I 90% af tilfældene ved brug dette bibliotek anvendes JQuery-vælgeren tilhører hovedgruppen. Alle af dem er ganske enkel og klar. Lad os betragte hver af dem:

  • * - vælger alle sideelementer, herunder hoved, krop, osv.
  • p / div / sidebar / ... - vælger alle elementer vedrørende det forudbestemte mærket (dvs. p.div, sidebar, etc ...);
  • .myClass / p.myClass - vælger de elementer med den angivne klasse navn;
  • # Mittid / p # mittid -. Vælger nogen ét element med den givne id.

Her er et eksempel. Lad os sige, vi har brug for at vælge alle elementer på siden med par klasse post vil være som følger: (. Pari) $. Hvis det er nødvendigt kun p elementer i denne klasse, så skriv: $ (p.par).

attribut vælgere

Du kan bruge JQuery hoved-vælgeren, hvis vi har brug for at vælge et element, der tilhører enhver klasse have id eller vælge alle elementer på siden. Men der er tilfælde, hvor en vare har ingen klasse eller id. Det er af denne, og der er markeringer ved attribut. De tillader dig at foretage et valg på nogle attribut af HTML-elementer, såsom href eller src. Denne attribut er skrevet i firkantede parenteser [].

Den enkleste eksempel: $ ([src]) - vælger alle elementer, der har src attribut. Det er muligt at indsnævre prøven ved at angive bestemte attribut værdi: $ ([src = 'http: // site / artikel / 132.222 / værdi']).

Du kan bruge nogle jQuery vælgere, hvis du ønsker at indsnævre feltet af valg. For eksempel $ (p [color = blue] [size = 12]) - vælges kun de elementer p, som har en blå farve og størrelse 12.

vælgere indhold

I så fald, hvis du ikke kan vælge elementer baseret på attributter eller grundlæggende vælgere, bør du henvise til deres indhold. I alt er der 4 vælgeren af denne type:

  • : Indeholder - vælger elementer, der indeholder den angivne tekst;
  • : Har - vælger elementer, der indeholder andre elementer er karakteristiske for linje;
  • : Parent - vælger elementer, der indeholder enhver anden;
  • : Tøm - vælger elementer, der ikke indeholder nogen anden.

Her er et eksempel. For at vælge alle elementer div, der indeholder teksten til Hej, du har brug for at skrive $ (div: indeholder ( 'Hello')).

vælgere hierarki

Der er en anden måde at vælge elementer i JQuery, nemlig - i henhold til deres hierarki (dvs. forholdet mellem hinanden på HTML-side). En masse af dem, så præsenterer vi to af de mest populære, "barn" og "efterkommer".

I det første tilfælde elementerne udvælges, som er direkte efterkommere (børn) af et givet element (forfader). For eksempel, for at vælge elementerne i listen i lyset klasse, som er et barn nav liste, så er du nødt til at skrive: $ (ul # nav> li.light).

Den anden sag - en mere generel. Der kan vælges og indirekte efterkommere af elementet. For eksempel, for at vælge de links i listen nav ordinere: $ (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.

Similar articles

 

 

 

 

Trending Now

 

 

 

 

Newest

Copyright © 2018 da.birmiss.com. Theme powered by WordPress.