Perfection or Vanity

Project: Terminated

Blog nie jest już dalej prowadzony ani aktualizowany. Mimo tego, wpisy i komentarze są dalej dostępne. Możesz przeczytać pożegnalny wpis albo przejść do archiwum.

Wprowadzenie do jQuery

03 sierpnia 2007

jQuery

JavaScript ostatnimi czasy rozkwitł jak nigdy dotąd. Stało się tak za sprawą efektownych animacji oraz webaplikacji pisanych przy pomocy Ajaksa. Jednak siłą sprawczą umożliwiającą proste użycie wspomnianych technik były biblioteki JavaScript. Biblioteki zbierają najczęściej używane funkcje oraz poprawiają błędy przeglądarek, udostępniając developerowi przydatny zestaw narzędzi do pracy nad serwisami.

Istnieje ich już bardzo dużo i kolejne na pewno będą powstawać, jednak moją wybranką została biblioteka o wdzięcznej nazwie jQuery. Prezentuje ona bardzo wysoki poziom zaawansowania, pozostając prostą w użyciu. Ma bardzo dobrą dokumentację, doświadczonych autorów, szeroką społeczność użytkowników oraz architekturę pozwalającą na łatwe wprowadzanie zmian i rozszerzanie funkcjonalności.

Zaczynam więc kurs jQuery, aby pomóc Wam tworzyć lekkie, użyteczne strony oraz nauczyć korzystać z takich dobrodziejstw jak animacje albo Ajax przez przybliżenie zalet biblioteki.

$$$!

Prawie każda dostępna biblioteka operuje na zwyczajnych tablicach, elementach DOM czy innych obiektach. Kod jQuery opakowuje każdy z nich w unikalną konstrukcję, która pozwala na używanie specjalnych funkcji oraz wykorzystywanie „magicznych” zdolności biblioteki.

Podwaliną jQuery jest funkcja $() (będąca poprawnym w JS, krótszym zapisem jQuery()). Tak naprawdę wszystko co robimy w tym frameworku, kręci się wokoło niej. To ona tworzy obiekt jQuery (wrapper), lecz to nie koniec jej możliwości.

Szukanie elementów HTML

JQuery jest przyjazne webdesignerom, ponieważ wybieranie elementów opiera się o selektory CSS. Dostępny jest ogromny wybór selektorów ze specyfikacji CSS, fragment XPath oraz kilkanaście autorskich rozwiązań autorów jQ.

Przykładowo, aby wybrać wszystkie akapity w dokumencie, piszemy:

  1. $("p")

I już. Wyniki działania selektora p możemy przypisać do zmiennej, bądź wykonać na nich od razu jakieś czynności – lecz o tym później.

Ilustracja pokazująca różnicę między zwyczajną kolekcją elementów DOM a obiektem jQuery

A jak wyłowić wszystkie linki w menu naszego bloga? Spróbujmy tak:

  1. $("#sidebar a")

Jeśli wydaje się Wam to nudne, spróbujmy wyciągnąć wszystkie pola wielokrotnego wyboru z pierwszego formularza na stronie.

  1. $("form:first input:checkbox")

W tym przykładzie widać uproszczenia, jakich dokonali twórcy jQ projektując mechanizm selektorów. Na początku wybralibyśmy wszystkie formularze (form), ale zdecydowaliśmy się ograniczyć wybór do pierwszego (:first). Ta pseudoklasa to skrót zapisu :nth-child(1) pochodzącego z CSS3. Później wybieramy wewnątrz tego formularza wszystkie pola input, ale tylko jeśli ich atrybut type równa się checkbox (:checkbox).

To nie wszystko. Możliwości selektorów są niesamowite:

  1. $("#main > div.entry:visible a.comments:contains('Dodaj komentarz')")

W skrócie od końca: wybieramy wszystkie linki o klasie comments zawierające tekst Dodaj komentarz, umieszczone w widocznych divach o klasie entry, jedynie jeśli są bezpośrednimi potomkami elementu z id="main".

Oczywiście przykład ilustruje co możemy w jQuery zrobić, a nie co powinniśmy co rusz robić. Selektory nie są wolne, ale warto optymalizować połączenia wielu możliwości i skomplikowanych konstrukcji, aby uniknąć spowolnienia naszych skryptów.

Tworzenie elementów HTML

