Biblioteka narzędziowa jq

mdui zawiera lekką bibliotekę narzędzi JavaScript, która oferuje podobne do jQuery API i łańcuchowe wywołania, ale jej rozmiar to tylko jedna szósta jQuery.

Możesz zaimportować to narzędzie:

import { $ } from 'mdui/jq.js';

Podstawy

`$()`

Funkcja ma kilka zastosowań:

Przekaż selektor CSS – zwraca obiekt JQ zawierający pasujące elementy.

$('.box');

Przekaż element DOM, dowolną tablicę, NodeList lub obiekt JQ – zwraca obiekt JQ zawierający wskazane elementy.

$(document);

Przekaż ciąg HTML – zwraca obiekt JQ zawierający elementy DOM utworzone na podstawie kodu HTML.

$(`<div id="wrapper">
  <span id="inner"></span>
</div>`);

Przekaż funkcję – funkcja zostanie wywołana po załadowaniu DOM.

$(function () {
  console.log('DOM załadowany');
});

Rozszerzanie

`$.extend()`

Jeśli przekażesz tylko jeden obiekt, jego właściwości zostaną scalone z obiektem $, co umożliwia dodanie nowych funkcji w przestrzeni nazw $.

$.extend({
  customFunc: function () {},
});

// Następnie możesz wywołać niestandardową funkcję
$.customFunc();

Jeśli przekażesz dwa lub więcej obiektów, właściwości wszystkich obiektów zostaną dodane do pierwszego obiektu, a następnie zwrócony zostanie scalony obiekt. Właściwości o wartości undefined nie są scalane.

const object = $.extend({ key1: val1 }, { key2: val2 }, { key3: val3 });

// Pierwszy obiekt i wartość zwracana to { key1: val1, key2: val2, key3: val3 }

`$.fn.extend()`

Rozszerza metody na prototypie $.

$.fn.extend({
  customFunc: function () {},
});

// Następnie możesz użyć rozszerzonej metody
$(document).customFunc();

URL

`$.param()`

Serializuje tablicę lub obiekt do ciągu zapytania URL.

$.param({ width: 1680, height: 1050 });
// width=1680&height=1050

$.param({ foo: { one: 1, two: 2 } });
// foo[one]=1&foo[two]=2

$.param({ ids: [1, 2, 3] });
// ids[]=1&ids[]=2&ids[]=3

Jeśli przekazanym parametrem jest tablica, jej format musi być zgodny z formatem zwracanym przez .serializeArray().

$.param([
  { name: 'name', value: 'mdui' },
  { name: 'password', value: '123456' },
]);
// name=mdui&password=123456

Operacje na tablicach i obiektach

`$.each()`

Iteruje po tablicy lub obiekcie. Zwraca pierwszy argument, czyli iterowaną tablicę lub obiekt.

Pierwszym argumentem funkcji zwrotnej jest indeks tablicy lub klucz obiektu, drugim – odpowiadająca mu wartość.

W funkcji zwrotnej this wskazuje na wartość tablicy lub obiektu. Jeśli funkcja zwrotna zwróci false, iteracja zostanie przerwana.

// Iteracja po tablicy
$.each(['a', 'b', 'c'], function (index, value) {
  console.log(index + ':' + value);
});

// Wynik:
// 0:a
// 1:b
// 2:c

// Iteracja po obiekcie
$.each({ name: 'mdui', lang: 'zh' }, function (key, value) {
  console.log(key + ':' + value);
});

// Wynik:
// name:mdui
// lang:zh

`$.merge()`

Dodaje elementy drugiej tablicy do pierwszej tablicy i zwraca połączoną tablicę.

const first = ['a', 'b', 'c'];
const second = ['c', 'd', 'e'];
const result = $.merge(first, second);

console.log(first); // ['a', 'b', 'c', 'c', 'd', 'e']
console.log(result); // ['a', 'b', 'c', 'c', 'd', 'e']

`$.unique()`

Usuwa zduplikowane elementy z tablicy.

const result = $.unique([1, 2, 12, 3, 2, 1, 2, 1, 1, 1, 1]);
console.log(result); // [1, 2, 12, 3]

`$.map()`

Iteruje po tablicy lub obiekcie i zwraca nową tablicę złożoną z wartości zwróconych przez funkcję zwrotną.

Pierwszym argumentem funkcji zwrotnej jest wartość tablicy lub obiektu, drugim – indeks tablicy lub klucz obiektu.

Funkcja zwrotna może zwrócić dowolną wartość. Jeśli zwróci tablicę, zostanie ona rozwinięta. Jeśli zwróci null lub undefined, wartość ta zostanie pominięta. Wewnątrz funkcji zwrotnej this wskazuje na obiekt window.

// Iteracja po tablicy
const result = $.map(['a', 'b', 'c'], function (value, index) {
  return index + value;
});
console.log(result); // ['0a', '1b', '2c']

// Gdy funkcja zwrotna zwraca tablicę, tablica jest rozwijana
const result = $.map([1, 2, 3], function (value, index) {
  return [value, value + 1];
});
console.log(result); // [1, 2, 2, 3, 3, 4]

// Iteracja po obiekcie
const result = $.map(
  { name: 'mdui', password: '123456' },
  function (value, key) {
    return key + ':' + value;
  },
);
console.log(result); // ['name:mdui', 'password:123456']

`$.contains()`

Sprawdza, czy jeden węzeł zawiera inny węzeł. Zwraca true, jeśli węzeł nadrzędny zawiera węzeł podrzędny; w przeciwnym razie false.

$.contains(document, document.body); // true
$.contains(document.body, document); // false

Sprawdzanie typów danych

`.is()`

Sprawdza, czy co najmniej jeden element w kolekcji pasuje do parametru. Zwraca true lub false.

Parametrem może być selektor CSS, element DOM, tablica elementów DOM, obiekt JQ lub funkcja zwrotna.

Jeśli parametrem jest funkcja zwrotna, jej pierwszy argument to indeks, drugi – bieżący element. Wewnątrz funkcji this wskazuje na bieżący element. Jeśli funkcja zwróci true, element pasuje; jeśli false, nie pasuje.

$('.box').is('.box'); // true
$('.box').is('.boxss'); // false
$('.box').is($('.box')[0]); // true

// Sprawdzanie na podstawie wartości zwracanej przez funkcję zwrotną
$(document).is(function (index, element) {
  return element === document;
});
// true

Dostęp do obiektów

`.length`

Zwraca liczbę elementów w bieżącej kolekcji.

$('body').length; // 1

`.each()`

Iteruje po bieżącej kolekcji, wykonując funkcję dla każdego elementu. Jeśli funkcja zwróci false, iteracja zostanie przerwana.

Pierwszym argumentem funkcji jest indeks elementu, drugim – bieżący element. Wewnątrz funkcji this wskazuje na bieżący element.

$('img').each(function (index, element) {
  this.src = 'test' + index + '.jpg';
});

`.map()`

Iteruje po bieżącej kolekcji, wykonuje funkcję dla każdego elementu i zwraca nową kolekcję złożoną z wartości zwróconych przez funkcję.

