Biblioteka JavaScript

Ta metoda ma wiele zastosowań:

Można przekazać selektor CSS jako parametr, co zwróci obiekt JQ zawierający pasujące elementy. Ta metoda jest zaimplementowana za pomocą querySelectorAll.

$('.box')

Można przekazać elementy DOM, dowolne tablice, NodeList, obiekty JQ, co zwróci obiekt JQ zawierający określone elementy.

$(document)

Można przekazać ciąg HTML, co zwróci obiekt JQ zawierający DOM utworzony na podstawie HTML.

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

Można przekazać funkcję, która zostanie wywołana po załadowaniu DOM.

$(function () { console.log('DOM Loaded') })

Jeśli zostanie przekazany tylko jeden obiekt, właściwości tego obiektu zostaną scalone z obiektem JQ, co odpowiada dodaniu nowych funkcji do przestrzeni nazw JQ.

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

// Wtedy można wywoływać niestandardowe metody w ten sposób
$.customFunc()

Jeśli przekazano dwa lub więcej obiektów, wszystkie właściwości obiektów zostaną dodane do pierwszego obiektu, a scalony obiekt zostanie zwrócony.

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

// W tym przypadku zarówno pierwszy obiekt, jak i wartość zwracana to { key1: val1, key2: val2, key3: val3 }

Rozszerzanie metod w łańcuchu prototypów JQ.

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

// Wtedy można używać rozszerzonych metod w ten sposób
$(document).customFunc()

Serializacja obiektu lub tablicy, zwraca ciąg znaków, który może być użyty jako parametry 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, format tej tablicy musi być zgodny z formatem zwracanym przez .serializeArray():

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

Iteracja po tablicy lub obiekcie. Zwraca pierwszy parametr, czyli iterowaną tablicę lub obiekt.

Pierwszym parametrem funkcji jest indeks tablicy lub klucz obiektu; drugim parametrem jest wartość na odpowiedniej pozycji w tablicy lub obiekcie.

this wewnątrz funkcji zwrotnej wskazuje na wartość na odpowiedniej pozycji w tablicy lub obiekcie. Jeśli funkcja zwrotna zwróci false, iteracja zostanie zatrzymana.

// 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

Dołączenie elementów drugiej tablicy do pierwszej tablicy i zwrócenie scalonej tablicy.

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

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

Filtrowanie duplikatów z tablicy.

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

Iteracja po tablicy lub obiekcie, zwraca nową tablicę składającą się z wartości zwracanych przez funkcję.

Pierwszym parametrem funkcji jest wartość na odpowiedniej pozycji w tablicy lub obiekcie, drugim parametrem jest indeks tablicy lub klucz obiektu.

Funkcja może zwracać dowolną wartość. Jeśli funkcja zwraca tablicę, zostanie ona rozwinięta; jeśli zwraca null lub undefined, zostanie zignorowana. this wewnątrz funkcji wskazuje na obiekt window.

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

// Gdy funkcja zwrotna zwraca tablicę, zostanie ona rozwinięta
var result = $.map([1, 2, 3], function (value, index) {
  return [value, value + 1];
});
console.log(result); // [1, 2, 2, 3, 3, 4]

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

Sprawdza, czy węzeł nadrzędny zawiera węzeł podrzędny, zwraca wartość logiczną.

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

Jeśli co najmniej jeden element w kolekcji pasuje do parametru, zwraca true, w przeciwnym razie zwraca false.

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

Gdy parametrem jest funkcja zwrotna, pierwszym parametrem funkcji jest indeks, drugim parametrem jest bieżący element, this wskazuje na bieżący element. Jeśli funkcja zwróci true, oznacza to pasowanie; jeśli zwróci false, oznacza to brak pasowania.

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

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

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

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

Iteracja po bieżącej kolekcji, wykonując funkcję dla każdego elementu w kolekcji. Jeśli funkcja zwróci false, iteracja zostanie zakończona.

Pierwszym parametrem funkcji jest indeks elementu, drugim parametrem jest bieżący element. this wewnątrz funkcji wskazuje na bieżący element.

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

Iteracja po bieżącej kolekcji, wykonując funkcję dla każdego elementu w kolekcji, zwraca nową kolekcję składającą się z wartości zwracanych przez funkcję. Jeśli funkcja zwróci null lub undefined, zostanie to odfiltrowane.

Pierwszym parametrem funkcji jest indeks elementu, drugim parametrem jest bieżący element. this w funkcji wskazuje na bieżący element.

var result = $('input.checked').map(function (index, element) {
  return $(this).val();
});

// result to obiekt JQ składający się z wartości pasujących elementów

Zwraca kolekcję zawierającą tylko element na określonej pozycji indeksu.

$('div').eq(0); // Zwraca obiekt JQ zawierający tylko pierwszy element
$('div').eq(-1); // Zwraca obiekt JQ zawierający tylko ostatni element
$('div').eq(-2); // Zwraca obiekt JQ zawierający tylko przedostatni element

Zwraca kolekcję zawierającą tylko pierwszy element.

$('div').first(); // Zwraca obiekt JQ zawierający tylko pierwszy div

Zwraca kolekcję zawierającą tylko ostatni element.

$('div').last(); // Zwraca obiekt JQ zawierający tylko ostatni div

Zwraca element na określonej pozycji indeksu. Jeśli nie przekazano parametrów, zwraca tablicę składającą się ze wszystkich elementów w kolekcji.

$('div').get(); // Zwraca tablicę składającą się ze wszystkich elementów div
$('div').get(0); // Zwraca pierwszy element div
$('div').get(-1); // Zwraca ostatni element div

Jeśli nie przekazano parametrów, zwraca indeks pierwszego elementu w kolekcji względem jego rodzeństwa.

Jeśli przekazano selektor CSS jako parametr, zwraca indeks pierwszego elementu w kolekcji względem elementów pasujących do selektora CSS.

Jeśli przekazano element DOM, zwraca indeks tego elementu DOM w kolekcji.

Jeśli przekazano obiekt JQ, zwraca indeks pierwszego elementu 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

Zwraca podzbiór bieżącej kolekcji.

Pierwszy parametr to pozycja początkowa podzbioru, drugi parametr to pozycja końcowa podzbioru; jeśli nie przekazano drugiego parametru, oznacza to, że zawiera wszystkie elementy od pozycji początkowej do końca.

// Zwraca wszystkie elementy po trzecim (włącznie z trzecim) w kolekcji
$('div').slice(3);

// Zwraca elementy między trzecim a piątym (włącznie z trzecim, bez piątego) w kolekcji
$('div').slice(3, 5);

