JavaScript knihovna

Tato metoda má více způsobů použití:

Můžete předat CSS selektor jako parametr; vrací objekt JQ obsahující odpovídající prvky. Tato metoda je implementována pomocí querySelectorAll.

$('.box')

Můžete předat prvek DOM, libovolné pole, NodeList nebo objekt JQ; vrací objekt JQ obsahující zadané prvky.

$(document)

Můžete předat řetězec HTML; vrací objekt JQ obsahující prvky DOM vytvořené podle HTML.

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

Můžete předat funkci, která bude volána po načtení DOM.

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

Pokud je předán pouze jeden objekt, jeho vlastnosti budou sloučeny do objektu JQ, což odpovídá přidání nové funkčnosti do jmenného prostoru JQ.

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

// Poté můžete volat vlastní metodu takto:
$.customFunc()

Pokud jsou předány dva nebo více objektů, vlastnosti všech objektů jsou přidány do prvního objektu a vrací se sloučený objekt.

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

// V tomto okamžiku je první objekt i vrácená hodnota { key1: val1, key2: val2, key3: val3 }

Rozšiřuje metody v prototypu JQ.

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

// Poté můžete použít rozšířenou metodu takto:
$(document).customFunc()

Serializuje objekt nebo pole; vrací řetězec, který lze použít v parametrech 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

Pokud je předaný parametr pole, musí být formát tohoto pole v souladu s návratovým formátem .serializeArray():

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

Prochází pole nebo objekt. Návratová hodnota je první parametr, tj. procházené pole nebo objekt.

Prvním parametrem funkce je pozice indexu pole nebo klíč objektu; druhým parametrem je hodnota na odpovídající pozici v poli nebo objektu.

this ve zpětném volání ukazuje na hodnotu na odpovídající pozici v poli nebo objektu. Pokud zpětné volání vrátí false, procházení se zastaví.

// Procházení pole
$.each(['a', 'b', 'c'], function (index, value) {
  console.log(index + ':' + value);
})

// Výsledek:
// 0:a
// 1:b
// 2:c

// Procházení objektu
$.each({'name': 'mdui', 'lang': 'zh'}, function (key, value) {
  console.log(key + ':' + value);
})

// Výsledek:
// name:mdui
// lang:zh

Připojí prvky druhého pole k prvnímu poli a vrací sloučené pole.

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']

Odstraní duplicitní prvky z pole.

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

Prochází pole nebo objekt a vrací nové pole složené z návratových hodnot funkce.

Prvním parametrem funkce je hodnota na odpovídající pozici v poli nebo objektu, druhým parametrem je pozice indexu pole nebo klíč objektu.

Funkce může vrátit libovolnou hodnotu. Pokud je návratovou hodnotou funkce pole, bude rozbaleno; pokud je vrácena null nebo undefined, bude ignorována. this uvnitř funkce ukazuje na objekt window.

// Procházení pole
var result = $.map(['a', 'b', 'c'], function (value, index) {
  return index + value;
});
console.log(result); // ['0a', '1b', '2c']

// Pole vrácená zpětným voláním budou rozbalena
var result = $.map([1, 2, 3], function (value, index) {
  return [value, value + 1];
});
console.log(result); // [1, 2, 2, 3, 3, 4]

// Procházení objektu
var result = $.map({ name: 'mdui', password: '123456' }, function (value, key) {
  return key + ':' + value;
});
console.log(result); // ['name:mdui', 'password:123456']

Určuje, zda nadřazený uzel obsahuje podřazený uzel; vrací logickou hodnotu.

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

Pokud alespoň jeden prvek v kolekci odpovídá parametru, vrací true, jinak vrací false.

Parametr může být CSS selektor, prvek DOM, pole prvků DOM, objekt JQ nebo funkce zpětného volání.

Pokud je parametr funkcí, je prvním parametrem funkce pozice indexu, druhým parametrem je aktuální prvek a this ukazuje na aktuální prvek. Pokud funkce vrátí true, znamená to shodu; pokud vrátí false, znamená to neshodu.

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

// Určuje na základě návratové hodnoty funkce zpětného volání
$(document).is(function (index, element) {
  return element === document;
});
// true

Vrací počet prvků v aktuální kolekci.

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

Prochází aktuální kolekci a spustí funkci pro každý prvek. Pokud funkce vrátí false, procházení skončí.

Prvním parametrem funkce je pozice indexu prvku, druhým parametrem je aktuální prvek. this uvnitř funkce ukazuje na aktuální prvek.

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

Prochází aktuální kolekci a spustí funkci pro každý prvek; vrací novou kolekci složenou z návratových hodnot funkcí. Pokud funkce vrátí null nebo undefined, bude prvek odfiltrován.

Prvním parametrem funkce je pozice indexu prvku, druhým parametrem je aktuální prvek. this funkce ukazuje na aktuální prvek.

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

// result je objekt JQ složený z hodnot odpovídajících prvků

Vrací kolekci obsahující pouze prvek na zadané pozici indexu.

$('div').eq(0); // Vrací objekt JQ obsahující pouze první prvek.
$('div').eq(-1); // Vrací objekt JQ obsahující pouze poslední prvek.
$('div').eq(-2); // Vrací objekt JQ obsahující pouze předposlední prvek.

Vrací kolekci obsahující pouze první prvek.

$('div').first(); // Vrací objekt JQ obsahující pouze první div.

Vrací kolekci obsahující pouze poslední prvek.

$('div').last(); // Vrací objekt JQ obsahující pouze poslední div.

Vrací prvek na zadané pozici indexu. Pokud nejsou předány parametry, vrací pole obsahující všechny prvky v kolekci.

$('div').get(); // Vrací pole obsahující všechny div prvky.
$('div').get(0); // Vrací první div prvek.
$('div').get(-1); // Vrací poslední div prvek.

Pokud nejsou předány žádné parametry, vrací pozici indexu prvního prvku v kolekci vzhledem k jeho sourozencům.

Pokud je jako parametr předán CSS selektor, vrací pozici indexu prvního prvku v kolekci vzhledem k prvkům odpovídajícím selektoru.

Pokud je předán prvek DOM, vrací index tohoto prvku v kolekci.

Pokud je předán objekt JQ, vrací pozici indexu prvního prvku objektu v aktuální kolekci.

<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

Vrací podmnožinu aktuální kolekce.

Prvním parametrem je počáteční pozice podmnožiny, druhým parametrem je koncová pozice; pokud není druhý parametr předán, zahrnuje všechny prvky od počátku do konce.

// Vrací všechny prvky od třetího (včetně) v kolekci.
$('div').slice(3);

// Vrací prvky mezi třetím a pátým (včetně třetího, bez pátého) v kolekci.
$('div').slice(3, 5);

