Varför behöver vi och hur du spelar JQuery-väljare?

Modern webbdesigner bör inte bara behärska grunderna i HTML, CSS och JavaScript, men också att kunna arbeta i JQuery biblioteket, som fokuserar på interaktionen mellan JavaScript med HTML-dokument. Att det ger snabb tillgång till alla element DOM (application programming interface som ger tillgång till innehåll html-filer) och manipulera dem. De viktigaste strukturella enheter i biblioteket är laget. För att tillämpa en eller det andra laget, behöver du en JQuery väljaren.

Formel väljare i JQuery biblioteket

Väljarna i JQuery baserat på användning i CSS. De är skyldiga att välja objekt HTML-fil, för att använda dem för att orsaka dessa eller andra metoder för att manipulera dem (lag). Sök utförs via väljaren $ () funktion. Till exempel, $ (div).

Väljarna kan klassificeras beroende på hur valet av element:

• grundläggande;
• efter egenskap;
• hierarkin;
• innehåll;
• om situationen;
• val av formulärfält;
• andra.

nyckel~~POS=TRUNC väljare

I 90% av fallen vid användning av denna biblioteket används JQuery-väljare som tillhör den största gruppen. Alla av dem är ganska enkel och tydlig. Låt oss betrakta var och en av dem:

• * - väljer alla sidelement, inklusive huvud, kropp, etc..
• p / div / sidofältet / ... - väljer alla element som hänför sig till den förutbestämda taggen (dvs till p.div, sidofältet, etc ...);
• .myClass / p.myClass - väljer elementen med det specificerade klassnamnet;
• # Myid / p # myid -. Väljer någon post med angivet ID.

Här är ett exempel. Låt oss säga att vi måste välja alla element på sidan med par klass posten kommer att vara följande: (. Par) $. Vid behov enbart p delar av denna klass och sedan skriva: $ (p.par).

attribut selektorer

Du kan använda JQuery huvudväljaren, om vi måste välja ett objekt som tillhör någon klass som har ID eller välja alla element på sidan. Men det finns fall när ett objekt har ingen klass eller ID. Det är för detta och det finns val av attribut. De tillåter dig att göra ett val på vissa attribut av HTML-element, såsom href eller src. Detta attribut är skriven i hakparenteser [].

Det enklaste exemplet: $ ([src]) - väljer alla element som har src attribut. Det är möjligt att begränsa provet genom att specificera vissa attributvärde: $ ([src = 'http: // site / artikeln / 132.222 / värde']).

Du kan använda några JQuery väljare om du vill begränsa området val. Till exempel $ (p [color = blue] [size = 12]) - väljs endast de element p, som har en blå färg och storlek 12.

Selectors innehåll

I så fall, om du inte kan välja element baserade på attribut eller grund väljare bör du hänvisa till deras innehåll. Totalt finns det fyra väljare av denna typ:

• : Innehåller - väljer objekt som innehåller den angivna texten;
• : Har - väljer beståndsdelar som innehåller andra element som är karakteristiska för linjen;
• : Parent - väljer beståndsdelar som innehåller någon annan;
• : Tom - väljer element som inte innehåller någon annan.

Här är ett exempel. För att välja alla element div som innehåller texten Hello, måste du skriva $ (div: innehåller ( 'Hej')).

Selectors hierarki

Det finns ett annat sätt att välja element i jQuery, nämligen - enligt deras hierarki (det vill säga förhållandet mellan varandra på HTML-sida). Många av dem, så presenterar vi två av de mest populära, "barn" och "ättling".

I det första fallet elementen är valda, vilka är direkta ättlingar (barn) av ett givet element (förfader). Till exempel, för att välja de delar av listan i ljuset klass som är ett barn nav lista, måste du skriva: $ (ul # nav> li.light).

Det andra fallet - en mer allmän. Det kan väljas och indirekta ättlingar elementet. Till exempel, för att välja länkarna i listan nav ordinera: $ (ul # nav a).

Således, i JQuery element kan väljas på olika sätt genom att använda parametrar såsom en klass, ID, attribut, innehåll eller hierarki av HTML-dokumentelement.