Filtruje elementy z bieżącej kolekcji, które pasują do określonego wyrażenia. Parametrem może być selektor CSS, element DOM, tablica elementów DOM lub funkcja zwrotna.

Gdy parametrem jest funkcja, pierwszym parametrem funkcji jest indeks, drugim parametrem jest bieżący element, this w funkcji wskazuje na bieżący element. Gdy funkcja zwróci true, bieżący element zostanie zachowany; gdy zwróci false, zostanie usunięty.

// Filtruje wszystkie elementy div zawierające .box
$('div').filter('.box');

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

Filtruje elementy z bieżącej kolekcji, które NIE pasują do określonego wyrażenia. Parametrem może być selektor CSS, element DOM, tablica elementów DOM lub funkcja zwrotna.

Gdy parametrem jest funkcja, pierwszym parametrem funkcji jest indeks, drugim parametrem jest bieżący element, this w funkcji wskazuje na bieżący element. Gdy funkcja zwróci true, bieżący element zostanie usunięty; gdy zwróci false, zostanie zachowany.

// Filtruje wszystkie elementy div nie zawierające klasy .box
$('div').not('.box');

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

Sprawdza, czy pierwszy element w kolekcji zawiera określoną klasę CSS.

// Sprawdza, czy pierwszy element div zawiera .item
$('div').hasClass('item')

Dodaje klasę CSS do każdego elementu w kolekcji, wiele nazw klas można oddzielić spacjami.

Można również przekazać funkcję zwrotną zwracającą nazwy klas CSS. Pierwszym parametrem funkcji jest indeks, drugim parametrem jest oryginalna nazwa klasy CSS elementu, this w funkcji wskazuje na bieżący element.

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

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

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

Usuwa klasy CSS z elementów w kolekcji, wiele nazw klas można oddzielić spacjami.

Można również przekazać funkcję zwrotną zwracającą nazwy klas CSS. Pierwszym parametrem funkcji jest indeks, drugim parametrem jest oryginalna nazwa klasy CSS elementu, this w funkcji wskazuje na bieżący element.

Jeśli nie przekazano parametrów, atrybut class zostanie bezpośrednio usunięty z elementu.

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

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

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

// Bezpośrednio usuwa atrybut class
$('div').removeClass()

Klasa CSS na elemencie zostanie usunięta, jeśli istnieje, lub dodana, jeśli nie istnieje. Wiele nazw klas można oddzielić spacjami.

Można również przekazać funkcję zwrotną zwracającą nazwy klas CSS. Pierwszym parametrem funkcji jest indeks, drugim parametrem jest oryginalna nazwa klasy CSS elementu, this w funkcji wskazuje na bieżący element.

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

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

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

Pobiera wartość atrybutu pierwszego elementu w kolekcji.

// Pobiera wartość atrybutu pierwszego elementu
$('input').prop('checked');

Może również ustawiać wartości atrybutów dla wszystkich elementów w kolekcji.

Ustawiana wartość atrybutu może być wartością zwracaną przez funkcję zwrotną. Pierwszym parametrem funkcji zwrotnej jest indeks elementu, drugim parametrem jest oryginalna wartość atrybutu elementu, this wewnątrz funkcji wskazuje na bieżący element.

Jeśli wartość atrybutu lub wartość zwracana przez funkcję zwrotną to void lub undefined, oryginalny atrybut nie zostanie zmodyfikowany.

Można również ustawić wiele atrybutów jednocześnie, przekazując obiekt.

// Ustawia wartości atrybutów dla wszystkich wybranych elementów
$('input').prop('checked', true);

// Ustawia wartość atrybutu na podstawie wartości zwracanej przez funkcję zwrotną
$('input').prop('checked', function (index, oldPropValue) {
  return true;
});

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

Usuwa określone atrybuty ze wszystkich elementów w kolekcji.

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

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

// Pobiera wartość właściwości pierwszego elementu
$('div').attr('username');

Może również ustawiać wartości właściwości dla wszystkich elementów w kolekcji.

Ustawiana wartość właściwości może być wartością zwracaną przez funkcję zwrotną. Pierwszym parametrem funkcji zwrotnej jest indeks elementu, drugim parametrem jest oryginalna wartość właściwości elementu, this wewnątrz funkcji wskazuje na bieżący element.

Jeśli wartość właściwości lub wartość zwracana przez funkcję zwrotną to void lub undefined, oryginalna właściwość nie zostanie zmodyfikowana. Jeśli wartość właściwości lub wartość zwracana przez funkcję zwrotną to null, określona właściwość zostanie usunięta.

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

// Ustawia wartości właściwości dla wszystkich wybranych elementów
$('div').attr('username', 'mdui');

// Ustawia wartość właściwości na podstawie wartości zwracanej przez funkcję zwrotną
$('div').attr('username', function (index, oldAttrValue) {
  return 'mdui';
});

// Ustawia wiele wartości właściwości elementu jednocześnie
$('div').attr({
  username: 'mdui',
  lastname: function (index, oldAttrValue) {
    return 'test';
  }
});

Usuwa określone właściwości ze wszystkich elementów w kolekcji, wiele nazw właściwości można oddzielić spacjami.

// Usuwa jedną właściwość ze wszystkich elementów w kolekcji
$('div').removeAttr('username');

// Usuwa wiele właściwości ze wszystkich elementów w kolekcji
$('div').removeAttr('username lastname');

Pobiera wartość pierwszego elementu w kolekcji.

Jeśli elementem jest <select multiple="multiple">, zwrócona zostanie tablica zawierająca każdą wybraną opcję.

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

Może również ustawiać wartość dla wszystkich elementów w kolekcji.

Wartością może być ciąg znaków, liczba, tablica ciągów znaków lub funkcja zwrotna.

Jeśli wartością jest funkcja zwrotna, pierwszym parametrem jest indeks elementu, drugim parametrem jest oryginalna wartość elementu, this w funkcji wskazuje na bieżący element.

Jeśli elementem jest <input type="checkbox">, <input type="radio"> lub <option>, wartość elementu lub wartość zwracana przez funkcję może być tablicą. W takim przypadku wybrane zostaną elementy o wartościach znajdujących się w tablicy, a elementy o wartościach spoza tablicy zostaną odznaczone.

Jeśli wartość lub wartość zwracana przez funkcję to undefined, wartość elementu zostanie ustawiona na pustą.

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

// Ustawia wartość elementu na podstawie wartości zwracanej przez funkcję zwrotną
$('#input').val(function (index, oldValue) {
  return 'new value';
});

Pobiera treść tekstową wszystkich elementów w kolekcji (wraz z ich elementami potomnymi)

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

Może również ustawiać tekst dla wszystkich elementów w kolekcji.