Odfiltruje prvky z aktuální kolekce, které odpovídají zadanému výrazu. Parametrem může být CSS selektor, prvek DOM, pole prvků DOM nebo funkce zpětného volání.

Pokud je parametrem funkce, prvním parametrem je pozice indexu, druhým parametrem je aktuální prvek a this v těle funkce ukazuje na aktuální prvek. Když funkce vrátí true, prvek zůstane, když vrátí false, prvek se odstraní.

// Vybere všechny div prvky obsahující třídu .box.
$('div').filter('.box');

// Vybere všechny zaškrtnuté volby.
$('#select option').filter(function (index, element) {
  return element.selected;
});

Odfiltruje prvky z aktuální kolekce, které neodpovídají zadanému výrazu. Parametrem může být CSS selektor, prvek DOM, pole prvků DOM nebo funkce zpětného volání.

Pokud je parametrem funkce, prvním parametrem je pozice indexu, druhým parametrem je aktuální prvek a this v těle funkce ukazuje na aktuální prvek. Když funkce vrátí true, prvek se odstraní, když vrátí false, prvek zůstane.

// Vybere všechny div prvky, které neobsahují třídu .box.
$('div').not('.box');

// Vybere všechny nezaškrtnuté volby.
$('#select option').not(function (index, element) {
  return element.selected;
});

Zjišťuje, zda první prvek v kolekci obsahuje zadanou CSS třídu.

// Zjišťuje, zda první div prvek obsahuje třídu .item.
$('div').hasClass('item')

Přidává CSS třídu každému prvku v kolekci; více názvů tříd lze oddělit mezerou.

Můžete také předat funkci, která vrací název CSS třídy. Prvním parametrem funkce je pozice indexu, druhým parametrem původní název třídy a this ukazuje na aktuální prvek.

// Přidá .item ke všem div prvkům.
$('div').addClass('item')

// Přidá .item1 a .item2 ke všem div prvkům.
$('div').addClass('item1 item2')

// Přidá CSS třídu vrácenou funkcí ke všem div prvkům.
$('div').addClass(function (index, currentClassName) {
  return currentClassName + '-' + index;
})

Odebírá CSS třídu z prvků v kolekci; více názvů tříd lze oddělit mezerou.

Můžete také předat funkci, která vrací název CSS třídy. Prvním parametrem funkce je pozice indexu, druhým parametrem původní název třídy a this ukazuje na aktuální prvek.

Pokud nejsou předány žádné parametry, bude atribut class přímo odstraněn.

// Odebere .item ze všech div prvků.
$('div').removeClass('item')

// Odebere .item1 a .item2 ze všech div prvků.
$('div').removeClass('item1 item2')

// Odebere CSS třídu vrácenou funkcí ze všech div prvkům.
$('div').removeClass(function (index, currentClassName) {
  return 'item';
})

// Přímo odeberte atribut třídy
$('div').removeClass()

Třídu CSS prvku, pokud existuje, odstraňte, pokud ne, přidejte. Více názvů tříd lze oddělit mezerou.

Můžete také předat funkci zpětného volání, která vrátí název třídy CSS. Prvním parametrem funkce je pozice indexu, druhým parametrem je původní název třídy CSS prvku, this v těle funkce ukazuje na aktuální prvek.

// Přepínejte .item na všech prvkích div
$('div').toggleClass('item')

// Přepínejte .item1 a .item2 na všech prvkích div
$('div').toggleClass('item1 item2')

// Přepínejte třídu CSS vrácenou zpětným voláním funkce na všech prvcích div
$('div').toggleClass(function (index, currentClassName) {
  return 'item';
})

Získejte hodnotu vlastnosti prvního prvku v kolekci.

// Získejte hodnotu vlastnosti prvního prvku
$('input').prop('checked');

Lze také nastavit hodnotu vlastnosti všech prvků v kolekci.

Nastavovaná hodnota vlastnosti může být návratová hodnota funkce zpětného volání. Prvním parametrem funkce zpětného volání je pozice indexu prvku, druhým parametrem je původní hodnota vlastnosti prvku, this v těle funkce ukazuje na aktuální prvek.

Pokud je hodnota vlastnosti nebo návratová hodnota funkce zpětného volání void nebo undefined, původní vlastnost nebude změněna.

Můžete také nastavit více vlastností současně předáním objektu.

// Nastavte hodnotu vlastnosti všech vybraných prvků
$('input').prop('checked', true);

// Nastavte hodnotu vlastnosti návratovou hodnotou funkce zpětného volání
$('input').prop('checked', function (index, oldPropValue) {
  return true;
});

// Nastavte více hodnot vlastnosti prvku současně
$('input').prop({
  checked: false,
  disabled: function (index, oldPropValue) {
    return true;
  }
});

Odstraňte zadanou hodnotu vlastnosti ze všech prvků v kolekci.

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

Získejte hodnotu vlastnosti prvního prvku v kolekci.

// Získejte hodnotu vlastnosti prvního prvku
$('div').attr('username');

Lze také nastavit hodnotu vlastnosti všech prvků v kolekci.

Nastavovaná hodnota vlastnosti může být návratová hodnota funkce zpětného volání. Prvním parametrem funkce zpětného volání je pozice indexu prvku, druhým parametrem je původní hodnota vlastnosti prvku, this v těle funkce ukazuje na aktuální prvek.

Pokud je hodnota vlastnosti nebo návratová hodnota funkce zpětného volání void nebo undefined, původní vlastnost nebude změněna. Pokud je hodnota vlastnosti nebo návratová hodnota funkce zpětného volání null, zadaná vlastnost bude odstraněna.

Můžete také nastavit více vlastností současně předáním objektu.

// Nastavte hodnotu vlastnosti všech vybraných prvků
$('div').attr('username', 'mdui');

// Nastavte hodnotu vlastnosti návratovou hodnotou funkce zpětného volání
$('div').attr('username', function (index, oldAttrValue) {
  return 'mdui';
});

// Nastavte více hodnot vlastnosti prvku současně
$('div').attr({
  username: 'mdui',
  lastname: function (index, oldAttrValue) {
    return 'test';
  }
});

Odstraňte zadanou hodnotu vlastnosti ze všech prvků v kolekci, více názvů vlastností lze oddělit mezerou.

// Odstraňte jednu vlastnost ze všech prvků v kolekci
$('div').removeAttr('username');

// Odstraňte více vlastností ze všech prvků v kolekci
$('div').removeAttr('username lastname');

Získejte hodnotu prvního prvku v kolekci.

Pokud je prvkem <select multiple="multiple">, vrátí se pole obsahující každou vybranou možnost.

// Získejte hodnotu prvního vybraného prvku
$('#input').val();

Lze také nastavit hodnotu všech prvků v kolekci.

Nastavovaná hodnota může být řetězec, číslo, pole řetězců, funkce zpětného volání.

