Selektory JQuery
Za pomocą selektorów wybieramy elementy do których ma się odwołać objekt JQuery. Selektor jest to argument przekazywany bezpośrednio do funkcji JQuery: np.: $('a:visible') - selektorem jest a:visible. Selektory działają tak samo jak reguły styli w arkuszach stylów i obsługują wszystkie selektory CSS od wersji 1 do wersji 3.
Najczęściej używane selektory:
Nazwa klasy $('.class')
Znajduje wszystkie elementy określonej klasy. Działa tak samo jak w arkuszach styli, przykładowo deklaracja w css: .blue { color: blue; } zmienia wszystkie elementy z klasą blue, tak $('.blue') znajduje wszystkie elementy z klasą blue.
HTML
<section>
<div class="header">HEADER</div>
<div class="content">CONTENT 1</div>
<div class="content">CONTENT 2</div>
<div class="footer">FOOTER</div>
</section>
|
JavaScript
$('.content').css('color', 'Red');
|
Wynik HTML
<section>
<div class="header">HEADER</div>
<div class="content" style="color:Red">CONTENT 1</div>
<div class="content" style="color:Red">CONTENT 2</div>
<div class="footer">FOOTER</div>
</section>
|
Do elementów z klasą "content" został dodany styl color: Red.
Id elementu $('#ID')
Znajduje wszystkie elementy o określonym ID:
Przykładowy HTML:
HTML
<section>
<div id="header">HEADER</div>
<div id="content1">CONTENT ID 1</div>
<div id="content2">CONTENT ID 2</div>
<div id="footer">FOOTER</div>
</section>
|
JavaScript
$('#content1').css('color', 'Red');
|
Wynik HTML
<section>
<div id="header">HEADER</div>
<div id="content1">CONTENT ID 1</div>
<div id="content2">CONTENT ID 2</div>
<div id="footer">FOOTER</div>
</section>
|
Jeżeli z założenia będziemy wybierać tylko jeden element, posługiwanie się id elementu zamiast selektorów klas jest bardziej wydajne.
Element $('element')
Wybiera wszystkie elementy określonego typu.
Przykład:
HTML
<section>
<p>Akapit </p>
<div>Panel 1</div>
<div>Panel 2</div>
<article>Nowy element HTML5 </article>
</section>
|
JavaScript
$('div').css('color', 'Red');
|
Wynik HTML
<section>
<p>Akapit </p>
<div style="color:Red">Panel 1</div>
<div style="color:Red">Panel 2</div>
<article>Nowy element HTML5 </article>
</section>
|
Wszystkie elementy div będą w kolorze czerwonym.
Atrybut $('div[id]')
Znajduje wszystkie elementy dla których przypisano określony atrybut.
Przykład:
XML
<section>
<p>Akapit </p>
<div id="pnl1">Panel 1</div>
<div id="pnl2">Panel 2</div>
<div>Panel 3, bez id</div>
<article>Nowy element HTML5 </article>
</section>
|
JavaScript
$('div[id]').css('color', 'Red');
|
Wynik HTML
<section>
<p>Akapit </p>
<div id="pnl1" style="color:Red">Panel 1</div>
<div id="pnl2" style="color:Red">Panel 2</div>
<div>Panel 3, bez id</div>
<article>Nowy element HTML5 </article>
</section>
|
Wszystkie elementy div z przypisanym atrybutem id będą w kolorze czerwonym.
Korzystając z tego selektora najczęściej chcemy wykonać na wybranym elemencie operacje zależne od wartości tego parametru. Najlepiej posłużyć się funkcją JQuery.each().
Jej użycie jest banalnie proste:
JavaScript
$('div[id]')
.each(function () {
if (this.attr('id') == 'pnl1') {
}
});
|
Atrybut $('div[id=pnl1]')
Znajduje wszystkie elementy dla których atrybut ma określoną wartość.
Oprócz ścisłego dopasowania istnieją jeszcze inne:
-
$('div[id|=var')
Wszystkie elementy dla których wartość określonego atrybutu zaczyna się od var
-
$('div[id*=var')
Wszystkie elementy dla których wartość określonego atrybutu zawiera var
-
$('div[id$=var')
Wszystkie elementy dla których wartość określonego atrybutu kończy się wyrażeniem var
-
$('div[id^=var')
Wszystkie elementy dla których wartość określonego atrybutu rozpoczyna się wyrażeniem var
HTML
<section>
<p>Akapit </p>
<div id="pnl1">Panel 1</div>
<div id="pnl2">Panel 2</div>
<div>Panel 3, bez id</div>
<div id="last">Panel 4</div>
<article>Nowy element HTML5 </article>
</section>
|
JavaScript
$('div[id^=pnl]').css('color', 'Red');
|
Wynik HTML
<section>
<p>Akapit </p>
<div id="pnl1" style="color:Red">Panel 1</div>
<div id="pnl2" style="color:Red">Panel 2</div>
<div>Panel 3, bez id</div>
<div id="last">Panel 4</div>
<article>Nowy element HTML5 </article>
</section>
|
Łączenie selektorów
Selektory JQuery można dowolnie łączyć, czyli w jednym wyrażeniu podać dowolną kombinację pojedyńczych selektorów.
Przykład:
HTML
<section>
<p>Akapit </p>
<div id="pnl1">Panel 1</div>
<div id="pnl2">Panel 2</div>
<div>Panel 3, bez id</div>
<article>Nowy element HTML5 </article>
</section>
|
JavaScript
$('#pnl1,#pnl2').css('color', 'Red');
|
Wynik HTML
<section>
<p>Akapit </p>
<div id="pnl1" style="color:Red">Panel 1</div>
<div id="pnl2" style="color:Red">Panel 2</div>
<div>Panel 3, bez id</div>
<article>Nowy element HTML5 </article>
</section>
|
Łączenie selektorów: wybieranie po więcej niż jednym atrybucie
W selektorze definiujemy warunek do więcej niż jednego atrybutu.
Przykład:
HTML
<section>
<p>Akapit </p>
<div id="pnl1">Panel 1</div>
<div id="pnl2" class="red">Panel 2</div>
<div>Panel 3, bez id</div>
<article>Nowy element HTML5 </article>
</section>
|
JavaScript
$('div[id=pnl2][class=red]').css('color', 'Red');
|
XML
<section>
<p>Akapit </p>
<div id="pnl1">Panel 1</div>
<div id="pnl2" class="red" style="color:Red">Panel 2</div>
<div>Panel 3, bez id</div>
<article>Nowy element HTML5 </article>
</section>
|
Zaprezentowane powyżej przykłady są podstawowym sposobem wykorzystania selektorów. Można je w dowolny sposób łączyć:
$('div') - wybiera wszystkie elementy div
$('.red') - wybiera wszystkie elementy z klasą red
$('div.red') - wybiera wszystkie elementy div z klasą red
$('div#pnl1') - wybiera element div o id=pnl1. Przydatne jeżeli dla poprawnego działania kodu potrzebujemy elementu określonego typu.
Przykładowo chcemy dodać marginesy do wszystkich akapitów z klasą .space: $('.space').css('margin', '10px'), ale ten kod doda margines również do elementu <div class="space"></div>, dlatego w tym przypadku użycie kodu $('p.space').css('margin', '10px') jest lepsze.
$('form input.autoclear[type=text]') wybiera wszystkie pola (input) tekstowe[type=text] formularza (form) z klasą autoclear. Tak samo moglibyśmy zdefiniować style w pliku css - taki sam selektor.
Lista zawiera tylko najpopularniejsze selektory, pełna lista znajduje się w dokumentacji jquery: http://api.jquery.com/category/selectors/
W kolejnych postach poruszymy kwestię obsługi zdarzeń i zamieścimy opis podstawowych funkcji JQuery.