Wartością może być ciąg znaków, liczba, wartość logiczna lub funkcja zwrotna.

Jeśli jest to funkcja zwrotna, pierwszym parametrem jest indeks elementu, drugim parametrem jest oryginalna treść tekstowa elementu, this wewnątrz funkcji wskazuje na bieżący element.

Jeśli ustawiana wartość lub wartość zwracana przez funkcję zwrotną to undefined, tekst odpowiedniego elementu nie zostanie zmodyfikowany.

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

// Ustawia treść tekstową elementów na podstawie wartości zwracanej przez funkcję zwrotną
$('.box').text(function (index, oldTextContent) {
  return 'new text content';
});

Pobiera zawartość HTML pierwszego elementu w kolekcji.

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

Może również ustawiać zawartość HTML dla wszystkich elementów w kolekcji.

Wartością może być ciąg HTML, element DOM lub funkcja zwrotna.

Jeśli jest to funkcja zwrotna, pierwszym parametrem jest indeks elementu, drugim parametrem jest oryginalna zawartość HTML elementu, this wewnątrz funkcji wskazuje na bieżący element.

Jeśli ustawiana wartość lub wartość zwracana przez funkcję to undefined, HTML odpowiedniego elementu nie zostanie zmodyfikowany.

// Ustawia HTML wybranych elementów
$('.box').html('<div>new html content</div>');

// Ustawia zawartość HTML elementów na podstawie wartości zwracanej przez funkcję zwrotną
$('.box').html(function (index, oldHTMLContent) {
  return '<div>new html content</div>';
});

Odczytuje lub przechowuje dane na określonym elemencie.

Podczas przechowywania danych, jeśli wartość to undefined, odpowiada to odczytowi odpowiednich danych z elementu. Oznacza to, że $.data(element, 'key', undefined) i $.data(element, 'key') są równoważne.

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

// Przechowuje dane na określonym elemencie, zwraca przechowywaną wartość
$.data(document.body, 'layout', 'dark'); // Zwraca dark

// Przechowuje wiele danych jednocześnie na określonym elemencie
$.data(document.body, {
  primary: 'indigo',
  accent: 'pink',
});

// Pobiera dane przechowywane na określonym elemencie
$.data(document.body, 'layout'); // Zwraca dark

// Pobiera wszystkie dane przechowywane na określonym elemencie
$.data(document.body); // Zwraca { layout: 'dark', primary: 'indigo', accent: 'pink' }

Usuwa dane przechowywane na określonym elemencie.

Wiele nazw kluczy można oddzielić spacjami, można również użyć tablicy do reprezentowania wielu nazw kluczy. Jeśli nie określono nazwy klucza, wszystkie dane na elemencie zostaną usunięte.

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

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

// Usuwa wszystkie dane przechowywane na elemencie
$.removeData(document.body);

Odczytuje lub przechowuje dane na elementach w bieżącej kolekcji.

Podczas przechowywania danych, jeśli wartość to undefined, dane nie zostaną zapisane.

Uwaga: dane pobierane przez tę metodę będą zawierać atrybuty data-* elementu.

// Przechowuje dane na elementach w bieżącej kolekcji
$('.box').data('layout', 'dark');

// Przechowuje wiele danych jednocześnie na elementach w bieżącej kolekcji
$('.box').data({
  primary: 'indigo',
  accent: 'pink',
});

// Pobiera określone dane przechowywane na pierwszym elemencie w bieżącej kolekcji
$('.box').data('layout'); // Zwraca dark

// Pobiera wszystkie dane przechowywane na pierwszym elemencie w bieżącej kolekcji
$('.box').data(); // Zwraca { layout: 'dark', primary: 'indigo', accent: 'pink' }

Usuwa dane przechowywane na elementach w bieżącej kolekcji.

Wiele nazw kluczy można oddzielić spacjami, można również użyć tablicy do reprezentowania wielu nazw kluczy. Jeśli nie określono nazwy klucza, wszystkie dane na elemencie zostaną usunięte.

Uwaga: ta metoda usuwa tylko dane ustawione za pomocą metody .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 dwie metody są równoważne:
$('.box').removeData('name1 name2');
$('.box').removeData(['name1', 'name2']);

// Usuwa wszystkie dane przechowywane na elemencie
$('.box').removeData();

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

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

Może również ustawiać wartości właściwości CSS dla wszystkich elementów w kolekcji.

Wartością właściwości może być ciąg znaków, liczba lub funkcja zwrotna zwracająca ciąg znaków lub liczbę.

Jeśli wartość właściwości jest funkcją zwrotną, pierwszym parametrem jest indeks elementu, drugim parametrem jest oryginalna wartość właściwości CSS elementu, this wewnątrz funkcji wskazuje na bieżący element.

Jeśli wartość właściwości lub funkcja zwrotna zwróci void, undefined lub null, wartość właściwości CSS bieżącego elementu nie zostanie zmodyfikowane.

Jeśli wartość właściwości lub funkcja zwrotna zwróci liczbę, zostanie dodana jednostka px. Jeśli właściwość nie może używać px jako jednostki, wartość zostanie bezpośrednio przekonwertowana na ciąg znaków.

Można również ustawić wiele właściwości CSS jednocześnie, przekazując obiekt par klucz-wartość.

// Ustawia wartości stylu dla wszystkich elementów w kolekcji
$('.box').css('color', 'red')

// Ustawia wartości stylu dla wszystkich elementów na podstawie wartości zwracanej przez funkcję zwrotną
$('.box').css('color', function (index, oldCSSValue) {
  return 'green';
});

// Ustawia wiele stylów jednocześnie, przekazując obiekt
$('.box').css({
  'background-color': 'white',
  color: function (index, oldCSSValue) {
    return 'blue';
  },
});

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

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

Może również ustawiać szerokość wszystkich elementów w kolekcji (bez szerokości padding, border i margin).

Wartością może być ciąg znaków z jednostką, liczba lub funkcja zwrotna zwracająca ciąg znaków z jednostką lub liczbę.

Pierwszym parametrem funkcji zwrotnej jest indeks elementu, drugim parametrem jest oryginalna wartość szerokości elementu, this wewnątrz funkcji wskazuje na bieżący element.

Jeśli wartość lub wartość zwracana przez funkcję zwrotną jest liczbą, jednostka px zostanie dodana automatycznie.

Jeśli wartość lub wartość zwracana przez funkcję zwrotną to null lub undefined, szerokość elementu nie zostanie zmodyfikowana.

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

// Gdy wartość jest liczbą, domyślną jednostką jest px
$('.box').width(10);

