Wprowadzenie do jQuery
03 sierpnia 2007
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:
$("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.
A jak wyłowić wszystkie linki w menu naszego bloga? Spróbujmy tak:
$("#sidebar a")
Jeśli wydaje się Wam to nudne, spróbujmy wyciągnąć wszystkie pola wielokrotnego wyboru z pierwszego formularza na stronie.
$("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:
$("#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.
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:
var $link = $("<a></a>");
A zakładając, że zwykle w JavaScript robimy coś więcej ze stworzonymi elementami, spróbujmy tak:
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:
$("#main").find("p").not(".ohmy").addClass("new")
Sposób działania jQuery na tym kodzie może być zilustrowany w ten sposób:
Na początku wybieramy element od
id="main"za pomocą selektora"#main". Dostajemy w zwrocie<div/>o takim identyfikatorze otoczony obiektem jQuery.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.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.
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.
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. :)
trójkąt 3
03 sierpnia 2007, 13:24
D4rky 4
03 sierpnia 2007, 13:26
Walker 8
03 sierpnia 2007, 13:32
Dreamer 12
03 sierpnia 2007, 13:38
Piotr Pyclik 13
03 sierpnia 2007, 13:39
Dziudek 18
03 sierpnia 2007, 14:38
Albi 23
03 sierpnia 2007, 16:38
Siergiej 27
03 sierpnia 2007, 17:26
mls 32
04 sierpnia 2007, 00:53