jQuery

jQuery - biblioteka która zrobiła niemałe zamieszanie w internecie.

Swoją popularność zawdzięcza kilku rzeczom, które ją charakteryzują.

Po pierwsze jQuery bardzo upraszcza pisanie skryptów. Dzięki niej zamiast skupiać się jak napisać dany fragment kodu, skupiamy się na tym jak rozwiązać dany problem.

Druga bardzo ważna sprawa to olbrzymie! zaplecze gotowych pluginów. Chcesz użyć lightboxa na stronie? Dorzucasz plugin, dopisujesz 2-3 linijki kodu i masz lightbox. Chcesz użyć na stronie responsywnej karuzeli? Znowu - zastosujesz odpowiedni plugin, napiszesz kilka linii kodu i problem rozwiązany. Nawet w dzisiejszych czasach na próżno będziemy szukać podobnych rozwiązań w nowoczesnych frameworkach (React/Angular) czy czystym JavaScript. A nawet jeżeli cokolwiek znajdziemy, rozwiązania te nie będą tak dopracowane jak ich odpowiedniki z jQuery. Może wynika to właśnie z tego co napisałem na początku? Autorzy skupiali się na funkcjonalności, a nie jak pisać kod...

Kolejną zaletą - w dzisiejszych czasach może mniej znaczącą - jest jednolitość kodu. Gdy jQuery wchodziła na rynek wciąż istniała na rynku spora rozbieżność w implementacji różnych "ficzerów" (i istnieje po dzień dzisiejszy - ot chociażby pierwsze z brzegu).
Dla przykładu - event DOMContentLoaded nie był wspierany przez wszystkie przeglądarki i najbezpieczniejszym rozwiązaniem było zastosować odpowiedni kod jQuery. W dzisiejszych czasach JavaScript dołącza do swojej specyfikacji coraz więcej rozwiązań znanych z jQuery. Obietnice, closest(), after(), before(), prepend(), append() itp. to rzeczy, które już dawno istniały w jQuery - i to działały we wszystkich przeglądarkach, a wiele z nich działało lepiej niż ich odpowiedniki z czystego Javascript. A w jQuery jest tego o wiele, wiele więcej...

Czy w dzisiejszych czasach warto uczyć się jQuery?
Jeżeli interesuje cie zdanie autora, zapraszam do mini lektury. W przeciwnym razie przechodzimy do nauki - bo warto!

Rozpoczęcie pracy

Aby zacząć używać jQuery, będziemy musieli dołączyć plik z tą biblioteką do naszej strony. Możemy albo ściągnąć plik z biblioteką na dysk, albo odwołać się do wystawionej w necie wersji. Najlepiej skorzystać z serwera CDN jQuery (lub innego np. https://cdnjs.com/).
Wystarczy wstawić taką ścieżkę przed nasze skrypty po czym można zacząć pisać kod.

Ja osobiście lubię odwoływać się do serwerów CDN Googla wstawiając do html link ze strony https://developers.google.com/speed/libraries/#jquery.

Jeżeli używasz webstorma i chcesz korzystać z wersji CDN, polecam dodać ją do globalnej biblioteki, dzięki czemu edytor ten będzie lepiej podpowiadać składnię.

Dokumentacja

Przy nauce jQuery warto korzystać z oficjalnej dokumentacji, która jest pod adresem https://api.jquery.com/

Bardzo pomocna będzie też alternatywna dokumentacja znajdująca się pod adresem http://jqapi.com/

document ready

Tak samo jak w przypadku czystego JavaScript aby pobierać elementy ze strony, powinniśmy się upewnić, że drzewo DOM zostało już wczytane) korzystając z eventu DOMContentLoaded.
jQuery upraszcza jego zapis:

$(document).ready(function() {
    ...
});

//lub to samo w skróconej - zalecanej wersji

$(function() {
    ...
});

Pobieranie elementów

Do tej pory aby pobrać elementy ze strony głównie używaliśmy funkcji querySelector i querySelectorAll w zależności od tego, czy chcieliśmy pobrać jeden czy wiele elementów. Do każdej takiej funkcji musieliśmy przekazać odpowiedni selektor CSS, którym wyłapywaliśmy odpowiednie elementy.

W jQuery podobne zadanie wykonujemy za pomocą skróconej składni dolara:

