• Do czego służy funkcja $ ?
• Nawigacja DOM
• Szukanie elementów wg. klas CSS
• Kontrolowanie widoczności elementu
• Ustawianie klas CSS

Do czego służy funkcja $ ?

Funkcja $ , popularna w wielu bibliotekach JS, służy do rozszerzania możliwości elementów dodając szereg przydatnych funkcji nie uwzględnionych domyślnie w DOM. Należą do nich przede wszystkim funkcje ułatwiające nawigację po elementach, dzięki czemu możliwe jest wygodne i szybkie dotarcie do każdego elementu na stronie. Funkcja $ wywoływana jest z jednym parametrem, jakim jest identyfikator elementu lub element, którego możliwości zamierzamy rozszerzyć.

Nawigacja DOM

Do nawigacji po elementach służą cztery funkcje: next, prev, up oraz down. Pierwsze dwie zwracają element po(next)/przed(prev) elementem, dla którego wywołana została dana funkcja, następne dwie funkcje zwracają element nadrzędny(up)/podrzędny(down).  Funkcje next, prev oraz down mogą być wywołane z dwoma parametrami: nazwą tagu oraz odległością szukanego elementu. Ponadto funkcje te ignorują puste elementy tekstowe (tj. zawierające tylko białe znaki jak spacje).

Użycie opisanych funkcji najlepiej przedstawić na kilku przykładach:

• $("first").innerHTML = Div #1
• $("first").next().innerHTML = Span #1
  
• $("first").next("div").innerHTML = Div #2
• $("first").next(null, 2).innerHTML = Span #2
• $("first").next("div", 2).down("div", 2).innerHTML = Div #4

 Szukanie elementów wg. klas CSS

 Funkcja $ wprowadza możliwość pobrania elementów zawierających podaną nazwę klasy. Służy do tego funkcja getElementsByClass wywoływana z jednym parametrem wymaganym (nazwą klasy) oraz jednym opcjonalnym (nazwą tagu). Funkcja zwraca tablicę wszystkich elementów zawierających określoną klasę, ponadto jeśli przekazana została nazwa tagu zwrócone zostaną tylko elementy danego typu.

Kontrolowanie widoczności elementu

Do kontrolowania widoczności elementu służą trzy funkcje: show (pokazuje element), hide (chowa element) oraz toggle (zmienia widoczność, jeśli element jest widoczny, to zostanie schowany i odwrotnie).

Ustawianie klas CSS

Funkcja $ wprowadza również trzy funkcje do operacji na klasach: addClass (dodaje podaną klasę), removeClass (usuwa podaną klasę) oraz hasClass (sprawdza, czy element posiada podaną klasę).