Selektory jQuery
- Poprzednia strona Gramatyka jQuery
- Następna strona Zdarzenia jQuery
Selektory pozwalają na operowanie na grupach elementów lub pojedynczym elementie.
Selektory jQuery
W poprzednich rozdziałach pokazaliśmy przykłady, jak wybierać elementy HTML.
Kluczowym punktem jest nauka, jak dokładnie wybierać elementy, na które chcesz zastosować efekty za pomocą selektorów jQuery.
Selektory elementów jQuery i selektory atrybutów jQuery pozwalają na wybieranie elementów HTML za pomocą nazwy tagu, nazwy atrybutu lub zawartości.
Selektory pozwalają na operowanie na grupami elementów HTML lub pojedynczymi elementami.
W terminologii HTML DOM:
Selektory pozwalają na operowanie na grupach elementów DOM lub pojedynczymi węzłami DOM.
Selektory elementów jQuery
jQuery używa selektorów CSS do wybierania elementów HTML.
$("p") wybiera elementy <p>.
$("p.intro") wybiera wszystkie elementy <p> o class="intro".
$("p#demo") wybiera wszystkie elementy <p> o id="demo".
Selektory atrybutów jQuery
jQuery używa wyrażeń XPath do wybierania elementów z danym atrybutem.
$("[href]") wybiera wszystkie elementy z atrybutem href.
$("[href='#']") wybiera wszystkie elementy z wartością href równą "#".
$("[href!='#']") wybiera wszystkie elementy z wartością href różną od "#".
$("[href$='.jpg']") wybiera wszystkie elementy z wartością href kończącą się na ".jpg".
Selektory CSS jQuery
Selektory CSS jQuery mogą zmieniać atrybuty CSS elementów HTML.
Poniższy przykład zmienia kolor tła wszystkich elementów <p> na czerwony:
przykład
$("p").css("background-color","red");
więcej przykładów selektorów
| gramatyka | opis |
|---|---|
| $(this) | bieżący element HTML |
| $("p") | wszystkie elementy <p> |
| $("p.intro") | wszystkie elementy <p> class="intro" |
| $(".intro") | wszystkie elementy class="intro" |
| $("#intro") | element o id="intro" |
| $("ul li:first") | pierwszy element <li> w każdym <ul> |
| $("[href$='.jpg']") | wszystkie atrybuty href z wartością kończącą się na ".jpg" |
| $("div#intro .head") | wszystkie elementy class="head" w elemencie <div> o id="intro" |
Aby uzyskać pełny podręcznik, odwiedź naszą Podręcznik do selektorów jQuery.
- Poprzednia strona Gramatyka jQuery
- Następna strona Zdarzenia jQuery