$(".element").css("color", "red"); //ustawiam elementom kolor czerwony
$("button#add").attr("disabled", true); //ustawiam atrybut dla buttona o id #add
$("body").text("lubie koty i psy"); //ustawiam tekst dla elementu body

Podając selektory w nawiasach możemy tutaj skorzystać z dodatkowych selektorów, które udostępnia nam jQuery:

$("div:visible"); //wszystkie divy, które są obecnie widoczne
$("div:hidden"); //wszystkie divy, które są obecnie ukryte
$("div:animated"); //wszystkie divy które są obecnie animowane

$('.form :submit'); //wszystkie elementy typu :submit (nie ważne czy inputy czy buttony) w elemencie o klasie .form
$(':text'); //wszystkie pola tekstowe
$(':radio'); //wszystkie inputy radio

$("p:even"); //wszystkie parzyste paragrafy

$("h2:gt(2)"); //h2 od trzeciego

jQuery udostępnia nam też sporo dodatkowych funkcji, których niestety brakuje w czystym Javascript.
Wśród nich najczęściej używanymi są:

$("div").find("span"); //znajdź spany w div

$("button").eq(2); //2 element z kolekcji czyli 2 button

$("span").first(); //pierwszy element w kolekcji

$("div strong").last(); //ostatnie strong z tej kolekcji

$(".module").not(".first"); //elementy .module który nie jest .first

$("#main").is(".big"); //element #main który jest .big

$("div").filter(":even"); //divy parzyste

$("div").filter(function() {
    return $(this).text() === "kot"
}); //wszystkie divy które mają tekst "kot"

const $div = $("div");
const $newCollection = $div.add("p"); //dodałem kolekcję p do kolekcji div

$("div").add("p") //do jednej kolekcji dodałem drugą

Jeżeli chcesz się dowiedzieć więcej na temat selektorów jquery, odwiedź stronę http://jqapi.com/#p=class-selector po czym przejść do zakładki Selectors (okazyjnie przeglądając i inne zakładki).

Poza wyżej wymienionymi metodami jQuery udostępnia nam też funkcje służące do poruszania się po drzewie DOM:

Na szczególną uwagę zasługują metody parents() i closest().

Metoda parents() zwraca pierwszego napotkanego rodzica, który pasuje do podanego selektora. Sprawdzanie takie rozpoczyna się od rodzica danego elementu (czyli nigdy nie zostanie zwrócony element, na którym została wywołana ta metoda).
Metoda closest() działa całkiem podobnie, ale rozpoczyna swoją podróż z uwzględnieniem danego elementu:

<div class="div module">
    <div>
        <div>
            <div class="div btn"></div>
        </div>
    </div>
</div>

const $btn = $(".btn");
$btn.parents(".div"); //zwróci zewnętrzny .div.module
$btn.closest(".div"); //zwróci wewnętrzny .div.btn

Zauważ, że w powyższych listingach gdy pobierałem pod zmienną jakiś element za pomocą jQuery, zmienną taką nazywałem od znaku $. To tylko konwencja, ułatwienie, które podpowiada mi, że dla takiej zmiennej mogę potem użyć metod jQuery:

const $div = $("div");
const div = document.querySelector("div");

$div.find("span").css("color", "red");
$div.classList.add("btn"); //jest $. Nie powinienem używać metod z czystego JS

div.innerText = "klik";
div.find(...); //nie ma dolara, nie mogę odpalić metody find()

Jeżeli chcesz używać tej konwencji, pamiętaj, że zmienne zaczynamy od dolara tylko wtedy, gdy zawierają element pobrany za pomocą jQuery:

const $div = $("div");
const text = $div.text(); //pobiera tekst. Tekst to nie element

const $input = $("input");
const value = $input.val(); //pobieram wartość pola. Wartość to nie element

const $link = $("a");
const href = $link.attr("href"); //pobieram atrybut. To nie element więc brak $

Manipulacja stylami i klasami

Po pobraniu elementu (lub stworzeniu) dostajemy dostęp do jego licznych właściwości i metod. Możemy tutaj oczywiście wykonywać podobne czynności co w czystym Javascript. Różnicą jest to, że jQuery w wielu momentach je ułatwia i poprawia niektóre bolączki z czystego Javascript.

Aby zmienić style elementu skorzystamy z metody css(właściwość, nowa_wartość*), którą można używać na różne sposoby:

