Kurs jQuery – podstawy framework’a

Witamy w części 1. z serii Kurs jQuery. Pisaliśmy już o kilku różnych framework’ach JavaScript (jak Prototype JS czy MooTools).

Teraz chcemy opisać kluczowe zagadnienia prawdziwego giganta – jQuery, tak aby wystarczyło to do używania, i dalszego zgłębiania tajników tej że biblioteki.

Mówiąc gigant mamy na myśli możliwości oferowane przez tę bibliotekę. I nie ukrywamy, że ostatnimi czasy to właśnie jQuery jest preferowaną przez nas biblioteką JavaScript / Ajax.

Powód jest prosty – to biblioteka wysokiej jakości o niezwykle ogromnych możliwościach. Jeśli samo jQuery nie wspiera jakiejś funkcjonalności, prawdopodobnie znajdziemy ją i łatwo dodamy do projektu, dzięki potężnej ilości dostępnych pluginów.

Oczywiście możemy tworzyć publikować także własne pluginy. Ponadto jQuery ma znakomite rozszerzenie: UI. Służy ono do tworzenia i obsługi bogatych interfejsów użytkownika dostępnych w aplikacjach WWW.

Użycie jQuery w projekcie

Pobieramy bibliotekę ze strony domowej.

Można dodawać ją także w sposób korzystający z CDN – w tym przykładzie zawsze zostanie dołączona najnowsza wersja:

<script src="//code.jquery.com/jquery-latest.js"></script>

Zaczniemy od ważnego zagadnienia, jakim jest noConflict.

Zdarza się (na szczęście chyba rzadziej niż kiedyś), że projekt używa kilku bibliotek JavaScript. A w każdej z nich, podobnie jak w jQuery, możemy znaleźć choćby funkcję $(). Jeśli strona dołącza i używa np. jQuery i Prototype, to powstanie konflikt.

Do unikania takich sytuacji jQuery wprowadza metodę noConflict(), która pozwala nam do zmiennej przypisać całą moc funkcji $(), najprościej mówiąc opakować ją niezależnie.

Przykład:

var jq = jQuery.noConflict();

Możemy też wstawić kod bazujący na jQuery pomiędzy inny, np. oparty o Prototype JS, w sposób pokazany poniżej:

jQuery(document).ready(function($) {
    // tutaj możemy normalnie używać $ ...
});

Parametr extreme – metoda jQuery.noConflict(extreme) posiada parametr extreme (typu boolean). W skrócie ten parametr wymusza przypisanie funkcji $() do jej oryginalnych właścicieli.

Zastosowaniem są środowiska o wysokim prawdopodobieństwie konfliktu, np. używanie wielu różnorodnych bibliotek JavaScript.

Przykład:

var dom = {};
dom.query = jQuery.noConflict(true);

Selektory jQuery w pigułce

Biblioteka jQuery daje nam zestaw potężnych i użytecznych selektorów elementów.

Rozważmy przykład praktyczny.

Pobieranie elementu danego typu (sama nazwa jako parametr):

// $('p').click(function(){ ... });

// wszystkie paragrafy otrzymają zdefiniowaną obsługę kliknięcia
$('p').click(function() {
    alert('Klik');
});