Pokud je hodnota funkcí zpětného volání, prvním parametrem funkce je pozice indexu prvku, druhým parametrem je původní hodnota prvku, this v těle funkce ukazuje na aktuální prvek.

Pokud je prvkem <input type="checkbox">, <input type="radio">, <option>, hodnota prvku nebo návratová hodnota funkce může být pole, v tomto případě budou vybrány prvky, jejichž hodnota je v poli, a budou zrušeny prvky, jejichž hodnota není v poli.

Pokud je hodnota nebo návratová hodnota funkce undefined, bude hodnota prvku nastavena na prázdno.

// Nastavte hodnotu vybraného prvku
$('#input').val('input value');

// Nastavte hodnotu prvku návratovou hodnotou funkce zpětného volání
$('#input').val(function (index, oldValue) {
  return 'new value';
});

Získejte textový obsah všech prvků v kolekci (včetně jejich potomků)

// Získejte text všech prvků .box
$('.box').text();

Lze také nastavit text všech prvků v kolekci.

Nastavovaná hodnota může být řetězec, číslo, logická hodnota, funkce zpětného volání.

Pokud se jedná o funkci zpětného volání, prvním parametrem je pozice indexu prvku, druhým parametrem je původní textový obsah prvku, this v těle funkce ukazuje na aktuální prvek.

Pokud je nastavovaná hodnota nebo návratová hodnota funkce zpětného volání undefined, textový obsah odpovídajícího prvku se nezmění.

// Nastavte textový obsah vybraného prvku
$('.box').text('text content');

// Nastavte textový obsah prvku návratovou hodnotou funkce zpětného volání
$('.box').text(function (index, oldTextContent) {
  return 'new text content';
});

Získejte obsah HTML prvního prvku v kolekci.

// Získejte obsah HTML prvního prvku .box
$('.box').html();

Lze také nastavit obsah HTML všech prvků v kolekci.

Nastavovaná hodnota může být řetězec HTML, prvek DOM, funkce zpětného volání.

Pokud se jedná o funkci zpětného volání, prvním parametrem je pozice indexu prvku, druhým parametrem je původní obsah HTML prvku, this v těle funkce ukazuje na aktuální prvek.

Pokud je nastavovaná hodnota nebo návratová hodnota funkce zpětného volání undefined, HTML prvku nebude změněn.

// Nastavte HTML vybraného prvku
$('.box').html('<div>new html content</div>');

// Nastavte obsah HTML prvku návratovou hodnotou funkce zpětného volání
$('.box').html(function (index, oldHTMLContent) {
  return '<div>new html content</div>';
});

Čtení nebo ukládání dat na zadaný prvek.

Při ukládání dat, pokud je hodnota undefined, je to ekvivalentní čtení dat na prvku. To znamená, že $.data(element, 'key', undefined) a $.data(element, 'key') jsou ekvivalentní.

Poznámka: Tato metoda nezkontroluje atribut data-* na prvku.

// Uložit data na zadaný prvek, vrátit uloženou hodnotu
$.data(document.body, 'layout', 'dark'); // Vrátit dark

// Uložit více dat na zadaný prvek současně
$.data(document.body, {
  primary: 'indigo',
  accent: 'pink',
});

// Získat data uložená na zadaném prvku
$.data(document.body, 'layout'); // Vrátit dark

// Získat všechna data uložená na zadaném prvku
$.data(document.body); // Vrátit { layout: 'dark', primary: 'indigo', accent: 'pink' }

Odstraňte data uložená na zadaném prvku.

Více názvů klíčů lze oddělit mezerou, nebo je lze reprezentovat jako pole. Pokud není určen název klíče, budou odstraněna všechna data na prvku.

// Odstraňte data s názvem klíče name na prvku
$.removeData(document.body, 'name');

// Odstraňte data s názvy klíčů name1 a name2 na prvku. Následující dva způsoby jsou ekvivalentní:
$.removeData(document.body, 'name1 name2');
$.removeData(document.body, ['name1', 'name2']);

// Odstraňte všechna data uložená na prvku
$.removeData(document.body);

Čtení nebo ukládání dat na prvky v aktuální kolekci.

Při ukládání dat, pokud je hodnota undefined, nebudou uložena.

Poznámka: Data vrácená touto metodou budou obsahovat atribut data-* na prvku.

// Uložit data na prvky v aktuální kolekci
$('.box').data('layout', 'dark');

// Uložit více dat na prvky v aktuální kolekci současně
$('.box').data({
  primary: 'indigo',
  accent: 'pink',
});

// Získat zadaná data uložená na prvním prvku v aktuální kolekci
$('.box').data('layout'); // Vrátit dark

// Získat všechna data uložená na prvním prvku v aktuální kolekci
$('.box').data(); // Vrátit { layout: 'dark', primary: 'indigo', accent: 'pink' }

Odstraňte data uložená na prvky v aktuální kolekci.

Více názvů klíčů lze oddělit mezerou, nebo je lze reprezentovat jako pole. Pokud není určen název klíče, budou odstraněna všechna data na prvku.

Poznámka: Tato metoda odstraní pouze data nastavená metodou .data(), neodstraní data na atributu data-*.

// Odstraňte data s názvem klíče name
$('.box').removeData('name');

// Odstraňte data s názvy klíčů name1 a name2. Následující dva způsoby jsou ekvivalentní:
$('.box').removeData('name1 name2');
$('.box').removeData(['name1', 'name2']);

// Odstraňte všechna data uložená na prvku
$('.box').removeData();

Získejte hodnotu vlastnosti CSS prvního prvku v kolekci.

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

Lze také nastavit hodnotu vlastnosti CSS všech prvků v kolekci.

Hodnota vlastnosti může být řetězec, číslo, nebo funkce zpětného volání, která vrací řetězec nebo číslo.

Pokud je hodnota vlastnosti funkcí zpětného volání, prvním parametrem funkce je pozice indexu prvku, druhým parametrem je původní hodnota vlastnosti CSS prvku, this v těle funkce ukazuje na aktuální prvek.

Pokud je hodnota vlastnosti nebo návratová hodnota funkce zpětného volání void, undefined, null, hodnota vlastnosti CSS aktuálního prvku se nezmění.

Pokud je hodnota vlastnosti nebo návratová hodnota funkce zpětného volání číslo, bude automaticky přidán px jako jednotka. Pokud tato vlastnost nemůže používat px jako jednotku, bude hodnota přímo převedena na řetězec.

Můžete také nastavit více vlastností CSS předáním objektu páru klíč-hodnota.

// Nastavte hodnotu stylu všech prvků v kolekci
$('.box').css('color', 'red')

// Nastavte hodnotu stylu všech prvků návratovou hodnotou funkce zpětného volání
$('.box').css('color', function (index, oldCSSValue) {
  return 'green';
});