const $el = $("#test");

$el.css("background-color", "red");
$el.css("color", "blue");
$el.css("padding", 10); //jeżeli nie podajemy jednostki, zostaną automatycznie dodane px

//lub podając obiekt

$el.css({
    color : "red",
    "background-color" : "blue",
    padding : 10 //px zostaną dodane automatycznie
});

W zwykłym Javascript jeżeli pobierzemy wiele elementów, aby dodać style, musimy zrobić po nich pętlę. W przypadku jQuery w tym jak i w wielu innych przypadkach nie ma znaczenia, czy pobraliśmy jeden czy wiele elementów.

$("div").css("background-color", "red"); //wszystkim divom kolor tła na czerwony

Dodatkowo dzięki tej samej metodzie możemy pobierać style elementu. W zwykłym Javascript za pomocą właściwości style możemy pobierać tylko style inline danego elementu, natomiast jQuery w razie potrzeby automatycznie zwróci nam style przeliczone.

Poza ustawianiem stylowania mamy też możliwość manipulowania klasami danego elementu. Podobnie do powyższego - nie ma tutaj znaczenia, czy w kolekcji znajduje się jeden, czy wiele elementów:

const $elements = $("div"); //wszystkie divy

$elements.addClass("nazwa_klasy"); //dodaje klasę css elementowi
$elements.removeClass("nazwa_klasy"); //usuwa klasę css elementowi
$elements.hasClass("nazwa_klasy"); //sprawdza czy dany element ma klasę
$elements.toggleClass("nazwa_klasy"); //włącza/wyłącza klasę

Wybrane metody i właściwości

jQuery udostępniam nam wiele naprawdę przydatnych metod. Poniżej lista tych najczęściej używanych:

const $img = $("img");

if ( $img.attr("alt") ) {
    $img.removeAttr("tooltip");
    $img.attr("data-text", $img.attr("alt"));

    $img.attr({ //możemy ustawiać kilka atrybutów na raz
        alt: "Lorem ipsum dolor",
        title: "Lorem ipsum dolor"
    });
}

const $link = $("a");

const href = $link.attr("href"));
$link.removeAttr("tooltip");

if (href.startsWith("http")) {
    $link.attr("target", "_blank");
}

const $input = $("input:radio");
if ($input.is(":checked")) {
    $input.prop("disabled", true);
}

const text = $el.text();
$("body").text("Przykładowy tekst");

$el.html(`<strong>Lubię czekoladę</strong>`);
console.log($el.html());

const $input = $("input:text");
console.log($input.val());
$input.val("nowa wartość");

Zdarzenia w jquery

Aby przypiąć nasłuch zdarzenia do pobranego lub utworzonego elementu korzystamy z metody będącej nazwą zdarzenia, lub skorzystać z metody on().

//podpinam kliknięcie dla wszystkich buttonów

$("button").click(function() {
    console.log("test");
})

//lub

$("button").on("click", function() {
    console.log("test");
})

Podobnie jak przy metodzie .css() i .attr() także przy zdarzeniach możemy je deklarować pojedynczo, ale i zbiorczo podając obiekt z odpowiednimi kluczami:

$("button").on("click", function() {...})
$("button").on("mouseover", function() {...})

//lub

$("button").on({
    "click" : function() {
        ...
    },
    "mouseover" : function() {
        ...
    }
});

Przy czym znacznie częściej spotkasz pierwszy zapis.

Aby odwołać się do obiektu wywołującego, wskazujemy go identycznie jak w przypadku klasycznego Javascript czyli poprzez this, e.target lub e.currentTarget.

$("button").on("click", function() {
    $(this).text("Kliknięto!");
});

//w przypadku funkcji strzałkowej nie możemy użyć this
$("button").on("click", () => {
    $(e.currentTarget).text("Kliknięto!");
});