Funkcja może zwrócić pojedynczą wartość lub tablicę wartości. Jeśli zwróci tablicę, jej elementy zostaną kolejno dodane do nowej kolekcji. Jeśli funkcja zwróci null lub undefined, wartość ta nie zostanie dodana.

Pierwszym argumentem funkcji jest indeks elementu, drugim – bieżący element. Wewnątrz funkcji this wskazuje na bieżący element.

const result = $('input.checked').map(function (i, element) {
  return element.value;
});

// result to obiekt JQ z wartościami pasujących elementów

`.eq()`

Zwraca nową kolekcję zawierającą tylko element o podanym indeksie.

$('div').eq(0); // Zwraca kolekcję tylko z pierwszym elementem
$('div').eq(-1); // Zwraca kolekcję tylko z ostatnim elementem
$('div').eq(-2); // Zwraca kolekcję tylko z przedostatnim elementem

`.first()`

Zwraca nową kolekcję zawierającą tylko pierwszy element bieżącej kolekcji.

$('div').first(); // Zwraca kolekcję tylko z pierwszym divem

`.last()`

Zwraca nową kolekcję zawierającą tylko ostatni element bieżącej kolekcji.

$('div').last(); // Zwraca kolekcję tylko z ostatnim divem

`.get()`

Zwraca element o podanym indeksie. Jeśli nie podano parametru, zwraca tablicę wszystkich elementów w kolekcji.

$('div').get(); // Zwraca tablicę wszystkich elementów div
$('div').get(0); // Zwraca pierwszy element div
$('div').get(-1); // Zwraca ostatni element div

`.index()`

Jeśli nie podano parametru, zwraca indeks pierwszego elementu bieżącej kolekcji względem jego rodzeństwa.

Jeśli podano selektor CSS, zwraca indeks pierwszego elementu bieżącej kolekcji względem elementów pasujących do selektora.

Jeśli podano element DOM, zwraca indeks tego elementu w bieżącej kolekcji.

Jeśli podano obiekt JQ, zwraca indeks pierwszego elementu tego obiektu w bieżącej kolekcji.

<div id="child">
  <div id="child1"></div>
  <div id="child2"></div>
  <div id="child3"></div>
  <div id="child4"></div>
</div>

$('#child3').index(); // 2
$('#child3').index('#child div'); // 2
$('#child div').index($('#child3').get(0)); // 2

`.slice()`

Zwraca podzbiór bieżącej kolekcji.

Możesz określić początek i koniec podzbioru (bez elementu końcowego). Jeśli nie podasz drugiego parametru, zwrócone zostaną wszystkie elementy od początku do końca kolekcji.

// Zwraca wszystkie elementy od trzeciego (włącznie)
$('div').slice(3);

// Zwraca elementy od trzeciego do piątego (trzeci włącznie, piąty wyłącznie)
$('div').slice(3, 5);

`.filter()`

Filtruje bieżącą kolekcję, pozostawiając elementy pasujące do wyrażenia. Parametrem może być selektor CSS, element DOM, tablica elementów DOM lub funkcja zwrotna.

Jeśli parametrem jest funkcja zwrotna, jej pierwszy argument to indeks elementu, drugi – bieżący element. Wewnątrz funkcji this wskazuje na bieżący element. Jeśli funkcja zwróci true, element zostaje zachowany; jeśli false, zostaje usunięty.

// Pozostawia wszystkie elementy div zawierające klasę .box
$('div').filter('.box');

// Pozostawia zaznaczone opcje
$('#select option').filter(function (index, element) {
  return element.selected;
});

`.not()`

Filtruje bieżącą kolekcję, usuwając elementy pasujące do wyrażenia.

Parametrem może być selektor CSS, element DOM, tablica elementów DOM, obiekt JQ lub funkcja zwrotna zwracająca wartość boolean.

// Usuwa wszystkie elementy div zawierające klasę .box
$('div').not('.box');

// Usuwa niezaznaczone opcje
$('#select option').not(function (index, element) {
  return element.selected;
});

Klasy CSS

`.hasClass()`

Sprawdza, czy pierwszy element w kolekcji ma podaną klasę CSS.

// Sprawdza, czy pierwszy element div ma klasę .item
$('div').hasClass('item');

`.addClass()`

Dodaje klasy CSS do każdego elementu w kolekcji. Wiele klas można oddzielić spacją.

Parametrem może być ciąg znaków lub funkcja zwrotna zwracająca nazwy klas. Jeśli parametrem jest funkcja zwrotna, jej pierwszy argument to indeks elementu, drugi – istniejące klasy na elemencie. Wewnątrz funkcji this wskazuje na bieżący element.

// Dodaje klasę .item do wszystkich elementów div
$('div').addClass('item');

// Dodaje klasy .item1 i .item2 do wszystkich elementów div
$('div').addClass('item1 item2');

// Dodaje klasy zwrócone przez funkcję zwrotną
$('div').addClass(function (index, currentClassName) {
  return currentClassName + '-' + index;
});

`.removeClass()`

Usuwa podane klasy CSS z każdego elementu w kolekcji. Wiele klas można oddzielić spacją.

Jeśli nie podano parametru, metoda usuwa atrybut class z elementu.

// Usuwa klasę .item ze wszystkich elementów div
$('div').removeClass('item');

// Usuwa klasy .item1 i .item2 ze wszystkich elementów div
$('div').removeClass('item1 item2');

// Usuwa klasy zwrócone przez funkcję zwrotną
$('div').removeClass(function (index, currentClassName) {
  return 'item';
});

`.toggleClass()`

Jeśli element ma podaną klasę, zostanie usunięta; jeśli nie ma, zostanie dodana. Wiele klas można oddzielić spacją.

// Przełącza klasę .item na wszystkich elementach div
$('div').toggleClass('item');

// Przełącza klasy .item1 i .item2 na wszystkich elementach div
$('div').toggleClass('item1 item2');

// Przełącza klasy zwrócone przez funkcję zwrotną
$('div').toggleClass(function (index, currentClassName) {
  return 'item';
});

Atrybuty węzłów

`.prop()`

Pobiera wartość właściwości JavaScript pierwszego elementu w kolekcji.

// Pobiera wartość właściwości checked pierwszego elementu
$('input').prop('checked');

Jeśli podano dwa argumenty, metoda ustawia podaną właściwość JavaScript dla wszystkich elementów w kolekcji.

Wartością właściwości może być dowolna wartość lub wartość zwrócona przez funkcję zwrotną. Funkcja zwrotna przyjmuje indeks elementu i starą wartość właściwości; this wskazuje na bieżący element.

Jeśli wartość lub wartość zwrócona przez funkcję to undefined, właściwość nie zostanie zmodyfikowana.

// Ustawia właściwość checked na true dla wszystkich zaznaczonych elementów
$('input').prop('checked', true);

// Ustawia właściwość przy użyciu funkcji zwrotnej
$('input').prop('checked', function (index, oldPropValue) {
  return true;
});

Można również przekazać obiekt, aby ustawić wiele właściwości jednocześnie.

// Ustawia wiele właściwości jednocześnie
$('input').prop({
  checked: false,
  disabled: function (index, oldPropValue) {
    return true;
  },
});