Ok, załóżmy jednak, że chcemy dodać coś do dokumentu, a nie tylko poruszać się w nim za pomocą selektorów. Spróbujmy stworzyć link.

  1. var $link = $( document.createElement("a") );

Od teraz zmienna $link jest obiektem jQuery, który zawiera nowostworzone hiperłącze. Połączyliśmy tutaj zwykłą funkcję DOM z jQ, co może wydawać się trochę nudne. Spróbujmy więc tak:

  1. var $link = $("<a></a>");

A zakładając, że zwykle w JavaScript robimy coś więcej ze stworzonymi elementami, spróbujmy tak:

  1. var $link = $("<a href='http://google.com' class='external'>Hello world!</a>");

Jeśli jeszcze tego nie widać, to właśnie stworzyliśmy link do Google, dodaliśmy mu klasę i wkleiliśmy przykładowy tekst do środka. Rezultat tej akcji rezyduje wewnątrz zmiennej $link.

Tworzenie łańcuchów

Piękno skadni jQ polega na wykorzystaniu połączeń łańcuchowych (chaining). Znaczy to tyle, że obiekty jQuery (na przykład pojemniki dla zwykłych elementów HTML) mogą być łączone, transformowane albo usuwane w jednej linijce kodu.

Spójrzmy na przykład:

  1. $("#main").find("p").not(".ohmy").addClass("new")

Sposób działania jQuery na tym kodzie może być zilustrowany w ten sposób:

Graf przedstawiający łączenie łańcuchowe w jQuery

  1. Na początku wybieramy element od id="main" za pomocą selektora "#main". Dostajemy w zwrocie <div/> o takim identyfikatorze otoczony obiektem jQuery.

  2. I zaczynamy chaining. Szukamy (find()) w tym elemencie wszystkich akapitów. Połączenie między divem a funkcją szukania tworzymy przez kropkę – jeśli kodujecie trochę w JavaScript to wiecie, że jest to naturalne połączenie w tym języku.

    Funkcja find() przyjmuje parametr w postaci selektora CSS. Tym razem jest to "p", bo szukamy akapitów.

  3. Przechodzmy dalej. Używając funkcji not() zaznaczamy, że chcemy wykluczyć elementy podane jako parametry - u nas selektor wskazujący na klasę – ".ohmy"

    W ten sposób zawęziliśmy liczbę elementów z 4 do 3 i to teraz na nich operujemy.

  4. Na końcu na tych trzech akapitach wykonujemy polecenie dodania klasy, przez funkcję addClass()

Tworzenie łańcuchów jest też ważne w kontekście optymalizacji kodu. Jeśli wiemy, że będziemy korzystać po paru operacjach na pierwszym wybranym elemencie, nie ma sensu konstruować długiego selektora dla $(), tylko używać funkcji szukających oraz anulować je przez end(). Jak dokładnie wygląda ten mechanizm pokażę później.

Automatyczna iteracja

Wróćmy jednak do przykładu. Możliwe, że wydało się Wam normalne, że otrzymaliśmy na końcu trzy elementy z klasą new – ale właśnie ta naturalność biblioteki jest jej wielkim plusem.

Dzieje się tak, ponieważ wszystko co znajduje się w obiekcie jQuery jest automatycznie iterowane podczas chainingu, dzięki czemu dodaliśmy klasę nie do pierwszego akapitu a do wszystkich trzech.

Graf ilustrujący automatyczną iterację w jQuery

Aby zrobić taką operację w czystym JavaScripcie, należałoby użyć paru pętli. Tutaj wszystkie pętle są ukryte w konstrukcji jQuery.

Opanowaliśmy właśnie podstawowe założenia i składnię jQuery. W następnej części tutoriala skoczymy od razu na głęboką wodę i przejdziemy do praktyki – spróbujemy stworzyć pierwszy własny skrypt oraz poznać więcej przydatnych funkcji jQuery. :)

Tagi wpisu: , , , , , , , , ,

Informacje i hiperłącza

To ja! Piotr Petrus 'Riddle'

Blog o projektowaniu zgodnych ze standardami stron internetowych.

Praktyczne przykłady, sztuczki CSS, sposoby obchodzenia błędów przeglądarek, lekki i nieinwazyjny JavaScript, użyteczny design, dostępność i skrypty użytkownika.

RSS