Zauważ, jak objęliśmy nasze zmienne składnią dolara.

    //przykłady elementów w czystym Javascript
    document.body
    window
    const btn = document.querySelector("button");


    //mogę dla nich wykonywać operacje w czystym Javascript
    document.body.style.color = "red";
    window.addEventListener("click", () => { console.log("klik"); });
    btn.innerText = "klik";


    //ale nie mogę dla nich odpalać metod jQuery
    document.body.css("color", "red"); //błąd
    window.on("click", () => { console.log("klik"); }); //błąd
    btn.fadeOut(); //błąd


    //możemy je jednak zmienić na odpowiednik w jQuery okrywając je nawiasami
    $(document.body).css("color", "red");
    $(window).on("click", () => { console.log("klik"); });
    $(btn).fadeOut();


    //odmienić na czysty Javascript także możemy
    const $btn = $("button");

    //użyję jednego z 2 sposobów
    $btn.get(0); //wybieram pierwszy button w kolekcji
    $btn[0]; //pierwszy button w kolekcji
    //lub
    $("button").get(0);
    $("button")[0]
    

Aby odpiąć dane zdarzenie, skorzystamy z metody off(). Działa ona praktycznie tak samo jak removeEventListener, czyli jeżeli chcemy odpiąć jakąś funkcję, powinniśmy przekazać ją jako parametr:

function showSomething() {
    console.log("Kliknięto");
}

$(".element").on("click", showSomething); //podpinam funkcję showSomething
$(".element").off("click", showSomething); //odpinam ją

$(".element").off("click"); //odpinam wszystkie funkcje podpięte dla click
$(".element").off(); //odpinam wszystkie zdarzenia

W jQuery w przeciwieństwie do JavaScript możemy też odpinać funkcje anonimowe. Wystarczy przy ich podpinaniu podać dla zdarzenia nazwę:

$(".element").on("click", function() {
    console.log("Kliknięto 1");
});

$(".element").on("click.klik2", function() {
    console.log("Kliknięto 2");
});

//usuwam nasłuchiwanie o nazwie .klik2
$(".element").off("click.klik2");

Jeżeli chcemy do elementu podpiąć event, który wykona się tylko jeden raz (a zaraz potem zostanie usunięty), skorzystamy z funkcji .one():

$(".element").one("click", function() {
    console.log("Wykonam się tylko jeden raz po czym się odłączę");
});

Jest to równoznaczne z odpisaniem eventu z jego wnętrza (co jest możliwe także tylko w Jquery):

$(".element").one("click", function(e) {
    console.log("Wykonam się tylko jeden raz po czym się odłączę");
    $(this).off(e);
});

Pokazywanie i ukrywanie elementów

jQuery udostępnia nam kilka metod służących do pokazywania i ukrywania elementów na stronie.

Pierwszymi z nich są show() która pokazuje i hide() która ukrywa dany element.

$("#someDiv").show();
$("#someDiv").hide();

Powyższy kod nie do końca jest równoznaczny z ręcznym ustawianiem display:

$("#someDiv").css("display", "block");
$("#someDiv").css("display", "none");

Element może mieć różne stylowanie i wcale nie jest powiedziane, że będzie miał właściwość display ustawioną na block.

Powyższe metody automatycznie określają jakie wyświetlanie ma dany element.

Płynne pokazywanie i ukrywanie elementów

Aby płynnie pokazywać lub ukrywać elementy, skorzystamy z metod:

Opcjonalny parametr szybkość określa szybkość zanikania. Możemy go podać słownie za pomocą słów "slow", "medium", "fast", ale najczęściej podaje się go w formie milisekund.
Parametr funkcjaZwrotna to funkcja, która zostanie wykonana po zakończeniu zanikania:

$(".test1").fadeOut();
$(".test2").fadeIn(300);
$(".test2").fadeIn(function() {
    console.log("Zakończono animację");
});

Przykład użycia:

<div class="module">
    <div class="module-content" style="display:none">
        Lorem ipsum dolor sit amet...
    </div>
    <button class="module-toggle button">Pokaż/schowaj content</button>
</div>

$(".module-toggle").on("click", function() {
    $(this).prev().fadeToggle();
})

Płynne zwijanie i rozwijanie elementów

Bardzo podobnymi w użyciu są metody służące do zwijania/rozwijania elementów:

$(".test1").slideUp();
$(".test2").slideDown(300);
$(".test3").slideToggle(function() {
    console.log("Zakończono animację");
});

Przykład użycia:

<div class="module">
    <div class="module-content" style="display:none">
        Lorem ipsum dolor sit amet...
    </div>
    <button class="module-toggle button">Pokaż treść</button>
</div>