// Nastavte více stylů předáním objektu
$('.box').css({
  'background-color': 'white',
  color: function (index, oldCSSValue) {
    return 'blue';
  },
});

Získejte šířku prvního prvku v kolekci (v pixelech), bez šířky padding, border, margin.

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

Lze také nastavit šířku všech prvků v kolekci (bez šířky padding, border, margin).

Hodnota může být řetězec s jednotkou, číslo, nebo funkce zpětného volání, která vrací řetězec s jednotkou nebo číslo.

Prvním parametrem funkce zpětného volání je pozice indexu prvku, druhým parametrem je původní hodnota šířky prvku, this v těle funkce ukazuje na aktuální prvek.

Pokud je hodnota nebo návratová hodnota funkce zpětného volání číslo, bude automaticky přidán px jako jednotka.

Pokud je hodnota nebo návratová hodnota funkce zpětného volání null nebo undefined, šířka prvku se nezmění.

// Nastavte šířku všech prvků v kolekci
$('.box').width('20%');

// Pokud je hodnota číslo, je výchozí jednotkou px
$('.box').width(10);

// Nastavte šířku návratovou hodnotou funkce zpětného volání
$('.box').width(function (index, oldWidth) {
  return 10;
});

Získejte výšku prvního prvku v kolekci (v pixelech), bez výšky padding, border, margin.

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

Lze také nastavit výšku všech prvků v kolekci (bez výšky padding, border, margin).

Hodnota může být řetězec s jednotkou, číslo, nebo funkce zpětného volání, která vrací řetězec s jednotkou nebo číslo.

Prvním parametrem funkce zpětného volání je pozice indexu prvku, druhým parametrem je původní hodnota výšky prvku, this v těle funkce ukazuje na aktuální prvek.

Pokud je hodnota nebo návratová hodnota funkce zpětného volání číslo, bude automaticky přidán px jako jednotka.

Pokud je hodnota nebo návratová hodnota funkce zpětného volání null nebo undefined, výška prvku se nezmění.

// Nastavte výšku všech prvků v kolekci
$('.box').height('20%');

// Pokud je hodnota číslo, je výchozí jednotkou px
$('.box').height(10);

// Nastavte výšku návratovou hodnotou funkce zpětného volání
$('.box').height(function (index, oldHeight) {
  return 10;
});

Získejte šířku prvního prvku v kolekci (v pixelech), včetně padding, bez šířky border, margin.

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

Lze také nastavit šířku všech prvků v kolekci (včetně padding, bez šířky border, margin).

Hodnota může být řetězec s jednotkou, číslo, nebo funkce zpětného volání, která vrací řetězec s jednotkou nebo číslo.

Prvním parametrem funkce zpětného volání je pozice indexu prvku, druhým parametrem je původní hodnota šířky prvku, this v těle funkce ukazuje na aktuální prvek.

Pokud je hodnota nebo návratová hodnota funkce zpětného volání číslo, bude automaticky přidán px jako jednotka.

Pokud je hodnota nebo návratová hodnota funkce zpětného volání null nebo undefined, šířka prvku se nezmění.

// Nastavte šířku všech prvků v kolekci
$('.box').innerWidth('20%');

// Pokud je hodnota číslo, je výchozí jednotkou px
$('.box').innerWidth(10);

// Nastavte šířku návratovou hodnotou funkce zpětného volání
$('.box').innerWidth(function (index, oldWidth) {
  return 10;
});

Získejte výšku prvního prvku v kolekci (v pixelech), včetně padding, bez výšky border, margin.

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

Lze také nastavit výšku všech prvků v kolekci (včetně padding, bez výšky border, margin).

Hodnota může být řetězec s jednotkou, číslo, nebo funkce zpětného volání, která vrací řetězec s jednotkou nebo číslo.

Prvním parametrem funkce zpětného volání je pozice indexu prvku, druhým parametrem je původní hodnota výšky prvku, this v těle funkce ukazuje na aktuální prvek.

Pokud je hodnota nebo návratová hodnota funkce zpětného volání číslo, bude automaticky přidán px jako jednotka.

Pokud je hodnota nebo návratová hodnota funkce zpětného volání null nebo undefined, výška prvku se nezmění.

// Nastavte výšku všech prvků v kolekci
$('.box').innerHeight('20%');

// Pokud je hodnota číslo, je výchozí jednotkou px
$('.box').innerHeight(10);

// Nastavte výšku návratovou hodnotou funkce zpětného volání
$('.box').innerHeight(function (index, oldHeight) {
  return 10;
});

Získejte šířku prvního prvku v kolekci (v pixelech), včetně padding, border šířky, bez výšky margin, lze předat parametr true tak, aby šířka obsahovala margin.

// Včetně šířky padding, border
$('.box').outerWidth();

// Včetně šířky padding, border, margin
$('.box').outerWidth(true);

Lze také nastavit šířku všech prvků v kolekci (včetně padding, border, bez margin, lze v druhém parametru předat true, aby šířka obsahovala margin).

Prvním parametrem může být řetězec s jednotkou, číslo, nebo funkce zpětného volání, která vrací řetězec s jednotkou nebo číslo.

Prvním parametrem funkce zpětného volání je pozice indexu prvku, druhým parametrem je původní šířka prvku, this v těle funkce ukazuje na aktuální prvek.

Pokud je hodnota nebo návratová hodnota funkce zpětného volání číslo, bude automaticky přidán px jako jednotka.

Pokud je hodnota nebo návratová hodnota funkce zpětného volání null nebo undefined, šířka prvku se nezmění.

// Nastavte šířku všech prvků v kolekci
$('.box').outerWidth('20%');

// Pokud je hodnota číslo, je výchozí jednotkou px
$('.box').outerWidth(10);

// Pokud je druhý parametr true, šířka bude obsahovat margin
$('.box').outerWidth(10, true);

// Nastavte šířku návratovou hodnotou funkce zpětného volání
$('.box').outerWidth(function (index, oldWidth) {
  return 10;
});

Získejte výšku prvního prvku v kolekci (v pixelech), včetně padding, border, bez výšky margin, lze předat parametr true tak, aby výška obsahovala margin.

// Včetně výšky padding, border
$('.box').outerHeight();

// Včetně výšky padding, border, margin
$('.box').outerHeight(true);

Lze také nastavit výšku všech prvků v kolekci (včetně padding, border, bez margin, lze v druhém parametru předat true, aby výška obsahovala margin).

Prvním parametrem může být řetězec s jednotkou, číslo, nebo funkce zpětného volání, která vrací řetězec s jednotkou nebo číslo.

Prvním parametrem funkce zpětného volání je pozice indexu prvku, druhým parametrem je původní výška prvku, this v těle funkce ukazuje na aktuální prvek.