// Ustawia szerokość na podstawie wartości zwracanej przez funkcję zwrotną
$('.box').width(function (index, oldWidth) {
  return 10;
});

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

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

Może również ustawiać wysokość wszystkich elementów w kolekcji (bez wysokości padding, border i margin).

Wartością może być ciąg znaków z jednostką, liczba lub funkcja zwrotna zwracająca ciąg znaków z jednostką lub liczbę.

Pierwszym parametrem funkcji zwrotnej jest indeks elementu, drugim parametrem jest oryginalna wartość wysokości elementu, this wewnątrz funkcji wskazuje na bieżący element.

Jeśli wartość lub wartość zwracana przez funkcję zwrotną jest liczbą, jednostka px zostanie dodana automatycznie.

Jeśli wartość lub wartość zwracana przez funkcję zwrotną to null lub undefined, wysokość elementu nie zostanie zmodyfikowana.

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

// Gdy wartość jest liczbą, domyślną jednostką jest px
$('.box').height(10);

// Ustawia wysokość na podstawie wartości zwracanej przez funkcję zwrotną
$('.box').height(function (index, oldHeight) {
  return 10;
});

Pobiera szerokość (w pikselach) pierwszego elementu w kolekcji, wliczając padding, ale bez border i margin.

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

Może również ustawiać szerokość wszystkich elementów w kolekcji (wliczając padding, bez border i margin).

Wartością może być ciąg znaków z jednostką, liczba lub funkcja zwrotna zwracająca ciąg znaków z jednostką lub liczbę.

Pierwszym parametrem funkcji zwrotnej jest indeks elementu, drugim parametrem jest oryginalna wartość szerokości elementu, this wewnątrz funkcji wskazuje na bieżący element.

Jeśli wartość lub wartość zwracana przez funkcję zwrotną jest liczbą, jednostka px zostanie dodana automatycznie.

Jeśli wartość lub wartość zwracana przez funkcję zwrotną to null lub undefined, szerokość elementu nie zostanie zmodyfikowana.

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

// Gdy wartość jest liczbą, domyślną jednostką jest px
$('.box').innerWidth(10);

// Ustawia szerokość na podstawie wartości zwracanej przez funkcję zwrotną
$('.box').innerWidth(function (index, oldWidth) {
  return 10;
});

Pobiera wysokość (w pikselach) pierwszego elementu w kolekcji, wliczając padding, ale bez border i margin.

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

Może również ustawiać wysokość wszystkich elementów w kolekcji (wliczając padding, bez border i margin).

Wartością może być ciąg znaków z jednostką, liczba lub funkcja zwrotna zwracająca ciąg znaków z jednostką lub liczbę.

Pierwszym parametrem funkcji zwrotnej jest indeks elementu, drugim parametrem jest oryginalna wartość wysokości elementu, this wewnątrz funkcji wskazuje na bieżący element.

Jeśli wartość lub wartość zwracana przez funkcję zwrotną jest liczbą, jednostka px zostanie dodana automatycznie.

Jeśli wartość lub wartość zwracana przez funkcję zwrotną to null lub undefined, wysokość elementu nie zostanie zmodyfikowana.

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

// Gdy wartość jest liczbą, domyślną jednostką jest px
$('.box').innerHeight(10);

// Ustawia wysokość na podstawie wartości zwracanej przez funkcję zwrotną
$('.box').innerHeight(function (index, oldHeight) {
  return 10;
});

Pobiera szerokość (w pikselach) pierwszego elementu w kolekcji, wliczając szerokość padding i border, ale bez margin. Można przekazać parametr true, aby uwzględnić szerokość margin.

// Wliczona szerokość padding i border
$('.box').outerWidth();

// Wliczona szerokość padding, border i margin
$('.box').outerWidth(true);

Może również ustawiać szerokość wszystkich elementów w kolekcji (wliczając padding i border, bez margin. Można przekazać true jako drugi parametr, aby uwzględnić szerokość margin).

Pierwszym parametrem może być ciąg znaków z jednostką, liczba lub funkcja zwrotna zwracająca ciąg znaków z jednostką lub liczbę.

Pierwszym parametrem funkcji zwrotnej jest indeks elementu, drugim parametrem jest oryginalna szerokość elementu, this wewnątrz funkcji wskazuje na bieżący element.

Jeśli wartość lub wartość zwracana przez funkcję zwrotną jest liczbą, jednostka px zostanie dodana automatycznie.

Jeśli wartość lub wartość zwracana przez funkcję zwrotną to null lub undefined, szerokość elementu nie zostanie zmodyfikowana.

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

// Gdy wartość jest liczbą, domyślną jednostką jest px
$('.box').outerWidth(10);

// Jeśli drugi parametr to true, szerokość będzie zawierać margin
$('.box').outerWidth(10, true);

// Ustawia szerokość na podstawie wartości zwracanej przez funkcję zwrotną
$('.box').outerWidth(function (index, oldWidth) {
  return 10;
});

Pobiera wysokość (w pikselach) pierwszego elementu w kolekcji, wliczając wysokość padding i border, ale bez margin. Można przekazać parametr true, aby uwzględnić wysokość margin.

// Wliczona wysokość padding i border
$('.box').outerHeight();

// Wliczona wysokość padding, border i margin
$('.box').outerHeight(true);

Może również ustawiać wysokość wszystkich elementów w kolekcji (wliczając padding i border, bez margin. Można przekazać true jako drugi parametr, aby uwzględnić wysokość margin).

Pierwszym parametrem może być ciąg znaków z jednostką, liczba lub funkcja zwrotna zwracająca ciąg znaków z jednostką lub liczbę.

Pierwszym parametrem funkcji zwrotnej jest indeks elementu, drugim parametrem jest oryginalna wysokość elementu, this wewnątrz funkcji wskazuje na bieżący element.

Jeśli wartość lub wartość zwracana przez funkcję zwrotną jest liczbą, jednostka px zostanie dodana automatycznie.

Jeśli wartość lub wartość zwracana przez funkcję zwrotną to null lub undefined, wysokość elementu nie zostanie zmodyfikowana.

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

// Gdy wartość jest liczbą, domyślną jednostką jest px
$('.box').outerHeight(10);

// Jeśli drugi parametr to true, wysokość będzie zawierać margin
$('.box').outerHeight(10, true);

// Ustawia wysokość na podstawie wartości zwracanej przez funkcję zwrotną
$('.box').outerHeight(function (index, oldWidth) {
  return 10;
});

Ukrywa wszystkie elementy w kolekcji.

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

Pokazuje wszystkie elementy w kolekcji.

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

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

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

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

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

Może również ustawiać współrzędne wszystkich elementów w kolekcji względem document.

