Kurs jQuery. Część 1: Wprowadzenie. Zalety, podstawowe zasady, pierwszy skrypt i rozszerzenia

jQuery to zdobywający coraz większą popularność framework języka JavaScript. Projektantom rozbudowanych, dynamicznych serwisów WWW oferuje szybkość działania, zgodność z wieloma przeglądarkami i co nie mniej ważne – zwięzły i uporządkowany kod. Możliwość korzystania z setek dodatkowych rozszerzeń zwiększa dodatkowo atrakcyjność jQuery jako narzędzia deweloperskiego. Wszystkich zainteresowanych zapraszamy więc do lektury pierwszego odcinka kursu jego obsługi.

Spis treści
Wprowadzenie „Witaj, świecie!” w jQuery Podstawowe zalety biblioteki Do Web 2.0 w 10 minut Czas na efekty Wykorzystujemy rozszerzenia jQuery Podsumowanie

Wprowadzenie

Do 2005 roku JavaScript, choć był dostępny w przeglądarkach internetowych, służył najczęściej jedynie do tworzenia bardzo prostych animacji, walidacji formularzy lub projektowania rozwijanego menu. Te nieskomplikowane zadania nie wymagały użycia specjalnych bibliotek, bo najczęściej konieczna ilość kodu mieściła się w kilkunastu wierszach.

Wraz z popularyzacją technologii AJAX, a także bogatych, interaktywnych interfejsów aplikacji internetowych, objętość kodu drastycznie wzrosła. Posługiwanie się nim dodatkowo utrudnił fakt, że przeglądarki internetowe (w szczególności Internet Explorer) w różny sposób implementowały szczegóły dostępu do dokumentu HTML (model DOM), deklaracje zdarzeń lub tworzenie obiektu XMLHttpRequest.

Mimo to apetyt deweloperów rósł – a JavaScript nie zawsze potrafił za nim nadążyć. Zapaleńcom dawał się we znaki brak kilku podstawowych funkcji znanych z innych języków, choćby wyszukiwania, czy dany obiekt znajduję się w tablicy oraz usuwania z tekstu spacji.

Dynamiczny rozwój sieciowych aplikacji, brak niektórych funkcji i problemy
z interoperacyjnością były głównymi przyczynami rozwoju bibliotek JavaScriptu.

Wymienione utrudnienia stały się powodem powstania kilkunastu bibliotek przeznaczonych dla popularnego języka skryptowego. Jedne starały się rozwiązać palące problemy, rozszerzając wbudowane obiekty, inne udostępniały coś na kształt dodatkowych klas i modułów. Większość jako swój podstawowy cel stawiała ułatwienie obsługi drzewa DOM i ukrycie różnic w interpretacji kodu przez przeglądarki.

Obecnie biblioteki JavaScript można podzielić na dwa rodzaje: ułatwiające dynamizację istniejącego kodu HTML poprzez uproszczenie dostępu do DOM, CSS i AJAX oraz definiujące widgety i budujące cały interfejs użytkownika bezpośrednio w JavaScript. jQuery należy do pierwszej z wymienionych kategorii – udostępnia interfejs doskonale współpracujący z „klasycznymi” dokumentami HTML. Jeśli chcemy tworzyć aplikacje internetowe generujące interfejs użytkownika w JavaScript (jak np. Gmail), prawdopodobnie wygodniej będzie skorzystać z innych bibliotek, np. Dijit lub Ext-JS.

«poprzednia 1 2 3 4 ... 8 następna »

Podoba Ci się ten tekst? Powiedz o tym innym na Fb: lub na G+:

publikuj:

wydrukuj

20 skomentuj »

Komentarze

#1 vxv 2009-07-20 11:50:47 1
"Jeśli chcemy tworzyć aplikacje internetowe generujące interfejs użytkownika w JavaScript (jak np. Gmail), prawdopodobnie wygodniej będzie skorzystać z innych bibliotek, np. Dijit lub Ext-JS."

Jeśli chcemy tworzyć aplikacje internetowe generujące interfejs użytkownika w JavaScript (jak np. Gmail), prawdopodobnie wygodniej będzie skorzystać jQuery UI.
IP: 79.163.146.[...] Mozilla/5.0 (X11; U; Linux i686; pl; rv:1.9.1.1) Gecko/20090715 Firefox/3.5.1
#2 ... 2009-07-20 14:57:58 0
jQuery UI to kupa
IP: 89.77.33.[...] Opera/9.80 (Windows NT 5.1; U; en) Presto/2.2.15 Version/10.00
#3 eRIZ^® 2009-07-20 15:34:49 0
Heh, super uargumentowana wypowiedź...

Troll?
IP: 87.205.205.[...] Opera/9.64 (Windows NT 5.1; U; en) Presto/2.1.1
#4 Rafał Jońca 2009-07-20 21:05:34 0
@vxv:

