
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.