Parametrem jest obiekt zawierający właściwości top i left, lub funkcja zwrotna zwracająca obiekt w tym formacie.

Jeśli parametrem jest funkcja zwrotna, pierwszym parametrem jest indeks elementu, drugim parametrem są oryginalne współrzędne elementu, this wewnątrz funkcji wskazuje na bieżący element.

Jeśli wartość top lub left w parametrze to undefined, odpowiednia wartość nie zostanie zmodyfikowana.

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

// Ustawia współrzędne elementów na podstawie wartości zwracanej przez funkcję zwrotną
$('.box').offset(function (index, oldOffset) {
  return { top: 20, left: 30 };
});

Zwraca element nadrzędny pierwszego elementu w kolekcji używany do pozycjonowania. Jest to pierwszy element nadrzędny, którego position wynosi relative lub absolute.

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

Pobiera przesunięcie pierwszego elementu w kolekcji względem jego elementu nadrzędnego.

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

Znajduje kolekcję określonych węzłów potomnych we wszystkich elementach bieżącej kolekcji na podstawie selektora CSS.

// Znajduje kolekcję węzłów potomnych #box, które zawierają .box
$('#box').find('.box')

Pobiera kolekcję składającą się z bezpośrednich elementów podrzędnych we wszystkich elementach bieżącej kolekcji.

Można przekazać selektor CSS jako parametr, aby przefiltrować elementy podrzędne.

// Znajduje wszystkie bezpośrednie elementy podrzędne #box
$('#box').children();

// Znajduje kolekcję elementów wśród wszystkich bezpośrednich elementów podrzędnych #box, które zawierają .box
$('#box').children('.box')

Filtruje elementy we wszystkich elementach bieżącej kolekcji, które zawierają określone elementy podrzędne.

Parametrem może być selektor CSS lub element DOM.

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

Pobiera kolekcję bezpośrednich elementów nadrzędnych wszystkich elementów w bieżącej kolekcji.

Można przekazać selektor CSS jako parametr, aby zwrócić tylko te elementy nadrzędne, które pasują do tego parametru.

// Zwraca bezpośredni element nadrzędny elementu .box
$('.box').parent();

// Zwraca elementy wśród bezpośrednich elementów nadrzędnych elementów .box, które zawierają klasę .parent
$('.box').parent('.parent');

Pobiera kolekcję elementów przodków wszystkich elementów w bieżącej kolekcji.

Można przekazać selektor CSS jako parametr, aby zwrócić tylko te elementy przodków, które pasują do tego parametru.

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

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

Pobiera wszystkich przodków każdego elementu w bieżącej kolekcji, dopóki nie napotka elementu pasującego do pierwszego parametru (bez pasującego elementu).

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

Można przekazać drugi parametr, który musi być selektorem CSS, określając, że mają być zwrócone tylko te elementy, które pasują do tego parametru.

Jeśli nie określono parametrów, pasować będą wszyscy przodkowie, co daje ten sam efekt co .parents().

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

// Znajduje wszystkich przodków elementu .item, dopóki nie napotka elementu .parent
$('.item').parentsUntil('.parent');

// Pobiera wszystkich przodków elementu .item, którzy są elementami div, dopóki nie napotka elementu .parent
$('.item').parentsUntil('.parent', 'div');

Pobiera kolekcję składającą się z poprzedniego rodzeństwa każdego elementu w bieżącej kolekcji.

Można przekazać selektor CSS jako parametr, aby pobrać tylko kolekcję rodzeństwa pasującego do tego parametru.

// Pobiera kolekcję elementów poprzedzających elementy .box
$('.box').prev();

// Pobiera kolekcję elementów div poprzedzających elementy .box
$('.box').prev('div');

Pobiera kolekcję składającą się ze wszystkich elementów rodzeństwa poprzedzających każdy element w bieżącej kolekcji.

Można przekazać selektor CSS jako parametr, aby pobrać tylko kolekcję rodzeństwa pasującego do tego parametru.

// Pobiera wszystkie elementy rodzeństwa poprzedzające element .box
$('.box').prevAll();

// Pobiera wszystkie elementy rodzeństwa poprzedzające element .box, które zawierają klasę .selected
$('.box').prevAll('.selected');

Pobiera wszystkie elementy rodzeństwa poprzedzające każdy element w bieżącej kolekcji, dopóki nie napotka elementu pasującego do pierwszego parametru (bez pasującego elementu).

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

Można przekazać drugi parametr, który musi być selektorem CSS, określając, że mają być zwrócone tylko te elementy, które pasują do tego parametru.

// Pobiera wszystkie elementy rodzeństwa poprzedzające element .box
$('.box').prevUntil();

// Pobiera wszystkie elementy rodzeństwa poprzedzające element .box, dopóki nie napotka elementu .until
$('.box').prevUntil('.until');

// Pobiera elementy rodzeństwa div poprzedzające element .box, dopóki nie napotka elementu .until
$('.box').prevUntil('.until', 'div');

Pobiera kolekcję składającą się z następnego rodzeństwa każdego elementu w bieżącej kolekcji.

Można przekazać selektor CSS jako parametr, aby pobrać tylko kolekcję rodzeństwa pasującego do tego parametru.

// Pobiera kolekcję elementów następujących po elementach .box
$('.box').next();

// Pobiera kolekcję elementów div następujących po elementach .box
$('.box').next('div');

Pobiera kolekcję składającą się ze wszystkich elementów rodzeństwa następujących po każdym elemencie w bieżącej kolekcji.

Można przekazać selektor CSS jako parametr, aby pobrać tylko kolekcję rodzeństwa pasującego do tego parametru.

// Pobiera wszystkie elementy rodzeństwa następujące po elemencie .box
$('.box').nextAll();

// Pobiera wszystkie elementy rodzeństwa następujące po elemencie .box, które zawierają klasę .selected
$('.box').nextAll('.selected');

Pobiera wszystkie elementy rodzeństwa następujące po każdym elemencie w bieżącej kolekcji, dopóki nie napotka elementu pasującego do pierwszego parametru (bez pasującego elementu).

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

Można przekazać drugi parametr, który musi być selektorem CSS, określając, że mają być zwrócone tylko te elementy, które pasują do tego parametru.

// Pobiera wszystkie elementy rodzeństwa następujące po elemencie .box
$('.box').nextUntil();

// Pobiera wszystkie elementy rodzeństwa następujące po elemencie .box, dopóki nie napotka elementu .until
$('.box').nextUntil('.until');

// Pobiera elementy rodzeństwa div następujące po elemencie .box, dopóki nie napotka elementu .until
$('.box').nextUntil('.until', 'div');

