JQuery - selektory podstawowe

Zanim spełnię obietnicę złożoną w pierwszej części kursu, związaną z manipulacjami na CSS, warto poznać możliwości dotyczące wyszukiwania (selekcji) elementów DOM, których modyfikację chcemy przeprowadzić. Aby zbudować przykład użyjemy funkcji css, która nadaje konkretną wartość dla wybranego argumentu stylu css.

.css(nazwa,wartość)

W jaki sposób wyszukiwać elementy strony? Służy do tego poniższa funkacja

$(filtr);

Zawsze rozpoczynamy od znaku $, a jako parametr wpisujemy parametr filtrowania, którym może być sam element, jego ID lub określona dla niego klasa CSS. Sa również do dyspozycji selektory CSS, XPath oraz inne dopuszczane przez JQuery.

Jeśli ją połączymy z funkcją określającą co mamy zrobić dla wybranych elementów strony (separatorem jest kropka "."), np. wcześniej opisana funkcja zmiany atrybutu css to otrzymujemy.

$(filtr).css(atrybut,wartość);

Teraz zajmiemy się tylko podstawowymi selektorami, a dalsze częsci kursu będą opisywały kolejne.

Załóżmy, że nasz kod HTML strony jest następujący:

<div id="divek">
   <ul>
       <li id="li1" class="first">Pierwszy punkt</li>
       <li id="li2" class="first">Drugi punkt</li>
       <li id="li3">Trzeci punkt</li>
   </ul>
</div>
<p class="first">Paragraf</p>

Zgodnie z API JQuery, możemy wyszukiwać elementy wskazując:

#id - identyfikator elementu

$('#li3').css("background","yellow");

Po wyszukaniu elementu o id="li3" natąpi zmiana tła trzeciego punktu listy na kolor żółty.

element strony

$('li').css("background","yellow");

Efektem wykonania powyższego kodu będzie wyszukanie trzech elementów "li" i zmiana tła tych elementów na kolor żółty. Sprawa na prawdę prosta. Można to zrobić przy pomocy JS, ale musimy użyć pętli. Tu wystarczy, że wskażemy wszystkie elementy danego typu i z automatu wszelkie zmiany odnoszą sie do całej grupy. Nie dość, że łatwe, to jakie czytelne. Kod miły dla oka...

klasę CSS (class)

$('.first').css("background","yellow");

Powyższy kod umożliwia wybór dwóch pierwszych elementów listy, dla których paramter class="yellow", a następnie zamienia tło na żółte.

* - wskazanie wszystkich elementów strony

$('*').css("background","yellow");

Powyższy kod pozwoli wybrać wszystkie elmenty strony. Dla naszego przykładu będzie to div, ul, li, p. Dla każdego z tych elemntów tło ulegnie zmianie na żółte. Nie daję przykładu, bo zmianie uległby cały serwis.

Wybierzmy teraz wszystkie elementy li dla których klasa ma nazwę first. Jak to zapisać?

$('li.first').css("background","yellow");

Kod powyższy pozwoli wybrać tylko elementy li, dla których nazwa klasy CSS to first i zamienić ich tło na żółte. Paragraf (p), który też przypisaną ma klasę "first" pozostanie bez zmian.

I to jest tylko wierzchołek góry możliwości wyszukiwania odpowiednich elementów strony. Jak już wspomniałem w pierwszej części posługujemy się selektorami CSS i XPath, których jest długa lista (opublikuję później).

Ciąg dalszy niedługo....