jQuery UI nie nadaje się najlepiej do tego, do czego stworzone jest np. Ext-JS, co nie znaczy, że nie można w nim tego wykonać. Ext-Js (podobnie jak GWT z Gmaila) potrafi działać sensownie jako narzędzie dla aplikacji offline zapewniając model programistyczy jak w aplikacjach desktopowych. Osobiście przy tworzeniu takiej aplikacji nie wybrałym jQuery UI - nie ze względu na zawartość, ale model programistyczny.
IP: 88.156.98.[...] Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.1.1) Gecko/20090716 Ubuntu/9.04 (jaunty) Shiretoko/3.5.1
#5 vxv 2009-07-21 10:17:17 0
@Rafał Jońca

Generalnie mam inne zdanie na ten temat. Uważam, że specyfika środowiska webowego oparta o maksymalną strukturę HTML-ową w przeciwieństwie do Ext JS, który generuje drzewo DOM ad hoc. Dla mnie najważniejsze jest przetwarzanie danych a z tego punktu widzenia aplikacje webowe z Ext JS mało się różnią od aplikacji we Flashu (Flexie, w AIR z Flashem, czy w czystym Flashu). Dlatego używam z powodzeniem jQuery i jQuery UI (zresztą jak się długo pisze jQuery to jQuery UI, praktycznie nie trzeba się uczyć, ponieważ nauka jest "przy okazji" wykorzystania danych widgetów).
IP: 79.163.143.[...] Mozilla/5.0 (X11; U; Linux i686; pl; rv:1.9.1.1) Gecko/20090715 Firefox/3.5.1
#6 Emir 2009-07-27 11:33:06 0
Sugeruje sprawdzić i poprawić przykład z listing 4. Albo uzupełnić. Pozdr.
IP: 195.8.106.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.1.1) Gecko/20090715 Firefox/3.5.1
#7 UFO 2009-07-28 18:44:44 0
Wybaczcie Panowie, ale na podstawie zamieszczonego tutoriala niestety nic nie działa.
IP: 79.184.142.[...] Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US) AppleWebKit/531.3 (KHTML, like Gecko) Chrome/3.0.193.2 Safari/531.3
#8 x_O 2009-08-07 17:55:42 0
Nie chce być niegrzeczny ale co to ma być? Ciągle się pojawiają na łamach webhosting pojawiają jakieś tutoriale (cześć całkiem sensowna) uwaga o programowaniu, a składnia przykładów wygląda jak u studenta na pierwszym roku.

Ludzie weźcie to pokolorujcie i dodajcie wcięcia. Masakra dla kogoś, kto nic z tego nie kuma jest pełna gwarancja, że nie wiele więcej zrozumie.
IP: 195.150.77.[...] Mozilla/5.0 (X11; U; Linux x86_64; pl-PL; rv:1.9.0.13) Gecko/2009080315 Ubuntu/9.04 (jaunty) Firefox/3.0.13
#9 x_O 2009-08-07 17:55:57 0
Nie chce być niegrzeczny ale co to ma być? Ciągle się pojawiają na łamach webhosting pojawiają jakieś tutoriale (cześć całkiem sensowna) uwaga o programowaniu, a składnia przykładów wygląda jak u studenta na pierwszym roku.

Ludzie weźcie to pokolorujcie i dodajcie wcięcia. Masakra dla kogoś, kto nic z tego nie kuma jest pełna gwarancja, że nie wiele więcej zrozumie.
IP: 195.150.77.[...] Mozilla/5.0 (X11; U; Linux x86_64; pl-PL; rv:1.9.0.13) Gecko/2009080315 Ubuntu/9.04 (jaunty) Firefox/3.0.13
#10 wuchi.mj@gmail.com 2009-08-15 19:44:44 0
A mi działa, a podobno jestem blondynką... Dziekuję za artykuł - jeden z fajniejszych wstępów do jquery, moim zdaniem. Właśnie poszukuje jakis materiałów na temat tego, jak wykorzystać wtyczkę "background canvas drawing plugin for round corners, gradients and tabs". Będe wdzięczna za wszelkie porady od doswiadczonych użytkowników.
IP: 83.4.25.[...] Opera/9.64 (Windows NT 5.1; U; pl) Presto/2.1.1
#11 dejf 2009-09-28 16:14:58 0
Kursik w treść bogaty, tylko listingi mogłyby mieć wcięcia - byłoby dużo łatwiej i czytelniej...
IP: 89.78.129.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.0.5) Gecko/2008120122 Firefox/3.0.5 (.NET CLR 3.5.30729)
#12 delejt 2009-11-14 12:03:05 0
Cześć

Ja z takim pytaniem, może nieco lamerskim ale co tam dopiero zaczynam z jquery

Zauważyłem, że używa zapisów przykładowo:

$("#div a") oraz $("a#div") - w teorii chyba powinno działać tak samo jednak robiąc mały przykład (chowanie i odkrywanie div'a) natrafiłem na problem a mianowicie:

$('#podglad a').click(function(event) { $('#podglad').hide('fast');

return false;

});

Powyższe działa bez zarzutu (ukrywa div'a oraz zwraca false), natomiast

$('a#podglad').click(function(event) { $('#podglad').hide('fast');

return false;

});

przenosi pod link ukryty w danym linku (href="....somthing")

Pytanie czy ten drugi zapis a#div jest niewłaściwy? jeśli nie o to co w tym chodzi? czy te dwa zapisy są różne?

możliwe, że nie doczytałem w manulau jeśli tak to nie obraże sie jak mi powiecie RTFM ;)
IP: 85.221.146.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/532.0 (KHTML, like Gecko) Chrome/3.0.195.33 Safari/532.0
#13 Kris86 2010-10-12 10:37:59 0
Hej,

Mam pytanko o tą zmieną #odp.

Napisałem sobie plik z jakimś inputem coś tam wpisuje i postem wysyłam do PHP i z tamtą do bazy i to działa ale jak w PHP robie return lub print to ni jak nie mogę tego potem w tym Jquery odczytać.

Szkoda że autor pominoł skrypt od strony serwera bo by mi to pomogło, ale liczę też że ktoś z was mi w komentarzu pomoże : ))

Z góry dzięki.
IP: 83.15.210.[...] Mozilla/5.0 (Windows; U; Windows NT 6.1; pl; rv:1.9.2.10) Gecko/20100914 Firefox/3.6.10
#14 Ale 2011-01-23 03:01:12 0
nie wiele wnosi ten kurs . Lepiej go rozszerz i dopracuj.
IP: 217.173.179.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.2.13) Gecko/20101203 Firefox/3.6.13 ( .NET CLR 3.5.30729)
#15 Patryk yarpo Jar 2011-04-22 12:25:22 0
Gdyby ktoś chciał się dowiedzieć, jak stworzyć własną wtyczkę do jQuery, to zapraszam do lektury:

http://www.yarpo.pl/2011/04/22/jquery-tworzenie-wlasnych-wtyczek/
IP: 153.19.52.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.2.16) Gecko/20110319 AskTbFXTV5/3.9.1.14019 Firefox/3.6.16 ( .NET CLR 3.5.30729)
#16 Patryk yarpo Jar 2011-04-22 12:25:31 0
Gdyby ktoś chciał się dowiedzieć, jak stworzyć własną wtyczkę do jQuery, to zapraszam do lektury:

http://www.yarpo.pl/2011/04/22/jquery-tworzenie-wlasnych-wtyczek/
IP: 153.19.52.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.2.16) Gecko/20110319 AskTbFXTV5/3.9.1.14019 Firefox/3.6.16 ( .NET CLR 3.5.30729)
#17 Miku 2011-05-30 16:48:28 0
Ale wytlumaczone, nic z tego nie czaje, nie wiem gdzie sie konczy fukncja, brak wciec, brak kolorow skladni. Przekleilem caly kod, pokazuje tylko czerwony napis w przypadku nie wypelnienia, zoltego nie pokazuje. I jeszcze super pomysl zeby umeiscic kod na jedenej podstronie a wytlumacznie na drugiej, caly czas trzeba skakac w ta i z powrotem, jak dla poczatkujacego za trudny przyklad.
IP: 178.36.238.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.2.17) Gecko/20110420 Firefox/3.6.17
#18 hilo 2011-11-23 11:14:09 0
na stronie http://www.jquery.comxa.com/ jest ładnie wszystko napisane z przykładami, szczególnie ajax, przejrzyście ktoś w koncu napisał a nie tylko jakiś durny przykład z którego nie wiadomo nic
IP: 150.254.68.[...] Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/535.2 (KHTML, like Gecko) Chrome/15.0.874.121 Safari/535.2
#19 Kathy 2012-05-01 17:41:41 0
A Kiedy wystąpi alert('Nie można wysłać danych lub błąd serwera!')?

Skoro return false; powoduje wyłączenie standardowej akcji wysyłania danych, to rozumiem że resztę przejmuje np. php w tym i ten komunikat, dobrze myślę?
IP: 83.143.41.[...] Mozilla/5.0 (Windows NT 5.1; rv:11.0) Gecko/20100101 Firefox/11.0
#20 Kathy 2012-05-01 18:00:56 0
A... najważniejsze -> gdzie w kodzie jest alert "Dziękujemy za wysłanie formularza" ?
IP: 83.143.41.[...] Mozilla/5.0 (Windows NT 5.1; rv:11.0) Gecko/20100101 Firefox/11.0

Aby dodać komentarz, musisz podać swój nick, treść komentarza oraz poprawnie przepisać oba słowa z obrazka (słowa muszą być rozdzielone spacją).
W treści komentarza można używać języka formatowania BBcode.