Frameworka jQuery nie trzeba nikomu przedstawiać. I choć nie wszystkim podoba się ta biblioteka to nie można zaprzeczyć jednemu – jQuery jest bardzo proste w nauce, jak i dalszej rozbudowie o nowe funkcje (pluginy, selektory i inne).

W tym wpisie zajmę się przydatną, aczkolwiek rzadko wykorzystywaną możliwością rozszerzania jQuery o niestandardowe selektory.

Wbudowane selektory w jQuery

Każdy kto korzysta z jQuery korzysta też z selektorów, którymi dysponuje i które są wbudowane w standardową bibliotekę.

Jako ciekawostkę warto dodać, iż selektory w jQuery są realizowane z wykorzystaniem biblioteki Sizzle. Biblioteka ta umożliwia dostęp do drzewa DOM w sposób jaki znamy z CSS.

Kilka przykładów selektorów dla przypomnienia o czym mówimy:

• wszystkie kontenery DIV z klasą timer:

  1	$('div.timer')

• wszystkie elementy INPUT typu checkbox:

  1	$(':checkbox')

• pierwszy element LI z elementu MENU:

  1	$('li:first', 'menu')

• wszystkie linki poza tymi, które zawierają obrazki:

  1	$('a:not(:has(>img))')

Jak więc widzisz, selektory ułatwiają życie i sprawiają, że tworzony kod jest re-używalny.

Niestandardowe selektory w jQuery

Twórcy biblioteki jQuery nie są w stanie przewidzieć wszystkich przypadków użycia selektorów w tworzonych aplikacjach, więc udostępnili prosty interfejs na tworzenie własnych selektorów.

Aby więc dodać niestandardowe selektory w jQuery wklepujemy następujący kod:

Jest też inna opcja na rozszerzanie jQuery o własne selektory, umożliwiająca dodatkowo dodawanie więcej niż jednego selektora na raz:

Nasza funkcja z selektorem przyjmuje cztery parametry:

1. objNode – HTML DOM Element
   Jest to referencja do bieżącego elementu w drzewie DOM. Nie jest to element jQuery, lecz węzeł DOM.
2. intStackIndex – Integer
   Indeks aktualnego węzła w stosie, na którym zastosowano selektor (liczony od 0).
3. arrProperties – Array
   Jest to zestaw metadanych z wywołanego selektora. Czwarty element tablicy zawiera przekazane parametry w selektorze. Pozostałe elementy nie wnoszą nic ciekawego, może poza elementem trzecim, który zawiera nawiasy zastosowane w selektorze (czasami można z tego skorzystać, co pokażę w dalszym przykładzie).
4. arrNodeStack – Array
   Zwraca kolekcję wszystkich elementów, na których użyto selektor.

Praktyczny przykład niestandardowego selektora

Na szybko napisałem selektor, który wyszukuje zewnętrzne linki:

Na szybko opiszę co robi powyższy kawałek kodu kiedy ktoś użyje selektora external na kolekcji elementów:

• Sprawdzamy czy mamy do czynienia z odsyłaczem (element A lub LINK).
• Ustawiamy domyślne wartości dla tablicy arrProperties – potrzebne w przypadku, gdy do selektora nie przekazano żadnych parametrów.
• Tworzymy listę argumentów przekazanych do selektora – niestety argumenty przekazane przez jQuery są typu string, dlatego czasem trzeba kombinować, stosując np. brzydki eval do zamiany na tablicę, jak w moim przypadku.
• Jeśli do selektora przekazano jakieś parametry to przechodzimy przez nie w pętli i kolejno sprawdzamy czy dany odsyłacz zawiera się w dozwolonych domenach (przekazanych jako argument).
• Na koniec sprawdzamy czy link jest zewnętrzny – czy zawiera atrybut rel=”external” lub link kieruje do zewnętrznej domeny.

Selektor w praktyce wygląda następująco:

• znajdź linki zewnętrzne i ustaw atrybut target=”_blank” (otwórz w nowy oknie):

  1	$('a:external').attr('target', '_blank');

• usuń wszystkie linki zewnętrzne, które prowadzą do Twittera lub Google+:

  1	$('a:external("plus.google.com", "twitter.com")').remove();

I to by było na tyle, pozostaje zabrać się za pisanie własnych selektorów :-) Jeśli ktoś pisze i wykorzystuje we własnych aplikacjach to zapraszam do dzielenia się kodem w komentarzach.

Warto odwiedzić

• Selektory jQuery – zanim napiszesz własny selektor sprawdź, czy nie istnieje już podobny w bibliotece jQuery.
• Extending jQuery’s selector capabilities – świetny artykuł o tworzeniu własnych selektorów od James’a Padolsey (poparty wieloma przykładami).