Vad behövs och hur skrivs jQuery-väljaren?

En modern webbdesigner borde inte bara ägagrunderna i HTML, CSS och JavaScript, men också kunna fungera i biblioteket av jQuery, som fokuserar på interaktionen mellan JavaScript och HTML-dokument. Det låter dig snabbt komma åt och manipulera alla DOM-element (det programgränssnitt som öppnar åtkomst till innehållet i HTML-filer). De viktigaste strukturella enheterna i detta bibliotek är lagen. För att kunna tillämpa detta eller det här kommandot behöver du en jQuery-väljare.

Formeln av väljare i jQuery-biblioteket

JQuery selectors är baserade på de som används i CSS. De behövs för att välja element i HTML-filen, så att de kan ringa en eller annan metod för att manipulera dem (laget). Sökningen av väljaren utförs med funktionen $ (). Till exempel $ ("div").

Selektorer kan klassificeras enligt hur elementen väljes:

grundläggande;
genom attribut
genom hierarkin;
av innehåll
av position
urval av formulärfält
andra.

Grundläggande väljare

I 90% av fallen när man arbetar med det här biblioteket används en jQuery-väljare som tillhör huvudgruppen. Alla är ganska enkla och begripliga. Låt oss överväga var och en av dem:

* - Väljer alla element på sidan, 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 element med det angivna klassnamnet;
# myID / p. # myID - väljer ett element med det angivna ID-numret.

Låt oss ge ett exempel. Låt oss säga att vi måste välja alla element på en sida med klassparet, posten kommer att se ut så här: $ (.par). Om endast elementet i p i den här klassen behövs, skriver vi: $ (p.par).

Attributväljare

Den huvudsakliga JQuery-väljaren kan användas omvi måste välja ett element som tillhör en klass som har ett ID eller välj alla element på sidan. Det finns emellertid tider när det önskade elementet inte har någon klass eller ett ID. Därför finns det selektorer av attribut. De tillåter dig att prova på något attribut av ett HTML-element, till exempel, genom href eller src. Detta attribut är skrivet i kvadratkonsoler [].

Det enklaste exemplet: $ ([src]) - väljer alla element som har src attributet. Du kan begränsa provområdet genom att ange attributet till ett visst värde: $ ([src = "value"]).

Du kan använda flera i jQueryväljare, om nödvändigt, begränsa urvalsområdet. Till exempel, $ (p [färg = blå] [storlek = 12]) - endast de element av p som är cyan och storlek 12 kommer att väljas.

Innehållsvalörer

Om det inte går att välja element enligt attribut eller av huvudväljare, är det värt att hänvisa till innehållet. Totalt finns det fyra väljare av denna typ:

: innehåller - väljer de element som innehåller den angivna texten;
: har - väljer element som innehåller andra element som är specifika för den givna strängen;
: förälder - väljer objekt som innehåller någon annan;
: tom - väljer objekt som inte innehåller några andra.

Låt oss ge ett exempel. För att välja alla div-element som innehåller texten Hej, måste du skriva $ (div: innehåller ("Hej")).

Hierarkiska väljare

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

I det första fallet är de element som ärär direkta efterkommande (barn) av ett givet element (förfader). Om du till exempel väljer listobjekt i ljusklassen som är barn i navlistan måste du skriva: $ (ul # nav> li.light).

Det andra fallet är mer allmänt. Indirekta efterkommande av något element kan också väljas här. Till exempel, för att välja länkar i listan över nav skriver vi: $ (ul # nav a).

Således kan jQuery väljas på olika sätt med hjälp av parametrar som klass, ID, attribut, innehåll eller hierarki av element i ett HTML-dokument.