jQuery selektorer

Väljare tillåter dig att utföra åtgärder på en grupp av element eller ett enskilt element.

jQuery selektorer

I de tidigare kapitlen visade vi några exempel på hur man väljer HTML-element.

Kärnpunkten är att lära sig hur jQuery-väljare exakt väljer de element du vill tillämpa effekten på.

jQuery-elementväljare och attributväljare tillåter dig att välja HTML-element genom taggnamn, attributnamn eller innehåll.

Väljare tillåter dig att utföra åtgärder på grupper av HTML-element eller enskilda element.

I HTML DOM-termer:

Väljare tillåter dig att utföra åtgärder på grupper av DOM-element eller enskilda DOM-noder.

jQuery-elementväljare

jQuery använder CSS-väljare för att välja HTML-element.

$("p") väljer <p>-element.

$("p.intro") väljer alla <p>-element med class="intro".

$("p#demo") väljer alla <p>-element med id="demo".

jQuery-attributväljare

jQuery använder XPath-uttryck för att välja element med givna egenskaper.

$("[href]") väljer alla element med href-egenskap.

$("[href='#']") väljer alla element med href-värden som är "#".

$("[href!='#']") väljer alla element med href-värden som inte är "#".

$("[href$='.jpg']") väljer alla element med href-värden som slutar med ".jpg".

jQuery CSS-väljare

jQuery CSS-väljare kan användas för att ändra CSS-attribut för HTML-element.

I följande exempel ändras bakgrundsfärgen för alla p-element till röd:

Exempel

$("p").css("background-color","red");

Prova själv

Mer valjare exempel

Syntax Beskrivning
$(this) den aktuella HTML-elementet
$("p") alla <p>-element
$("p.intro") alla <p>-element med class="intro"
$(".intro") alla element med class="intro"
$("#intro") elementet med id="intro"
$("ul li:first") den första <li>-elementet i varje <ul>
$("[href$='.jpg']") alla href-egenskaper som slutar med ".jpg"
$("div#intro .head") elementet <div> med id="intro" som innehåller alla element med class="head"

För en fullständig referenshandbok, besök vår jQuery-väljare referenshandbok。