Knihovna jq
mdui obsahuje lehkou JavaScriptovou knihovnu nástrojů, která poskytuje API a řetězové volání podobné jQuery, ale její velikost je pouze jedna šestina velikosti jQuery.
Tuto funkci nástroje můžete importovat podle potřeby:
import { $ } from 'mdui/jq.js';
Jádro
$()
Tato funkce má několik použití:
Zadejte CSS selektor jako parametr a vraťte JQ objekt obsahující odpovídající prvky.
$('.box');
Zadejte DOM prvek, libovolné pole, NodeList nebo JQ objekt a vraťte JQ objekt obsahující zadané prvky.
$(document);
Zadejte HTML řetězec a vraťte JQ objekt obsahující DOM vytvořený podle HTML.
$(`<div id="wrapper">
<span id="inner"></span>
</div>`);
Zadejte funkci, která se zavolá po načtení DOM.
$(function () {
console.log('DOM načten');
});
Rozšíření
$.extend()
Pokud je zadán pouze jeden objekt, vlastnosti tohoto objektu se sloučí do objektu $, což je ekvivalentní přidání nových funkcí do jmenného prostoru $.
$.extend({
customFunc: function () {},
});
// Poté lze vlastní metodu volat takto
$.customFunc();
Pokud jsou zadány dva nebo více objektů, vlastnosti všech objektů se přidají do prvního objektu a vrátí se sloučený objekt. Vlastnosti s hodnotou undefined se neslučují.
const object = $.extend({ key1: val1 }, { key2: val2 }, { key3: val3 });
// První objekt a návratová hodnota jsou nyní { key1: val1, key2: val2, key3: val3 }
$.fn.extend()
Rozšiřuje metody na prototypu $.
$.fn.extend({
customFunc: function () {},
});
// Poté lze rozšířenou metodu použít takto
$(document).customFunc();
URL
$.param()
Serializuje pole nebo objekt na řetězec dotazu 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é pole, musí jeho formát odpovídat formátu vrácenému funkcí .serializeArray().
$.param([
{ name: 'name', value: 'mdui' },
{ name: 'password', value: '123456' },
]);
// name=mdui&password=123456
Operace s poli a objekty
$.each()
Iteruje přes pole nebo objekt. Vrací první parametr, tj. iterované pole nebo objekt.
Prvním parametrem callback funkce je index pole nebo klíč objektu, druhým parametrem je hodnota pole nebo objektu na odpovídající pozici.
V callback funkci this odkazuje na hodnotu pole nebo objektu na odpovídající pozici. Pokud callback funkce vrátí false, iterace se zastaví.
// Iterace přes pole
$.each(['a', 'b', 'c'], function (index, value) {
console.log(index + ':' + value);
});
// Výsledek:
// 0:a
// 1:b
// 2:c
// Iterace přes objekt
$.each({ name: 'mdui', lang: 'zh' }, function (key, value) {
console.log(key + ':' + value);
});
// Výsledek
// name:mdui
// lang:zh
$.merge()
Připojí prvky druhého pole k prvnímu poli a vrátí sloučené pole.
const first = ['a', 'b', 'c'];
const second = ['c', 'd', 'e'];
const result = $.merge(first, second);
console.log(first); // ['a', 'b', 'c', 'c', 'd', 'e']
console.log(result); // ['a', 'b', 'c', 'c', 'd', 'e']
$.unique()
Odstraní duplicitní prvky z pole.
const result = $.unique([1, 2, 12, 3, 2, 1, 2, 1, 1, 1, 1]);
console.log(result); // [1, 2, 12, 3]
$.map()
Iteruje přes pole nebo objekt a vrací nové pole složené z návratových hodnot callback funkce.
Prvním parametrem callback funkce je hodnota pole nebo objektu na odpovídající pozici, druhým parametrem je index pole nebo klíč objektu.
Funkce zpětného volání může vrátit libovolnou hodnotu. Pokud vrátí pole, toto pole bude rozbaleno. Pokud vrátí null nebo undefined, tato hodnota bude ignorována. Uvnitř callback funkce this odkazuje na objekt window.
// Iterace přes pole
const result = $.map(['a', 'b', 'c'], function (value, index) {
return index + value;
});
console.log(result); // ['0a', '1b', '2c']
// Když callback funkce vrátí pole, pole bude rozbaleno
const result = $.map([1, 2, 3], function (value, index) {
return [value, value + 1];
});
console.log(result); // [1, 2, 2, 3, 3, 4]
// Iterace přes objekt
const result = $.map(
{ name: 'mdui', password: '123456' },
function (value, key) {
return key + ':' + value;
},
);
console.log(result); // ['name:mdui', 'password:123456']
$.contains()
Zjistí, zda jeden uzel obsahuje jiný uzel. Pokud nadřazený uzel obsahuje podřízený uzel, vrátí true; jinak vrátí false.
$.contains(document, document.body); // true
$.contains(document.body, document); // false
Typy dat
.is()
Zjistí, zda alespoň jeden prvek v kolekci odpovídá parametru. Pokud odpovídá, vrátí true; jinak vrátí false.
Parametrem může být CSS selektor, DOM prvek, pole DOM prvků, JQ objekt nebo callback funkce.
Pokud je parametrem callback funkce, prvním parametrem funkce je index, druhým parametrem je aktuální prvek. Uvnitř funkce this odkazuje na aktuální prvek. Pokud funkce vrátí true, aktuální prvek odpovídá parametru; pokud vrátí false, aktuální prvek neodpovídá parametru.
$('.box').is('.box'); // true
$('.box').is('.boxss'); // false
$('.box').is($('.box')[0]); // true
// Posouzení pomocí návratové hodnoty callback funkce
$(document).is(function (index, element) {
return element === document;
});
// true
Přístup k objektům
.length
Vrátí počet prvků v aktuální kolekci.
$('body').length; // 1
.each()
Iteruje přes aktuální kolekci a provede funkci pro každý prvek v kolekci. Pokud funkce vrátí false, iterace se zastaví.
Prvním parametrem funkce je index prvku, druhým parametrem je aktuální prvek. Uvnitř funkce this odkazuje na aktuální prvek.
$('img').each(function (index, element) {
this.src = 'test' + index + '.jpg';
});
.map()
Iteruje přes aktuální kolekci, provede funkci pro každý prvek v kolekci a vrátí novou kolekci složenou z návratových hodnot funkce.
Funkce může vrátit jednu hodnotu nebo pole hodnot. Pokud vrátí pole, prvky pole budou postupně přidány do nové kolekce. Pokud funkce vrátí null nebo undefined, tato hodnota nebude přidána do nové kolekce.
Prvním parametrem funkce je index prvku, druhým parametrem je aktuální prvek. Uvnitř funkce this odkazuje na aktuální prvek.
const result = $('input.checked').map(function (i, element) {
return element.value;
});
// result je JQ objekt složený z hodnot odpovídajících prvků
.eq()
Vrátí novou kolekci obsahující pouze prvek na zadaném indexu.
$('div').eq(0); // vrátí kolekci obsahující pouze první prvek
$('div').eq(-1); // vrátí kolekci obsahující pouze poslední prvek
$('div').eq(-2); // vrátí kolekci obsahující pouze předposlední prvek
.first()
Vrátí novou kolekci obsahující pouze první prvek aktuální kolekce.
$('div').first(); // vrátí kolekci obsahující pouze první div
.last()
Vrátí novou kolekci obsahující pouze poslední prvek aktuální kolekce.
$('div').last(); // vrátí kolekci obsahující pouze poslední div
.get()
Vrátí prvek na zadaném indexu. Pokud není zadán žádný parametr, vrátí pole složené ze všech prvků v kolekci.
$('div').get(); // vrátí pole všech div prvků
$('div').get(0); // vrátí první div prvek
$('div').get(-1); // vrátí poslední div prvek
.index()
Pokud není zadán žádný parametr, vrátí index prvního prvku aktuální kolekce vzhledem k jeho sourozeneckým prvkům.
Pokud je zadán CSS selektor, vrátí index prvního prvku aktuální kolekce vzhledem k prvkům odpovídajícím CSS selektoru.
Pokud je zadán DOM prvek, vrátí index tohoto prvku v aktuální kolekci.
Pokud je zadán JQ objekt, vrátí index 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
.slice()
Vrátí podmnožinu aktuální kolekce.
Zadáním dvou parametrů určíte počáteční a koncovou pozici podmnožiny (koncová pozice není zahrnuta). Pokud není zadán druhý parametr, vrátí všechny prvky od počáteční pozice do konce kolekce.
// Vrátí všechny prvky od třetího (včetně třetího) dále
$('div').slice(3);
// Vrátí prvky mezi třetím a pátým (včetně třetího, bez pátého)
$('div').slice(3, 5);
.filter()
Vyfiltruje z aktuální kolekce prvky odpovídající zadanému výrazu. Parametrem může být CSS selektor, DOM prvek, pole DOM prvků nebo callback funkce.
Pokud je parametrem callback funkce, prvním parametrem funkce je index prvku, druhým parametrem je aktuální prvek. Uvnitř funkce this odkazuje na aktuální prvek. Pokud funkce vrátí true, aktuální prvek bude zachován; pokud vrátí false, aktuální prvek bude odstraněn.
// Vyfiltruje všechny div prvky obsahující třídu .box
$('div').filter('.box');
// Vyfiltruje všechny vybrané možnosti
$('#select option').filter(function (index, element) {
return element.selected;
});
.not()
Vyfiltruje z aktuální kolekce prvky, které neodpovídají zadanému výrazu.
Parametrem může být CSS selektor, DOM prvek, pole DOM prvků, JQ objekt nebo callback funkce vracející boolean.
Pokud je parametrem callback funkce, prvním parametrem funkce je index prvku, druhým parametrem je aktuální prvek. Uvnitř funkce this odkazuje na aktuální prvek. Pokud funkce vrátí true, aktuální prvek bude odstraněn; pokud vrátí false, aktuální prvek bude zachován.
// Vyfiltruje všechny div prvky, které neobsahují třídu .box
$('div').not('.box');
// Vyfiltruje všechny nevybrané možnosti
$('#select option').not(function (index, element) {
return element.selected;
});
CSS třídy
.hasClass()
Zjistí, zda první prvek v kolekci obsahuje zadanou CSS třídu.
// Zjistí, zda první div prvek obsahuje třídu .item
$('div').hasClass('item');
.addClass()
Přidá CSS třídy ke každému prvku v kolekci. Více názvů tříd lze oddělit mezerami.
Parametrem může být řetězec nebo callback funkce vracející název CSS třídy. Pokud je parametrem callback funkce, prvním parametrem funkce je index prvku, druhým parametrem jsou původní názvy CSS tříd na prvku. Uvnitř funkce this odkazuje na aktuální prvek.
// Přidá třídu .item ke všem div prvkům
$('div').addClass('item');
// Přidá třídy .item1 a .item2 ke všem div prvkům
$('div').addClass('item1 item2');
// Přidá ke všem div prvkům CSS třídu vrácenou callback funkcí
$('div').addClass(function (index, currentClassName) {
return currentClassName + '-' + index;
});
.removeClass()
Odstraní zadané CSS třídy z každého prvku v kolekci. Více názvů tříd lze oddělit mezerami.
Parametrem může být řetězec nebo callback funkce vracející název CSS třídy. Pokud je parametrem callback funkce, prvním parametrem funkce je index prvku, druhým parametrem jsou původní názvy CSS tříd na prvku. Uvnitř funkce this odkazuje na aktuální prvek.
Pokud není zadán žádný parametr, metoda přímo odstraní atribut class z prvků.
// Odstraní třídu .item ze všech div prvků
$('div').removeClass('item');
// Odstraní třídy .item1 a .item2 ze všech div prvků
$('div').removeClass('item1 item2');
// Odstraní ze všech div prvků CSS třídu vrácenou callback funkcí
$('div').removeClass(function (index, currentClassName) {
return 'item';
});
.toggleClass()
Pokud prvek obsahuje zadanou CSS třídu, odstraní ji; pokud ne, přidá ji. Více názvů tříd lze oddělit mezerami.
Parametrem může být řetězec nebo callback funkce vracející název CSS třídy. Pokud je parametrem callback funkce, prvním parametrem funkce je index prvku, druhým parametrem jsou původní názvy CSS tříd na prvku. Uvnitř funkce this odkazuje na aktuální prvek.
// Přepne třídu .item na všech div prvcích
$('div').toggleClass('item');
// Přepne třídy .item1 a .item2 na všech div prvcích
$('div').toggleClass('item1 item2');
// Přepne na všech div prvcích CSS třídu vrácenou callback funkcí
$('div').toggleClass(function (index, currentClassName) {
return 'item';
});
Atributy uzlů
.prop()
Získá hodnotu JavaScript vlastnosti prvního prvku v kolekci.
// Získá hodnotu vlastnosti checked prvního prvku
$('input').prop('checked');
Pokud jsou zadány dva parametry, metoda nastaví zadanou JavaScript vlastnost na všech prvcích v kolekci.
Hodnota vlastnosti může být libovolného typu nebo návratová hodnota callback funkce. Funkce zpětného volání má první parametr index prvku a druhý parametr původní hodnotu vlastnosti na prvku; uvnitř funkce this odkazuje na aktuální prvek.
Pokud je hodnota vlastnosti nebo návratová hodnota callback funkce undefined, metoda nezmění původní vlastnost prvku.
// Nastaví hodnotu vlastnosti checked všech vybraných prvků na true
$('input').prop('checked', true);
// Nastaví hodnotu vlastnosti pomocí návratové hodnoty callback funkce
$('input').prop('checked', function (index, oldPropValue) {
return true;
});
Lze také nastavit více vlastností najednou předáním objektu.
// Nastaví více vlastností prvku najednou
$('input').prop({
checked: false,
disabled: function (index, oldPropValue) {
return true;
},
});
.removeProp()
Odstraní zadanou JavaScript vlastnost ze všech prvků v kolekci.
$('input').removeProp('disabled');
.attr()
Získá hodnotu HTML atributu prvního prvku v kolekci.
// Získá hodnotu atributu prvního prvku
$('div').attr('username');
Pokud jsou zadány dva parametry, metoda nastaví zadaný HTML atribut na všech prvcích v kolekci.
Hodnota atributu může být řetězec, číslo nebo návratová hodnota callback funkce. Pokud je parametrem callback funkce, prvním parametrem funkce je index prvku, druhým parametrem je původní hodnota atributu na prvku. Uvnitř funkce this odkazuje na aktuální prvek.
Pokud je hodnota atributu nebo návratová hodnota callback funkce null, metoda odstraní zadaný atribut; pokud je undefined, nezmění původní atribut prvku.
// Nastaví hodnotu atributu všem vybraným prvkům
$('div').attr('username', 'mdui');
// Nastaví hodnotu atributu pomocí návratové hodnoty callback funkce
$('div').attr('username', function (index, oldAttrValue) {
return 'mdui';
});
Lze také nastavit více atributů najednou předáním objektu.
// Nastaví více atributů prvku najednou
$('div').attr({
username: 'mdui',
lastname: function (index, oldAttrValue) {
return 'test';
},
});
.removeAttr()
Odstraní zadané HTML atributy ze všech prvků v kolekci. Více názvů atributů lze oddělit mezerami.
// Odstraní jeden atribut ze všech prvků v kolekci
$('div').removeAttr('username');
// Odstraní více atributů ze všech prvků v kolekci
$('div').removeAttr('username lastname');
.val()
Vrátí hodnotu prvního prvku v kolekci.
Pokud je prvkem <select multiple="multiple">, vrátí pole obsahující všechny vybrané položky.
// Získá hodnotu prvního vybraného prvku
$('#input').val();
Pokud je zadán parametr, metoda nastaví hodnotu všem prvkům v kolekci.
Hodnota může být řetězec, číslo, pole řetězců nebo callback funkce vracející hodnotu. Pokud je parametrem callback funkce, prvním parametrem funkce je index prvku, druhým parametrem je původní hodnota prvku. Uvnitř funkce this odkazuje na aktuální prvek.
Pokud je prvkem <input type="checkbox">, <input type="radio"> nebo <option>, hodnota nebo návratová hodnota callback funkce může být pole, přičemž se vyberou hodnoty v poli a zruší se výběr hodnot mimo pole.
Pokud je hodnota nebo návratová hodnota callback funkce undefined, hodnota prvku se nastaví na prázdnou.
// Nastaví hodnotu vybraného prvku
$('#input').val('mdui');
// Nastaví hodnotu prvku pomocí návratové hodnoty callback funkce
$('#input').val(function (index, oldValue) {
return 'mdui';
});
.text()
Vrátí textový obsah všech prvků v kolekci (včetně jejich potomků).
// Získá text všech prvků .box
$('.box').text();
Pokud je zadán parametr, metoda nastaví textový obsah všech prvků v kolekci.
Hodnota může být řetězec, číslo, boolean nebo callback funkce vracející textový obsah. Pokud je parametrem callback funkce, prvním parametrem funkce je index prvku, druhým parametrem je původní textový obsah prvku. Uvnitř funkce this odkazuje na aktuální prvek.
Pokud je hodnota nebo návratová hodnota callback funkce undefined, textový obsah prvku se nezmění.
// Nastaví textový obsah vybraných prvků
$('.box').text('textový obsah');
// Nastaví textový obsah prvku pomocí návratové hodnoty callback funkce
$('.box').text(function (index, oldTextContent) {
return 'nový textový obsah';
});
.html()
Vrátí HTML obsah prvního prvku v kolekci.
// Získá HTML obsah prvního prvku .box
$('.box').html();
Pokud je zadán parametr, metoda nastaví HTML obsah všech prvků v kolekci.
Hodnota může být HTML řetězec, DOM prvek nebo callback funkce vracející HTML řetězec nebo DOM prvek. Pokud je parametrem callback funkce, prvním parametrem funkce je index prvku, druhým parametrem je původní HTML obsah prvku. Uvnitř funkce this odkazuje na aktuální prvek.
Pokud je hodnota nebo návratová hodnota callback funkce undefined, HTML obsah prvku se nezmění.
// Nastaví HTML vybraných prvků
$('.box').html('<div>nový HTML obsah</div>');
// Nastaví HTML obsah prvku pomocí návratové hodnoty callback funkce
$('.box').html(function (index, oldHTMLContent) {
return '<div>nový HTML obsah</div>';
});
Ukládání dat
$.data()
Čte nebo ukládá data na zadaném prvku.
Při ukládání dat, pokud je hodnota undefined, je to ekvivalentní čtení odpovídajících dat na prvku. Tj. $.data(element, 'key', undefined) a $.data(element, 'key') jsou ekvivalentní.
Poznámka: Tato metoda nenačítá atributy data-* na prvku.
// Uloží data na zadaném prvku a vrátí uloženou hodnotu
$.data(document.body, 'layout', 'dark'); // vrátí dark
// Uloží více dat najednou na zadaném prvku
$.data(document.body, {
primary: 'indigo',
accent: 'pink',
}); // vrátí { primary: 'indigo', accent: 'pink' }
// Získá data uložená na zadaném prvku
$.data(document.body, 'layout'); // vrátí dark
// Získá všechna data uložená na zadaném prvku
$.data(document.body); // vrátí { layout: 'dark', primary: 'indigo', accent: 'pink' }
$.removeData()
Odstraní data uložená na zadaném prvku.
Můžete zadat více názvů klíčů oddělených mezerami nebo pomocí pole. Pokud není zadán žádný název klíče, odstraní všechna data z prvku.
// Odstraní data s názvem klíče name z prvku
$.removeData(document.body, 'name');
// Odstraní data s názvy klíčů name1 a name2 z prvku. Následující dva způsoby jsou ekvivalentní:
$.removeData(document.body, 'name1 name2');
$.removeData(document.body, ['name1', 'name2']);
// Odstraní všechna uložená data z prvku
$.removeData(document.body);
.data()
Čte nebo ukládá data na prvcích aktuální kolekce.
Pokud je ukládaná hodnota undefined, data se neukládají.
Poznámka: Tato metoda načítá data zahrnující atributy data-* na prvku.
// Uloží data na prvcích v aktuální kolekci
$('.box').data('layout', 'dark');
// Uloží více dat najednou na prvcích v aktuální kolekci
$('.box').data({
primary: 'indigo',
accent: 'pink',
});
// Získá zadaná data uložená na prvním prvku aktuální kolekce
$('.box').data('layout'); // vrátí dark
// Získá všechna data uložená na prvním prvku aktuální kolekce
$('.box').data(); // vrátí { layout: 'dark', primary: 'indigo', accent: 'pink' }
.removeData()
Odstraní data uložená na prvcích aktuální kolekce.
Můžete zadat více názvů klíčů oddělených mezerami nebo pomocí pole. Pokud není zadán žádný název klíče, odstraní všechna data z prvků.
Poznámka: Tato metoda odstraní pouze data nastavená metodou .data(), neodstraní data z atributů data-*.
// Odstraní data s názvem klíče name
$('.box').removeData('name');
// Odstraní data s názvy klíčů name1 a name2. Následující dva způsoby jsou ekvivalentní:
$('.box').removeData('name1 name2');
$('.box').removeData(['name1', 'name2']);
// Odstraní všechna uložená data z prvků
$('.box').removeData();
Styly
.css()
Získá hodnotu CSS vlastnosti prvního prvku v kolekci.
$('.box').css('color');
Pokud je zadán parametr, metoda nastaví hodnotu CSS vlastnosti všem prvkům v kolekci.
Hodnota vlastnosti může být řetězec, číslo nebo callback funkce vracející řetězec nebo číslo. Pokud je parametrem callback funkce, prvním parametrem funkce je index prvku, druhým parametrem je původní hodnota CSS vlastnosti prvku. Uvnitř funkce this odkazuje na aktuální prvek.
Pokud je hodnota nebo návratová hodnota callback funkce undefined, hodnota CSS vlastnosti prvku se nezmění. Pokud je hodnota null, CSS vlastnost prvku se odstraní. Pokud je hodnota číslo, automaticky se přidá px jako jednotka; pokud vlastnost nemůže používat px jako jednotku, hodnota se převede na řetězec.
// Nastaví hodnotu stylu všem prvkům v kolekci
$('.box').css('color', 'red');
// Nastaví hodnotu stylu všem prvkům pomocí návratové hodnoty callback funkce
$('.box').css('color', function (index, oldCSSValue) {
return 'green';
});
// Nastaví více stylů najednou předáním objektu
$('.box').css({
'background-color': 'white',
color: function (index, oldCSSValue) {
return 'blue';
},
});
.width()
Získá šířku prvního prvku v kolekci (bez padding, border, margin).
$('.box').width();
Pokud je zadán parametr, metoda nastaví šířku všem prvkům v kolekci.
Hodnota může být řetězec s jednotkou, číslo nebo callback funkce vracející řetězec s jednotkou nebo číslo. Pokud je parametrem callback funkce, prvním parametrem funkce je index prvku, druhým parametrem je původní šířka prvku. Uvnitř funkce this odkazuje na aktuální prvek.
Pokud je hodnota nebo návratová hodnota callback funkce null nebo undefined, šířka prvku se nezmění. Pokud je hodnota číslo, automaticky se přidá px jako jednotka.
// Nastaví šířku všem prvkům v kolekci
$('.box').width('20%');
// Pokud je hodnota číslo, výchozí jednotka je px
$('.box').width(10);
// Nastaví šířku pomocí návratové hodnoty callback funkce
$('.box').width(function (index, oldWidth) {
return 10;
});
.height()
Získá výšku prvního prvku v kolekci (bez padding, border, margin).
$('.box').height();
Pokud je zadán parametr, metoda nastaví výšku všem prvkům v kolekci.
Hodnota může být řetězec s jednotkou, číslo nebo callback funkce vracející řetězec s jednotkou nebo číslo. Pokud je parametrem callback funkce, prvním parametrem funkce je index prvku, druhým parametrem je původní výška prvku. Uvnitř funkce this odkazuje na aktuální prvek.
Pokud je hodnota nebo návratová hodnota callback funkce null nebo undefined, výška prvku se nezmění. Pokud je hodnota číslo, automaticky se přidá px jako jednotka.
// Nastaví výšku všem prvkům v kolekci
$('.box').height('20%');
// Pokud je hodnota číslo, výchozí jednotka je px
$('.box').height(10);
// Nastaví výšku pomocí návratové hodnoty callback funkce
$('.box').height(function (index, oldHeight) {
return 10;
});
.innerWidth()
Získá šířku prvního prvku v kolekci (včetně padding, bez border, margin).
$('.box').innerWidth();
Pokud je zadán parametr, metoda nastaví šířku všem prvkům v kolekci.
Hodnota může být řetězec s jednotkou, číslo nebo callback funkce vracející řetězec s jednotkou nebo číslo. Pokud je parametrem callback funkce, prvním parametrem funkce je index prvku, druhým parametrem je původní šířka prvku. Uvnitř funkce this odkazuje na aktuální prvek.
Pokud je hodnota nebo návratová hodnota callback funkce null nebo undefined, šířka prvku se nezmění. Pokud je hodnota číslo, automaticky se přidá px jako jednotka.
// Nastaví šířku všem prvkům v kolekci
$('.box').innerWidth('20%');
// Pokud je hodnota číslo, výchozí jednotka je px
$('.box').innerWidth(10);
// Nastaví šířku pomocí návratové hodnoty callback funkce
$('.box').innerWidth(function (index, oldWidth) {
return 10;
});
.innerHeight()
Získá výšku prvního prvku v kolekci (včetně padding, bez border, margin).
$('.box').innerHeight();
Pokud je zadán parametr, metoda nastaví výšku všem prvkům v kolekci.
Hodnota může být řetězec s jednotkou, číslo nebo callback funkce vracející řetězec s jednotkou nebo číslo. Pokud je parametrem callback funkce, prvním parametrem funkce je index prvku, druhým parametrem je původní výška prvku. Uvnitř funkce this odkazuje na aktuální prvek.
Pokud je hodnota nebo návratová hodnota callback funkce null nebo undefined, výška prvku se nezmění. Pokud je hodnota číslo, automaticky se přidá px jako jednotka.
// Nastaví výšku všem prvkům v kolekci
$('.box').innerHeight('20%');
// Pokud je hodnota číslo, výchozí jednotka je px
$('.box').innerHeight(10);
// Nastaví výšku pomocí návratové hodnoty callback funkce
$('.box').innerHeight(function (index, oldHeight) {
return 10;
});
.outerWidth()
Získá šířku prvního prvku v kolekci (včetně padding a border, bez margin. Můžete zadat parametr true, aby šířka zahrnovala margin).
// Šířka včetně padding a border
$('.box').outerWidth();
// Šířka včetně padding, border a margin
$('.box').outerWidth(true);
Tuto metodu lze také použít k nastavení šířky všech prvků v kolekci (včetně padding a border, bez margin. Můžete zadat true jako druhý parametr, aby šířka zahrnovala margin).
Prvním parametrem může být řetězec s jednotkou, číslo nebo callback funkce vracející řetězec s jednotkou nebo číslo. Pokud je parametrem callback funkce, prvním parametrem funkce je index prvku, druhým parametrem je původní šířka prvku. Uvnitř funkce this odkazuje na aktuální prvek.
Pokud je hodnota nebo návratová hodnota callback funkce null nebo undefined, šířka prvku se nezmění. Pokud je hodnota číslo, automaticky se přidá px jako jednotka.
// Nastaví šířku všem prvkům v kolekci
$('.box').outerWidth('20%');
// Pokud je hodnota číslo, výchozí jednotka je px
$('.box').outerWidth(10);
// Pokud je druhý parametr true, šířka bude zahrnovat margin
$('.box').outerWidth(10, true);
// Nastaví šířku pomocí návratové hodnoty callback funkce
$('.box').outerWidth(function (index, oldWidth) {
return 10;
});
.outerHeight()
Získá výšku prvního prvku v kolekci (včetně padding a border, bez margin. Můžete zadat parametr true, aby výška zahrnovala margin).
// Výška včetně padding a border
$('.box').outerHeight();
// Výška včetně padding, border a margin
$('.box').outerHeight(true);
Tuto metodu lze také použít k nastavení výšky všech prvků v kolekci (včetně padding a border, bez margin. Můžete zadat true jako druhý parametr, aby výška zahrnovala margin).
Prvním parametrem může být řetězec s jednotkou, číslo nebo callback funkce vracející řetězec s jednotkou nebo číslo. Pokud je parametrem callback funkce, prvním parametrem funkce je index prvku, druhým parametrem je původní výška prvku. Uvnitř funkce this odkazuje na aktuální prvek.
Pokud je hodnota nebo návratová hodnota callback funkce null nebo undefined, výška prvku se nezmění. Pokud je hodnota číslo, automaticky se přidá px jako jednotka.
// Nastaví výšku všem prvkům v kolekci
$('.box').outerHeight('20%');
// Pokud je hodnota číslo, výchozí jednotka je px
$('.box').outerHeight(10);
// Pokud je druhý parametr true, výška bude zahrnovat margin
$('.box').outerHeight(10, true);
// Nastaví výšku pomocí návratové hodnoty callback funkce
$('.box').outerHeight(function (index, oldHeight) {
return 10;
});
.hide()
Skryje všechny prvky v kolekci.
$('.box').hide();
.show()
Zobrazí všechny prvky v kolekci.
$('.box').show();
.toggle()
Přepne stav zobrazení všech prvků v kolekci.
$('.box').toggle();
.offset()
Získá souřadnice prvního prvku v kolekci vzhledem k document.
$('.box').offset(); // { top: 20, left: 30 }
Pokud je zadán parametr, metoda nastaví souřadnice všech prvků v kolekci vzhledem k document.
Parametrem může být objekt obsahující vlastnosti top a left nebo callback funkce vracející objekt tohoto formátu. Pokud je parametrem callback funkce, prvním parametrem funkce je index prvku, druhým parametrem jsou původní souřadnice prvku. Uvnitř funkce this odkazuje na aktuální prvek.
Pokud je hodnota top nebo left v parametru undefined, odpovídající hodnota se nezmění.
// Nastaví souřadnice všem prvkům v kolekci
$('.box').offset({ top: 20, left: 30 });
// Nastaví souřadnice prvku pomocí návratové hodnoty callback funkce
$('.box').offset(function (index, oldOffset) {
return { top: 20, left: 30 };
});
.offsetParent()
Získá rodičovský prvek pro určení offsetu prvního prvku v kolekci. Tj. první nadřazený prvek s vlastností position nastavenou na relative nebo absolute.
$('.box').offsetParent();
.position()
Získá offset prvního prvku v kolekci vzhledem k jeho rodičovskému prvku pro určení offsetu.
$('.box').position(); // { top: 20, left: 30 }
Vyhledávání uzlů
.find()
V aktuální kolekci najde potomky odpovídající CSS selektoru a vrátí jejich kolekci.
// Najde v potomcích #box prvky obsahující .box
$('#box').find('.box');
.children()
V aktuální kolekci získá kolekci přímých podřízených prvků. Jako parametr lze zadat CSS selektor pro filtrování podřízených prvků.
// Najde všechny přímé podřízené prvky #box
$('#box').children();
// Najde mezi přímými podřízenými prvky #box prvky obsahující .box
$('#box').children('.box');
.has()
V aktuální kolekci vyfiltruje prvky, které obsahují zadaný podřízený prvek. Parametrem může být CSS selektor nebo DOM prvek.
// Přidá pozadí červené barvy li prvkům, které obsahují ul
$('li').has('ul').css('background-color', 'red');
.parent()
Získá kolekci přímých nadřazených prvků všech prvků v aktuální kolekci. Jako parametr lze zadat CSS selektor, vrátí pouze kolekci nadřazených prvků odpovídajících tomuto parametru.
// Vrátí přímé nadřazené prvky prvků .box
$('.box').parent();
// Vrátí přímé nadřazené prvky prvků .box, které obsahují třídu .parent
$('.box').parent('.parent');
.parents()
Získá kolekci všech předků všech prvků v aktuální kolekci. Jako parametr lze zadat CSS selektor, vrátí pouze kolekci předků odpovídajících tomuto parametru.
// Vrátí všechny předky span prvku
$('span').parents();
// Vrátí všechny předky span prvku, které jsou p prvky
$('span').parents('p');
.parentsUntil()
Získá všechny nadřazené prvky každého prvku v aktuální kolekci, dokud nenarazí na prvek odpovídající prvnímu parametru (tento prvek není zahrnut).
Prvním parametrem může být CSS selektor, DOM prvek nebo JQ objekt.
Lze zadat druhý parametr, který musí být CSS selektor, a vrátí pouze prvky odpovídající tomuto parametru.
Pokud není zadán žádný parametr, budou zahrnuti všichni předci, což je stejné jako u .parents().
// Získá všechny předky prvku .item
$('.item').parentsUntil();
// Najde všechny nadřazené prvky prvku .item, dokud nenarazí na prvek .parent
$('.item').parentsUntil('.parent');
// Získá všechny předky prvku .item, které jsou div prvky, dokud nenarazí na prvek .parent
$('.item').parentsUntil('.parent', 'div');
.prev()
Získá kolekci předchozích sourozeneckých prvků každého prvku v aktuální kolekci. Jako parametr lze zadat CSS selektor, vrátí pouze kolekci sourozeneckých prvků odpovídajících tomuto parametru.
// Získá kolekci předchozích sourozeneckých prvků prvku .box
$('.box').prev();
// Získá kolekci předchozích sourozeneckých prvků prvku .box, které jsou div prvky
$('.box').prev('div');
.prevAll()
Získá kolekci všech předchozích sourozeneckých prvků každého prvku v aktuální kolekci. Jako parametr lze zadat CSS selektor, vrátí pouze kolekci sourozeneckých prvků odpovídajících tomuto parametru.
// Získá všechny předchozí sourozenecké prvky prvku .box
$('.box').prevAll();
// Získá všechny předchozí sourozenecké prvky prvku .box, které obsahují třídu .selected
$('.box').prevAll('.selected');
.prevUntil()
Získá všechny předchozí sourozenecké prvky každého prvku v aktuální kolekci, dokud nenarazí na prvek odpovídající prvnímu parametru (tento prvek není zahrnut).
Prvním parametrem může být CSS selektor, DOM prvek nebo JQ objekt. Lze zadat druhý parametr, který musí být CSS selektor, a vrátí pouze prvky odpovídající tomuto parametru.
Pokud není zadán žádný parametr, vrátí všechny předchozí sourozenecké prvky, což je stejné jako u .prevAll().
// Získá všechny předchozí sourozenecké prvky prvku .box
$('.box').prevUntil();
// Získá všechny předchozí sourozenecké prvky prvku .box, dokud nenarazí na prvek .until
$('.box').prevUntil('.until');
// Získá všechny předchozí sourozenecké prvky prvku .box, které jsou div prvky, dokud nenarazí na prvek .until
$('.box').prevUntil('.until', 'div');
.next()
Získá kolekci následujících sourozeneckých prvků každého prvku v aktuální kolekci. Jako parametr lze zadat CSS selektor, vrátí pouze kolekci sourozeneckých prvků odpovídajících tomuto parametru.
// Získá kolekci následujících sourozeneckých prvků prvku .box
$('.box').next();
// Získá kolekci následujících sourozeneckých prvků prvku .box, které jsou div prvky
$('.box').next('div');
.nextAll()
Získá kolekci všech následujících sourozeneckých prvků každého prvku v aktuální kolekci. Jako parametr lze zadat CSS selektor, vrátí pouze kolekci sourozeneckých prvků odpovídajících tomuto parametru.
// Získá všechny následující sourozenecké prvky prvku .box
$('.box').nextAll();
// Získá všechny následující sourozenecké prvky prvku .box, které obsahují třídu .selected
$('.box').nextAll('.selected');
.nextUntil()
Získá všechny následující sourozenecké prvky každého prvku v aktuální kolekci, dokud nenarazí na prvek odpovídající prvnímu parametru (tento prvek není zahrnut).
Prvním parametrem může být CSS selektor, DOM prvek nebo JQ objekt. Lze zadat druhý parametr, který musí být CSS selektor, a vrátí pouze prvky odpovídající tomuto parametru.
Pokud není zadán žádný parametr, vrátí všechny následující sourozenecké prvky, což je stejné jako u .nextAll().
// Získá všechny následující sourozenecké prvky prvku .box
$('.box').nextUntil();
// Získá všechny následující sourozenecké prvky prvku .box, dokud nenarazí na prvek .until
$('.box').nextUntil('.until');
// Získá všechny následující sourozenecké prvky prvku .box, které jsou div prvky, dokud nenarazí na prvek .until
$('.box').nextUntil('.until', 'div');
.closest()
Začíná od aktuálního prvku a postupuje nahoru, dokud nenajde první odpovídající prvek. Parametrem může být CSS selektor, DOM prvek nebo JQ objekt.
// Získá nejbližší nadřazený prvek .parent prvku .box
$('.box').closest('.parent');
.siblings()
Získá všechny sourozenecké prvky každého prvku v aktuální kolekci. Jako parametr lze zadat CSS selektor, vrátí pouze kolekci sourozeneckých prvků odpovídajících tomuto parametru.
// Získá všechny sourozenecké prvky prvku .box
$('.box').siblings();
// Získá mezi sourozeneckými prvky prvku .box prvky obsahující třídu .selected
$('.box').siblings('.selected');
.add()
Přidá prvky do aktuální kolekce. Parametrem může být HTML řetězec, CSS selektor, JQ objekt, DOM prvek, pole DOM prvků nebo NodeList.
// Přidá do aktuální kolekce prvky obsahující .selected
$('.box').add('.selected');
Operace s uzly
.empty()
Odstraní všechny podřízené prvky z aktuálních prvků.
$('.box').empty();
.remove()
Odstraní prvky aktuální kolekce z DOM. Jako parametr lze zadat CSS selektor, odstraní pouze prvky odpovídající tomuto parametru.
// Odstraní všechny p prvky
$('p').remove();
// Odstraní všechny p prvky obsahující .box
$('p').remove('.box');
.prepend()
Vloží zadaný obsah na začátek vnitřku prvků aktuální kolekce. Parametrem může být HTML řetězec, DOM prvek, pole DOM prvků nebo JQ objekt. Podporuje zadání více parametrů.
Lze také zadat callback funkci vracející HTML řetězec, DOM prvek, pole DOM prvků nebo JQ objekt. Prvním parametrem funkce je index aktuálního prvku, druhým parametrem je původní HTML prvku, this uvnitř funkce odkazuje na aktuální prvek.
Tato metoda vrací původní kolekci.
// Vloží jeden prvek
$('<p>Rád bych řekl: </p>').prepend('<b>Ahoj</b>');
// Výsledek: <p><b>Ahoj</b>Rád bych řekl: </p>
// Vloží více prvků
$('<p>Rád bych řekl: </p>').prepend('<b>Ahoj</b>', '<b>Světe</b>');
// Výsledek: <p><b>Ahoj</b><b>Světe</b>Rád bych řekl: </p>
// Vloží prvek pomocí callback funkce
$('<p>Ahoj</p>').prepend(function (index, oldHTML) {
return '<b>' + oldHTML + index + '</b>';
});
// Výsledek: <p><b>Ahoj0</b>Ahoj</p>
.prependTo()
Vloží prvky aktuální kolekce na začátek vnitřku zadaného prvku. Parametrem může být CSS selektor, HTML řetězec, DOM prvek, pole DOM prvků nebo JQ objekt.
Tato metoda vrací původní kolekci.
$('<p>Ahoj</p>').prependTo('<p>Rád bych řekl: </p>');
// Výsledek: [ <p><p>Ahoj</p>Rád bych řekl: </p> ]
.append()
Vloží zadaný obsah na konec vnitřku aktuálních prvků. Parametrem může být HTML řetězec, DOM prvek, pole DOM prvků nebo JQ objekt. Podporuje zadání více parametrů.
Lze také zadat callback funkci vracející HTML řetězec, DOM prvek, pole DOM prvků nebo JQ objekt. Prvním parametrem funkce je index aktuálního prvku, druhým parametrem je původní HTML prvku, this uvnitř funkce odkazuje na aktuální prvek.
Tato metoda vrací původní kolekci.
// Vloží jeden prvek
$('<p>Rád bych řekl: </p>').append('<b>Ahoj</b>');
// Výsledek: <p>Rád bych řekl: <b>Ahoj</b></p>
// Vloží více prvků
$('<p>Rád bych řekl: </p>').append('<b>Ahoj</b>', '<b>Světe</b>');
// Výsledek: <p>Rád bych řekl: <b>Ahoj</b><b>Světe</b></p>
// Vloží prvek pomocí callback funkce
$('<p>Ahoj</p>').append(function (index, oldHTML) {
return '<b>' + oldHTML + index + '</b>';
});
// Výsledek: <p>Ahoj<b>Ahoj0</b></p>
.appendTo()
Vloží prvky aktuální kolekce na konec vnitřku zadaného prvku. Parametrem může být CSS selektor, HTML řetězec, DOM prvek, pole DOM prvků nebo JQ objekt.
Tato metoda vrací původní kolekci.
$('<p>Ahoj</p>').appendTo('<p>Rád bych řekl: </p>');
// Výsledek: <p>Rád bych řekl: <p>Ahoj</p></p>
.after()
Vloží zadaný obsah za prvky aktuální kolekce jako jejich sourozence. Parametrem může být HTML řetězec, DOM prvek, pole DOM prvků nebo JQ objekt. Podporuje zadání více parametrů.
Lze také zadat callback funkci vracející HTML řetězec, DOM prvek, pole DOM prvků nebo JQ objekt. Prvním parametrem funkce je index aktuálního prvku, druhým parametrem je původní HTML prvku, this uvnitř funkce odkazuje na aktuální prvek.
Tato metoda vrací původní kolekci.
// Vloží jeden prvek
$('<p>Rád bych řekl: </p>').after('<b>Ahoj</b>');
// Výsledek: <p>Rád bych řekl: </p><b>Ahoj</b>
// Vloží více prvků
$('<p>Rád bych řekl: </p>').after('<b>Ahoj</b>', '<b>Světe</b>');
// Výsledek: <p>Rád bych řekl: </p><b>Ahoj</b><b>Světe</b>
// Vloží prvek pomocí callback funkce
$('<p>Ahoj</p>').after(function (index, oldHTML) {
return '<b>' + oldHTML + index + '</b>';
});
// Výsledek: <p>Ahoj</p><b>Ahoj0</b>
.insertAfter()
Vloží prvky aktuální kolekce za cílový prvek jako jeho sourozence.
Pokud jsou prvky v aktuální kolekci již na stránce, budou přesunuty, nikoli zkopírovány. Pokud je více cílů, prvky aktuální kolekce budou zkopírovány a vloženy za každý cílový prvek.
Parametrem pro určení cílového prvku může být HTML řetězec, CSS selektor, DOM prvek, pole DOM prvků nebo JQ objekt.
$('<b>Ahoj</b>').insertAfter('<p>Rád bych řekl: </p>');
// Výsledek: <p>Rád bych řekl: </p><b>Ahoj</b>
.before()
Vloží zadaný obsah před prvky aktuální kolekce jako jejich sourozence. Parametrem může být HTML řetězec, DOM prvek, pole DOM prvků nebo JQ objekt. Podporuje zadání více parametrů.
Lze také zadat callback funkci vracející HTML řetězec, DOM prvek, pole DOM prvků nebo JQ objekt. Prvním parametrem funkce je index aktuálního prvku, druhým parametrem je původní HTML prvku, this uvnitř funkce odkazuje na aktuální prvek.
Tato metoda vrací původní kolekci.
// Vloží jeden prvek
$('<p>Rád bych řekl: </p>').before('<b>Ahoj</b>');
// Výsledek: <b>Ahoj</b><p>Rád bych řekl: </p>
// Vloží více prvků
$('<p>Rád bych řekl: </p>').before('<b>Ahoj</b>', '<b>Světe</b>');
// Výsledek: <b>Ahoj</b><b>Světe</b><p>Rád bych řekl: </p>
// Vloží prvek pomocí callback funkce
$('<p>Ahoj</p>').before(function (index, oldHTML) {
return '<b>' + oldHTML + index + '</b>';
});
// Výsledek: <b>Ahoj0</b><p>Ahoj</p>
.insertBefore()
Vloží prvky aktuální kolekce před cílový prvek jako jeho sourozence.
Pokud jsou prvky v aktuální kolekci již na stránce, budou přesunuty, nikoli zkopírovány. Pokud je více cílů, prvky aktuální kolekce budou zkopírovány a vloženy před každý cílový prvek.
Parametrem pro určení cílového prvku může být HTML řetězec, CSS selektor, DOM prvek, pole DOM prvků nebo JQ objekt.
$('<p>Rád bych řekl: </p>').insertBefore('<b>Ahoj</b>');
// Výsledek: <p>Rád bych řekl: </p><b>Ahoj</b>
.replaceWith()
Nahradí prvky aktuální kolekce zadanými prvky.
Parametrem může být HTML řetězec, DOM prvek, pole DOM prvků nebo JQ objekt.
Lze také zadat callback funkci vracející HTML řetězec, DOM prvek, pole DOM prvků nebo JQ objekt. Prvním parametrem funkce je index aktuálního prvku, druhým parametrem je původní HTML prvku, this uvnitř funkce odkazuje na aktuální prvek.
Tato metoda vrací původní kolekci, která byla nahrazena.
// Nahradí všechny prvky .box prvkem <p>Ahoj</p>
$('.box').replaceWith('<p>Ahoj</p>');
// Nahradí všechny prvky .box návratovou hodnotou callback funkce
$('.box').replaceWith(function (index, oldHTML) {
return oldHTML + index;
});
.replaceAll()
Nahradí zadané prvky prvky aktuální kolekce.
Parametrem jsou prvky, které mají být nahrazeny. Může to být CSS selektor, DOM prvek, pole DOM prvků nebo JQ objekt.
Tato metoda vrací původní kolekci, tj. kolekci prvků použitých k nahrazení.
// Nahradí všechny prvky .box prvky .new
$('.new').replaceAll('.box');
.clone()
Vytvoří kopii všech prvků v kolekci pomocí hlubokého klonování.
Tato metoda používá nativní metodu cloneNode pro hluboké klonování, ale nekopíruje data a obslužné rutiny událostí do nových prvků. To se liší od jQuery, které pomocí parametru určuje, zda kopírovat data a události.
$('body').append($('#box').clone());
Formuláře
.serializeArray()
Zkombinuje hodnoty prvků formuláře do pole složeného z dvojic klíč-hodnota name a value.
Tuto metodu lze použít na jednotlivé prvky formuláře nebo na celý formulář <form>.
$('form').serializeArray();
// [
// { "name": "golang", "value":"456" },
// { "name": "name", "value": "mdui" },
// { "name": "password", "value": "" }
// ]
.serializeObject()
Převede hodnoty prvků formuláře na objekt.
Pokud existují stejné názvy klíčů, odpovídající hodnoty se převedou na pole.
Tuto metodu lze použít na jednotlivé prvky formuláře nebo na celý formulář <form>.
$('form').serializeObject();
// { name: mdui, password: 123456 }
.serialize()
Zkompiluje hodnoty prvků formuláře do řetězce zakódovaného v URL.
$('form').serialize();
// golang=456&name=mdui&password=
Události
.on()
Připojí obslužnou rutinu události ke konkrétní události každého prvku v kolekci. Konkrétní použití viz příklady níže:
// Připojí událost kliknutí
$('.box').on('click', function (e) {
console.log('Kliknuto na prvek .box');
});
// Připojí více událostí
$('.box').on('click focus', function (e) {
console.log('Tato funkce se spustí při událostech click i focus');
});
// Delegování událostí
$(document).on('click', '.box', function (e) {
console.log('Tato funkce se spustí při kliknutí na .box');
});
// Připojení více událostí a obslužných rutin najednou
$('.box').on({
click: function (e) {
console.log('Spuštěna událost click');
},
focus: function (e) {
console.log('Spuštěna událost focus');
},
});
// Předání parametrů
$('.box').on('click', { key1: 'value1', key2: 'value2' }, function (e) {
console.log(
'Kliknuto na prvek .box a obslužné rutině události byly předány parametry',
);
// e._data je {key1: 'value1', key2: 'value2'}
});
// Připojení více událostí a obslužných rutin najednou s předáním parametrů
$('.box').on(
{
click: function (e) {
console.log('Spuštěna událost click');
// e._data je {key1: 'value1', key2: 'value2'}
},
focus: function (e) {
console.log('Spuštěna událost focus');
// e._data je {key1: 'value1', key2: 'value2'}
},
},
{ key1: 'value1', key2: 'value2' },
);
// Připojení události pomocí delegování s předáním parametrů
$(document).on(
'click',
'.box',
{ key1: 'value1', keys: 'value2' },
function (e) {
console.log(
'Kliknuto na prvek .box a obslužné rutině události byly předány parametry',
);
// e._data je {key1: 'value1', key2: 'value2'}
},
);
// Připojení více událostí a obslužných rutin najednou pomocí delegování
$(document).on(
{
click: function (e) {
console.log('Spuštěna událost click');
},
focus: function (e) {
console.log('Spuštěna událost focus');
},
},
'.box',
);
// Připojení více událostí a obslužných rutin najednou pomocí delegování s předáním parametrů
$(document).on(
{
click: function (e) {
console.log('Spuštěna událost click');
// e._data je {key1: 'value1', key2: 'value2'}
},
focus: function (e) {
console.log('Spuštěna událost focus');
// e._data je {key1: 'value1', key2: 'value2'}
},
},
'.box',
{ key1: 'value1', key2: 'value2' },
);
// Získání parametrů události
$('.box').on('click', function (e, data) {
// data se rovná e.detail
});
// Názvy událostí mohou používat jmenné prostory
$('.box').on('click.myPlugin', function () {
console.log('Kliknuto na prvek .box');
});
.one()
Připojí obslužnou rutinu ke konkrétní události každého odpovídajícího prvku, ale událost se spustí pouze jednou.
Použití této metody je stejné jako u .on(), proto zde neuvádíme příklady.
.off()
Odpojí události připojené k prvkům v kolekci. Konkrétní použití viz příklady níže:
// Odpojí všechny připojené obslužné rutiny událostí
$('.box').off();
// Odpojí zadanou událost
$('.box').off('click');
// Odpojí více událostí najednou
$('.box').off('click focus');
// Odpojí zadanou obslužnou rutinu zadané události
$('.box').off('click', callback);
// Odpojí událost připojenou pomocí delegování
$(document).off('click', '.box');
// Odpojí zadanou obslužnou rutinu zadané události připojené pomocí delegování
$(document).off('click', '.box', callback);
// Odpojí více obslužných rutin událostí najednou
$('.box').off({
click: callback1,
focus: callback2,
});
// Odpojí více obslužných rutin událostí najednou připojených pomocí delegování
$(document).off(
{
click: callback1,
focus: callback2,
},
'.box',
);
// Názvy událostí mohou používat jmenné prostory. Následující použití odpojí všechny události končící na .myPlugin
$(document).off('.myPlugin');
.trigger()
Spustí zadanou událost. Konkrétní použití viz příklady níže:
// Spustí zadanou událost
$('.box').trigger('click');
// Při spuštění události předá parametry
$('.box').trigger('click', { key1: 'value1', key2: 'value2' });
// Názvy událostí mohou používat jmenné prostory
$('.box').trigger('click.myPlugin');
// Předá parametry CustomEvent
$('.box').trigger('click', undefined, {
bubbles: true,
cancelable: true,
composed: true,
});
ajax
$.ajaxSetup()
Nastaví globální parametry AJAX požadavků.
$.ajaxSetup({
// standardně nespouštět globální AJAX události
global: false,
// standardně používat metodu POST pro odesílání požadavků
method: 'POST',
});
Podrobný seznam parametrů viz parametry ajax níže.
$.ajax()
Odešle AJAX požadavek a vrátí Promise objekt.
const promise = $.ajax({
method: 'POST',
url: './test.php',
data: {
key1: 'val1',
key2: 'val2',
},
success: function (response) {
console.log(response);
},
});
promise
.then((response) => {
console.log(response);
})
.catch((error) => {
console.log(error);
});
Podrobný seznam parametrů viz AJAX parametry níže.
Globální AJAX události lze také poslouchat pomocí metody .on().
// Když AJAX požadavek začne, spustí se tato událost
$(document).on('ajaxStart', function (e, { xhr, options }) {
// xhr: XMLHttpRequest objekt
// options: parametry metody $.ajax()
});
// Když AJAX požadavek uspěje, spustí se tato událost
$(document).on('ajaxSuccess', function (e, { xhr, options, response }) {
// xhr: XMLHttpRequest objekt
// options: parametry metody $.ajax()
// response: odpověď požadavku
});
// Když AJAX požadavek selže, spustí se tato událost
$(document).on('ajaxError', function (e, { xhr, options }) {
// xhr: XMLHttpRequest objekt
// options: parametry metody $.ajax()
});
// Když AJAX požadavek skončí (ať už úspěchem nebo neúspěchem), spustí se tato událost
$(document).on('ajaxComplete', function (e, { xhr, options }) {
// xhr: XMLHttpRequest objekt
// options: parametry metody $.ajax()
});
parametry ajax
| Název vlastnosti | Typ | Výchozí hodnota |
|---|---|---|
url |
string |
URL aktuální stránky |
| Adresa URL požadavku. | ||
method |
string |
GET |
|
HTTP metoda požadavku. Možné hodnoty: |
||
data |
any |
'' |
| Data odesílaná na server. | ||
processData |
boolean |
true |
| Zda převést odesílaná data na řetězec dotazu. | ||
async |
boolean |
true |
| Zda se jedná o asynchronní požadavek. | ||
cache |
boolean |
true |
Zda číst data z mezipaměti. Platí pouze pro požadavky GET, HEAD. |
||
username |
string |
'' |
| Uživatelské jméno pro HTTP autentizaci. | ||
password |
string |
'' |
| Heslo pro HTTP autentizaci. | ||
headers |
object |
{} |
|
Data přidávaná do HTTP hlavičky požadavku. Lze přepsat v callback funkci Pole s hodnotou řetězce nebo |
||
xhrFields |
object |
{} |
|
Data nastavovaná na objektu |
||
statusCode |
object |
{} |
|
Mapování stavových kódů HTTP a odpovídajících obslužných funkcí. Pokud je stavový kód v rozsahu 200-299 nebo je 304, požadavek byl úspěšný. Parametry funkce jsou stejné jako u callback funkce |
||
dataType |
string |
text |
|
Očekávaný typ dat vrácených serverem. Zahrnuje: |
||
contentType |
string |
application/x-www-form-urlencoded |
MIME typ obsahu požadavku. Pokud je nastaveno na false, Content-Type se nenastavuje. |
||
timeout |
number |
0 |
Časový limit požadavku (v milisekundách). Pokud je nastaveno na 0, neexistuje žádný časový limit. |
||
global |
boolean |
true |
| Zda spouštět globální AJAX události. | ||
beforeSend |
function |
- |
|
Zavolá se před odesláním požadavku. Pokud vrátí |
||
success |
function |
- |
|
Zavolá se po úspěšném požadavku. |
||
error |
function |
- |
|
Zavolá se, když požadavek selže. |
||
complete |
function |
- |
|
Ať už požadavek uspěje nebo selže, zavolá se po jeho dokončení. |
||