`.removeProp()`

Usuwa podaną właściwość JavaScript ze wszystkich elementów w kolekcji.

$('input').removeProp('disabled');

`.attr()`

Pobiera wartość atrybutu HTML pierwszego elementu w kolekcji.

// Pobiera wartość atrybutu pierwszego elementu
$('div').attr('username');

Jeśli podano dwa argumenty, metoda ustawia podany atrybut HTML dla wszystkich elementów w kolekcji.

Wartością atrybutu może być ciąg znaków, liczba lub wartość zwrócona przez funkcję zwrotną. Funkcja zwrotna przyjmuje indeks elementu i starą wartość atrybutu; this wskazuje na bieżący element.

Jeśli wartość lub wartość zwrócona przez funkcję to null, atrybut zostanie usunięty; jeśli undefined, nie zostanie zmodyfikowany.

// Ustawia atrybut dla wszystkich elementów
$('div').attr('username', 'mdui');

// Ustawia atrybut przy użyciu funkcji zwrotnej
$('div').attr('username', function (index, oldAttrValue) {
  return 'mdui';
});

Można również przekazać obiekt, aby ustawić wiele atrybutów jednocześnie.

// Ustawia wiele atrybutów jednocześnie
$('div').attr({
  username: 'mdui',
  lastname: function (index, oldAttrValue) {
    return 'test';
  },
});

`.removeAttr()`

Usuwa podane atrybuty HTML ze wszystkich elementów w kolekcji. Wiele nazw atrybutów można oddzielić spacją.

// Usuwa jeden atrybut ze wszystkich elementów
$('div').removeAttr('username');

// Usuwa wiele atrybutów ze wszystkich elementów
$('div').removeAttr('username lastname');

`.val()`

Zwraca wartość pierwszego elementu w kolekcji.

Jeśli elementem jest <select multiple="multiple">, zwraca tablicę zawierającą wszystkie zaznaczone opcje.

// Pobiera wartość pierwszego zaznaczonego elementu
$('#input').val();

Jeśli podano parametr, metoda ustawia wartość wszystkich elementów w kolekcji.

Wartością może być ciąg znaków, liczba, tablica ciągów lub wartość zwrócona przez funkcję zwrotną. Funkcja zwrotna przyjmuje indeks elementu i starą wartość; this wskazuje na bieżący element.

Jeśli elementem jest <input type="checkbox">, <input type="radio"> lub <option>, wartość lub wartość zwrócona przez funkcję może być tablicą – wtedy zaznaczone zostaną wartości znajdujące się w tablicy, a pozostałe zostaną odznaczone.

Jeśli wartość lub wartość zwrócona przez funkcję to undefined, wartość elementu zostanie ustawiona na pusty ciąg.

// Ustawia wartość elementu
$('#input').val('mdui');

// Ustawia wartość przy użyciu funkcji zwrotnej
$('#input').val(function (index, oldValue) {
  return 'mdui';
});

`.text()`

Zwraca treść tekstową wszystkich elementów w kolekcji (wraz z ich potomkami).

// Pobiera tekst wszystkich elementów .box
$('.box').text();

Jeśli podano parametr, metoda ustawia treść tekstową wszystkich elementów w kolekcji.

Wartością może być ciąg znaków, liczba, wartość logiczna lub wartość zwrócona przez funkcję zwrotną. Funkcja zwrotna przyjmuje indeks elementu i starą treść tekstową; this wskazuje na bieżący element.

Jeśli wartość lub wartość zwrócona przez funkcję to undefined, treść nie zostanie zmodyfikowana.

// Ustawia treść tekstową elementów
$('.box').text('treść tekstowa');

// Ustawia treść przy użyciu funkcji zwrotnej
$('.box').text(function (index, oldTextContent) {
  return 'nowa treść tekstowa';
});

`.html()`

Zwraca treść HTML pierwszego elementu w kolekcji.

// Pobiera treść HTML pierwszego elementu .box
$('.box').html();

Jeśli podano parametr, metoda ustawia treść HTML wszystkich elementów w kolekcji.

Wartością może być ciąg HTML, element DOM lub wartość zwrócona przez funkcję zwrotną (ciąg HTML lub element DOM). Funkcja zwrotna przyjmuje indeks elementu i starą treść HTML; this wskazuje na bieżący element.

Jeśli wartość lub wartość zwrócona przez funkcję to undefined, treść HTML nie zostanie zmodyfikowana.

// Ustawia treść HTML elementów
$('.box').html('<div>nowa treść HTML</div>');

// Ustawia treść przy użyciu funkcji zwrotnej
$('.box').html(function (index, oldHTMLContent) {
  return '<div>nowa treść HTML</div>';
});

Przechowywanie danych

`$.data()`

Odczytuje lub zapisuje dane na wskazanym elemencie.

Podczas zapisu, jeśli wartością jest undefined, działanie jest równoważne odczytowi danych z elementu. Oznacza to, że $.data(element, 'key', undefined) jest równoważne $.data(element, 'key').

Uwaga: ta metoda nie pobiera danych z atrybutów data-*.

// Zapisuje dane na elemencie, zwraca zapisaną wartość
$.data(document.body, 'layout', 'dark'); // Zwraca dark

// Zapisuje wiele danych jednocześnie
$.data(document.body, {
  primary: 'indigo',
  accent: 'pink',
}); // Zwraca { primary: 'indigo', accent: 'pink' }

// Odczytuje dane z elementu
$.data(document.body, 'layout'); // Zwraca dark

// Odczytuje wszystkie dane z elementu
$.data(document.body); // Zwraca { layout: 'dark', primary: 'indigo', accent: 'pink' }

`$.removeData()`

Usuwa dane zapisane na elemencie.

Można podać wiele nazw kluczy oddzielonych spacją lub w tablicy. Jeśli nie podano nazwy klucza, usuwane są wszystkie dane z elementu.

// Usuwa dane o kluczu name
$.removeData(document.body, 'name');

// Usuwa dane o kluczach name1 i name2. Poniższe są równoważne:
$.removeData(document.body, 'name1 name2');
$.removeData(document.body, ['name1', 'name2']);

// Usuwa wszystkie dane z elementu
$.removeData(document.body);

`.data()`

Odczytuje lub zapisuje dane na elementach bieżącej kolekcji.

Jeśli zapisywana wartość to undefined, dane nie są zapisywane.

Uwaga: ta metoda pobiera również dane z atrybutów data-*.

// Zapisuje dane na elementach kolekcji
$('.box').data('layout', 'dark');

// Zapisuje wiele danych jednocześnie
$('.box').data({
  primary: 'indigo',
  accent: 'pink',
});

// Odczytuje dane z pierwszego elementu kolekcji
$('.box').data('layout'); // Zwraca dark

// Odczytuje wszystkie dane z pierwszego elementu kolekcji
$('.box').data(); // Zwraca { layout: 'dark', primary: 'indigo', accent: 'pink' }

`.removeData()`

Usuwa dane zapisane na elementach bieżącej kolekcji.