Pokud je hodnota nebo návratová hodnota funkce zpětného volání číslo, bude automaticky přidán px jako jednotka.

Pokud je hodnota nebo návratová hodnota funkce zpětného volání null nebo undefined, výška prvku se nezmění.

// Nastavte výšku všech prvků v kolekci
$('.box').outerHeight('20%');

// Pokud je hodnota číslo, je výchozí jednotkou px
$('.box').outerHeight(10);

// Pokud je druhý parametr true, výška bude obsahovat margin
$('.box').outerHeight(10, true);

// Nastavte výšku návratovou hodnotou funkce zpětného volání
$('.box').outerHeight(function (index, oldWidth) {
  return 10;
});

Skrýt všechny prvky v kolekci.

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

Zobrazit všechny prvky v kolekci.

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

Přepnutí stavu zobrazení všech prvků v kolekci.

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

Získejte souřadnice prvního prvku v kolekci vzhledem k document.

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

Lze také nastavit souřadnice všech prvků v kolekci vzhledem k document.

Parametr je objekt obsahující vlastnosti top a left, nebo funkce zpětného volání, která vrací objekt v tomto formátu.

Pokud je parametr funkcí zpětného volání, prvním parametrem je pozice indexu prvku, druhým parametrem jsou původní souřadnice prvku, this v těle funkce ukazuje na aktuální prvek.

Pokud je hodnota top nebo left v parametru undefined, odpovídající hodnota se nezmění.

// Nastavte souřadnice všech prvků v kolekci
$('.box').offset({ top: 20, left: 30 });

// Nastavte souřadnice prvku návratovou hodnotou funkce zpětného volání
$('.box').offset(function (index, oldOffset) {
  return { top: 20, left: 30 };
});

Vrátit nadřazený prvek prvního prvku v kolekci, který se používá pro umístění. To znamená, že prvním position rodičovského prvku s hodnotou relative nebo absolute je prvek.

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

Získejte posun prvního prvku v kolekci vzhledem k nadřazenému prvku.

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

Mezi všemi prvky v aktuální kolekci najděte posloupnost potomků uzlů určených selektorem CSS.

// Najděte prvky obsahující .box mezi potomky uzlu #box
$('#box').find('.box')

Mezi všemi prvky v aktuální kolekci získejte posloupnost přímých podřízených prvků.

Můžete předat selektor CSS jako parametr pro filtrování podřízených prvků.

// Najděte všechny přímé podřízené prvky #box
$('#box').children();

// Najděte všechny přímé podřízené prvky #box, které obsahují .box
$('#box').children('.box')

Mezi všemi prvky v aktuální kolekci filtrujte prvky obsahující zadané podřízené prvky.

Parametr může být selektor CSS nebo prvek DOM.

// Přidejte barvu pozadí do prvku li obsahujícího ul
$('li').has('ul').css('background-color', 'red');

Mezi všemi prvky v aktuální kolekci získejte posloupnost přímých nadřazených prvků.

Můžete předat selektor CSS jako parametr tak, aby se vrátily pouze nadřazené prvky, které odpovídají parametru.

// Vrátit přímý nadřazený prvek prvku .box
$('.box').parent();

// Vrátit přímý nadřazený prvek prvku .box, který obsahuje třídu .parent
$('.box').parent('.parent');

Mezi všemi prvky v aktuální kolekci získejte posloupnost všech předchůdců.

Můžete předat selektor CSS jako parametr tak, aby se vrátily pouze předchůdci, které selektor CSS odpovídá.

// Vrátit všechny předchůdce prvku span
$('span').parents();

// Vrátit všechny prvky span, které jsou předchůdci prvku span
$('span').parents('p');

Mezi všemi prvky v aktuální kolekci, získejte všechny prvky předka prvku, dokud se nesetkáte s prvkem, který odpovídá prvnímu parametru (bez zahrnutí porovnávaného prvku).

Prvním parametrem může být selektor CSS, prvek DOM, objekt JQ.

Můžete předat druhý parametr, který musí být selektor CSS, což znamená, že vrátí pouze prvky, které odpovídají parametru.

Pokud není určen parametr, budou všichni předchůdci odpovídát, což je stejné jako efekt .parents().

// Vrátit všechny předchůdce prvku .item
$('.item').parentsUntil();

// Najděte všechny předka prvku .item, dokud se nesetkáte s prvkem .parent
$('.item').parentsUntil('.parent');

// Vrátit všechny prvky div, které jsou předchůdci prvku .item, dokud se nesetkáte s prvkem .parent
$('.item').parentsUntil('.parent', 'div');

Získejte posloupnost předcházejícího prvku na stejné úrovni všech prvků v aktuální kolekci.

Můžete předat selektor CSS jako parametr, aby se vrátily pouze prvky stejné úrovně, které odpovídají parametru.

// Získejte posloupnost předchozího prvku prvku .box
$('.box').prev();

// Získejte posloupnost předchozího prvku div prvku .box
$('.box').prev('div');

Získejte posloupnost všech předcházejících prvků stejné úrovně všech prvků v aktuální kolekci.

Můžete předat selektor CSS jako parametr, aby se vrátily pouze prvky stejné úrovně, které odpovídají parametru.

// Získejte všechny předcházející prvky na stejné úrovni prvku .box
$('.box').prevAll();

// Získejte všechny předcházející prvky na stejné úrovni prvku .box, které obsahují .selected
$('.box').prevAll('.selected');

Mezi všemi prvky v aktuální kolekci, získejte všechny prvky stejné úrovně, které předcházejí prvku, dokud se nesetkáte s prvkem, který odpovídá prvnímu parametru (bez zahrnutí porovnávaného prvku).

Prvním parametrem může být selektor CSS, prvek DOM, objekt JQ.

Můžete předat druhý parametr, který musí být selektor CSS, což znamená, že vrátí pouze prvky, které odpovídají parametru.

// Získejte všechny předcházející prvky na stejné úrovni prvku .box
$('.box').prevUntil();

// Získejte všechny předcházející prvky na stejné úrovni prvku .box, dokud se nesetkáte s prvkem .until
$('.box').prevUntil('.until');

// Získejte všechny předcházející prvky div na stejné úrovni prvku .box, dokud se nesetkáte s prvkem .until
$('.box').prevUntil('.until', 'div');

Získejte posloupnost následujícího prvku na stejné úrovni všech prvků v aktuální kolekci.

Můžete předat selektor CSS jako parametr, aby se vrátily pouze prvky stejné úrovně, které odpovídají parametru.

// Získejte posloupnost následujícího prvku prvku .box
$('.box').next();

// Získejte posloupnost následujícího prvku div prvku .box
$('.box').next('div');

Získejte posloupnost všech následujících prvků stejné úrovně všech prvků v aktuální kolekci.

Můžete předat selektor CSS jako parametr, aby se vrátily pouze prvky stejné úrovně, které odpovídají parametru.