Pobieranie elementu po ID (nazwa poprzedzona znakiem # jako parametr):

// wybierz element o id 'tresc'
$('#tresc').click(function(){ 
    alert('Klik klik');
});

Pobieranie po klasie CSS (nazwa poprzedzona kropką jako parametr):
Selektor elementów wzbogaconych o klasę składa się z kropki i nazwy klasy:

$('.inny').click(function() {
    alert('Pobranie po klasie');
});

Pobieranie po wartości atrybutu. Możemy pobierać elementy według wartości dowolnego atrybutu elementu.

Przykładowo dla:

<a href="ipsum.html">ipsum</a>

piszemy:

$('a[href="ipsum.html"]').click(function() {
    alert('kliknięto ipsum.html');
});

Dzieci elementu – child combinator:

// dodaj klasę elementom li rodzica selected-uls
$(document).ready(function() {
    $('#selected-uls > li').
        addClass('horizontal-foobar');
});

Negacja – not:

$('#selected-uls li:not(.horiz)').addClass('sub-level');

Określony warunek zostanie zanegowany.

Przykład praktyczny – nadanie klasy CSS dla linku, zależnie od rozszerzenia pliku, do którego kieruje:

$('a[href$=.pdf]').addClass('pdflink');
$('a[href$=.doc]').addClass('mswordlink');
// ...

Selektory w zastosowaniu do stylu tabel

Framework jQuery wyposaża programistę w selektory upraszczające wiele operacji, np. nadawanie stylów elementom tabel.

Przykład:

// odd - nieparzysta, stylowanie co drugiego wiersza
$(document).ready(function() {
    $('tr:odd').addClass('alt-1');
});

// even - parzysta
$('tr:nth-child(even)').addClass('alt-2');

Poznajmy kolejne operacje na tabelach.

Contains – określenie, czy element zawiera dany tekst.

Przykład – dodaj klasę zależnie od zawartości:

// wiersze zawierające wyraz 'Henry'
$('td:contains(Henry)').addClass('highlight');

Pobieranie i ustawianie wartości (value) elementu

Do obu zadań służy metoda val(). Jeśli nie podamy parametru – wykonuje się get (pobranie), jeśli podamy – set (ustawienie) wartości podanej jako parametr.

Przykłady:

// pobierz wartość elementu
var myValue = $('#myDivId').val();

// ustaw wartość elementu
$('#myDivId').val("hello world");

Metoda is()

To kolejny wachlarz możliwości. Metoda is() pozwala określić m.in. czy element ma klasę CSS, atrybut, itd.

Przykłady:

// czy element ma klasę .pretty:
if ($('#myDiv').is('.pretty')) {
    alert('Tak');
}

// czy element jest ukryty (:hidden)
if ($('#myDiv').is(':hidden')) {
    alert('Tak');
}

// :hidden vs :visible - czyli ukryty vs widoczny
var isVisible = $('#myDiv').is(':visible');
var isHidden = $('#myDiv').is(':hidden');

Disable / enable

Dzięki jQuery w prosty sposób możemy ustawiać element na enabled lub disabled. Do tego celu służą metody attr(‚atrybut’, ‚wartosc’) oraz removeAttr(‚atrybut’);

Przykłady:

// disable
$("#x").attr("disabled","disabled");

// enable
$("#x").removeAttr("disabled");

Tymi samymi metodami możemy obsługiwać elementy formularzy.

Przykład – zaznaczanie i odznaczanie elementu typu checkbox:

// zakładając że mamy element checkbox z id = 'c'
$("#c").attr("checked", "checked"); // ustaw checked
$("#c").removeAttr("checked"); // usuń checked

Przykład 2 – obsługa list wyboru w jQuery:

// pobranie id zaznaczonej pozycji
$("select#myselect").val();

// pobranie tekstu (text()) zaznaczonej pozycji
$("#myselect option:selected").text();

Krok dalej – selektory formularzy

Czyli szybki dostęp do określonych elementów danego typu, np. :text odnosi się do <input type=”text”>

I do tego mamy ponadto:

:text

:checkbox

:radio

:image

:submit

:reset

:password

:file

Przyciski można też odnieść do typu button:
:button

Aktywne elementy formularza (enabled):
:enabled

Nieaktywne (disabled):
:disabled

Zaznaczone (przyciski typu radio lub checkbox):
:checked

Zaznaczone (dla list wyboru):
:selected

Dokładną dokumentację selektorów i więcej przykładów znajdziemy tutaj.

Metody dostępowe i podstawowe operacje na obiektach w jQuery

– size() – ilość elementów:

$(document.body).click(function () {
    $(document.body).append($("<div>"));
    var n = $("div").size();
    $("span").text("There are " + n + " divs." + 
        "Click to add more.");}).click();

– length() – podobnie do size():

$(document.body).click(function () {
    $(document.body).append($("<div>"));
    var n = $("div").length;
    $("span").text("There are " + n + " divs." 
        + "Click to add more.");
}).trigger('click'); // trigger the click to start

– context() – kontekst elementu DOM przekazanego do jQuery():

$("ul")
.append("<li>" + $("ul").context + "</li>")
.append("<li>" + $("ul", document.body).context.nodeName + "</li>");

– eq() – szybka i skuteczna metoda porównywania, np.:

// czy 1. paragraf ma ustawiony kolor na czerwony
$("p").eq(1).css("color", "red");

– get() – pobieranie elementów:

function disp(divs) {
    var a = [];
    for (var i = 0; i < divs.length; i++) {
        a.push(divs[i].innerHTML);
    }
    $("span").text(a.join(" "));
}
disp($("div").get().reverse());

– get(index) – pobieranie elementu o zadanym indeksie:

$("*", document.body).click(function (e) {
    e.stopPropagation();
    var domEl = $(this).get(0);
    $("span:first").text("Clicked on - " + domEl.tagName);
});

– queue() – łatwa implementacja kolejki

Przykład kolejkowania:

$("#show").click(function () {
    var n = $("div").queue("fx");
    $("span").text("Queue length is: " + n.length);
});

Rozszerzanie jQuery – extend
W tym momencie chcemy jedynie wspomnieć o znakomitym sposobie rozszerzania udostępnionym przez jQuery.

W prosty sposób możemy wprowadzać nowe metody. Można skorzystać z tego w celu napisania typowego pluginu jQuery.

Przykład:

// jQuery.fn.extend( object )

jQuery.fn.extend({
    check: function() {
    return this.each(function() { 
        this.checked = true; 
    });
},
uncheck: function() {
    return this.each(function() { 
        this.checked = false; 
    });
}
});

Przykład – rozszerzanie samego jQuery:

// jQuery.extend( object )

jQuery.extend({
    min: function(a, b) { return a < b ? a : b; },
    max: function(a, b) { return a > b ? a : b; }
});

Podsumowanie

Pierwsza część kursu jQuery dobiega końca. Przedstawiliśmy garść przykładów, i zagadnień. Ale jest to tylko wierzchołek góry lodowej.

Mamy nadzieję że nie brakuje osób zapalonych do dalszego zgłębiania tajników jQuery. My zapraszamy już do 2. i 3. części podstawowego kursu jQuery.

Dominik Wlazłowski

Programista WWW i aplikacji mobilnych z wieloletnim doświadczeniem, początkujący bloger. Pasjonat programowania, nowych technologii, e-commerce, a także sportu i motoryzacji.

     

Podaj dalej: 11101