JQuery jest rozbudowaną biblioteką dla programistów JavaScript. Zaletami korzystania z tego framework’a jest kompatybilność tworzonego kodu z wszystkimi nowoczesnymi przeglądarkami, łatwość w nawigacji po drzewie dokumentu (DOM) oraz obszerna baza dodatkowych pluginów.
Prosty przykład wykorzystania JQuery:
JavaScript
$(function(){
$('#textLabel').css('color', 'Red').text('Hello World!');
});
|
W jednej linii kodu odnajdujemy element o ID=textLabel, dodajemy styl color:Red oraz zmieniamy tekst na Hello World!.
Znak $ jest toższamy z JQuery, czyli zamiast $ moglibyśmy użyć JQuery(‘#textLabel’), ale po co? Skoro $(‘#textLabel’) jest prostsze, łatwiejsze i bardziej czytelne.
Zamknięcie wszystkiego w $(function(){ [code] }) powoduje, że kod jest wykonany dopiero po wczytaniu struktury dokumentu (zdarzenie DOMReady).
$(‘#textLabel’) tworzy objekt jquery z ustawionym odwołaniem do wybranych elementów.
Kod $(‘#textLabel’).css(‘color’, ‘Red’) jest wywołaniem funkcji css dla obiektu jquery. Każda funkcja zwraca referencję do objektu jquery, dzięki czemu moglibyśmy w nieskończoność pisać wywołania kolejnych funkcji zaraz po kropce:
$(‘#textLabel’).css(‘color’, ‘Red’).attr(‘rel’, ‘author’).addClass(‘bold’) …. itd.
Wyjątkiem są funkcje które w założeniu zwracają określoną wartość, np. funkcja .height() która zwraca szerokość elementu.
Elementów na które wskazuje pojedyńczy objekt jquery może być kilka, np. $(‘a’) jest odwołaniem do wszystkich linków na stronie. Wywołanie dowolnej funkcji na tym obiekcie np. $(‘a’).attr(‘target’, ‘_blank’) spowoduje wykonanie funkcji dla każdego elementu.
Bez JQuery nasz kod z przykładu wyglądałby tak:
JavaScript
document.addEventListener( "domready", function(){
var tl = document.getElementById('textLabel');
if(tl){
tl.style.color = 'Red';
tl.innerHTML = 'Hello World';
}
}), true);
|
W następnej części opiszę podstawowe informacje o selektorach JQuery.