// Získejte všechny následující prvky na stejné úrovni prvku .box
$('.box').nextAll();

// Získejte všechny následující prvky na stejné úrovni prvku .box, které obsahují .selected
$('.box').nextAll('.selected');

Mezi všemi prvky v aktuální kolekci, získejte všechny prvky stejné úrovně, které následují prvku, dokud se nesetkáte s prvkem, který odpovídá prvnímu parametru (bez zahrnutí porovnávaného prvku).

Prvním parametrem může být selektor CSS, prvek DOM, objekt JQ.

Můžete předat druhý parametr, který musí být selektor CSS, což znamená, že vrátí pouze prvky, které odpovídají parametru.

// Získejte všechny následující prvky na stejné úrovni prvku .box
$('.box').nextUntil();

// Získejte všechny následující prvky na stejné úrovni prvku .box, dokud se nesetkáte s prvkem .until
$('.box').nextUntil('.until');

// Získejte všechny následující prvky div na stejné úrovni prvku .box, dokud se nesetkáte s prvkem .until
$('.box').nextUntil('.until', 'div');

Porovnávejte postupně nahoru od aktuálního prvku a vraťte první nalezený odpovídající prvek.

Parametr může být selektor CSS, prvek DOM, objekt JQ.

// Vrátit nejbližší prvek .parent v nadřazených prvcích prvku .box
$('.box').closest('.parent');

Mezi všemi prvky v aktuální kolekci získejte všechny prvky na stejné úrovni.

Můžete předat selektor CSS jako parametr, aby se vrátily pouze prvky stejné úrovně, které odpovídají parametru.

// Vrátit všechny prvky na stejné úrovni prvku .box
$('.box').siblings();

// Vrátit všechny prvky na stejné úrovni prvku .box, které obsahují .selected
$('.box').siblings('.selected');

Přidejte prvek do aktuální kolekce.

Parametr může být řetězec HTML, selektor CSS, objekt JQ, prvek DOM, pole prvků DOM, NodeList.

// Přidejte prvky obsahující .selected do aktuální kolekce
$('.box').add('.selected');

Odeberte všechny podřízené prvky z aktuálního prvku.

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

Odeberte prvky v aktuální kolekci z DOM.

Můžete předat selektor CSS jako parametr, aby se odstraňovaly pouze prvky, které odpovídají parametru.

// Odeberte všechny prvky p
$('p').remove();

// Odeberte všechny prvky p, které obsahují .box
$('p').remove('.box');

Vložte zadaný obsah před vnitřek prvků v aktuální kolekci.

Typ parametru může být řetězec HTML, prvek DOM, pole prvků DOM, objekt JQ. Podporuje předání více parametrů.

Můžete také předat funkci zpětného volání, která vrací řetězec HTML, prvek DOM, pole prvků DOM, objekt JQ, prvním parametrem funkce je pozice indexu aktuálního prvku, druhým parametrem je původní HTML prvku, this v těle funkce ukazuje na aktuální prvek.

Tato metoda vrátí původní kolekci.

// Vložte prvek
$('<p>I would like to say: </p>').prepend('<b>Hello</b>');
// Výsledek:<p><b>Hello</b>I would like to say: </p>

// Vložte více prvků
$('<p>I would like to say: </p>').prepend('<b>Hello</b>', '<b>World</b>');
// Výsledek:<p><b>Hello</b><b>World</b>I would like to say: </p>

// Vložte prvek prostřednictvím funkce zpětného volání
$('<p>Hello</p>').prepend(function (index, oldHTML) {
  return '<b>' + oldHTML + index + '</b>';
});
// Výsledek:<p><b>Hello0</b>Hello</p>

Připojte prvky v aktuální kolekci před vnitřek zadaného prvku.

Parametr může být selektor CSS, řetězec HTML, prvek DOM, pole prvků DOM, objekt JQ.

Tato metoda vrátí původní kolekci.

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

// Výsledek:[ <div><div>Hello</div>I would like to say: </div> ]

Vložte zadaný obsah za vnitřek prvků v aktuální kolekci.

Typ parametru může být řetězec HTML, prvek DOM, pole prvků DOM, objekt JQ. Podporuje předání více parametrů.

Můžete také předat funkci zpětného volání, která vrací řetězec HTML, prvek DOM, pole prvků DOM, objekt JQ, prvním parametrem funkce je pozice indexu aktuálního prvku, druhým parametrem je původní HTML prvku, this v těle funkce ukazuje na aktuální prvek.

Tato metoda vrátí původní kolekci.

// Vložte prvek
$('<p>I would like to say: </p>').append('<b>Hello</b>');
// Výsledek:<p>I would like to say: <b>Hello</b></p>

// Vložte více prvků
$('<p>I would like to say: </p>').append('<b>Hello</b>', '<b>World</b>');
// Výsledek:<p>I would like to say: <b>Hello</b><b>World</b></p>

// Vložte prvek prostřednictvím funkce zpětného volání
$('<p>Hello</p>').append(function (index, oldHTML) {
  return '<b>' + oldHTML + index + '</b>';
});
// Výsledek:<p>Hello<b>Hello0</b></p>

Připojte prvky v aktuální kolekci za vnitřek zadaného prvku.

Parametr může být selektor CSS, řetězec HTML, prvek DOM, pole prvků DOM, objekt JQ.

Tato metoda vrátí původní kolekci.

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

Vložte zadaný obsah za prvky v aktuální kolekci jako prvky na stejné úrovni.

Typ parametru může být řetězec HTML, prvek DOM, pole prvků DOM, objekt JQ. Podporuje předání více parametrů.

Můžete také předat funkci zpětného volání, která vrací řetězec HTML, prvek DOM, pole prvků DOM, objekt JQ, prvním parametrem funkce je pozice indexu aktuálního prvku, druhým parametrem je původní HTML prvku, this v těle funkce ukazuje na aktuální prvek.

Tato metoda vrátí původní kolekci.

// Vložte prvek
$('<p>I would like to say: </p>').after('<b>Hello</b>')
// Výsledek:<p>I would like to say: </p><b>Hello</b>

// Vložte více prvků
$('<p>I would like to say: </p>').after('<b>Hello</b>', '<b>World</b>')
// Výsledek:<p>I would like to say: </p><b>Hello</b><b>World</b>

// Vložte prvek prostřednictvím funkce zpětného volání
$('<p>Hello</p>').after(function (index, oldHTML) {
  return '<b>' + oldHTML + index + '</b>';
});
// Výsledek:<p>Hello</p><b>Hello0</b>

Vložte prvky v aktuální kolekci za cílový prvek jako prvky na stejné úrovni.

Pokud je prvek v aktuální kolekci již prvkem na stránce, prvek se přesune, nikoli se nekopíruje. Pokud existuje více cílů, prvky v aktuální kolekci budou naklonované a přidané za každý cílový prvek.