Informacje o wpisie

Napisał riddle 03 sierpnia 2007 o 13:16

Kategorie: jQuery

Dodaj do:

Wpisy archiwalne

Archiwum miesięczne

Dzięki!

Dodaj bloga do Technorati Favorites Dodaj bloga do Del.icio.us Blog należy do sieci 10przykazań.com

Komentarze

  1. dos 1 03 sierpnia 2007, 13:20

    No to wszyscy razem: DZIĘ-KU-JE-MY!

    Trochę czekaliśmy na ten kurs, teraz czekamy na drugą część ;>

  2. Michał Ochman 2 03 sierpnia 2007, 13:23

    Świetnie. Ciekawe jak to będzie dalej wyglądać. Czekam z niecierpliwością.

  3. trójkąt 3 03 sierpnia 2007, 13:24

    Mnie tylko dziwi, że strona tak dobrej biblioteki leży trupem już chyba z pół roku :-/

  4. D4rky 4 03 sierpnia 2007, 13:26

    (Komentarz zmodyfikowany 03.08.2007 o 13:28)

    szeroką społeczność developerów oraz użytkowników oraz architekturę pozwalającą na łatwe wprowadzanie zmian i rozszerzanie funkcjonalności.

    powtórzenie, to drugie oraz zmień np na i lub , a także
  5. pcxxiv 5 03 sierpnia 2007, 13:27

    W taki wypadku mam już w czytniku rss dwa blogi z kursem jQuery – dużo informacji :D

  6. Riddle 6 03 sierpnia 2007, 13:28

    Tomek: Chyba używamy innych Internetów. ;-) jQuery.com nie działało może z tydzień w tym roku, po atakach DDoS (zazdrosnych miłośników Proto… żartuję, żartuję! :D).

  7. D4rky 7 03 sierpnia 2007, 13:29

    Riddle – bo ty uzywasz internetu z dyskietki :P
    Co do samego kursu – calkiem ciekawy, kilku rzeczy nie wiedzialem. Czekam na kolejne czesci ;)

  8. Walker 8 03 sierpnia 2007, 13:32

    To taki krótki pokaz możliwości jQuery (niepełny). Troszeczkę inaczej wygląda Twój kurs od ferrante.pl . Ale może to i dobrze, łącznie znaleźć będzie można więcej ;).

  9. Riddle 9 03 sierpnia 2007, 13:36

    Widziałem ten kurs, bardzo dobrze że powstał. Co więcej – zmobilizował mnie żebym pokończył drafty leżące na blogu.

    Ja będę jednak inaczej uczył jQ, może dlatego że sam jestem już dość zaawansowany, w odróżnieniu od Ferrante – jak sam przyznał (no offense). :-)

  10. doiy 10 03 sierpnia 2007, 13:36

    $("#main").find("p").not("ohmy").addClass("new")
    Brakuje kropki przy ohmy chyba :)

  11. trójkąt 11 03 sierpnia 2007, 13:36

    Faktycznie \O.o/ Zalogowałem się na dwa serwery po SSH i tam działa bez problemu. Czyżby mój provider zrobił na mnie zamach…

    Swoją drogą ciekawe kto się opiekuje jquery.pl i co tam będzie.

  12. Dreamer 12 03 sierpnia 2007, 13:38

    Heh, wreszcie! :D Świetne wprowadzenie z fajnymi przykładami (a do tego grafika, ukazująca problem!), oby tak dalej. ;)

  13. Piotr Pyclik 13 03 sierpnia 2007, 13:39

    Zgrabnie napisane. Czekam na kolejne części, choć do tego programowania zdecydowanie nie mam serca. :)

  14. b4it 14 03 sierpnia 2007, 13:56

    Średnio się na tym znam ale czy zamiast:
    var $link = $("<a href="http://google.com" class="external">Hello world!</a>");
    Nie powinno być:
    var $link = $("<a href='http://google.com' class='external'>Hello world!</a>");
    ?

  15. Riddle 15 03 sierpnia 2007, 13:59

    @b4it: Masz rację, zmieniałem na koniec apostrofy, żeby pasowały do ilustracji. Poprawione.
    @doiy: Tak samo, mój błąd. Dzięki.

  16. MatheW 16 03 sierpnia 2007, 14:04

    Heh na Riddle’a mozna liczyc – akurat kiedy mi to jest potrzebne, bede mogl przeczytac ten kurs :] Brawa.

  17. ferrante 17 03 sierpnia 2007, 14:07

    Fajny artykul ;-).

    Co do mojego stopnia zaawansowania, to w zasadzie jQuery jest tak latwe, ze pojalem wiekszosc w jeden dzien, ale fakt faktem, skrypty w tutorialu sa moimi pierwszymi napisanymi w jQuery.

    Pozdrawiam serdecznie

  18. Dziudek 18 03 sierpnia 2007, 14:38

    No ładnie – tak czekałem na ten kurs, a nawet info przez bota joggerowego nie doszło :/ Gdyby nie Twitter to pewnie bym się dowiedział o kursie za 3 dni :P

    Dobrze się tutorial zapowiada ;) Może nie zostałem przytłoczony ogromem informacji, ale dawka IMHO w sam raz :)

    @Riddle – ja osobiście bym gdzieś dodawał w każdej części krótki spis z opisem nowo poznanych funkcji – wtedy będzie łatwiej to wszystko ogarnąć jak tutorial będzie liczył więcej części :)

  19. Susek 19 03 sierpnia 2007, 15:02

    Dzięki wielkie riddle ;) Czegoś takiego mi brakowało :) Czekam z niecierpliwością na kolejne części kursu.

  20. zx 20 03 sierpnia 2007, 15:28

    Cholibka… proste się wydaje, mimo że o JS pojęcia nie mam. Warto się pobawić w takim razie… Dzięki Riddle! :D

  21. Dawid 21 03 sierpnia 2007, 15:35

    Może to nie najlepsze miejsce, ale skoro zaczynasz pisać o jQuery i masz o nim pojęcie to co powiesz na temat tego porównania ?

    Osobiście lubię jQ za prostotę i korzystałem z niego już kilka razy, ale po tym „teście” naszły mnie pewne wątpliwości.

  22. Riddle 22 03 sierpnia 2007, 15:49

    Nie ma sprawy… dzięki jQuery odkryłem na nowo JavaScript, więc pisanie o nim to przyjemność. :)

    Dawid, porównania szybkości to temat-rzeka. Bez zbędnego rozpisywania się:

    • Najnowsze jQuery to 1.1.3 i ma 800% szybsze selektory od poprzedniej wersji.
    • jQuery nie korzysta z natywnego XPath (Firefox, Opera), przez co wypada gorzej na „naszych przeglądarkach”, ale dzięki temu jest równie szybki we wszystkich. Pamiętajmy, że IE to nadal 70% rynku.
    • Slickspeed honoruje testy w których liczba zwróconych elementów jest błędna. Nie ma to znaczenia – jeśli skrypt myśli 3 milisekundy że na stronie są 2 divy, a jest ich 10 to test i tak położył, mimo że najszybciej.

    Wszelkie porównania szybkości uważam na razie za marketing.

  23. Albi 23 03 sierpnia 2007, 16:38

    @Riddle: Gdzieś widziałem test na samej stronie jQuery, pokazujący że faktycznie jest wolniejsze od Prototype. Nie potrafię tylko teraz znaleźć linka.

  24. Dziudek 24 03 sierpnia 2007, 16:41

    @Riddle – najnowszy MooTools też sporo przyśpieszył (choć to dopiero dev wersja) i sporo bugów już wywalili, no i dodali lepszą obsługę operatorów ;] Wcześniej MooTools 1.1(1) kilku selektorów nie obsługiwał...

    Co do IE – to dziś ma jakieś 60% rynku ;] A jak wyjdzie MooTools 1.3 to stracisz argument z IE ;)

    Co do argumentu, że jQuery jest równie szybki na wszystkich przeglądarkach – zależy czy jest to tak potrzebne. Ja osobiście uważam, że skrypt powinien na danej przeglądarce wyciągać „ile fabryka dała” – a to, że ktoś siedzi na IE to jego problem – niech ma kolejny argument by zmienić przeglądarkę ;)

    Ale tak naprawdę dojdziemy do jednego wniosku – jakie zadanie taki framework ;] Najlepiej znać wszystkie :D

    @Albi – o to Ci chodzi ?

  25. Riddle 25 03 sierpnia 2007, 16:53

    Nie ma sensu gadać o tym co jest szybsze, jeśli mechanizm parsowania selektorów wszędzie może być taki sam. Wystarczy po każdym releasie kopiować pomysły innych. :-)

    Ważne jest to, jak developer używa selektorów a nie czy odwołanie do div > div > div > div trwa 5 sekund.

  26. Off 26 03 sierpnia 2007, 17:24

    Bardzo ciekawy początek tutorialu. Szkoda, że w MooTools nie ma czegoś takiego jak chaining, a może o czymś nie wiem ;P

  27. Siergiej 27 03 sierpnia 2007, 17:26

    Mi się wydaje że ma, ale to musi nasz Joggerowy ekspert od Mootools potwierdzić ;)

  28. Dziudek 28 03 sierpnia 2007, 17:44

    @Off, Siergiej – oczywiście, że chaining jest w MooTools – kłania się klasa Chain z pliku Class.Extras.js ;)

  29. Luke Mica 29 03 sierpnia 2007, 20:23

    Świetny artykuł. Prawie mnie przekonałeś do nauki jQuery, bo dotychczas to było bezmyślne includowanie gotowych skryptów. :)

  30. Nero 30 03 sierpnia 2007, 22:18

    Świetny artykuł. Z jQuery już wcześniej miałem styczność (dzięki Tobie Ridlle :P) ale co by nie mówić gdy zobaczyłem mootools u dziudka to szybko przestawiłem się. Teraz jeszcze M1.3… :) mniam ! jQuery na pewno jest mniej intuicyjne (przynajmniej dla mnie) ale nie będę zaczynał nowej wojny :) każdy będzie używał czego chce i już :D

  31. Snipe 31 03 sierpnia 2007, 23:14

    Będę miał co czytać :) Dzięki Riddle :)

  32. mls 32 04 sierpnia 2007, 00:53

    (Komentarz zmodyfikowany 04.08.2007 o 02:18)

    Będzie OT, oj będzie, ale… sypie się layout bloga pod Safari v2/Mac :)
  33. Dawid 33 04 sierpnia 2007, 11:48

    Riddle, dziękuję za konkretną (krótką) odpowiedź!

    Mam jeszcze jedno pytanie: orientujesz się (lub, ktokolwiek czytający to) dlaczego wg Firebuga plik ze spakowaną, czyli teoretycznie mniej zajmującą biblioteką JQuery „pobiera się” wolniej niż z rozpakowaną?
    Wiem, to są różnice kilkunastu milisekund, ale mimo wszystko mnie to zastanawia od jakiegoś czasu.

  34. piXelRider 34 05 sierpnia 2007, 10:07

    Bardzo ladnie Riddle :) Czekam na kontynuacje i przyklad zastosowania ScrollToAnchor(), bo jakos uruchomic tego nie moge :/

    PS. Bez polskich znakow ze wzgledu na gips i druty na palcach prawej reki – wybaczcie ;)

  35. Anonim 35 07 sierpnia 2007, 07:27

    Witam, hmmm jQuery trochę uboga ta biblioteka i ograniczona ale dla początkujący wystarczająca.
    Ze swojej strony polecam Prototype (http://www.prototypejs.org/) i bajery napisane na podstawie tego frameworka http://script.aculo.us/ – life search, drag and drop i takie tam.

  36. Albi 36 07 sierpnia 2007, 08:08

    Nie chcę wywoływać flejma, więc powiem tylko tyle, że jQuery cenię właśnie ze względu na jej niewielki rozmiar oraz dużą ilość pluginów. Nie ma rzeczy, której nie dałoby się osiągnąć przy pomocy Prototype/script.aculo.us, a nie dałoby się przy użyciu jQuery i odpowiednich rozszerzeń. Po co używać całej kobyły, skoro jest coś znacznie bardziej „lajtowego”? Do tego wygoda użycia bez porównania większa.

  37. Riddle 37 07 sierpnia 2007, 12:09

    Anonim, wydaje mi się że nie wiesz co jQuery ma do zaoferowania (jeśli wg. Ciebie jQuery jest ubogie, to na pewno nie widziałeś repozytorium wtyczek) i jakie różnice występują w podejściu do użytkownika między nią a Prototype.js.

    Stąd… owszem, każdy używa tego czego chce, ale nie siej FUD-ów. ;>

  38. Sixers 38 07 sierpnia 2007, 19:18

    Co tu dużo gadać. Zarąbista sprawa. Czekam na więcej :D

  39. MiT 39 13 sierpnia 2007, 12:01

    Niech każdy wątpiący w jQuery wejdzie na tę stronę:
    http://interface.eyecon.ro/news
    Jest tam plugin Interface który robi „life search, drag and drop i takie tam” i parę innych rzeczy. A przy tym jak łatwo i przyjemnie:)

  40. shpyo 40 13 sierpnia 2007, 14:57

    Dzięki za to wprowadzenie. Teraz będę mógł w końcu przysiąść do jQuery ;). Normalnie mnie się nie chciało czytać tych wszystkich manuali po angielski…

  41. Albi 41 13 sierpnia 2007, 14:59

    Bez manuali ani rusz ;) Zresztą manual jQuery jest bardzo łatwy do opanowania. Dużo przykładów.

  42. shpyo 42 14 sierpnia 2007, 08:21

    @Albi: tylko trzeba chcieć ;). Tak sam z siebie to raczej nie, chyba że jestem pod ścianą i MUSZĘ.

  43. gamebastards 43 14 sierpnia 2007, 16:02

    Dzięki ci panie z jQuery i ruby ;)

  44. Wiktor 44 14 sierpnia 2007, 22:20

    Tylko jak spiąć jQuery i RoR???

  45. jackweb 45 16 sierpnia 2007, 20:37

    No i bardzo ładnie zrobione to wprowadzenie do jQuery. Z niecierpliwością czekam na kolejne części. :)

  46. MMORPG 46 17 sierpnia 2007, 16:21

    W nowym phpSolutions jest 5 stronicowy artykuł o jQuery, na dodatek można go za darmo zassać z ich strony.

  47. Walker 47 17 sierpnia 2007, 16:22

    Mówisz o artykule o jQuery do zassania za darmo na stronie phpSolutions?

  48. Walker 48 17 sierpnia 2007, 16:29

    Można, jednak mi jakoś nie chce go pobrać. Pokazuje się tylko „Przetwarzanie danych…” i znika ;). Mógłby to ktoś zmirrorować?

  49. MMORPG 49 17 sierpnia 2007, 23:36

    Trzeba się darmowo zarejestrować. Może nie widać komunikatu.

  50. vegh 50 19 sierpnia 2007, 06:06

    Chyba się spóźniłem: wszystkie darmowe pdf-y wydawnictwa Software są do ściągnięcia z magicznego katalogu… upload ;)

  51. pawciak 51 26 sierpnia 2007, 00:31

    Witaj – na początku chciałem powiedzieć że ten blog to naprawdę kawał świetnej roboty :) mam też pytanie – czy używałeś kiedyś mootools? jeśli tak to co możesz o tym powiedzieć? bardziej na plus czy minus? pozdrawiam:)

  52. Koziołek 52 27 sierpnia 2007, 21:08

    Sława!
    24 ukazała się nowa wersja jQ 1.1.4. Troszkę zoptymalizowana… na firefoxie niektóre funkcje działają prawie 5000% szybciej :)

  53. off 53 27 sierpnia 2007, 21:52

    Koziołek: Żeby być dokładniejszym, to tylko jedna funkcja działa szybciej, mianowicie pobieranie selektora, które działa zdecydowanie szybciej, na Fx określiłeś ten procent. Zostało poprawione jeszcze parę elementów, tak jak $(”elem”) oraz .each(). Tutaj można zauważyć, że Safari 3, jeżeli chodzi o JS jest niedościgniona ;) Składnia jQuery coraz bardziej zaczyna mi przypominać PHP obiektowy. W każdym razie ja czekam na wersję 1.2 ;)

  54. lukasz.sekula 54 29 sierpnia 2007, 12:25

    a ja mam propozycję :)
    Proszę o wydanie całego kursu (oczywiście po jego zakończeniu) w formie pliku .pdf

    świetna sprawa :) czekam na kolejną część

  55. Mateusz Papiernik 55 30 sierpnia 2007, 00:05

    Dzięki Riddle, chętnie przeczytałem :) Też ostatnio się za jQuery wziąłem, cholera. Biznes-is-biznes, bez tego się nie wyżyje ;) Mnie w dużej ilości różnorodnych JS na stronach, co stało się modne, denerwuje jedno. Wątek zresztą już tutaj poruszony. Strony ociekające efektami wizualnymi potrafią przyrżnąć mojego Athlona 1800+, co trochę kłóci mi się z wizją wydajnej sieci. Niemniej jednak, przyznaję, miło popatrzeć na trochę efekciarstwa od czasu do czasu – akurat to, co prezentujesz na PerfectionOrVanity całkiem mi się podoba.

    Disklajmer: W tym komentarzu niechcący spłyciłem jQuery do efekciarstwa, co oczywiście niezupełnie było moim celem, ani moją wizją tego toolkitu – głównie jednak na takie jego wykorzystanie ostatnio się natykam.

  56. Siergiej 56 30 sierpnia 2007, 11:40

    Ja bym chciał zauważyć, że z punktu widzenia użytkownika to nie są jakieś skomplikowane rzeczy jakie jQuery i mu podobne wykonują, więc powodem tego że szybkie komputery się zapychają są po prostu bardzo niewydajne silniki JS we współczesnych przeglądarkach. Słyszałem że w Fx3 ma być kompletnie nowy silnik JS, zobaczymy jak to będzie wyglądać, ale puki co zostaje nam czekać i krzyczeć „Żądamy wydajniejszych przeglądarek!” ;)

  57. Mateusz Papiernik 57 30 sierpnia 2007, 12:22

    Z punktu widzenia czegokolwiek to, co robi jQuery, to bardzo niewiele. Powinno śmigać, ale nie śmiga :) Fakt, że jak piszesz, winę ponoszą silniki JS w przeglądarkach. Problem w tym, że w większości dziś używanych przeglądarek. Co obecnie jest pod tym kątem najszybsze? Na oko Opera, ale dokładniejszych testów nie przeprowadzałem. Abstrahując jednak od technicznego aspektu wydajności i optymalności rozwiązań jQuery, dla końcowego użytkownika się wlecze, i np. mnie to wkurza, gdy oglądając serwis przeglądarka robi mi freeze na parę sekund ;)

  58. Siergiej 58 30 sierpnia 2007, 12:47

    Opera nie jest tygrysem, wiem z autopsji bo to moja primary przeglądarka – też potrafi zwisnąć przy banalnych skryptach. Safari się chwali najszybszym JavaScriptem, ciekawe czy też takie niespodzianki użytkownikom serwuje.

  59. Mateusz Papiernik 59 30 sierpnia 2007, 12:49

    Nie miałem jeszcze okazji popróbować Safari. Ktoś używa na makówce (gdzie pewnie działa lepiej/szybciej niż ta beta) i może się wypowiedzieć? :)

  60. Lukasz 60 31 sierpnia 2007, 19:48

    Czapki z glow. Bardzo ciekawie napisany tutorial. Mi ten styl pisania bardzo odpowiada. Te, jakze proste przyklady, ukazaly mi potege jQuery. Czekam na dalsza czesc!

    Przepraszam za brak polskich znakow, u mnie windowsy i klawiatury tylko z üöä ;)

  61. knysha 61 02 września 2007, 19:07

    Dosyć ciekawe, trzeba będzie sprobować ;)

    Pozdrawiam,
    knysha

  62. nrm 62 09 września 2007, 20:54

    i co dalej???

  63. off 63 09 września 2007, 21:07

    Kurs się zawiesił :P

  64. Mariusz 64 11 września 2007, 10:20

    @Wiktor:
    bq.Tylko jak spiąć jQuery i RoR???

    Istnieje projekt jQuery on Rails, który zapowiada się całkiem nieźle ;-)

  65. ytic 65 11 września 2007, 14:24

    Trochę późno te moje uwagi ale muszę...
    1. Gdzie w artykule link do jquery.com? Dopiero w komentarzach podałeś – powinieneś w artykule.
    2. Dodaj na jquery.com linka do swojego kursu. Będzie raźniej tym co angielskiego nie bardzo a chcą o jquery poczytać i używać.

    i najważniejsze
    3. Jeśli to są podstawy, to jak nazwiesz opis i przykłady wykorzystania $(document).ready()? Dlaczego tego tu nie ma? Bo według mnie to właśnie jest podstawa dla jquery i bez tego reszta rzeczy jquery to tylko bajery czasami bardziej użyteczne a czasami mniej.

    Pozdrawiam

  66. Czasowstrzymywacz 66 11 września 2007, 18:56

    Coś się Riddle chyba opierniczasz… :( Częściej częściej.

  67. Siergiej 67 11 września 2007, 19:38

    Wiecie, niektórzy tutaj oprócz tego co lubią muszą jeszcze pracować:)

  68. czeslavv 68 17 września 2007, 21:37

    Wiem, że pewnie masz zajęcia, ale kiedy kolejny wpis o jQuery?

  69. shoovi 69 21 września 2007, 15:26

    Czołem właśnie Tu dogooglałem ;) szukając info o jQuery. Fajnie napisane tylko… mało mało mało ;) Narazie ctr+D i czekam na kolejne odcinki ;)

    Pozdrawiam

  70. nrm 70 25 września 2007, 21:53

    Przyda się

  71. mORWo 71 27 września 2007, 14:50

    się czeka na kolejną część, się czeka. bardzo przejrzyście i czytelnie napisany artykuł... jak już pisałem się czeka na kolejną część ;)

  72. Hajime 72 09 października 2007, 20:58

    Riddle czeka aż będzie 100 komentarzy, wtedy ruszy dalej : )

  73. Paweł Ryznar 73 15 października 2007, 18:42

    Ciekawy artykuł :)

    Dla programistów PHP używających frameworka symfony chcących łatwo używać jQuery powstał plugin, na razie w wersji aplha: Jquery Plug-In
    http://trac.symfony-project.com/wiki/sfJqueryPlugin

    Pozdrawiam :)

  74. b4it 74 07 listopada 2007, 17:55

    Riddle, masz w planach kolejną część czy jednak już zrezygnowałeś?

  75. Riddle 75 07 listopada 2007, 17:55

    Mam.

  76. Mrk 76 12 listopada 2007, 11:54

    Grr – ‘Podgląd’ chyba coś nie halo – skasował mi komentarz, a tyle się napisałem. Szybkie review:

    Świetny serwis – naprawdę. Bardzo ciekawe posty, nice usability :) Co do jQuery – napisałeś tak, że chce się szukać, czytać, próbować, testować i implementować xD – dzięki Ci za to!!

    PS. czy RSS nie jest po to, że przy pojawieniu się kolejnej części artykułu, każdy zainteresowany będzie o tym wiedział? Chyba trochę jest ;> Więc można by sobie darować to ‘poganianie’ Rid’a. Skoro mówi, że będzie, to będzie.

    Pzdr

  77. Krzysiek 77 03 grudnia 2007, 20:12

    w sumie szukałem innej bibliotek (Thickbox) która właśnie opiera swoje działanie o jQuery… Teraz wiem do czego to służy…

  78. sss 78 11 grudnia 2007, 21:04

    kiedy kolejna cześć?

  79. Siergiej 79 23 lutego 2008, 22:17

    Czy ktoś słyszał o odpowiedniku mootoolsowej funkcji periodical dla jQuery?

  80. a 80 12 marca 2008, 21:01

    czyli kurs zdechl?

  81. Chris Trynkiewicz 81 03 kwietnia 2008, 09:05

    Prototype się wydaje logiczniejszy i przyjemniejszy…

  82. Pepis 82 18 lipca 2008, 08:28

    Przyjemne wprowadzenie

  83. Elektryk 83 19 kwietnia 2009, 16:26

    Kurcze, mam problem. Wie może ktoś jak zrobić aby jQuery pomijał rodziców danego diva przy chowaniu? Tworze drzewko rodem z OSów i chce aby można było rozwijać tylko jedną gałąź. Niestety gdy chce rozwinąć podkategorie to zwija się folder nadrzędny i jestem w kropce.
    $(this).next().next("div").show("normal"); $("#drzewo div a").not(this).next().next("div").hide("normal");
    Mógłby mi ktoś pomóc?

Dodaj komentarz

Do formatowania komentarzy używaj Textile (HTML nie działa). Szczególnie jeśli wklejasz większe fragmenty kodu. W razie niepewności użyj podglądu komentarza.

Wypowiedzi obraźliwe, infantylne oraz nie na temat będą moderowane – pisząc postaraj się zwiększyć wartość dyskusji.

Komentarze nie służą do wysyłania wiadomości albo informowania o błędach, itd. Chcesz coś mi napisać – skontaktuj się.