Jak używać biblioteki jQuery

Biblioteka jQuery, mimo wzrastającej popularności takich frameworków jak Angular czy React, które umożliwiają tworzenie skomplikowanych aplikacji typu SPA, nadal jest najczęściej wykorzystywaną biblioteką JavaScript na stronach internetowych. Warto więc wiedzieć jak jej używać. W tym poście przedstawię jak korzystać z biblioteki jQuery.

Dodawanie biblioteki do strony

Aby użyć biblioteki jQuery najpierw trzeba ją dodać do strony, w tym celu można dodać poniższy kod do naszej strony internetowej.

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

Powyższy kod doda najnowszą, z chwilą pisania tego artykułu, wersje jQuery, czyli 3.1.1. Aby w pełni móc skorzystać z biblioteki nasz kod dodajemy jak funkcję zwrotną DOM ready:

$(document).ready(function() {
    // nasz kod
});

lub jego skróconą wersję czyli:

$(function() {
    // nasz kod
});

Jeśli nasza strona korzysta z jakieś innej biblioteki, która używa znaku dolara możemy używać biblioteki jQuery w trybie no conflict

jQuery.noConflict();

jQuery(function($) {
    // nasz kod
});

Mamy wtedy pewność, że nasza strona jest w pełni załadowana (mamy dostęp do DOM-u strony) i możemy zacząć ją manipulować. W dalszych przykładach pominę funkcje DOM ready.

Główny element biblioteki

Główną częścią biblioteki jQuery jest funkcja $ lub jQuery, która może przyjmować funkcje, jak w przykładzie powyżej, selektor css, kod html lub jeden, lub więcej elementów DOM. Jeśli argumentem jest ciąg znaków, a jego pierwszym znakiem jest < wtedy biblioteka jQuery utworzy Fragment DOM, który będzie można dodać do strony np.:

$('<div>Hello World!</div>').appendTo('body');

Powyższy kod utworzy nowy element div z tekstem Hello World! i doda go do elementu body strony.

Jeśli natomiast do funkcji $ przekażemy ciąg znaków, który jest poprawnym selektorem CSS, wtedy biblioteka wyszuka taki element na stronie i wynikiem będzie obiekt jQuery, a dokładnie obiekt jQuery.fn.init, który będzie zawierał wszystkie elementy pasujące do danego selektora np.:

$('#item');

zwróci element o atrybucie id="item" (na stronie powinien znajdować się tylko jeden element z danym id ale biblioteka jQuery zwróci wszystkie elementy, które mają ten atrybut z podaną wartością) to samo można osiągnąć wywołując natywny kod JavaScript poniżej.

document.getElementById('item');

natomiast poniższy kod:

$('.item');

zwróci wszystkie elementy o klasie item np. dla powyższego kodu html:

<ul>
  <li class="item">Jeden</li>
  <li class="item">Dwa</li>
  <li class="item">Trzy</li>
</ul>

zwróci trzy elementy li. To samo można osiągnąć używając kodu JavaScript:

document.getElementsByClassName('item');

Więcej o selektorach CSS także CSS3 można znaleźć w internecie np. na stronie kurshtml.edu.pl. W nowoczesnych przeglądarkach znajduje się funkcja, która może zastąpić selektory biblioteki jQuery, a mianowicie document.querySelector, która zwraca pierwszy element o danym selektorze lub document.querySelectorAll, która zwróci obiekt tablico podobny NodeList, po który można iterować:

var item = document.querySelector('#item');
var items = document.querySelectorAll('.item');

Aby skonwertować NodeList do tablicy można wywołać slice tablicy z naszą listą jako kontekstem.

var items = [].slice.call(document.querySelectorAll('.item'));

Dzięki temu można wywoływać takie metody jak np. .map lub .filter.

Funkcje jQuery

Obiekt jQuery zwrócony po wywołaniu funkcji dolara zawiera szereg metod:

Metody służące do przechodznie po elementach obiektu

• .next() - zwróci następny element,
• .prev() - zwróci poprzedni element,
• .siblings() - zwróci wszystkie rodzeństwo elementu,
• .children() - zwróci wszystkie dzieci danego elementu,
• .parent() - zwróci rodzica elementu,
• .parents() zwróci listę wszystkich rodziców danego elementu tj. pierwszym elementem będzie element parent, kolejnym parent parent itd.,
• .find(selektor) - zwróci wszystkie elementy pasujące do nowego selektora przekazanego jako argument które są dziećmi przedniego elementu,
• .not(selektor) - zwróci elementy które nie należą dod danego selektora, np: $('div').not('.foo') zwróci elementy div które nie mają klasy foo,
• .eq(indeks) - zwróci pojedynczy element o indeksie podanym jako argument, np jeśli selektor zwraca dwa elementy to eq(1) zwróci drugi element.

Metody służące do manipulacji dom

• append(string) - metoda doda zawartość przekazaną jako argument (może być kod html lub selektor) do danego elementu,
• appendTo(selektor) - metoda doda obiekt jQuery do elementu o danym selektorze,

$('div').append('<span>Hej</span>');
$('<span>Hej</span>').appendTo('div');

Oba powyższe przykłady zrobią to samo dodadzą span Hej do każdego elementu div na stronie.

• .prepend(string) - metoda podobna do append tylko element dodawany jest jako pierwsze dziecko danego elementu,