Dopasowuje od bieżącego elementu w górę przez przodków, zwracając pierwszy pasujący element.

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

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

Pobiera rodzeństwo każdego elementu w bieżącej kolekcji.

Można przekazać selektor CSS jako parametr, aby pobrać tylko to rodzeństwo, które pasuje do tego parametru.

// Pobiera całe rodzeństwo elementu .box
$('.box').siblings();

// Pobiera te elementy z rodzeństwa elementu .box, które zawierają klasę .selected
$('.box').siblings('.selected');

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 zawierające klasę .selected do bieżącej kolekcji
$('.box').add('.selected');

Usuwa wszystkie elementy podrzędne z bieżących elementów.

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

Usuwa elementy z bieżącej kolekcji z drzewa DOM.

Można przekazać selektor CSS jako parametr, aby usunąć tylko te elementy, które pasują do tego parametru.

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

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

Wstawia określone treści na początku wnętrza elementów bieżącej kolekcji.

Typem parametru może być ciąg HTML, element DOM, tablica elementów DOM lub obiekt JQ. Obsługiwane jest przekazywanie wielu parametrów.

Można również przekazać funkcję zwrotną zwracającą ciąg HTML, element DOM, tablicę elementów DOM lub obiekt JQ. Pierwszym parametrem funkcji jest indeks bieżącego elementu, drugim jest oryginalny HTML elementu, this w funkcji wskazuje na bieżący element.

Ta metoda zwraca oryginalną kolekcję.

// Wstawia jeden element
$('<p>I would like to say: </p>').prepend('<b>Hello</b>');
// Wynik:<p><b>Hello</b>I would like to say: </p>

// Wstawia wiele elementów
$('<p>I would like to say: </p>').prepend('<b>Hello</b>', '<b>World</b>');
// Wynik:<p><b>Hello</b><b>World</b>I would like to say: </p>

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

Dołącza elementy bieżącej kolekcji na początku wnętrza określonych elementów.

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

Ta metoda zwraca oryginalną kolekcję.

$('<div>Hello</div>').prependTo('<div>I would like to say: </div>');

// Wynik:[ <div><div>Hello</div>I would like to say: </div> ]

Wstawia określone treści na końcu wnętrza elementów bieżącej kolekcji.

Typem parametru może być ciąg HTML, element DOM, tablica elementów DOM lub obiekt JQ. Obsługiwane jest przekazywanie wielu parametrów.

Można również przekazać funkcję zwrotną zwracającą ciąg HTML, element DOM, tablicę elementów DOM lub obiekt JQ. Pierwszym parametrem funkcji jest indeks bieżącego elementu, drugim jest oryginalny HTML elementu, this w funkcji wskazuje na bieżący element.

Ta metoda zwraca oryginalną kolekcję.

// Wstawia jeden element
$('<p>I would like to say: </p>').append('<b>Hello</b>');
// Wynik:<p>I would like to say: <b>Hello</b></p>

// Wstawia wiele elementów
$('<p>I would like to say: </p>').append('<b>Hello</b>', '<b>World</b>');
// Wynik:<p>I would like to say: <b>Hello</b><b>World</b></p>

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

Dołącza elementy bieżącej kolekcji na końcu wnętrza określonych elementów.

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

Ta metoda zwraca oryginalną kolekcję.

$('<div>Hello</div>').appendTo('<div>I would like to say: </div>')
// Wynik:<div>I would like to say: <div>Hello</div></div>

Wstawia określone treści po elementach bieżącej kolekcji jako ich rodzeństwo.

Typem parametru może być ciąg HTML, element DOM, tablica elementów DOM lub obiekt JQ. Obsługiwane jest przekazywanie wielu parametrów.

Można również przekazać funkcję zwrotną zwracającą ciąg HTML, element DOM, tablicę elementów DOM lub obiekt JQ. Pierwszym parametrem funkcji jest indeks bieżącego elementu, drugim jest oryginalny HTML elementu, this w funkcji wskazuje na bieżący element.

Ta metoda zwraca oryginalną kolekcję.

// Wstawia jeden element
$('<p>I would like to say: </p>').after('<b>Hello</b>')
// Wynik:<p>I would like to say: </p><b>Hello</b>

// Wstawia wiele elementów
$('<p>I would like to say: </p>').after('<b>Hello</b>', '<b>World</b>')
// Wynik:<p>I would like to say: </p><b>Hello</b><b>World</b>

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

Wstawia elementy bieżącej kolekcji po elementach docelowych jako ich rodzeństwo.

Jeśli elementy w bieżącej kolekcji już istnieją na stronie, zostaną przeniesione, a nie skopiowane. Jeśli istnieje wiele celów, elementy w bieżącej kolekcji zostaną sklonowane i dodane po każdym elemencie docelowym.

Można przekazać ciąg HTML, selektor CSS, element DOM, tablicę elementów DOM lub obiekt JQ jako parametr, aby określić elementy docelowe.

$('<b>Hello</b>').insertAfter('<p>I would like to say: </p>');
// Wynik:<p>I would like to say: </p><b>Hello</b>

Wstawia określone treści przed elementami bieżącej kolekcji jako ich rodzeństwo.

Typem parametru może być ciąg HTML, element DOM, tablica elementów DOM lub obiekt JQ. Obsługiwane jest przekazywanie wielu parametrów.

Można również przekazać funkcję zwrotną zwracającą ciąg HTML, element DOM, tablicę elementów DOM lub obiekt JQ. Pierwszym parametrem funkcji jest indeks bieżącego elementu, drugim jest oryginalny HTML elementu, this w funkcji wskazuje na bieżący element.

Ta metoda zwraca oryginalną kolekcję.

// Wstawia jeden element
$('<p>I would like to say: </p>').before('<b>Hello</b>')
// Wynik:<b>Hello</b><p>I would like to say: </p>

// Wstawia wiele elementów
$('<p>I would like to say: </p>').before('<b>Hello</b>', '<b>World</b>')
// Wynik:<b>Hello</b><b>World</b><p>I would like to say: </p>

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

Wstawia elementy bieżącej kolekcji przed elementami docelowymi jako ich rodzeństwo.

Jeśli elementy w bieżącej kolekcji już istnieją na stronie, zostaną przeniesione, a nie skopiowane. Jeśli istnieje wiele celów, elementy w bieżącej kolekcji zostaną sklonowane i dodane przed każdym elementem docelowym.

Można przekazać ciąg HTML, selektor CSS, element DOM, tablicę elementów DOM lub obiekt JQ jako parametr, aby określić elementy docelowe.

$('<p>I would like to say: </p>').insertBefore('<b>Hello</b>');
// Wynik:<p>I would like to say: </p><b>Hello</b>

