Kurs jQuery #1 – Wprowadzenie

Żeby zacząć korzystać z biblioteki jQuery i ze wszystkich jej udogodnień musisz wejść w TEN link. Kiedy już znajdziesz się na tej stronie są tam wylistowane najnowsze wersje jQuery. Masz również do wyboru wersję skompresowaną i pełną. Jeśli będziesz jedynie używał funkcjonalności biblioteki bez zagłębiania się w to dokładnie jak ona działa i nie masz potrzeby modyfikowania jej funkcjonalności to wybierz wersję skompresowaną. Nazywana jest też produkcyjną gdyż to właśnie taki zminifikowany kod JS powinniśmy umieszczać na naszych gotowych stronach. Po pierwsze dlatego, że zabiera sporo mniej miejsca co pozwala na szybsze ładowanie się strony i mniejsze obciążenie łącza serwera a po drugie nie każdy musi widzieć jak dokładnie działa całość naszego skryptu. Czasem jest to wręcz bardzo niepożądane.

Teraz kiedy już pobrałeś jQuery nic nie stoi na przeszkodzie żeby stworzyć w nim swój pierwszy skrypt. Zaczniemy od zbudowanie struktury plików.

Jak widzisz bibliotekę jQuery załączam jeszcze w tagu head żeby mieć pewność, że jeśli jakiś skrypt w dokumencie będzie jej potrzebował co jest wielce prawdopodobne bo w końcu po coś ją dodajesz, to będzie ona już na 100% gotowa. Nasz właściwy skrypt jednak tak jak do tej pory załączam na samym końcu dokumentu żeby mieć pewność, że jest on całkowicie załadowany zanim dojdzie do jakichkolwiek operacji na drzewie DOM czy tym podobnych.

Sam skrypt natomiast jest bardzo prosty. Po kompletnym załadowaniu się strony wyświetla w konsoli tekst “Hello World”. Jako, że to dopiero wprowadzenie do jQuery omówię dokładnie, krok po kroku jego składnię.

Znaczek dolara ($) jest bardzo charakterystycznym element jQuery po którym to przeważnie rozpoznajemy wszystkie skrypty w nim napisane praktycznie od razu. Jest to nic innego jak funkcja która jako argument przyjmuje jakiś element DOM lub ciąg znaków określający ten element na stronie i zwraca odwołanie się do niego co pozwala na łańcuchowe wywołanie metod. W tym przypadku jest to ready. Metoda ta wykona przekazaną jej funkcję anonimową dopiero po pełnym załadowaniu się strony.

Tak właśnie mniej więcej wygląda tworzenie skryptów w jQuery. Wyselekcjonowanie jakiegoś elementu przy pomocy $ a następnie wywołanie na nim jakiejś metody ew. kilku do których przekazujemy funkcje anonimowe jeśli jest to potrzebne które przeważnie zajmują się wykonaniem tej niestandardowej części zadania którą już my sami musimy określić.

Żeby bardziej zainteresować Cię jQuery pokażę Ci jeszcze jeden przykład. Tym razem trochę bardziej skomplikowany i lepiej obrazujący możliwości języka jeśli chodzi o szybkie dodawanie animacji i efektów na stronach.

Żeby wszystko było w porządku dodaj jeszcze tag button w swoim dokumencie. Znowu analizujemy krok po kroku. Metodę ready już znasz więc wiesz za co jest odpowiedzialna. W środku widzisz już wykorzystanie $ do wyselekcjonowania tagu button ze strony i użycie metody click. Jest ona odpowiedzialna za wywołanie przekazanej do niej funkcji dopiero po tym jak element na którego rzecz jest wywoływana zostanie kliknięty. Wewnątrz tej funkcji z kolei mamy metodę hideOdpowiada ona za schowanie elementu na który wskazuje. Może to zrobić z płynną animacją którą w tym przypadku możesz zaobserwować przez podanie pierwszego argumentu jako slow. Drugim argumentem jest funkcja która zostania wykonana po zakończeniu animacji. Ta konkretnie informuje nas o jej pomyślnym zakończeniu.

Teraz wiesz już jak wygląda składnia jQuery i rozpoczęcie projektu przy jego wykorzystaniu. W kolejnych postach dokładnie przeanalizujemy sobie jakie selektory mamy dostępne, jak wybierać przy ich pomocy interesujące nas obiekty drzewa DOM i jak dokonywać na nich ciekawych operacji.

Pokażę Ci jeszcze tylko jedną funkcję pozwalająca na bezstresowe używanie na swojej stronie jQuery w połączeniu z innymi frameworkami. Jak wiesz jQuery wykorzystuje znak $ jako skrót do odwołania do samego siebie. JavaScript ma natomiast tak dużo frameworków, że jest całkiem prawdopodobne iż kiedyś przydarzy Ci się taka sytuacja, że jeszcze jakiś będzie z tego znaku korzystał. Wtedy pojawi się również i problem. Żeby zaradzić w sytuacji w której któryś z frameworków nie działa prawidłowo musimy zwolnić dostęp do znaczka $ i ustawić odwołanie się do jQuery na jakieś bardziej niespotykane i niestandardowe. Funkcja która to umożliwia to noConflict().