Rozdział 4. Jądro jQuery

Zapis $ a $()

Do tej pory pracowaliśmy wyłącznie z metodami, które są wywoływane na obiektach jQuery. Na przykład:

$('h1').remove();

Większość metod jQuery jest wywoływanych na obiektach jQuery w sposób zaprezentowany powyżej. Metody te należą do przestrzeni nazw $.fn lub tak zwanego prototypu jQuery — najlepiej zapamiętać je jako metody obiektowe jQuery.

Istnieje jednak kilka metod, które nie operują na wybranych elementach. Metody te należą do przestrzeni nazw jQuery i można je nazwać metodami podstawowymi jQuery.

Dla nowych użytkowników biblioteki jQuery taki podział może być bardzo nieczytelny. Oto zatem podstawowe informacje, które musisz zapamiętać:

• Metody wywoływane na wybranych elementach jQuery znajdują się w przestrzeni nazw $.fn i automatycznie przyjmują oraz zwracają wybrane elementy jako this.
• Metody w przestrzeni nazw $ są z reguły metodami pomocniczymi i nie operują na wybranych elementach. Nie są im automatycznie przekazywane żadne argumenty, a zwracane przez nie wartości są różne.

Zdarza się czasem, że metody obiektowe i metody podstawowe noszą takie same nazwy, tak jak na przykład $.each oraz $.fn.each. W takich przypadkach czytając dokumentację należy koniecznie zwrócić uwagę, czy poznajemy funkcjonowanie odpowiedniej metody.

Metody pomocnicze

W przestrzeni nazw $ mamy do dyspozycji kilka metod pomocniczych. Pomagają one w rutynowych zadaniach, jakie musi wykonać programista. Poniżej znajduje się kilka przykładów ich użycia, zaś ich pełen spis znajduje się na stronie http://api.jquery.com/category/utilities/.

$.trim

Usuwa białe znaki z początku i końca łańcucha.

$.trim('    mnóstwo zbędnych białych znaków    ');
// zwraca „mnóstwo zbędnych białych znaków”

$.each

Iteruje przez tablice i obiekty. 
$.each([ 'foo', 'bar', 'baz' ], function(idx, wartosc) {
    console.log('element ' + idx + 'ma wartość ' + wartosc);
});
 
$.each({ foo : 'bar', baz : 'bim' }, function(k, w) {
    console.log(k + ' : ' + w);
});

$.inArray

Zwraca indeks wartości w tablicy, albo -1, jeśli dana wartość nie znajduje się w tablicy.

var mojaTablica = [ 1, 2, 3, 5 ];
 
if ($.inArray(4, mojaTablica) !== -1) {
    console.log('znalazłem!');
}

$.extend

Zmienia własności pierwszego obiektu korzystając z własności kolejnych obiektów.

var pierwszyObiekt = { foo : 'bar', a : 'b' };
var drugiObiekt = { foo : 'baz' };
 
var nowyObjekt = $.extend(pierwszyObiekt, drugiObiekt);
console.log(pierwszyObiekt.foo); // 'baz'
console.log(nowyObiekt.foo);   // 'baz'

Jeśli nie chcesz zmieniać żadnego z obiektów przekazywanych do metody $.extend, w miejsce pierwszego argumentu przekaż obiekt pusty.

var pierwszyObiekt = { foo : 'bar', a : 'b' };
var drugiObiekt = { foo : 'baz' };
 
var nowyObiekt = $.extend({}, pierwszyObiekt, drugiObiekt);
console.log(pierwszyObiekt.foo); // 'bar'
console.log(nowyObiekt.foo);   // 'baz'

$.proxy

Zwraca funkcję, która zawsze będzie wykonywana w wyznaczonym zakresie — słowo this wewnątrz przekazanej funkcji odwołuje się do drugiego argumentu.

var mojaFunkcja = function() { console.log(this); };
var mojObiekt = { foo : 'bar' };
 
mojaFunkcja(); // rejestruje obiekt okna
 
var mojaFunkcjaProxy = $.proxy(mojaFunkcja, mojObiekt);
mojaFunkcjaProxy(); // rejestruje obiekt mojObiekt

Jeśli masz obiekt z metodami, możesz przekazać taki obiekt wraz z nazwą metody — zostanie zwrócona funkcja, która zawsze będzie wykonywana w zakresie obiektu.

var mojObiekt = {
    mojaFn : function() {
        console.log(this);
    }
};
 
$('#foo').click(mojObiekt.mojaFn); // rejestruje element DOM o identyfikatorze #foo
$('#foo').click($.proxy(mojObiekt, 'mojaFn')); // rejestruje mojObiekt

Sprawdzanie typu wartości

Jak już wspomniano w części Podstawy języka Java Script w bibliotece jQuery dostępnych jest kilka podstawowych metod pomocniczych pozwalających określić typ wartości.

Przykład 4.1. Sprawdzanie typu dowolnej wartości

var mojaWartosc = [1, 2, 3];
 
