jQuery to biblioteka stworzona dla języka JavaScipt, która przede wszystkim wspiera użytkownika podczas konstruowania aplikacji internetowych pisanych w JavaScript. Obecnie jest to jedna z najpopularniejszych używanych bibliotek JavaScript’owych. Rozpowszechniana jest jako pojedynczy plik o nazwie np. jquery-1.4.js (liczby oznaczają numer wersji jQuery więc nazwa zmienia się w zależności od wybranej przez nas wersji). Dostępna jest wersja zwykła zajmująca prawie 155 kilobajtów oraz ta zminimalizowana, która już ma niecałe 70 kilobajtów. Biblioteka jest zupełnie darmowa oraz jednocześnie oparta na licencji zgodnej z definicją otwartego oprogramowania (open-source). Rozumiemy przez to, że każdy programista może zobaczyć kod biblioteki, brać udział w jej rozwoju a także kopiować czy modyfikować jej kod na własne potrzeby swoich projektów. Pozwala ona także znacząco uprościć pracę i stopień skomplikowania kodu tworzonego w języku JavaScript. Korzystając z jego możliwości, programista może zmieniać atrybuty, modyfikować wygląd poszczególnych elementów strony, dodawać lub usuwać elementy drzewa DOM. Może też wykonać zapytania Ajax, stosować efekty specjalne, obsłużyć typowe i nietypowe zdarzenia, a także posłużyć się różnymi wtyczkami, często znacząco rozszerzającymi funkcjonalność kodu. Oprócz tego jQuery umożliwia JavaScripcie oddzielenie zachowania (czyli JavaScript) od struktury samego dokumentu XHTML. Separacja tych zdarzeń dotyczy wyeliminowania zdarzeń JavaScript od wewnętrznych elementów body.
Głównym zadaniem jQuery jest redukcja ilości pisanego kodu i jednoczesne dbanie o to by był on kompatybilny z różnymi przeglądarkami. Co ważne, strona WWW korzystająca z tej biblioteki, nie posiada w kodzie HTML zdarzeń a jedynie pewne elementy HTML z klasami oraz identyfikatorami. Natomiast obsługa zdarzeń jest wyłącznie w JavaScripcie. Dodatkowo biblioteka jQuery pozwala na pobieranie różnego rodzaju dokumentów za pośrednictwem Ajaxa.
jQuery należy do projektów o otwartym źródle co oznacza, że każdy programista może swobodnie obserwować rozwój biblioteki ale także bezpośrednio w nim uczestniczyć. Dużym ułatwieniem dla programistów jest obszerna dokumentacja jQuery, która posiada szczegółowo opisane funkcje oraz podaje gotowe przykłady rozwiązań. Dużą zaletą obok solidnej dokumentacji jest framework Qunit, który służy do testowania jQuery i został specjalnie do tego przygotowany. Dla programistów jest to znacznie dużym ułatwieniem ponieważ często w wielu projektach aspekt testowania jest zaniedbywany. Oprócz tego przewidziano rozszerzanie funkcji tej biblioteki. Zatem programiści mogą łatwo dopisywać własne funkcje do API. Dodatkowo jeśli podczas programowania zabraknie nam ważnej dla nas możliwości w jQuery, możemy poszukać i zaczerpnąć jej ze zbioru pluginów. Dzięki temu mamy szansę na zaoszczędzenie czasu na implementowaniu jQuery ponieważ jest duże prawdopodobieństwo, że może ktoś już daną funkcję zaprogramował. Jednym z bardziej znanych zbiorów wtyczek jest jQuery UI w którym uzyskamy pomoc w tworzeniu przykładowo elementów interfejsu użytkownika.
Podsumowując, istotnymi funkcjonalnościami jQuery są na pewno jego selektory, które służą do wybierania dowolnego podzbioru węzłów modelu DOM. Następnym przykładem mogą być atrybuty – dotyczy to funkcjonalności w której programista może w dowolny sposób przetwarzać te atrybuty wspomnianych węzłów DOM. Oprócz tego możliwe jest manipulowanie samym modelem DOM, tworzenie efektów (animacji), rozbudowanie obsługi zdarzeń czy też możliwość definiowania własnych zdarzeń. Warto wiedzieć, że z jQuery można korzystać na dwa sposoby. Pierwszy to użycie funkcji „$” lub „jQuery”, które zwracają obiekt jQuery. Natomiast druga funkcja to „$.” lub „jQuery.” czyli programista korzysta z metod narzędziowych bez operowania na jQuery.
Przykładowy kod w jQuery
jQuery Przykład #1
var $goToTop = $('<div />', {id: 'goToTop', class: 'small'}).hide().click(function(){
$('html, body').stop(true,true).animate({scrollTop:0}, 1000);
return false;
});
$('body').append($goToTop);
jQuery Przykład #2
jQuery('.anchor').click(function(event){
event.preventDefault();
var hash = jQuery(this).attr('href');
hash = hash.slice(hash.indexOf('#') + 1);
jQuery('html,body').animate({scrollTop: jQuery('a[name=' + hash + ']').offset().top}, 1000);
});