• .prependTo(selektor) - metoda działa analogicznie do appendTo tylko element dodawany jest ko pierwsze dziecko tak jak prepend,

• .remove() - metoda usunie element z dokumentu,

• .replaceWith(string) - metoda zamieni dane elementy nowymi elementami przekazanymi jako argument,

• .hide()/.show() - metody ustawiają styl inline display: none lub display: block/inline w zależności od elementu,
• .css() - ustawia dany styl inline, można przekazać do tej funkcji dwa argumenty nazwę właściwości i wartość lub obiekt, np.:

$('div').css('color', 'red');
$('span').css({
  border: '1px solid green',
  background: 'blue'

• .val() - metoda zwraca wartość elementu formularza tj. input, textarea lub select, lub ustawia nową wartość danego elementu,
• .data() - metoda ustawia lub pobiera wartość atrybutu data-nazwa, w przypadku zapisywania wartości, wartość atrybutu się nie zmienia. Aby zmienić atrybut należy użyć .attr(), która przyjmuje jeden string (do pobrania atrybutu) dwie wartości do zapisywania lub obiekt także do zapisywania,
• .removeAttr() - metoda służy do usuwania atrybutu,
• .addClass()/.removeClass() - metody dodają/usuwają klasę do/z wybranych elementów.

Zdarzenia

Biblioteka jQuery umożliwia dodawania uchwytów (ang. handlers) zdarzeń. Główną metodą do dodawania zdarzeń jest metoda .on() a do usuwania .off() ale biblioteka jQuery zawiera także skróty do dodawania zdarzeń np: .click() czy .keypress()

$('button').click(function() {
    alert('Kliknąłeś przycisk');
});

Jeśli chcemy dodać zdarzenie do elementów, które mogą się pojawić później, musimy użyć delegacji zdarzeń, np.:

$('ul').on('click', 'li', function() {
   alert('kliknąłeś na element li');
});
$('ul').append('<li>Nowy element</li>');

Jeśli klikniemy na nowy element zostanie wywołana nasza funkcja ponieważ uchwyt zdarzenia został dodany do elementu ul.

Wywoływanie łańcuchowe

Każda metoda biblioteki jQuery, która nie zwraca wartości zwraca obiekt jQuery, nowy lub poprzedni, dlatego jest możliwe wywoływanie łańcuchowe (ang. chain):

$('div').css('color', 'red').find('.item:eq(1)').hide().next().show();

Animacje

Do animacji służy funkcja animate np.:

$('foo').animate({
    width: '250px'
});

Można animować właściwości css, aby animować kolor (właściwość color lub background-color) należy użyć pluginu jQuery Color.

Pętle

Do iterowania po elementach służy metoda .each():

$('foo').each(function() {
  $(this).find('span').css('color', 'blue');
});

można także użyć metody .map(), która tak jak metoda obiektu Array w ES5 zwraca nowy obiekt jQuery, aby np. dostać tablicę atrybutów href linków, można użyć poniższego kodu:

var links = $('a').map(function() {
  return $(this).attr('href');
}).get();

Należy użyć metody get aby otrzymać tablicę, metoda .map() zwraca obiekt jQuery.

Ajax

Oprócz funkcji dostępnych jako metody obiekty jQuery, biblioteka udostępnia także funkcje statyczne dodane do obiektu dolara, takie jak np. funkcje do wykonywania zapytań HTTP. Główną funkcją do wykonywania takich zapytań jest funkcja $.ajax, ale biblioteka zawiera także skróty $.get oraz $.post.

$.get('strona.html', function(strona) {
   $('.main').replaceWith(strona);
});

Powyższy kod wykona zapytanie AJAX-owe typu GET i zamieni zawartość elementu .main tym, co dostanie z serwera.

Rozszerzanie biblioteki

Bibliotekę jQuery można rozszerzać o nowe metody, tzw. plug-iny, prawdopodobnie dlatego jest tak popularna. Jest bardzo dużo gotowych plug-inów, które można używać. Aby utworzyć nowy plugin, należy dodać nową właściwość do obiektu $.fn np:

(function($) {
    $.fn.link = function(options) {
       options = options || {};
       return this.each(function() {
          var self = $(this);
          if (options.title) {
              self.attr('title', options.title);
          }
          if (option.href) {
              self.attr('href', options.href);
          }
       });
    };
})(jQuery);

W powyższym przykładzie użyto anonimowego dokmnęcia aby kod plug-inu działał nawet jeśli ktoś użyje funkcji jQuery.noConflict() jest to standard jeśli chodzi o plug-iny jQuery.

Powyższego plug-inu można go użyć tak:

$('a').link({href: 'http://example.com', title: 'Example Page'});

Powyższy kod wykona naszą metodę link na każdym elemencie a czyli doda atrybut href i title do każdego linku.

Innym sposobem rozszerzania biblioteki są własne customowe selektory, np. aby dodać selektor :len(), który pobierze tylko te elementy, których długość tekstu jest mniejsza od podanej, możemy użyć poniższego kodu:

$.expr[':'].len = function(obj, index, meta, stack) {
    var self = $(obj);
    var text = self.text();
    var len = parseInt(meta[3]);
    return text.length < len;
};

I wywołać:

$('div:len(10)').css('color', 'red');

Powyższy kod ustawi kolor czerwony dla elementów div, których tekst jest mniejszy niż 10 znaków.

Listę wszystkich metod oraz funkcji można znaleźć na stronie api projektu.