Można podać wiele nazw kluczy oddzielonych spacją lub w tablicy. Jeśli nie podano nazwy klucza, usuwane są wszystkie dane z elementów.

Uwaga: ta metoda usuwa tylko dane zapisane za pomocą .data(), nie usuwa danych z atrybutów data-*.

// Usuwa dane o kluczu name
$('.box').removeData('name');

// Usuwa dane o kluczach name1 i name2. Poniższe są równoważne:
$('.box').removeData('name1 name2');
$('.box').removeData(['name1', 'name2']);

// Usuwa wszystkie dane z elementów
$('.box').removeData();

Style

`.css()`

Pobiera wartość właściwości CSS pierwszego elementu w kolekcji.

$('.box').css('color');

Jeśli podano parametr, metoda ustawia właściwość CSS dla wszystkich elementów w kolekcji.

Wartością może być ciąg znaków, liczba lub wartość zwrócona przez funkcję zwrotną. Funkcja zwrotna przyjmuje indeks elementu i starą wartość właściwości CSS; this wskazuje na bieżący element.

Jeśli wartość lub wartość zwrócona przez funkcję to undefined, właściwość nie zostanie zmodyfikowana. Jeśli wartością jest null, właściwość zostanie usunięta. Jeśli wartością jest liczba, automatycznie dodawana jest jednostka px, chyba że właściwość nie może używać px – wtedy wartość jest konwertowana na ciąg znaków.

// Ustawia styl dla wszystkich elementów w kolekcji
$('.box').css('color', 'red');

// Ustawia styl przy użyciu funkcji zwrotnej
$('.box').css('color', function (index, oldCSSValue) {
  return 'green';
});

// Ustawia wiele stylów za pomocą obiektu
$('.box').css({
  'background-color': 'white',
  color: function (index, oldCSSValue) {
    return 'blue';
  },
});

`.width()`

Pobiera szerokość pierwszego elementu w kolekcji (bez padding, border, margin).

$('.box').width();

Jeśli podano parametr, metoda ustawia szerokość wszystkich elementów w kolekcji.

Wartością może być ciąg z jednostką, liczba lub wartość zwrócona przez funkcję zwrotną. Funkcja zwrotna przyjmuje indeks elementu i starą szerokość; this wskazuje na bieżący element.

Jeśli wartość lub wartość zwrócona przez funkcję to null lub undefined, szerokość nie zostanie zmodyfikowana. Jeśli wartością jest liczba, automatycznie dodawana jest jednostka px.

// Ustawia szerokość wszystkich elementów
$('.box').width('20%');

// Dla liczby domyślnie używana jest jednostka px
$('.box').width(10);

// Ustawia szerokość przy użyciu funkcji zwrotnej
$('.box').width(function (index, oldWidth) {
  return 10;
});

`.height()`

Pobiera wysokość pierwszego elementu w kolekcji (bez padding, border, margin).

$('.box').height();

Jeśli podano parametr, metoda ustawia wysokość wszystkich elementów w kolekcji.

Wartością może być ciąg z jednostką, liczba lub wartość zwrócona przez funkcję zwrotną. Funkcja zwrotna przyjmuje indeks elementu i starą wysokość; this wskazuje na bieżący element.

Jeśli wartość lub wartość zwrócona przez funkcję to null lub undefined, wysokość nie zostanie zmodyfikowana. Jeśli wartością jest liczba, automatycznie dodawana jest jednostka px.

// Ustawia wysokość wszystkich elementów
$('.box').height('20%');

// Dla liczby domyślnie używana jest jednostka px
$('.box').height(10);

// Ustawia wysokość przy użyciu funkcji zwrotnej
$('.box').height(function (index, oldHeight) {
  return 10;
});

`.innerWidth()`

Pobiera szerokość pierwszego elementu w kolekcji (z padding, bez border, margin).

$('.box').innerWidth();

Jeśli podano parametr, metoda ustawia szerokość wszystkich elementów w kolekcji (z padding, bez border, margin).

Jeśli wartość lub wartość zwrócona przez funkcję to null lub undefined, szerokość nie zostanie zmodyfikowana. Jeśli wartością jest liczba, automatycznie dodawana jest jednostka px.

// Ustawia szerokość wszystkich elementów (z paddingiem)
$('.box').innerWidth('20%');

// Dla liczby domyślnie używana jest jednostka px
$('.box').innerWidth(10);

// Ustawia szerokość przy użyciu funkcji zwrotnej
$('.box').innerWidth(function (index, oldWidth) {
  return 10;
});

`.innerHeight()`

Pobiera wysokość pierwszego elementu w kolekcji (z padding, bez border, margin).

$('.box').innerHeight();

Jeśli podano parametr, metoda ustawia wysokość wszystkich elementów w kolekcji (z padding, bez border, margin).

Wartością może być ciąg z jednostką, liczba lub wartość zwrócona przez funkcję zwrotną. Funkcja zwrotna przyjmuje indeks elementu i starą wysokość; this wskazuje na bieżący element.

Jeśli wartość lub wartość zwrócona przez funkcję to null lub undefined, wysokość nie zostanie zmodyfikowana. Jeśli wartością jest liczba, automatycznie dodawana jest jednostka px.

// Ustawia wysokość wszystkich elementów (z paddingiem)
$('.box').innerHeight('20%');

// Dla liczby domyślnie używana jest jednostka px
$('.box').innerHeight(10);

// Ustawia wysokość przy użyciu funkcji zwrotnej
$('.box').innerHeight(function (index, oldHeight) {
  return 10;
});

`.outerWidth()`

Pobiera szerokość pierwszego elementu w kolekcji (z padding, border, bez margin). Można przekazać parametr true, aby szerokość zawierała margin.

// Szerokość z paddingiem i borderem
$('.box').outerWidth();

// Szerokość z paddingiem, borderem i marginesem
$('.box').outerWidth(true);

Można również użyć tej metody do ustawienia szerokości wszystkich elementów w kolekcji (z padding, border, bez margin). Drugi parametr true powoduje, że szerokość zawiera margin.

Pierwszym parametrem może być ciąg z jednostką, liczba lub wartość zwrócona przez funkcję zwrotną. Funkcja zwrotna przyjmuje indeks elementu i starą szerokość; this wskazuje na bieżący element.

Jeśli wartość lub wartość zwrócona przez funkcję to null lub undefined, szerokość nie zostanie zmodyfikowana. Jeśli wartością jest liczba, automatycznie dodawana jest jednostka px.

// Ustawia szerokość wszystkich elementów (z paddingiem i borderem)
$('.box').outerWidth('20%');

// Dla liczby domyślnie używana jest jednostka px
$('.box').outerWidth(10);

// Drugi parametr true powoduje, że szerokość zawiera margines
$('.box').outerWidth(10, true);

// Ustawia szerokość przy użyciu funkcji zwrotnej
$('.box').outerWidth(function (index, oldWidth) {
  return 10;
});

`.outerHeight()`

Pobiera wysokość pierwszego elementu w kolekcji (z padding, border, bez margin). Można przekazać parametr true, aby wysokość zawierała margin.

// Wysokość z paddingiem i borderem
$('.box').outerHeight();