Zastępuje elementy w bieżącej kolekcji określonymi elementami.

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

Można również przekazać funkcję zwrotną zwracającą ciąg HTML, element DOM, tablicę elementów DOM lub obiekt JQ. Pierwszym parametrem funkcji jest indeks bieżącego elementu, drugim jest oryginalny HTML elementu, this w funkcji wskazuje na bieżący element.

Ta metoda zwraca oryginalną kolekcję, czyli kolekcję, która została zastąpiona.

// Zastępuje wszystkie elementy .box za pomocą <p>Hello</p>
$('.box').replaceWith('<p>Hello</p>');

// Zastępuje wszystkie elementy .box wartością zwracaną przez funkcję zwrotną
$('.box').replaceWith(function (index, oldHTML) {
  return oldHTML + index;
});

Zastępuje określone elementy elementami z bieżącej kolekcji.

Parametrem jest selektor CSS, element DOM, tablica elementów DOM lub obiekt JQ.

Ta metoda zwraca oryginalną kolekcję, czyli kolekcję elementów użytych do zastąpienia.

// ${$t().a379}
$('.new').replaceAll('.box');

Kopiuje wszystkie elementy w kolekcji poprzez głębokie klonowanie.

Kopiuje wszystkie elementy w kolekcji poprzez głębokie klonowanie za pomocą natywnej metody cloneNode. Ta metoda nie kopiuje danych ani programów obsługi zdarzeń do nowych elementów. Różni się to od jQuery, gdzie parametr decyduje o tym, czy kopiować dane i programy obsługi zdarzeń.

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

Łączy wartości elementów formularza w tablicę par klucz-wartość składającą się z name i value.

