sobota, 14 lipca 2012

O jQuery słów kilka

jQuery jest to biblioteka napisana w języku 'javascript' przeznaczona jako darmowe rozszerzenie/uproszenie tego języka udostępniona na mocy licencji X11. W praktyce jQuery, oferuje to samo co standardowy 'javascript' jednak w o wiele bardziej przyjemnej, przyjaznej i uproszczonej formie. Kodu jest zdecydowanie mniej, jest on bardziej przejrzysty i o wiele bardziej niezawodny niż w przypadku własnoręcznie pisanego javascriptu.
Podstawą jQuery są tzw. selektory, czyli funkcje/klasy (w języku 'javascript'  funkcja jest klasą), które przeszukują drzewo DOM dokumentu w poszukiwaniu obiektów spełniających podane kryteria.
Standardowy selektor:
var txtHelper = $("#txtHelper");
Jest  równoznaczny wyrażeniu:
var txtHelper = document.getElementById("txtHelper");
Oba wyrażenia zwrócą bowiem obiekt (kod TextBoxa widziany z poziomu Visual Studio):
 <asp:TextBox ID="txtHelper" runat="server" ToolTip="tooltipHelper" CssClass="cssHelper"></asp:TextBox>
 Jeżeli ktoś jeszcze nigdy nie korzystał z jQuery i zastanawia się, czym jest znaczek $, to wyjaśniam, iż jest on nazwą funkcji/klasy reprezentowanej przez bibliotekę jQuery (w języku 'javascript' funkcja jest klasą, a klasa jest funkcją, więc odwołując się do funkcji odwołujemy się równocześnie do instancji jej klasy). W praktyce, pisząc $('alaMaKota') wywołujemy funkcję(klasę) o nazwie $ z parametrem 'alaMaKota'.
Gdyby ktoś potrzebował więcej wyjaśnień w sprawie, skąd się wziął dolar, to odsyłam do odpowiedniego wpisu: Greg Sidelnikov wyjaśnia "JavaScript DollarSign ($)"

Wracając do samego selektora, w celu wyszukania odpowiednich elementów (kontrolek) w dokumencie preferuję posługiwanie się klasami CSS, zamiast "ID" elementu.
Powodów jest kilka:
- inne kontrolki (np. ListView) czasami mają wpływ na nazwę naszego elementu widzianego w kontekście DOM, więc wykorzystywanie takiego 'id' jaki mamy w VS czasami nie zwraca oczekiwanego przez nas elementu
- czasami potrzebujemy wyszukać elementy nie posiadające swojego serwerowego 'id'
- czasami potrzebujemy wyszukać grupę identycznych elementów, a dzięki wykorzystaniu jQuery i CSS dostajemy grupę elementów spełniających nasze wymagania, po których możemy później iterować pętlą "each".

Nie bez znaczenia jak też tutaj fakt, że jeden obiekt może posiadać nieskończenie wiele klas CSS.
Przykład wykorzystania selektora z CSS, pętli "each" oraz dodatkowej funkcjonalności jQuery (dostarczonej w osobnych bibliotekach).
    $("document").ready(function () {
        var objs = $(".cssHelper");

        jQuery.each(objs, function () {
            $("#" + this.id).tooltip();
        });
    });
 W tym konkretnym przykładzie,  utworzony został skrypt, który automatycznie uruchamia się po zakończeniu ładowania się strony do przeglądarki. Skryp ten, wyszukuje wszystkie obiekty, które mają klasę CSS o nazwie "bar", a następnie, za pomocą pętli "each" aktywuje u nich funkcję "tooltip()".

Sama funkcja "tooltip()" dostępna jest jako darmowy plugin jQuery i znacznie rozszerza opcję standardowego "tooltipa" jednak o tym rozszerzeniu napiszę nieco więcej w innym wpisie.

Wracając jednak do selektora, jedną z jego wspaniałych zalet, jest np. możliwość bezproblemowego odwoływania się do obiektów, do których odwoływanie się za pomocą standardowego javascriptu stanowi poważnym problem. Przykładem jest tutaj "HiddenField", do którego odwołujemy się w sposób nieco "pokrętny", jednak przedstawiona poniżej wersja, jest obecnie najbardziej poprawna.
Sam 'HiddenField' dostaje swojego "opakowującego" div-a:
            <div class="hfFoo-wrap">
                <asp:HiddenField runat="server" ID="hfFoo" />
            </div>
 Natomiast funkcja która, która go poprawnie wyszukuje (i ustawia/sprawdza wartość) wygląda tak:

function FooBarFunction() {
    var hfFoo = $('.hfFoo-wrap input[type=hidden]');
    hfFoo.val('Bar');
    var isBar = hfFoo.val();
}
Dzięki czemu widzimy, że funkcje wyszukiwania selektora jQuery są o wiele potężniejsze niż standardowe wyszukiwanie obiektów, za pomocą "czystego" javascriptu. Ponieważ przedstawione tutaj przykłady stanowią jedynie wierzchołek góry lodowej oraz możliwości jQuery, zachęcam więc, do samodzielnego zapoznania się z tą wspaniałą, dostępną za darmo biblioteką.
 Oficjalna strona projektu.

Brak komentarzy:

Prześlij komentarz