// Wysokość z paddingiem, borderem i marginesem
$('.box').outerHeight(true);

Można również użyć tej metody do ustawienia wysokości wszystkich elementów w kolekcji (z padding, border, bez margin). Drugi parametr true powoduje, że wysokość zawiera margin.

Pierwszym parametrem może być ciąg z jednostką, liczba lub wartość zwrócona przez funkcję zwrotną. Funkcja zwrotna przyjmuje indeks elementu i starą wysokość; this wskazuje na bieżący element.

Jeśli wartość lub wartość zwrócona przez funkcję to null lub undefined, wysokość nie zostanie zmodyfikowana. Jeśli wartością jest liczba, automatycznie dodawana jest jednostka px.

// Ustawia wysokość wszystkich elementów (z paddingiem i borderem)
$('.box').outerHeight('20%');

// Dla liczby domyślnie używana jest jednostka px
$('.box').outerHeight(10);

// Drugi parametr true powoduje, że wysokość zawiera margines
$('.box').outerHeight(10, true);

// Ustawia wysokość przy użyciu funkcji zwrotnej
$('.box').outerHeight(function (index, oldHeight) {
  return 10;
});

`.hide()`

Ukrywa wszystkie elementy w kolekcji.

$('.box').hide();

`.show()`

Pokazuje wszystkie elementy w kolekcji.

$('.box').show();

`.toggle()`

Przełącza stan widoczności wszystkich elementów w kolekcji.

$('.box').toggle();

`.offset()`

Pobiera współrzędne pierwszego elementu w kolekcji względem document.

$('.box').offset(); // { top: 20, left: 30 }

Jeśli podano parametr, metoda ustawia współrzędne wszystkich elementów w kolekcji względem document.

Parametrem może być obiekt z właściwościami top i left lub funkcja zwrotna zwracająca taki obiekt. Funkcja zwrotna przyjmuje indeks elementu i stare współrzędne; this wskazuje na bieżący element.

Jeśli wartość top lub left w parametrze to undefined, odpowiadająca współrzędna nie zostanie zmodyfikowana.

// Ustawia współrzędne wszystkich elementów
$('.box').offset({ top: 20, left: 30 });

// Ustawia współrzędne przy użyciu funkcji zwrotnej
$('.box').offset(function (index, oldOffset) {
  return { top: 20, left: 30 };
});

`.offsetParent()`

Pobiera pozycjonowanego rodzica pierwszego elementu w kolekcji – pierwszy element nadrzędny, którego właściwość position to relative lub absolute.

$('.box').offsetParent();

`.position()`

Pobiera przesunięcie pierwszego elementu w kolekcji względem jego pozycjonowanego rodzica.

$('.box').position(); // { top: 20, left: 30 }

Wyszukiwanie węzłów

`.find()`

Wyszukuje w bieżącej kolekcji elementy potomne pasujące do selektora CSS.

// Znajduje elementy .box wewnątrz #box
$('#box').find('.box');

`.children()`

Zwraca kolekcję bezpośrednich dzieci każdego elementu w bieżącej kolekcji. Można przekazać selektor CSS, aby przefiltrować dzieci.

// Zwraca wszystkie bezpośrednie dzieci #box
$('#box').children();

// Zwraca bezpośrednie dzieci #box zawierające klasę .box
$('#box').children('.box');

`.has()`

Filtruje bieżącą kolekcję, pozostawiając elementy zawierające podany element potomny. Parametrem może być selektor CSS lub element DOM.

// Dodaje tło do li zawierających ul
$('li').has('ul').css('background-color', 'red');

`.parent()`

Zwraca kolekcję bezpośrednich rodziców wszystkich elementów w bieżącej kolekcji. Można przekazać selektor CSS, aby zwrócić tylko rodziców pasujących do selektora.

// Zwraca bezpośrednich rodziców elementów .box
$('.box').parent();

// Zwraca bezpośrednich rodziców elementów .box, którzy mają klasę .parent
$('.box').parent('.parent');

`.parents()`

Zwraca kolekcję wszystkich przodków każdego elementu w bieżącej kolekcji. Można przekazać selektor CSS, aby zwrócić tylko przodków pasujących do selektora.

// Zwraca wszystkich przodków elementu span
$('span').parents();

// Zwraca przodków elementu span, którzy są elementami p
$('span').parents('p');

`.parentsUntil()`

Zwraca kolekcję wszystkich przodków każdego elementu, aż do napotkania elementu pasującego do pierwszego parametru (bez elementu pasującego).

Pierwszym parametrem może być selektor CSS, element DOM lub obiekt JQ.

Można przekazać drugi parametr, który musi być selektorem CSS – zwracane są tylko elementy pasujące do tego selektora.

Jeśli nie podano parametrów, zwracani są wszyscy przodkowie (działa jak .parents()).

// Zwraca wszystkich przodków elementu .item
$('.item').parentsUntil();

// Zwraca przodków elementu .item, aż do napotkania .parent
$('.item').parentsUntil('.parent');

// Zwraca przodków elementu .item, którzy są divami, aż do napotkania .parent
$('.item').parentsUntil('.parent', 'div');

`.prev()`

Zwraca kolekcję poprzednich rodzeństw każdego elementu w bieżącej kolekcji. Można przekazać selektor CSS, aby zwrócić tylko pasujące rodzeństwa.

// Zwraca poprzednie rodzeństwo elementu .box
$('.box').prev();

// Zwraca poprzednie rodzeństwo elementu .box, które jest divem
$('.box').prev('div');

`.prevAll()`

Zwraca kolekcję wszystkich poprzednich rodzeństw każdego elementu w bieżącej kolekcji. Można przekazać selektor CSS, aby zwrócić tylko pasujące rodzeństwa.

// Zwraca wszystkie poprzednie rodzeństwa elementu .box
$('.box').prevAll();

// Zwraca wszystkie poprzednie rodzeństwa elementu .box zawierające klasę .selected
$('.box').prevAll('.selected');

`.prevUntil()`

Zwraca kolekcję wszystkich poprzednich rodzeństw każdego elementu, aż do napotkania elementu pasującego do pierwszego parametru (bez elementu pasującego).

Pierwszym parametrem może być selektor CSS, element DOM lub obiekt JQ. Drugi parametr (opcjonalny) to selektor CSS – zwracane są tylko elementy pasujące do tego selektora.

Jeśli nie podano parametrów, zwracane są wszystkie poprzednie rodzeństwa (działa jak .prevAll()).

// Zwraca wszystkie poprzednie rodzeństwa elementu .box
$('.box').prevUntil();

// Zwraca poprzednie rodzeństwa elementu .box, aż do napotkania .until
$('.box').prevUntil('.until');

// Zwraca poprzednie rodzeństwa elementu .box, które są divami, aż do napotkania .until
$('.box').prevUntil('.until', 'div');

`.next()`

Zwraca kolekcję następnych rodzeństw każdego elementu w bieżącej kolekcji. Można przekazać selektor CSS, aby zwrócić tylko pasujące rodzeństwa.

// Zwraca następne rodzeństwo elementu .box
$('.box').next();