$(".module-toggle").on("click", function() {
    const $btn = $(this);

    $(this).prev().slideToggle(function() {
        //this tutaj wskazuje na element zwijany

        //sprawdzam czy tekst po zwinięciu/rozwinięciu jest widoczny
        if ($(this).is(":visible")) {
            $btn.text("Ukryj treść");
        } else {
            $btn.text("Pokaż treść");
        }
    });
})

Tworzenie nowych elementów

Aby utworzyć nowy element za pomocą jQuery wystarczy skorzystać z podobnej konstrukcji co w przypadku pobierania elementów ze strony:

const $div = $("<div class="module"></div>");

Tak jak w przypadku innych metod, tutaj też mamy kilka sposobów działania z nowymi elementami:

const $div = $("<div id="headCnt" class="page-header-cnt"></div>")

//lub

const $div = $("<div>", {id: "headCnt", class: "page-header-cnt"});

Dołączanie elementów do strony

Aby dołączyć element do strony możemy skorzystać z jednej z kilku metod:

const $div = $(".test-append-cnt");

const $span1 = $("<span>Na końcu</span>");
$div.append($span1);

const $span2 = $("<span>Na początku</span>");
$div.prepend($span2);

const $span4 = $("<span>Za elementem</span>");
$div.after($span4);

const $span3 = $("<span>Przed elementem</span>");
$div.before($span3);

Usuwanie elementów ze strony

Aby usunąć element, skorzystamy z metody remove():

const $btn = $(".button");
$btn.remove();

Data

W lekcji o właściwościach elementów poznałeś właściwość dataset. Właściwość ta opiera się o customowe atrybuty data-...:

<button type="button" id="myButton" data-tooltip="Jakiś tekst" data-arrow-position="top">
    Kliknij mnie
</button>

const elem = document.querySelector("#myButton");

console.log(elem.dataset) //{tooltip: "Jakiś tekst", arrowPosition: "top"}
console.log(elem.dataset.tooltip); //Jakiś tekst
console.log(elem.dataset.arrowPosition); //top

jQuery udostępnia nam metodę data(), która działa dość podobnie - ale nie do końca.

Otóż jQuery tworzy za naszymi plecami dla każdego elementu obiekt z danymi, który możemy wykorzystać do przechowywania dodatkowych danych związanych z danym elementem.

Obiekt ten początkowo tworzony jest w oparciu o atrybuty data-...:

$("#myButton").on("click", function() {
    console.log( $(this).data() ); //{arrowPosition: "top", tooltip: "Jakiś tekst"}
})

Różnica w stosunku do wersji Vanilla JavaScript jest taka, że po dodaniu do tego obiektu nowej właściwości, nie pojawia się ona jako atrybut elementu (w wersji JavaScript się pojawia), a tylko zapisywana jest w obiekcie data. Aby to sprawdzić, kliknij i sprawdź poniższe przyciski w debuggerze. W wersji JavaScript zobaczysz, że właściwość dodana do dataset trafiła do atrybutów elementu.

Aby dodać nowe dane do metody data(), wystarczy podać ich nazwy i wartości w nawiasach. Jeżeli chcemy odczytać dane, wtedy podajemy tylko ich nazwy:

$btn.data() //odczytuje cały obiekt
$btn.data("position"); //odczytuje daną "position"
$btn.data("cat", "Wielki kocur"); //ustawiam zmienną cat na "Wielki kocur"
$btn.data("bar", { myType: "test", count: 40 } )); //pod zmienną bar przechowuję dodatkowy obiekt
$btn.data("bar"); //odczytuję zmienną bar

Pytanie, które może się nasunąć to czemu jQuery poszło inną drogą niż Vanilla JavaScript? Ano z prostego powodu. Atrybuty data-... (a więc i cała właściwość dataset) dobrze się sprawdzają przy przetrzymywaniu prostych tekstów. Ale już trzymanie tam innych typów danych wcale fajne nie jest. W przypadku jQuerowego (tak to sie odmienia?) data nie ma takich problemów.

const p = document.querySelector("p");
p.dataset.age = 20;
p.dataset.ob = { name : "Marcin" }
console.log(p.dataset.age); //"20"
console.log(p.dataset.ob); //"[object Object]"

const $p = $("p").first();
$p.data("age", 20);
$p.data("ob", { name : "Marcin" });
console.log(p.data("age")); //20
console.log(p.data("ob")); //{ name : "Marcin" }