Můžete předat řetězec HTML, selektor CSS, prvek DOM, pole prvků DOM, objekt JQ jako parametr k určení cílového prvku.

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

Vložte zadaný obsah před prvky v aktuální kolekci jako prvky na stejné úrovni.

Typ parametru může být řetězec HTML, prvek DOM, pole prvků DOM, objekt JQ. Podporuje předání více parametrů.

Můžete také předat funkci zpětného volání, která vrací řetězec HTML, prvek DOM, pole prvků DOM, objekt JQ, prvním parametrem funkce je pozice indexu aktuálního prvku, druhým parametrem je původní HTML prvku, this v těle funkce ukazuje na aktuální prvek.

Tato metoda vrátí původní kolekci.

// Vložte prvek
$('<p>I would like to say: </p>').before('<b>Hello</b>')
// Výsledek:<b>Hello</b><p>I would like to say: </p>

// Vložte více prvků
$('<p>I would like to say: </p>').before('<b>Hello</b>', '<b>World</b>')
// Výsledek:<b>Hello</b><b>World</b><p>I would like to say: </p>

// Vložte prvek prostřednictvím funkce zpětného volání
$('<p>Hello</p>').before(function (index, oldHTML) {
  return '<b>' + oldHTML + index + '</b>';
});
// Výsledek:<b>Hello0</b><p>Hello</p>

Vložte prvky v aktuální kolekci před cílový prvek jako prvky na stejné úrovni.

Pokud je prvek v aktuální kolekci již prvkem na stránce, prvek se přesune, nikoli se nekopíruje. Pokud existuje více cílů, prvky v aktuální kolekci budou naklonované a přidané za každý cílový prvek.

Můžete předat řetězec HTML, selektor CSS, prvek DOM, pole prvků DOM, objekt JQ jako parametr k určení cílového prvku.

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

Nahraďte prvky v aktuální kolekci zadaným prvkem.

Parametr může být řetězec HTML, prvek DOM, pole prvků DOM, objekt JQ.

Můžete také předat funkci zpětného volání, která vrací řetězec HTML, prvek DOM, pole prvků DOM, objekt JQ, prvním parametrem funkce je pozice indexu aktuálního prvku, druhým parametrem je původní HTML prvku, this v těle funkce ukazuje na aktuální prvek.

Tato metoda vrátí původní kolekci, tj. nahrazenou kolekci.

// Nahraďte všechny prvky .box s <p>Hello</p>
$('.box').replaceWith('<p>Hello</p>');

// Nahraďte všechny prvky .box s návratovou hodnotou funkce zpětného volání
$('.box').replaceWith(function (index, oldHTML) {
  return oldHTML + index;
});

Nahraďte zadané prvky prvky v aktuální kolekci.

Parametr je selektor CSS, prvek DOM, pole prvků DOM, objekt JQ.

Tato metoda vrátí původní kolekci, tj. kolekci prvků, které mají být použity pro nahrazení.

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

Duplikujte všechny prvky v kolekci prostřednictvím hlubokého klonování.

Duplikujte všechny prvky v kolekci prostřednictvím nativní metody cloneNode s hlubokým klonováním. Tato metoda nekopíruje data a obslužné programy událostí do nového prvku. To se liší od jQuery, který určuje, zda se data a obslužné programy událostí kopírují prostřednictvím parametrů.

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

Zkombinujte hodnoty prvků formuláře do pole složeného z párů klíč-hodnota name a value.

Tato metoda se může použít na jednotlivé prvky formuláře, nebo se může použít na celý prvek <form>

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

Serializace hodnot prvků formuláře.

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

Vázaná funkce obslužného programu událostí pro určitou událost pro každý prvek v kolekci. Podrobné příklady použití viz níže:

// Záznam kliknutí na událost
$('.box').on('click', function (e) {
  console.log('Kliknuto na prvek .box');
});

// Vázaná více událostí
$('.box').on('click focus', function (e) {
  console.log('Funkce bude spuštěna při kliknutí i při získání fokusu');
});

// Delegování událostí
$(document).on('click', '.box', function (e) {
  console.log('Když kliknete na .box, bude funkce spuštěna');
});

// Vazba více událostí a obslužných programů událostí současně
$('.box').on({
  'click': function (e) {
    console.log('Událost kliknutí byla spuštěna');
  },
  'focus': function (e) {
    console.log('Událost focus byla spuštěna');
  }
});

// Předání parametrů
$('.box').on('click', { key1: 'value1', key2: 'value2' }, function (e) {
  console.log('Kliknuto na prvek .box a obslužnému programu události předány parametry');
  // e._data je {key1: 'value1', key2: 'value2'}
});

// Vazba více událostí a obslužných programů, a předání parametrů
$('.box').on({
  'click': function (e) {
    console.log('Událost kliknutí byla spuštěna');
    // e._data je {key1: 'value1', key2: 'value2'}
  },
  'focus': function (e) {
    console.log('Událost focus byla spuštěna');
    // e._data je {key1: 'value1', key2: 'value2'}
  }
}, { key1: 'value1', key2: 'value2' });

// Delegování události pomocí vazby a předání parametrů
$(document).on('click', '.box', { key1: 'value1', key2: 'value2' }, function (e) {
  console.log('Kliknuto na prvek .box a obslužnému programu události předány parametry');
  // e._data je {key1: 'value1', key2: 'value2'}
});

// Jednoduché delegování více událostí a obslužných programů
$(document).on({
  'click': function (e) {
    console.log('Událost kliknutí byla spuštěna');
  },
  'focus': function (e) {
    console.log('Událost focus byla spuštěna');
  }
}, '.box');

// Jednoduché delegování více událostí a obslužných programů s předáním parametrů
$(document).on({
  'click': function (e) {
    console.log('Událost kliknutí byla spuštěna');
    // e._data je {key1: 'value1', key2: 'value2'}
  },
  'focus': function (e) {
    console.log('Událost focus byla spuštěna');
    // e._data je {key1: 'value1', key2: 'value2'}
  }
}, '.box', { key1: 'value1', key2: 'value2' });

// Získejte parametry události
$('.box').on('click', function (e, data) {
  // data se rovná e._detail
});

// Názvy událostí podporují použití oboru názvů
$('.box').on('click.myPlugin', function () {
  console.log('Kliknuto na prvek .box');
});

Vázaná funkce obslužného programu událostí pro určitou událost pro každý prvek v kolekci. Ale událost se spustí pouze jednou.

Použití této metody je stejné jako .on(), takže příklady nebudou znovu uvedeny.

Zrušit vázanou událost pro každý prvek v kolekci. Podrobné příklady použití viz níže:

// Zrušit všechny vázané obslužné programy
$('.box').off();