// Zwraca następne rodzeństwo elementu .box, które jest divem
$('.box').next('div');

`.nextAll()`

Zwraca kolekcję wszystkich następnych rodzeństw każdego elementu w bieżącej kolekcji. Można przekazać selektor CSS, aby zwrócić tylko pasujące rodzeństwa.

// Zwraca wszystkie następne rodzeństwa elementu .box
$('.box').nextAll();

// Zwraca wszystkie następne rodzeństwa elementu .box zawierające klasę .selected
$('.box').nextAll('.selected');

`.nextUntil()`

Zwraca kolekcję wszystkich następnych rodzeństw każdego elementu, aż do napotkania elementu pasującego do pierwszego parametru (bez elementu pasującego).

Pierwszym parametrem może być selektor CSS, element DOM lub obiekt JQ. Drugi parametr (opcjonalny) to selektor CSS – zwracane są tylko elementy pasujące do tego selektora.

Jeśli nie podano parametrów, zwracane są wszystkie następne rodzeństwa (działa jak .nextAll()).

// Zwraca wszystkie następne rodzeństwa elementu .box
$('.box').nextUntil();

// Zwraca następne rodzeństwa elementu .box, aż do napotkania .until
$('.box').nextUntil('.until');

// Zwraca następne rodzeństwa elementu .box, które są divami, aż do napotkania .until
$('.box').nextUntil('.until', 'div');

`.closest()`

Zaczynając od bieżącego elementu, przechodzi w górę i zwraca pierwszy pasujący element. Parametrem może być selektor CSS, element DOM lub obiekt JQ.

// Zwraca najbliższy element .parent wśród przodków elementu .box
$('.box').closest('.parent');

`.siblings()`

Zwraca kolekcję wszystkich rodzeństw każdego elementu w bieżącej kolekcji. Można przekazać selektor CSS, aby zwrócić tylko pasujące rodzeństwa.

// Zwraca wszystkie rodzeństwa elementu .box
$('.box').siblings();

// Zwraca rodzeństwa elementu .box zawierające klasę .selected
$('.box').siblings('.selected');

`.add()`

Dodaje elementy do bieżącej kolekcji. Parametrem może być ciąg HTML, selektor CSS, obiekt JQ, element DOM, tablica elementów DOM lub NodeList.

// Dodaje elementy z klasą .selected do bieżącej kolekcji
$('.box').add('.selected');

Operacje na węzłach

`.empty()`

Usuwa wszystkie dzieci bieżących elementów.

$('.box').empty();

`.remove()`

Usuwa bieżące elementy z DOM. Można przekazać selektor CSS, aby usunąć tylko elementy pasujące do selektora.

// Usuwa wszystkie elementy p
$('p').remove();

// Usuwa elementy p zawierające klasę .box
$('p').remove('.box');

`.prepend()`

Wstawia podaną treść na początku wnętrza każdego elementu w bieżącej kolekcji. Parametrem może być ciąg HTML, element DOM, tablica elementów DOM lub obiekt JQ. Można podać wiele parametrów.

Można również przekazać funkcję zwrotną zwracającą ciąg HTML, element DOM, tablicę elementów DOM lub obiekt JQ. Funkcja przyjmuje indeks elementu i jego oryginalny HTML; this wskazuje na bieżący element.

Metoda zwraca oryginalną kolekcję.

// Wstawia jeden element
$('<p>Chciałbym powiedzieć: </p>').prepend('<b>Cześć</b>');
// Wynik: <p><b>Cześć</b>Chciałbym powiedzieć: </p>

// Wstawia wiele elementów
$('<p>Chciałbym powiedzieć: </p>').prepend('<b>Cześć</b>', '<b>Świecie</b>');
// Wynik: <p><b>Cześć</b><b>Świecie</b>Chciałbym powiedzieć: </p>

// Wstawia za pomocą funkcji zwrotnej
$('<p>Cześć</p>').prepend(function (index, oldHTML) {
  return '<b>' + oldHTML + index + '</b>';
});
// Wynik: <p><b>Cześć0</b>Cześć</p>

`.prependTo()`

Wstawia bieżące elementy na początku wnętrza określonego elementu docelowego. Parametrem może być selektor CSS, ciąg HTML, element DOM, tablica elementów DOM lub obiekt JQ.

Metoda zwraca oryginalną kolekcję.

$('<p>Cześć</p>').prependTo('<p>Chciałbym powiedzieć: </p>');
// Wynik: [ <p><p>Cześć</p>Chciałbym powiedzieć: </p> ]

`.append()`

Wstawia podaną treść na końcu wnętrza każdego elementu w bieżącej kolekcji. Parametrem może być ciąg HTML, element DOM, tablica elementów DOM lub obiekt JQ. Można podać wiele parametrów.

Metoda zwraca oryginalną kolekcję.

// Wstawia jeden element
$('<p>Chciałbym powiedzieć: </p>').append('<b>Cześć</b>');
// Wynik: <p>Chciałbym powiedzieć: <b>Cześć</b></p>

// Wstawia wiele elementów
$('<p>Chciałbym powiedzieć: </p>').append('<b>Cześć</b>', '<b>Świecie</b>');
// Wynik: <p>Chciałbym powiedzieć: <b>Cześć</b><b>Świecie</b></p>

// Wstawia za pomocą funkcji zwrotnej
$('<p>Cześć</p>').append(function (index, oldHTML) {
  return '<b>' + oldHTML + index + '</b>';
});
// Wynik: <p>Cześć<b>Cześć0</b></p>

`.appendTo()`

Wstawia bieżące elementy na końcu wnętrza określonego elementu docelowego. Parametrem może być selektor CSS, ciąg HTML, element DOM, tablica elementów DOM lub obiekt JQ.

Metoda zwraca oryginalną kolekcję.

$('<p>Cześć</p>').appendTo('<p>Chciałbym powiedzieć: </p>');
// Wynik: <p>Chciałbym powiedzieć: <p>Cześć</p></p>

`.after()`

Wstawia podaną treść po każdym elemencie w bieżącej kolekcji (jako rodzeństwo). Parametrem może być ciąg HTML, element DOM, tablica elementów DOM lub obiekt JQ. Można podać wiele parametrów.

Metoda zwraca oryginalną kolekcję.

// Wstawia jeden element
$('<p>Chciałbym powiedzieć: </p>').after('<b>Cześć</b>');
// Wynik: <p>Chciałbym powiedzieć: </p><b>Cześć</b>

// Wstawia wiele elementów
$('<p>Chciałbym powiedzieć: </p>').after('<b>Cześć</b>', '<b>Świecie</b>');
// Wynik: <p>Chciałbym powiedzieć: </p><b>Cześć</b><b>Świecie</b>

// Wstawia za pomocą funkcji zwrotnej
$('<p>Cześć</p>').after(function (index, oldHTML) {
  return '<b>' + oldHTML + index + '</b>';
});
// Wynik: <p>Cześć</p><b>Cześć0</b>

`.insertAfter()`

Wstawia bieżące elementy po elemencie docelowym (jako rodzeństwo).

