jQuery

addClass()

nadawanie klasy CSS wybranym elementom drzewa DOM

$

Skoro za znakiem $ znajduje się nawias okrągły, czyli operator wywołania funkcji (metody, konstruktora), to ten znak określa po prostu nazwę funkcji. Jest to jak najbardziej poprawne. Taka nazwa funkcji (ogólniej — identyfikator) w JavaScripcie może się składać z liter, cyfr, znaków podkreślenia i znaków $. Skoro tak, to pojedynczy znak $ może być nazwą funkcji.


W rzeczywistości $ to alias głównej funkcji jQuery (i jednocześnie głównego obiektu) o nazwie jQuery (nazwa funkcji jest taka sama jak nazwa biblioteki). Znak $ pełni więc wyłącznie rolę zapisu skrótowego. Zamiast pisać $, można też pisać jQuery.

Jakie jest zadanie funkcji $ (jQuery)? Otóż ma ona zwrócić obiekt reprezentujący tę część dokumentu HTML, która zostanie określony przez argument. Argumentem najczęściej jest selektor wybierający elementy drzewa DOM, choć może to też być obiekt czy tablica.

W każdym przypadku rezultatem działania funkcji jest obiekt opakowujący (ang. wrapper) wybrany element bądź
elementy, dzięki któremu na tych elementach można wykonywać dalsze operacje (wywoływać kolejne funkcje czy też — formalnie — metody).

DOM Insertion, Inside

text()

pobiera i (ewentualnie) ustawia zawartość tekstową
danego elementu i elementów potomnych (zawartość węzłów tekstowych DOM)

Skrypty jQuery z reguły operują na elementach witryny. Powinny być więc wykonywane dopiero wtedy, gdy strona jest przetworzona i gotowe jest drzewo DOM.


Konieczne jest wykry­cie, kiedy dokument jest gotowy (struktura jest przetworzona przez przeglądarkę). W czystym JavaScripcie, aby odczekać na załadowanie strony, używało się zdarzenia onload lub też umieszczało się fragmenty skryptu za elementem HTML, którego ten fragment miał dotyczyć. jQuery oferuje tu eleganckie rozwiązanie w postaci metody ready.

Events

Document Loading

.ready()

Metodzie tej w postaci argumentu należy przekazać funkcję (inaczej: procedurę obsługi zdarzenia, ang. handler), która zostanie wykonana, gdy struktura dokumentu (drzewo DOM) będzie gotowa.

All of the following syntaxes are equivalent:


$( handler )
$( document ).ready( handler )
$( "document" ).ready( handler )
$( "img" ).ready( handler )
$().ready( handler )

Jako procedury obsługi zdarzeń najczęściej wykorzystywane są funk­cje anonimowe, nic jednak nie stoi na przeszkodzie, aby była to zwykła funk­cja. Może być ona argumentem metody ready. W takim przypadku należy utworzyć funkcję o dowolnie wybranej nazwie, umieścić w niej kod, który ma być wykonany w odpowiedzi na zdarzenie, oraz użyć jej jako argumentu metody.

Core

Miscellaneous

Setup Methods

jQuery.noConflict()

niekiedy konieczne jest użycie na stronie zarówno jQuery, jak i innej biblioteki, co może doprowadzić do konfliktu nazw (w szczególności chodzi tu o alias $, który bywa używany w rozmaitych produktach) - aby uniknąć konfliktów, jQuery pozwala wyrejestrować nazwę $ z zasięgu globalnego. Używa się w tym celu metody noConflict.

ponieważ usunięcie aliasu $ wpływa na kod korzystający z jQuery (trzeba by zamieniać takie odwołania na ciąg jQuery), dopuszczalne jest przywrócenie lokalne. Wystarczy przekazać znak $ jako argument wy­wołania funkcji anonimowej będącej parametrem metody ready:
jQuery(document).ready(function($) {...});

ze względu na wydajność kodu zaleca się stosowanie w pierwszej kolejności selektorów zgodnych z CSS i obsłu­giwanych natywnie przez przeglądarkę, a dopiero wtedy, gdy nie jest
to możliwe — używanie rozszerzeń oferowanych przez jQuery

Style Properties

.css()

zwraca i (ewentualnie) ustawia wartość wybranego
atrybutu CSS przypisanego pierwszemu elementowi zbioru wskazywanego przez selektor

.html()

pobiera kod HTML danego elementu strony (pierwszy element zbioru wskazywanego przez selektor), może być też użyta do przypisania kodu HTML elementowi

Class Atrribute

.removeClass()

usuwa klasę CSS przypisaną elementom

.toggleClass()

dodaje lub usuwa klasę (klasy) o nazwie przekazanej
w postaci argumentu

prościej: Pobieranie wartości atrybutów (RACZEJ WŁAŚCIWOŚCI) CSS lub ich ustawianie

przy stosowaniu metod css i html należy pamiętać, że za ich
pomocą odczytuje się jedynie dane dotyczące pierwszego elementu z zestawu otrzymanego za pomocą selektora

.addClass()

General Attributes

.attr()

pobiera w artość wybranego atrybutu z pierwszego
elementu zbioru lub ustawia wartość atrybutu dla wszystkich
elementów

.removeAttr()

.prop()

.removeProp()

usuwa wskazany atrybut ze wszystkich elementów
zbioru;

pobiera w artość wybranej w łaściw ości z pierwszego
elementu zbioru lub ustawia wartość właściwości dla wszystkich
elementów

usuwa wskazaną w łaściw ość ze w szystkich
elem entów zbioru.

W tym miejscu należy zwrócić uwagę na różnicę między atrybutem a właściwością. Z atrybutami mamy do czynienia w kodzie HTML (href, title, id itp.), natomiast właściwości są przypisane węzłom DOM (nodeValue, nodeType itp.). W trakcie przetwarzania strony z atrybutów powstają właściwości. Trzeba przy tym pamiętać, że wartości interpretowane w właściwościach jako typ Boolean w przypadku atrybutów mogą mieć inną postać. Przykładem jest atrybut checked pól wyboru - w kodzie źródłowym dla zaznaczonych pól powinien on mieć wartość checked, która w węzłach DOM (we właściwościach) jest odzwierciedlana jako true.