// Zrušit vazbu určité události
$('.box').off('click');

// Zrušit vazbu více událostí
$('.box').off('click focus');

// Zrušit vazbu určitého obslužného programu vázané události
$('.box').off('click', callback);

// Zrušit vazbu delegované události
$(document).off('click', '.box');

// Zrušit vazbu určitého obslužného programu delegované události
$(document).off('click', '.box', callback);

// Zrušit vazbu více obslužných programů
$('.box').off({
  'click': callback1,
  'focus': callback2,
});

// Zrušit vazbu více delegovaných obslužných programů
$(document).off({
  'click': callback1,
  'focus': callback2,
}, '.box');

// Názvy událostí podporují použití oboru názvů, následující použití zruší vazbu všech událostí končících na .myPlugin
$(document).off('.myPlugin');

Spustit určenou událost. Podrobné příklady použití viz níže:

// Spustit určenou událost
$('.box').trigger('click');

// Předat parametry při spuštění události
$('.box').trigger('click', { key1: 'value1', key2: 'value2' });

Nastavte globální konfigurační parametry pro požadavek Ajax.

$.ajaxSetup({
  // Zakažte spouštění globální Ajax události
  global: false,

  // Použijte požadavek POST ve výchozím nastavení
  method: 'POST'
});

Podrobný seznam parametrů naleznete v části Parametry Ajax níže.

Odeslat požadavek Ajax a vrátit Promise.

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

Podrobný seznam parametrů naleznete v části Parametry Ajax níže.

Globální Ajax událost.

Spustit funkci při zahájení požadavku Ajax.

$(document).ajaxStart(function (event, xhr, options) {
  // xhr: objekt XMLHttpRequest
  // options: konfigurační parametr požadavku Ajax
});

Globální Ajax událost.

Spustit funkci, když je požadavek Ajax úspěšný.

$(document).ajaxSuccess(function (event, xhr, options, data) {
  // xhr: objekt XMLHttpRequest
  // options: konfigurační parametr požadavku Ajax
  // data: data vrácená požadavkem Ajax
});

Globální Ajax událost.

Spustit funkci, když dojde k chybě v požadavku Ajax.

$(document).ajaxError(function (event, xhr, options) {
  // xhr: objekt XMLHttpRequest
  // options: konfigurační parametr požadavku Ajax
});

Globální Ajax událost.

Spustit funkci po dokončení požadavku Ajax.

$(document).ajaxComplete(function (event, xhr, options) {
  // xhr: objekt XMLHttpRequest
  // options: konfigurační parametr požadavku Ajax
});

Metoda požadavku.

Zahrnuje: GET, POST, PUT, PATCH, HEAD, OPTIONS, DELETE

Data přidaná do Headers. Tuto hodnotu lze přepsat ve funkci zpětného volání beforeSend.

Pole s hodnotou řetězce nebo null budou odeslána, pole s hodnotou undefined budou odstraněna.

Data nastavená na objektu XMLHttpRequest.

$.ajax({
  url: 'Adresa URL mezi doménami',
  xhrFields: {
    withCredentials: true
  }
});

Objekt složený ze stavových kódů HTTP a funkcí.

$.ajax({
  statusCode: {
    404: function (xhr, textStatus) {
      alert('Je volána, když je vrácen stavový kód 404');
    },
    200: function (data, textStatus, xhr) {
      alert('Je volána, když je vrácen stavový kód 200');
    }
  }
});

Pokud je stavový kód mezi 200 - 299 nebo se rovná 304, znamená to úspěšný požadavek, parametr funkce je stejný jako parametr zpětného volání success; jinak znamená to selhání požadavku, parametr funkce je stejný jako parametr zpětného volání error.

Typ dat vrácených serverem.

Zahrnuje: text, json

Voláno před odesláním požadavku. Vrácení false zruší požadavek Ajax.

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

Volá se po úspěšném požadavku.

$.ajax({
  success: function (data, textStatus, xhr) {
    // data: data vrácená požadavkem Ajax
    // textStatus: řetězec obsahující úspěšný kód
    // xhr: objekt XMLHttpRequest
  }
});

Voláno při chybě požadavku.

$.ajax({
  error: function (xhr, textStatus) {
    // xhr: objekt XMLHttpRequest
    // textStatus: řetězec obsahující úspěšný kód
  }
});

Volá se po dokončení požadavku.

$.ajax({
  complete: function (xhr, textStatus) {
    // xhr: objekt XMLHttpRequest
    // textStatus: řetězec obsahující úspěšný kód
  }
});

Vynucené překreslení aktuálního prvku.

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

Nastavte vlastnost transition-duration aktuálního prvku.

Může to být časová hodnota s jednotkou, nebo bez jednotky. Pokud bez jednotky, bude automaticky přidán ms jako jednotka.

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

Přidejte zpětné volání transitionend na aktuální prvek.

Parametrem funkce zpětného volání je objekt transitionend, this v těle funkce ukazuje na aktuální prvek.

$('.box').transitionEnd(function () {
  console.log('Událost transitionend prvku .box byla spuštěna');
})

Nastavte vlastnost transform aktuálního prvku.

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

Nastavte vlastnost transform-origin aktuálního prvku.

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

Spusťte inicializační funkci zaregistrovanou na aktuálním prvku a jeho podřízených prvcích.

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

Vytvořit a zobrazit masku, vrátit objekt JQ vrstvy masky.

Můžete předat celočíselný parametr, který představuje styl z-index masky, výchozí je 2000.

$.showOverlay();

Skrýt vrstvu masky.

Pokud bylo voláno více $.showOverlay() pro zobrazení vrstvy masky, bude také nutné zavolat stejný počet $.hideOverlay() k skrytí vrstvy masky. Můžete předat parametr true k vynucenému skrytí vrstvy masky.

$.hideOverlay();

Zablokovat stránku a zakázat posouvání stránky.

$.lockScreen();

Odemknout stránku.

Pokud bylo voláno více $.lockScreen() k zablokování stránky, bude také nutné zavolat stejný počet $.unlockScreen() k odemknutí stránky. Můžete předat parametr true k vynucenému odemknutí stránky.

$.unlockScreen();

Omezení počtu spuštění funkce.

Předejte funkci jako parametr, prvním parametrem funkce je spouštěná funkce, druhým parametrem je doba zpoždění v milisekundách.

$.throttle(function () {
  console.log('Tato funkce bude spuštěna nejvýše jednou za 100 ms');
}, 100)

Generuje globálně jedinečné ID.

$.guid();

Můžete předat parametr. Pokud guid odpovídající tomuto parametru neexistuje, bude generován nový guid a vrácen; pokud guid odpovídající parametru již existuje, bude vrácen stávající guid.

// Následující dva řádky kódu vrátí stejnou hodnotu
$.guid('test');
$.guid('test');