Jeśli bieżące elementy już istnieją na stronie, zostaną przeniesione, a nie skopiowane. Jeśli jest wiele elementów docelowych, bieżące elementy zostaną sklonowane i wstawione po każdym z nich.

Parametrem określającym element docelowy może być ciąg HTML, selektor CSS, element DOM, tablica elementów DOM lub obiekt JQ.

$('<b>Cześć</b>').insertAfter('<p>Chciałbym powiedzieć: </p>');
// Wynik: <p>Chciałbym powiedzieć: </p><b>Cześć</b>

`.before()`

Wstawia podaną treść przed każdym elementem w bieżącej kolekcji (jako rodzeństwo). Parametrem może być ciąg HTML, element DOM, tablica elementów DOM lub obiekt JQ. Można podać wiele parametrów.

Metoda zwraca oryginalną kolekcję.

// Wstawia jeden element
$('<p>Chciałbym powiedzieć: </p>').before('<b>Cześć</b>');
// Wynik: <b>Cześć</b><p>Chciałbym powiedzieć: </p>

// Wstawia wiele elementów
$('<p>Chciałbym powiedzieć: </p>').before('<b>Cześć</b>', '<b>Świecie</b>');
// Wynik: <b>Cześć</b><b>Świecie</b><p>Chciałbym powiedzieć: </p>

// Wstawia za pomocą funkcji zwrotnej
$('<p>Cześć</p>').before(function (index, oldHTML) {
  return '<b>' + oldHTML + index + '</b>';
});
// Wynik: <b>Cześć0</b><p>Cześć</p>

`.insertBefore()`

Wstawia bieżące elementy przed elementem docelowym (jako rodzeństwo).

Parametrem określającym element docelowy może być ciąg HTML, selektor CSS, element DOM, tablica elementów DOM lub obiekt JQ.

$('<p>Chciałbym powiedzieć: </p>').insertBefore('<b>Cześć</b>');
// Wynik: <p>Chciałbym powiedzieć: </p><b>Cześć</b>

`.replaceWith()`

Zastępuje bieżące elementy w kolekcji podanym elementem.

Parametrem może być ciąg HTML, element DOM, tablica elementów DOM lub obiekt JQ.

Metoda zwraca oryginalną kolekcję, która została zastąpiona.

// Zastępuje wszystkie elementy .box elementem <p>Cześć</p>
$('.box').replaceWith('<p>Cześć</p>');

// Zastępuje za pomocą funkcji zwrotnej
$('.box').replaceWith(function (index, oldHTML) {
  return oldHTML + index;
});

`.replaceAll()`

Zastępuje wskazane elementy bieżącymi elementami.

Parametr to elementy do zastąpienia – może to być selektor CSS, element DOM, tablica elementów DOM lub obiekt JQ.

Metoda zwraca oryginalną kolekcję (elementów zastępujących).

// Zastępuje wszystkie elementy .box elementami .new
$('.new').replaceAll('.box');

`.clone()`

Tworzy głęboką kopię wszystkich elementów w kolekcji.

Metoda używa natywnej metody cloneNode do głębokiego klonowania, ale nie kopiuje danych i procedur obsługi zdarzeń do nowych elementów. Różni się to od jQuery, które umożliwia określenie, czy kopiować dane i zdarzenia.

$('body').append($('#box').clone());

Formularze

`.serializeArray()`

Konwertuje wartości elementów formularza na tablicę obiektów z kluczami name i value.

Metoda może działać na pojedynczym elemencie formularza lub na całym <form>.

$('form').serializeArray();
// [
//   { "name": "golang", "value":"456" },
//   { "name": "name", "value": "mdui" },
//   { "name": "password", "value": "" }
// ]

`.serializeObject()`

Konwertuje wartości elementów formularza na obiekt.

Jeśli wystąpią te same nazwy (klucze), odpowiadające im wartości zostaną przekształcone w tablicę.

Metoda może działać na pojedynczym elemencie formularza lub na całym <form>.

$('form').serializeObject();
// { name: mdui, password: 123456 }

`.serialize()`

Konwertuje wartości elementów formularza na zakodowany w URL ciąg znaków.

$('form').serialize();
// golang=456&name=mdui&password=

Zdarzenia

`.on()`

Dodaje procedurę obsługi zdarzenia dla określonych zdarzeń na każdym elemencie w kolekcji. Sposób użycia pokazano w przykładach:

// Dodaje obsługę kliknięcia
$('.box').on('click', function (e) {
  console.log('Kliknięto element .box');
});

// Dodaje obsługę wielu zdarzeń
$('.box').on('click focus', function (e) {
  console.log('Zarówno kliknięcie, jak i focus wywołają tę funkcję');
});

// Delegacja zdarzeń
$(document).on('click', '.box', function (e) {
  console.log('Kliknięcie .box wywoła tę funkcję');
});

// Jednoczesne dodanie wielu zdarzeń i procedur
$('.box').on({
  click: function (e) {
    console.log('Wywołano click');
  },
  focus: function (e) {
    console.log('Wywołano focus');
  },
});

// Przekazywanie parametrów
$('.box').on('click', { key1: 'value1', key2: 'value2' }, function (e) {
  console.log('Kliknięto .box, przekazano parametry do procedury');
  // e._data to {key1: 'value1', key2: 'value2'}
});

// Jednoczesne dodanie wielu zdarzeń i procedur z parametrami
$('.box').on(
  {
    click: function (e) {
      console.log('Wywołano click');
      // e._data to {key1: 'value1', key2: 'value2'}
    },
    focus: function (e) {
      console.log('Wywołano focus');
      // e._data to {key1: 'value1', key2: 'value2'}
    },
  },
  { key1: 'value1', key2: 'value2' },
);

// Delegacja zdarzeń z parametrami
$(document).on(
  'click',
  '.box',
  { key1: 'value1', keys: 'value2' },
  function (e) {
    console.log('Kliknięto .box, przekazano parametry do procedury');
    // e._data to {key1: 'value1', key2: 'value2'}
  },
);

// Delegacja zdarzeń dla wielu zdarzeń i procedur
$(document).on(
  {
    click: function (e) {
      console.log('Wywołano click');
    },
    focus: function (e) {
      console.log('Wywołano focus');
    },
  },
  '.box',
);

// Delegacja zdarzeń dla wielu zdarzeń i procedur z parametrami
$(document).on(
  {
    click: function (e) {
      console.log('Wywołano click');
      // e._data to {key1: 'value1', key2: 'value2'}
    },
    focus: function (e) {
      console.log('Wywołano focus');
      // e._data to {key1: 'value1', key2: 'value2'}
    },
  },
  '.box',
  { key1: 'value1', key2: 'value2' },
);

// Pobieranie parametrów zdarzenia
$('.box').on('click', function (e, data) {
  // data jest równe e.detail
});

// Nazwy zdarzeń mogą zawierać przestrzenie nazw
$('.box').on('click.myPlugin', function () {
  console.log('Kliknięto .box');
});

`.one()`

Dodaje procedurę obsługi zdarzenia dla każdego pasującego elementu, ale zdarzenie zostanie wywołane tylko raz.

Sposób użycia jest taki sam jak .on().

`.off()`

