jQuery jest popularnym frameworkiem JavaScript, który na pewno przyda się każdemu webmasterowi. Dzięki niemu kodowanie staje się dużo łatwiejsze. Dzisiaj opiszę, jak łatwo zastosować go na stronach WWW. Oczywiście wszystko będzie podparte przykładami.
Używanie frameworka jQuery powinniśmy zacząć od ściągnięcia biblioteki ze strony jQuery.
Każdy kto używał JavaScript, wie że na różnych przeglądarkach są różne sposoby na zrobienie danej rzeczy, żeby dostać się do obiektów i coś na nich zrobić. Najlepszym przykładem jest zdarzenie załadowania dokumentu (window.onload, window.addEventListener(’load’…, window.attachEvent(’onload’…). Dzięki temu popularnemu frameworkowi JavaScript nie musimy się martwić o to, jakiej przeglądarki używa osoba przeglądająca stronę. Wystarczy napisać:
jQuery(document).ready(function(){
// kod, który ma się wykonać po załadowaniu strony
});
Takie zdarzenie możemy przypisać do dowolnego obiektu. Podobnie jest z selektorami obiektów. Załóżmy, że chcemy do wszystkich linków dodać atrybut TITLE z jakimś tekstem. W takim wypadku wystarczy napisać:
jQuery('a').attr('title', 'Od teraz to będzie tytuł wszystkich naszych linków');
Musimy pamiętać, że framework jQuery używa selektorów CSS do dobijania się do obiektów. Dla przykładu jeśli chcemy dostać się do konkretnego linku, to piszemy
jQuery('body > #content + div .stopka a').css({
color:'#0f0',
background-color:'#000',
marginBottom:20,
padding:'5px 10px'
});
W tym przykładzie dostaliśmy się do linku i ustawiliśmy mu zielony kolor, czarne tło, margines dolny 20 pikseli oraz padding pionowy 5 pikseli i boczny 10 pikseli. Prawda, że jest to banalnie proste?
Tworzenie obiektów w jQuery też nie jest tak trudne jak to się na pierwszy rzut oka wydaje. Powiedzmy, że chcemy do wszystkich list punktowanych dodać element listy w której będzie stopka:
jQuery('<li class="stopka"> </li>').apeendTo('ul');
Drugi sposób zastosowania frameworka jQuery:
jQuery('ul').append('<li class="stopka"> </li>');
Jeśli zamiast stopki, chcemy aby był nagłówkiem, to zamiast append stosujemy prepend:
jQuery('ul').prepend('<li class="naglowek"> </li>');
Zauważcie, że w takim zapisie element listy zostanie dodanych do wszystkich list punktowanych w dokumencie. Selektor zwraca tablice obiektów, które pasują do danej frazy. Jeśli chcemy przejść po wszystkich elementach tablicy, żeby np każdemu linkowi ustawić TITLE taki jak adres odnośnika, to używamy funkcji each:
jQuery('a').each(function(){
jQuery(this).attr('title', jQuery(this).attr('href'));
});
Korelacja frameworka jQuery z innymi frameworkami
Bardzo często można się spotkać z tym, że niektórzy zamiast 'jQuery’ używają znaku dolara. To skraca kod, jednak jest niebezpieczne, kiedy używamy również innych frameworków korzystających z dolara. Aby tego uniknąć można pisać 'jQuery’ tak jak ja to robię lub korzystać z pewnego obejścia:
(function($){
$('body').append('kod w którym wykorzystujemy znak dolara zamiast jQuery');
})(jQuery);
To jest tylko malutka próbka możliwości tego popularnego frameworka JavaScript. Prócz tego co tutaj opisałem, możemy dodatkowo:
- obsługiwać zdarzenia myszki
- obsługiwać rolkę
- obsługiwać zdarzenia klawiatury
- tworzyć proste efekty jak zanikanie, zwijanie itp
- tworzyć animacje
- oraz wiele innych
Pluginy do frameworka jQuery
jQuery posiada również bardzo obfitą bazę pluginów. W związku z tym, że programowanie we frameworku jQuery jest bardzo proste, to każdy może napisać pluginy jakie chce. Napisane pluginy można wrzucić do repozytorium pluginów na stronie jQuery.
Jeśli chcecie się dowiedzieć więcej, to wejdźcie na stronę jQuery – tego popularnego frameworka JavaScript i tam znajdziecie pełną dokumentację. Uważam, że framework jQuery jest niezbędny przy tworzeniu stron i powinien go znać każdy, kto się tym interesuje.
