X

Aleproste na FaceBook'u

Reklama.

[jQuery]Start - jak i od czego zacząć, podstawy :: pierwszy skrypt

jQurey - na początku była funkcja

jQuery - to biblioteka języka JavaScript, która uwolni nas od wielu uciążliwych i czasochłonnych prac podczas pisania aplikacji w JavaScripcie.

Aby testować własne skrypty jQuery, wystarczy dostęp do internetu, przeglądarka internetowa i najprostszy edytor tekstowy.

Najważniejsze cechy jQuery to : 

  • start skryptu zaraz po wczytaniu i przeanalizowaniu struktury HTML strony (czyli dużo wcześniej niż skrypty inicjowane przez onLoad() funkcji umieszczanej w znaczniku <body>, które startują dopiero po wczytaniu wszystkich elementów strony
  • brak problemów z wersją przeglądarki, wszystkie konieczne testy wykonuje jQuery
  • nowe brakujące w JavaScript mechanizmy i funkcje
  • całkowite odseparowanie kodu JavaScript od kodu HTML, obsługa zdarzeń nie zaśmieca kodu HTML, a cały skrypt możemy umieścić w osobnym pliku
  • odseparowanie od pozostałych aplikacji napisanych w JavaScripcie (nie istnieje ryzyko powielania zmiennych lub
  • nadpisywania danych lub też innych konfliktów)
  • duże ułatwienia przy realizacji połaczeń AJAXA
  • gotowe mechanizmy do prostych animacji
  • cała masa gotowych dodatków
  • proste tworzenie własnych plugin'ów

Aby zacząć używać jQuery musimy podpiąć odpowiednią bibliotekę do naszego projektu. Są na to dwa sposoby:

  • bezpośrednio z zewnętrznych serwerów Googla, dodajmy, bardzo wydajnych serwerów.
  • lokalnie po pobraniu najnowszej biblioteki, najlepiej w wersji skompresowanej)

Najnowsza wersja biblioteki jQuery dostępna jest na stronie projektudocs.jquery.com jQuery

Podłączenie bibliotek jQuery zawsze musimy wykonać wcześniej niż wstawiony kod, który bedzie wykorzystywał jQuery. To wydaje się być oczywiste, ale na pewno znajdą się tacy, którzy o tym zapomną.

Podłączenie z serwerów Googl'a

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

Podłączenie lokalne, pobranej wcześniej biblioteki

<script type="text/javascript" src="lokalny_katalog/jquery.min.js"></script>

Trochę kłopotliwa i mało czytelna, przynajmniej dla mnie, jest notacja stosowana w jQuery, ale to pewnie kwestia przyzwyczajenia. Każdą aplikację w jQuery zaczynamy następująco:

$(function() {
 
 alert('Nasza funkcja w jQuery'); 

});

To właśnie chyban ta ilość nawiasów jest najbardziej trudna do ogarnięcia, ale zawsze dostajemy coś kosztem czegoś. Tu akurat koszt niewielki, a cała reszta jest gratis.

Zaletą jQuery jest fizyczne odseparowanie kodu od HTML'a, czyli cały nasz skrypt możemy umieścić w osobnym pliku. Ta zaleta prowadzi do podstawowej funkcji jQuery, czyli do podpinania się pod wskazane znaczniki kodu HTML. Przykład:

$(function() {
 
 $('a').css({'color':'red'});

});

Powyższa praktycznie jedna linijka krótkiego kodu, zamieni w całym naszym projekcie, wszystkie odnośniki na czerwone.

Jeśli potrzebujemy ustawić więcej atrybutów CSS znacznika, to w sposób następujący:

$(function() {
 
 $('a').css({'color':'red', 'fon-size':'1.5em', ... });

});

W kolejnej publikacji ściąga na temat poruszania się po znacznikach w kodzie HTML, zapraszam

opublikowane 04-01-2011175535 powrót

© aleproste.pl v.10 Projekt i realizacja projekt.etvn.pl & aleproste.pl