Waarom hebben we nodig hebt en hoe jQuery-selector op te nemen?

Modern web designer moet niet alleen beheersen de basis van de HTML, CSS en JavaScript, maar ook in staat zijn om te werken in de JQuery bibliotheek, die zich richt op de interactie van JavaScript met HTML-documenten. Dat het biedt snelle toegang tot elk element DOM (application programming interface die toegang biedt tot de inhoud html-bestanden) en manipuleren. De belangrijkste structurele eenheden van de bibliotheek zijn het team. Om daarbij een of het andere team, een jQuery-selector nodig.

Formule selectors in jQuery bibliotheek

De selectors in jQuery gebaseerd op het gebruik in CSS. Zij zijn verplicht om items HTML-bestand te selecteren, om ze te gebruiken om deze of andere methoden van hen (het team) te manipuleren veroorzaken. Search wordt uitgevoerd via de functie selector $ () uitgevoerd. Bijvoorbeeld, $ ( 'div').

De selectors kunnen worden ingedeeld, afhankelijk van hoe de selectie van elementen:

• basic;
• op eigenschappen;
• de hiërarchie;
• inhoud;
• over de situatie;
• keuze formuliervelden;
• anderen.

Key selectors

In 90% van de gevallen bij het gebruik van deze bibliotheek wordt gebruikt JQuery selector die tot de hoofdgroep. Ieder van hen zijn vrij eenvoudig en duidelijk. Laten we elk van hen overwegen:

• * - selecteert alle pagina-elementen, zoals het hoofd, lichaam, enz.
• p / div / zijbalk / ... - selecteert alle elementen met betrekking tot de vooraf bepaalde tag (dwz p.div, zijbalk, enz ...);
• .myClass / p.myClass - selecteert de elementen met de opgegeven naam van de klasse;
• # MyID / p # myid -. Selecteert een item met de opgegeven ID.

Hier is een voorbeeld. Laten we zeggen dat we nodig hebben om alle elementen op de pagina met par klasse vermelding te selecteren is als volgt: (par.) $. Indien nodig alleen p elementen van deze klasse, schrijf dan: $ (p.par).

attribuut selectors

U kunt de JQuery main-selector gebruiken, als we nodig hebben om een item behoort tot een klasse met ID of selecteer alle elementen op de pagina. Echter, er zijn gevallen waarin een item heeft nog geen klasse of ID. Het is om deze en er zijn selecties op eigenschappen. Ze laten u om een selectie te maken op een aantal attribuut van de HTML-elementen, zoals href of src. Dit kenmerk is in vierkante haken [].

Het eenvoudigste voorbeeld: $ ([bron]) - selecteert alle elementen die src attribuut. Het is mogelijk om het monster te beperken door het specificeren van bepaalde eigenschap value: $ ([src = 'http: // site / article / 132.222 / value']).

U kunt een aantal JQuery selectors gebruiken als u wilt het gebied van de keuze te beperken. Bijvoorbeeld $ (p [color = blue] [size = 12]) - gekozen alleen die elementen p, die een blauwe kleur en grootte 12 hebben.

selectors inhoud

In dat geval, als je geen elementen op basis van attributen of basische selectors kunt selecteren, moet u verwijzen naar de inhoud ervan. Er zijn in totaal 4 selector van dit type:

• : Bevat - selecteert items met de opgegeven tekst;
• : Heeft - selecteert elementen die kenmerkend andere elementen van de lijn bevatten;
• : Parent - selecteert elementen die andere bevatten;
• : Empty - selecteert elementen die geen andere bevatten.

Hier is een voorbeeld. Om alle elementen div selecteren, met de tekst van de Hello, moet je $ schrijven (div: bevat ( 'Hello')).

selectors hiërarchie

Er is een andere manier om elementen in jQuery, namelijk keuze - op basis van hun hiërarchie (dat wil zeggen de verhouding van elkaar op de HTML-pagina). Veel van hen, dus we presenteren twee van de meest populaire, "kind" en "afstammeling".

In het eerste geval de elementen gekozen, die directe afstammelingen (kinderen) van een bepaald element (voorvader) zijn. Bijvoorbeeld, om de elementen van de lijst in het licht klasse die een kind nav lijst te selecteren, dan moet je om te schrijven: $ (ul # nav> li.light).

Het tweede geval - een meer algemeen. Er kan worden gekozen en indirecte afstammelingen van het element. Bijvoorbeeld, om de links in de lijst nav voorschrijven selecteren: $ (ul # nav a).

Dus in JQuery elementen kunnen op verschillende manieren geselecteerd met parameters als klasse-ID, kenmerken, inhoud of hiërarchie van HTML-document elementen.