// Korzystamy z operatora JavaScript typeof aby sprawdzić, czy nasza zmienna jest typu prostego
typeof mojaWartosc == 'string'; // fałsz
typeof mojaWartosc == 'number'; // fałsz
typeof mojaWartosc == 'undefined'; // fałsz
typeof mojaWartosc == 'boolean'; // fałsz
 
// Za pomocą operatora identyczności sprawdzamy, czy nasza zmienna ma wartość null
mojaWartosc === null; // fałsz
 
// Korzystamy z metod jQuery, aby sprawdzić czy nasza zmienna jest typu złożonego
jQuery.isFunction(mojaWartosc); // fałsz
jQuery.isPlainObject(mojaWartosc); // fałsz
jQuery.isArray(mojaWartosc); // prawda

Metody przechowywania i pobierania danych

Kiedy staniesz się bardziej zaawansowanym użytkownikiem jQuery, na pewno nie raz będziesz potrzebował sposobu na przechowanie danych elementu wraz z tym elementem. W czystym JavaScripcie możesz to zrobić poprzez dodanie własności do elementu DOM, ale musisz się wówczas liczyć z wyciekami pamięci w niektórych przeglądarkach. W bibliotece jQuery istnieje natomiast prosty sposób na przechowywanie danych związanych z elementem, a przy tym nie trzeba się martwić o problemy z pamięcią.

Przykład 4.2. Przechowywanie i pobieranie danych związanych z elementem

$('#mojDiv').data('nazwaKlucza', { foo : 'bar' });
$('#mojDiv').data('nazwaKlucza'); // { foo : 'bar' }

Możesz przechowywać dowolne dane związane z elementem, co jest szczególnie cenne w czasie projektowania skomplikowanych aplikacji. W tym kursie do przechowywania odniesień do innych elementów będziemy przede wszystkim korzystać z metody $.fn.data.

Możemy na przykład chcieć ustalić związek pozycji na liście ze znajdującym się wewnątrz niej elementem div. Moglibyśmy to robić podczas każdej interakcji z wybraną pozycją, jednak lepiej byłoby ustalić taki związek raz na zawsze i za pomocą metody $.fn.data przechowywać wskaźnik do elementu div wewnątrz pozycji z listy.

Przykład 4.3. Przechowywanie związku pomiędzy elementami za pomocą metody $.fn.data

$('#mojaLista li').each(function() {
    var $li = $(this), $div = $li.find('div.tresc);
    $li.data('trescDiv', $div);
});
 
// później nie będziemy musieli ponownie odszukiwać elementu div;
// będziemy go mogli odczytać z danych pozycji
var $pierwszyLi = $('#mojaLista li:first');
$pierwszyLi.data('trescDiv').html('nowa tresc');

Aby przechować dane przy pomocy metody $.fn.data możesz nie tylko przekazać do niej pojedynczą parę klucz-wartość, ale także obiekt zawierający jedną lub kilka takich par.

Wykrywanie przeglądarek oraz ich właściwości

jQuery likwiduje większość problemów jakie mogą wystąpić z kodem JavaScript w różnych przeglądarkach, jednak mimo tego nasz kod potrzebuje czasem informacji na temat środowiska przeglądarki.

W takich wypadkach w bibliotece jQuery mamy do dyspozycji obiekt $.support, a także obiekt $.browser, który wychodzi już z użytku. Pełną dokumentację tych obiektów można znaleźć na stronach http://api.jquery.com/jQuery.support/ i http://api.jquery.com/jQuery.browser/.

Obiekt $.support wykrywa obsługiwane przez przeglądarkę funkcje — warto z niego skorzystać, aby móc dostosować kod JavaScript do różnych przeglądarek pod kątem przyszłych aktualizacji.

Z obiektu $.browser rezygnuje się na rzecz obiektu $.support, jednak w najbliższej przyszłości nie zostanie on usunięty z jQuery — dzięki niemu można bezpośrednio ustalić nazwę i wersję przeglądarki.

Jak uniknąć konfliktów z innymi bibliotekami

Jeśli używasz innej biblioteki JavaScript, która korzysta ze zmiennej $, istnieje ryzyko wystąpienia konfliktu z jQuery. Aby go uniknąć, musisz przejść w tryb bezkonfliktowy biblioteki jQuery natychmiast po załadowaniu jej na stronę i jeszcze przed jej pierwszym użyciem.

Kiedy przechodzisz w tryb bezkonfliktowy, masz możliwość zmiany nazwy zmiennej $ na inną.

Przykład 4.4. Przejście w tryb bezkonfliktowy jQuery

<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>var $j = jQuery.noConflict();</script>

Możesz w dalszym ciągu korzystać ze standardowego znaku $ kod umieszczając wewnątrz samowykonującej się funkcji anonimowej. Jest to powszechnie stosowana technika tworzenia autorskich wtyczek, kiedy autor nie jest w stanie stwierdzić, czy inna biblioteka nie korzysta ze znaku $.

Przykład 4.5. Użycie znaku $ wewnątrz samowykonującej się funkcji anonimowej

<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
jQuery.noConflict();
 
(function($) {
   // tutaj twój kod ze znakiem $
})(jQuery);
</script>