Usuwa procedury obsługi zdarzeń z elementów w kolekcji. Sposób użycia:

// Usuwa wszystkie dodane procedury
$('.box').off();

// Usuwa procedury dla określonego zdarzenia
$('.box').off('click');

// Usuwa procedury dla wielu zdarzeń
$('.box').off('click focus');

// Usuwa konkretną procedurę dla zdarzenia
$('.box').off('click', callback);

// Usuwa procedurę dodaną przez delegację
$(document).off('click', '.box');

// Usuwa konkretną procedurę dla delegacji
$(document).off('click', '.box', callback);

// Usuwa wiele procedur jednocześnie
$('.box').off({
  click: callback1,
  focus: callback2,
});

// Usuwa wiele procedur dla delegacji
$(document).off(
  {
    click: callback1,
    focus: callback2,
  },
  '.box',
);

// Przestrzenie nazw – poniższe usunie wszystkie zdarzenia zakończone na .myPlugin
$(document).off('.myPlugin');

`.trigger()`

Wyzwala określone zdarzenie. Sposób użycia:

// Wyzwala zdarzenie
$('.box').trigger('click');

// Wyzwala zdarzenie z parametrami
$('.box').trigger('click', { key1: 'value1', key2: 'value2' });

// Nazwa zdarzenia z przestrzenią nazw
$('.box').trigger('click.myPlugin');

// Przekazywanie parametrów CustomEvent
$('.box').trigger('click', undefined, {
  bubbles: true,
  cancelable: true,
  composed: true,
});

AJAX

`$.ajaxSetup()`

Ustawia globalne parametry żądań AJAX.

$.ajaxSetup({
  // Domyślnie nie wyzwalaj globalnych zdarzeń AJAX
  global: false,

  // Domyślnie używaj metody POST
  method: 'POST',
});

Szczegółową listę parametrów można znaleźć poniżej w sekcji parametry AJAX.

`$.ajax()`

Wysyła żądanie AJAX i zwraca obiekt Promise.

const promise = $.ajax({
  method: 'POST',
  url: './test.php',
  data: {
    key1: 'val1',
    key2: 'val2',
  },
  success: function (response) {
    console.log(response);
  },
});

promise
  .then((response) => {
    console.log(response);
  })
  .catch((error) => {
    console.log(error);
  });

Szczegółową listę parametrów można znaleźć poniżej w sekcji parametry AJAX.

Można również użyć .on() do nasłuchiwania globalnych zdarzeń AJAX.

// Gdy rozpocznie się żądanie AJAX, zostanie wywołane to zdarzenie
$(document).on('ajaxStart', function (e, { xhr, options }) {
  // xhr: obiekt XMLHttpRequest
  // options: parametry metody $.ajax()
});

// Gdy żądanie AJAX zakończy się sukcesem, zostanie wywołane to zdarzenie
$(document).on('ajaxSuccess', function (e, { xhr, options, response }) {
  // xhr: obiekt XMLHttpRequest
  // options: parametry metody $.ajax()
  // response: odpowiedź żądania
});

// Gdy żądanie AJAX zakończy się błędem, zostanie wywołane to zdarzenie
$(document).on('ajaxError', function (e, { xhr, options }) {
  // xhr: obiekt XMLHttpRequest
  // options: parametry metody $.ajax()
});

// Gdy żądanie AJAX zostanie zakończone (niezależnie od wyniku), zostanie wywołane to zdarzenie
$(document).on('ajaxComplete', function (e, { xhr, options }) {
  // xhr: obiekt XMLHttpRequest
  // options: parametry metody $.ajax()
});

Parametry AJAX

Nazwa	Typ	Wartość domyślna
`url`	`string`	URL bieżącej strony
Adres URL żądania.
`method`	`string`	`GET`
Metoda HTTP żądania. Dozwolone wartości: `GET`, `POST`, `PUT`, `PATCH`, `HEAD`, `OPTIONS`, `DELETE`.
`data`	`any`	`''`
Dane wysyłane do serwera.
`processData`	`boolean`	`true`
Czy konwertować dane na ciąg zapytania.
`async`	`boolean`	`true`
Czy żądanie ma być asynchroniczne.
`cache`	`boolean`	`true`
Czy czytać dane z pamięci podręcznej. Dotyczy tylko żądań `GET` i `HEAD`.
`username`	`string`	`''`
Nazwa użytkownika do uwierzytelniania HTTP.
`password`	`string`	`''`
Hasło do uwierzytelniania HTTP.
`headers`	`object`	`{}`
Dane dodawane do nagłówka żądania HTTP. Można je nadpisać w funkcji zwrotnej `beforeSend`. Pola z wartością ciągu znaków lub `null` zostaną wysłane; pola z wartością `undefined` zostaną pominięte.
`xhrFields`	`object`	`{}`
Dane ustawiane na obiekcie `XMLHttpRequest`. `$.ajax({ url: 'adres URL z inną domeną', xhrFields: { withCredentials: true } });`
`statusCode`	`object`	`{}`
Mapowanie kodów statusu HTTP i odpowiadających im funkcji obsługi. `$.ajax({ statusCode: { 404: function (xhr, textStatus) { alert('Wywołane, gdy kod statusu to 404'); }, 200: function (data, textStatus, xhr) { alert('Wywołane, gdy kod statusu to 200'); } } });` Kody statusu w zakresie 200-299 lub 304 oznaczają sukces – parametry funkcji są takie same jak w `success`. W przeciwnym razie parametry są takie same jak w `error`.
`dataType`	`string`	`text`
Oczekiwany typ danych odpowiedzi z serwera. Obsługiwane: `text`, `json`
`contentType`	`string`	`application/x-www-form-urlencoded`
Typ MIME treści żądania. Jeśli ustawione na `false`, nagłówek `Content-Type` nie zostanie ustawiony.
`timeout`	`number`	`0`
Limit czasu żądania w milisekundach. Wartość `0` oznacza brak limitu.
`global`	`boolean`	`true`
Czy wyzwalać globalne zdarzenia AJAX.
`beforeSend`	`function`	-
Wywoływane przed wysłaniem żądania. Jeśli zwróci `false`, żądanie zostanie anulowane. `$.ajax({ beforeSend: function (xhr) { // xhr to obiekt XMLHttpRequest } });`
`success`	`function`	-
Wywoływane po pomyślnym żądaniu. `$.ajax({ success: function (data, textStatus, xhr) { // data to dane zwrócone przez AJAX // textStatus to ciąg z kodem sukcesu // xhr to obiekt XMLHttpRequest } });`
`error`	`function`	-
Wywoływane w przypadku błędu żądania. `$.ajax({ error: function (xhr, textStatus) { // xhr to obiekt XMLHttpRequest // textStatus to ciąg z kodem błędu } });`
`complete`	`function`	-
Wywoływane po zakończeniu żądania (zarówno przy sukcesie, jak i błędzie). `$.ajax({ complete: function (xhr, textStatus) { // xhr to obiekt XMLHttpRequest // textStatus to ciąg z kodem sukcesu lub błędu } });`

Poprzedni rozdział

TopAppBar Górny pasek aplikacji

Następny rozdział

dialog