Ta metoda może operować na pojedynczych elementach formularza lub na całym formularzu ${escape('

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

Serializuje wartości elementów formularza.

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

Wiąże funkcję obsługi zdarzeń dla określonego zdarzenia każdego elementu w kolekcji. Zobacz poniższe przykłady użycia:

// Wiązanie zdarzenia kliknięcia
$('.box').on('click', function (e) {
  console.log('Kliknięto element .box');
});

// Wiązanie wielu zdarzeń
$('.box').on('click focus', function (e) {
  console.log('Zdarzenia click i focus wywołają tę funkcję');
});

// Delegowanie zdarzeń
$(document).on('click', '.box', function (e) {
  console.log('Ta funkcja zostanie wywołana po kliknięciu .box');
});

// Wiązanie wielu zdarzeń i funkcji obsługi jednocześnie
$('.box').on({
  'click': function (e) {
    console.log('Wywołano zdarzenie click');
  },
  'focus': function (e) {
    console.log('Wywołano zdarzenie focus');
  }
});

// Przekazywanie parametrów
$('.box').on('click', { key1: 'value1', key2: 'value2' }, function (e) {
  console.log('Kliknięto element .box i przekazano parametry do funkcji obsługi zdarzeń');
  // e._data to {key1: 'value1', key2: 'value2'}
});

// Wiązanie wielu zdarzeń i funkcji obsługi jednocześnie oraz przekazywanie parametrów
$('.box').on({
  'click': function (e) {
    console.log('Wywołano zdarzenie click');
    // e._data to {key1: 'value1', key2: 'value2'}
  },
  'focus': function (e) {
    console.log('Wywołano zdarzenie focus');
    // e._data to {key1: 'value1', key2: 'value2'}
  }
}, { key1: 'value1', key2: 'value2' });

// Wiązanie zdarzeń poprzez delegowanie i przekazywanie parametrów
$(document).on('click', '.box', { key1: 'value1', key2: 'value2' }, function (e) {
  console.log('Kliknięto element .box i przekazano parametry do funkcji obsługi zdarzeń');
  // e._data to {key1: 'value1', key2: 'value2'}
});

// Wiązanie wielu zdarzeń i funkcji obsługi jednocześnie poprzez delegowanie
$(document).on({
  'click': function (e) {
    console.log('Wywołano zdarzenie click');
  },
  'focus': function (e) {
    console.log('Wywołano zdarzenie focus');
  }
}, '.box');

// Wiązanie wielu zdarzeń i funkcji obsługi jednocześnie poprzez delegowanie oraz przekazywanie parametrów
$(document).on({
  'click': function (e) {
    console.log('Wywołano zdarzenie click');
    // e._data to {key1: 'value1', key2: 'value2'}
  },
  'focus': function (e) {
    console.log('Wywołano zdarzenie focus');
    // e._data to {key1: 'value1', key2: 'value2'}
  }
}, '.box', { key1: 'value1', key2: 'value2' });

// Pobieranie parametrów zdarzenia
$('.box').on('click', function (e, data) {
  // data równa się e._detail
});

// Nazwy zdarzeń obsługują przestrzenie nazw
$('.box').on('click.myPlugin', function () {
  console.log('Kliknięto element .box');
});

Wiąże funkcję obsługi zdarzeń dla określonego zdarzenia każdego pasującego elementu. Zdarzenie zostanie jednak wywołane tylko raz.

Sposób użycia tej metody jest taki sam jak .on(), więc nie podajemy więcej przykładów.

Usuwa powiązanie zdarzeń dla każdego elementu w kolekcji. Zobacz poniższe przykłady użycia:

// Usuwanie powiązań wszystkich funkcji obsługi zdarzeń
$('.box').off();

// Usuwanie powiązania określonego zdarzenia
$('.box').off('click');

// Usuwanie powiązań wielu zdarzeń jednocześnie
$('.box').off('click focus');

// Usuwanie powiązania określonej funkcji obsługi zdarzeń
$('.box').off('click', callback);

// Usuwanie powiązania zdarzenia powiązanego poprzez delegowanie
$(document).off('click', '.box');

// Usuwanie powiązania określonej funkcji obsługi zdarzeń powiązanej poprzez delegowanie
$(document).off('click', '.box', callback);

// Usuwanie powiązań wielu funkcji obsługi jednocześnie
$('.box').off({
  'click': callback1,
  'focus': callback2,
});

// Usuwanie powiązań wielu funkcji obsługi powiązanych poprzez delegowanie jednocześnie
$(document).off({
  'click': callback1,
  'focus': callback2,
}, '.box');

// Nazwy zdarzeń obsługują przestrzenie nazw, poniższe użycie usunie powiązania wszystkich zdarzeń kończących się na .myPlugin
$(document).off('.myPlugin');

Wywołuje określone zdarzenie. Zobacz poniższe przykłady użycia:

// Wywołuje określone zdarzenie
$('.box').trigger('click');

// Przekazuje parametry podczas wywoływania zdarzenia
$('.box').trigger('click', { key1: 'value1', key2: 'value2' });

Ustawia globalne parametry konfiguracji dla żądań Ajax.

$.ajaxSetup({
  // Domyślnie wyłączone wywoływanie globalnych zdarzeń AJAX
  global: false,

  // Domiślnie używa żądania POST
  method: 'POST'
});

Szczegółowa lista parametrów znajduje się poniżej w sekcji Parametry AJAX.

Wysyła żądanie AJAX, zwraca Promise.

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

Szczegółowa lista parametrów znajduje się poniżej w sekcji Parametry AJAX.

Globalne zdarzenia AJAX.

Funkcja wykonywana po rozpoczęciu żądania AJAX.

$(document).ajaxStart(function (event, xhr, options) {
  // xhr: obiekt XMLHttpRequest
  // options: parametry konfiguracyjne żądania AJAX
});

Globalne zdarzenia AJAX.

Funkcja wykonywana po pomyślnym żądaniu AJAX.

$(document).ajaxSuccess(function (event, xhr, options, data) {
  // xhr: obiekt XMLHttpRequest
  // options: parametry konfiguracyjne żądania AJAX
  // data: dane zwrócone przez żądanie AJAX
});

Globalne zdarzenia AJAX.

Funkcja wykonywana, gdy wystąpi błąd w żądaniu AJAX.

$(document).ajaxError(function (event, xhr, options) {
  // xhr: obiekt XMLHttpRequest
  // options: parametry konfiguracyjne żądania AJAX
});

Globalne zdarzenia AJAX.

Funkcja wykonywana po zakończeniu żądania AJAX.

$(document).ajaxComplete(function (event, xhr, options) {
  // xhr: obiekt XMLHttpRequest
  // options: parametry konfiguracyjne żądania AJAX
});

Metoda żądania.

W tym: GET, POST, PUT, PATCH, HEAD, OPTIONS, DELETE

Dane dodawane do nagłówków (Headers). Wartość tę można nadpisać w funkcji zwrotnej beforeSend.

Pola o wartościach będących ciągami znaków lub null zostaną wysłane, a pola o wartości undefined zostaną usunięte.

Dane ustawiane w obiekcie XMLHttpRequest.

$.ajax({
  url: 'Adres URL innego origin (cross-domain)',
  xhrFields: {
    withCredentials: true
  }
});

Obiekt składający się z kodów stanu HTTP i funkcji.

$.ajax({
  statusCode: {
    404: function (xhr, textStatus) {
      alert('Wywoływane, gdy zwrócony kod stanu to 404');
    },
    200: function (data, textStatus, xhr) {
      alert('Wywoływane, gdy zwrócony kod stanu to 200');
    }
  }
});

Jeśli kod stanu mieści się w zakresie 200-299 lub wynosi 304, oznacza to sukces, a parametry funkcji są takie same jak w przypadku success; w przeciwnym razie oznacza to porażkę, a parametry są takie same jak w przypadku error.

Typ danych zwracanych przez serwer.

W tym: text, json

Wywoływane przed wysłaniem żądania. Jeśli zwróci false, żądanie AJAX zostanie anulowane.

$.ajax({
  beforeSend: function (xhr) {
    // xhr: obiekt XMLHttpRequest
  }
});

Wywoływane po pomyślnym zakończeniu żądania.

$.ajax({
  success: function (data, textStatus, xhr) {
    // data: dane zwrócone przez żądanie AJAX
    // textStatus: ciąg znaków zawierający kod sukcesu
    // xhr: obiekt XMLHttpRequest
  }
});

Wywoływane w przypadku błędu żądania.

$.ajax({
  error: function (xhr, textStatus) {
    // xhr: obiekt XMLHttpRequest
    // textStatus: ciąg znaków zawierający kod sukcesu
  }
});

Wywoływane po zakończeniu żądania.

$.ajax({
  complete: function (xhr, textStatus) {
    // xhr: obiekt XMLHttpRequest
    // textStatus: ciąg znaków zawierający kod sukcesu
  }
});

Wymusza ponowne odrysowanie (repaint) bieżącego elementu.

$('.box').reflow();

Ustawia właściwość transition-duration bieżącego elementu.

Może to być wartość czasu z jednostką lub bez. Jeśli nie podano jednostki, automatycznie zostanie dodane ms.

$('.box').transition(100);

Dodaje funkcję obsługi zdarzenia transitionend do bieżącego elementu.

Parametrem funkcji zwrotnej jest obiekt zdarzenia transitionend, this w funkcji wskazuje na bieżący element.

$('.box').transitionEnd(function () {
  console.log('Zdarzenie transitionend elementu .box zostało wywołane');
})

Ustawia właściwość transform bieżącego elementu.

$('.box').transform('rotate(90deg)')

Ustawia właściwość transform-origin bieżącego elementu.

$('.box').transformOrigin('top center')

Wykonuje funkcje inicjalizujące zarejestrowane w bieżącym elemencie i jego elementach podrzędnych.

$('[mdui-collapse]').mutation()

Tworzy i wyświetla nakładkę (overlay), zwracając obiekt JQ warstwy nakładki.

Można przekazać parametr będący liczbą całkowitą, określający styl z-index nakładki. Domyślnie wynosi 2000.

$.showOverlay();

Ukrywa warstwę nakładki.

Jeśli metoda $.showOverlay() została wywołana wielokrotnie w celu wyświetlenia nakładki, należy wywołać $.hideOverlay() tyle samo razy, aby ją ukryć. Można przekazać parametr true, aby wymusić ukrycie nakładki.

$.hideOverlay();

Blokuje stronę, uniemożliwiając jej przewijanie.

$.lockScreen();

Odblokowuje stronę.

Jeśli metoda $.lockScreen() została wywołana wielokrotnie w celu zablokowania strony, należy wywołać $.unlockScreen() tyle samo razy, aby odblokować stronę. Można przekazać parametr true, aby wymusić odblokowanie strony.

$.unlockScreen();

Dławienie funkcji (throttle).

Przyjmuje funkcję jako parametr; pierwszym parametrem jest funkcja do wykonania, drugim czas opóźnienia w milisekundach.

$.throttle(function () {
  console.log('Ta funkcja jest wykonywana co najwyżej raz na 100 ms');
}, 100)

Generuje globalnie unikalny identyfikator (ID).

$.guid();

Można przekazać parametr. Jeśli guid odpowiadający tej wartości nie istnieje, zostanie wygenerowany nowy guid i zwrócony. Jeśli guid już istnieje, jest on zwracany bezpośrednio.

// Poniższe dwie linie kodu zwracają tę samą wartość
$.guid('test');
$.guid('test');