JavaScript eszköztár

Ennek a módszernek több felhasználási módja is van:

Átadhat egy CSS szelektort paraméterként, amely egy a találati elemeket tartalmazó JQ objektumot ad vissza. Ez a módszer a querySelectorAll segítségével van megvalósítva.

$('.box')

Átadhat DOM elemet, bármilyen tömböt, NodeList-et vagy JQ objektumot, és a megadott elemeket tartalmazó JQ objektumot kapja vissza.

$(document)

Átadhat HTML karakterláncot, amely a HTML alapján létrehozott DOM-ot tartalmazó JQ objektumot ad vissza.

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

Átadhat egy függvényt, amely a DOM betöltődése után hívódik meg.

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

Ha csak egy objektumot ad át, annak tulajdonságai beolvadnak a JQ objektumba, így új funkciókat adhat hozzá a JQ névteréhez.

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

// Ezután így hívhatja meg az egyedi módszert
$.customFunc()

Ha két vagy több objektumot ad át, az összes objektum tulajdonságai az első objektumhoz adódnak hozzá, és a módszer az összevont objektumot adja vissza.

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

// Ekkor az első objektum és a visszatérési érték is { key1: val1, key2: val2, key3: val3 } lesz

Módszerek kiterjesztése a JQ prototípus-láncán.

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

// Ezután így használhatja a kiterjesztett módszert
$(document).customFunc()

Szerializál egy objektumot vagy tömböt egy olyan karakterlánccá, amely használható URL paraméterként.

$.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

Ha a megadott paraméter egy tömb, annak formátumának meg kell egyeznie a .serializeArray() visszatérési formátumával:

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

Végigiterál egy tömbön vagy objektumon. Visszatérési értéke az első paraméter, vagyis az iterált tömb vagy objektum.

A függvény első paramétere a tömbindex vagy az objektumkulcs; a második paraméter pedig a tömb vagy objektum megfelelő pozíciójában lévő érték.

A visszahívási függvényben a this a tömb vagy objektum megfelelő pozíciójában lévő értékre mutat. Ha a visszahívási függvény false értéket ad vissza, az iteráció leáll.

// Tömb iterálása
$.each(['a', 'b', 'c'], function (index, value) {
  console.log(index + ':' + value);
})

// Eredmény:
// 0:a
// 1:b
// 2:c

// Objektum iterálása
$.each({'name': 'mdui', 'lang': 'zh'}, function (key, value) {
  console.log(key + ':' + value);
})

// Eredmény:
// name:mdui
// lang:zh

Hozzáfűzi a második tömb elemeit az első tömbhöz, és az összevont tömböt adja vissza.

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

Kiszűri az ismétlődő elemeket a tömbből.

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

Végigiterál egy tömbön vagy objektumon, és visszaad egy új tömböt, amely a függvény visszatérési értékeiből áll.

A függvény első paramétere a tömb vagy objektum megfelelő pozíciójában lévő érték, a második paraméter pedig a tömbindex vagy az objektumkulcs.

A függvény bármilyen értéket visszaadhat; ha a függvény tömböt ad vissza, az kibontásra kerül; ha null-t vagy undefined-ot ad vissza, az figyelmen kívül lesz hagyva. A függvényen belül a this a window objektumra mutat.

// Tömb iterálása
var result = $.map(['a', 'b', 'c'], function (value, index) {
  return index + value;
});
console.log(result); // ['0a', '1b', '2c']

// Ha a visszahívási függvény tömböt ad vissza, az kibontásra kerül
var result = $.map([1, 2, 3], function (value, index) {
  return [value, value + 1];
});
console.log(result); // [1, 2, 2, 3, 3, 4]

// Objektum iterálása
var result = $.map({ name: 'mdui', password: '123456' }, function (value, key) {
  return key + ':' + value;
});
console.log(result); // ['name:mdui', 'password:123456']

Meghatározza, hogy a szülőcsomópont tartalmazza-e a gyermekcsomópontot; logikai értéket ad vissza.

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

Ha a gyűjteményben legalább egy elem illeszkedik a paraméterre, true-t ad vissza, különben false-t.

A paraméter lehet CSS szelektor, DOM elem, DOM elemek tömbje, JQ objektum vagy visszahívási függvény.

Ha a paraméter visszahívási függvény, annak első paramétere az index, a második paramétere az aktuális elem, és a this az aktuális elemre mutat. Ha a függvény true-t ad vissza, az egyezést jelent; ha false-t, akkor nem.

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

// Döntés a visszahívási függvény visszatérési értéke alapján
$(document).is(function (index, element) {
  return element === document;
});
// true

Visszaadja az aktuális gyűjteményben lévő elemek számát.

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

Végigiterál az aktuális gyűjteményen, és minden elemre végrehajt egy függvényt. Ha a függvény false-t ad vissza, az iteráció véget ér.

A függvény első paramétere az elem indexe, a második pedig az aktuális elem. A függvényben a this az aktuális elemre mutat.

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

Végigiterál az aktuális gyűjteményen, és minden elemre végrehajt egy függvényt, majd visszaad egy új gyűjteményt, amely a függvény visszatérési értékeiből áll. A null vagy undefined értékek kiszűrésre kerülnek.

A függvény első paramétere az elem indexe, a második pedig az aktuális elem. A függvényben a this az aktuális elemre mutat.

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

// A result egy JQ objektum, amely az illeszkedő elemek értékeiből áll

Csak a megadott indexű elemet tartalmazó gyűjteményt adja vissza.

$('div').eq(0); // Visszaad egy JQ objektumot, amely csak az első elemet tartalmazza
$('div').eq(-1); // Visszaad egy JQ objektumot, amely csak az utolsó elemet tartalmazza
$('div').eq(-2); // Visszaad egy JQ objektumot, amely csak az utolsó előtti elemet tartalmazza

Visszaad egy gyűjteményt, amely csak az első elemet tartalmazza.

$('div').first(); // Visszaad egy JQ objektumot, amely csak az első div-et tartalmazza

Visszaad egy gyűjteményt, amely csak az utolsó elemet tartalmazza.

$('div').last(); // Visszaad egy JQ objektumot, amely csak az utolsó div-et tartalmazza

Visszatér a megadott indexű elemmel. Ha nem ad meg paramétert, a gyűjtemény összes eleméből álló tömböt adja vissza.

$('div').get(); // Visszaadja az összes div elemet tartalmazó tömböt
$('div').get(0); // Az első div elemet adja vissza
$('div').get(-1); // Az utolsó div elemet adja vissza

Ha nem ad meg paramétert, visszaadja a gyűjtemény első elemének indexét a testvérelemeihez képest.

Ha egy CSS szelektort ad meg paraméterként, visszaadja a gyűjtemény első elemének indexét a szelektorral jelölt elemekhez képest.

Ha egy DOM elemet ad meg, visszaadja annak az elemnek az indexét a gyűjteményben.

Ha egy JQ objektumot ad meg, visszaadja annak első elemének indexét az aktuális gyűjteményben.

<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

Visszaadja az aktuális gyűjtemény egy részhalmazát.

Az első paraméter a részhalmaz kezdőpozíciója, a második pedig a vége; ha a másodikat elhagyja, a kezdőpozíciótól a végéig tartó összes elemet tartalmazza.

// Visszaadja a harmadik elem (azzal együtt) utáni összes elemet
$('div').slice(3);

// Visszaadja a harmadik és az ötödik elem közötti elemeket (a harmadikat beszámítva, az ötödiket nem)
$('div').slice(3, 5);

Kiszűri az aktuális gyűjteményből a megadott kifejezésnek megfelelő elemet. A paraméter lehet CSS szelektor, DOM elem, DOM elemek tömbje vagy visszahívási függvény.

Ha a paraméter függvény, annak első paramétere az index, a második az aktuális elem, és a this az elemre mutat. Ha a függvény true értéket ad vissza, az elem megmarad, ha pedig false értéket, akkor eltávolításra kerül.

// Kiválogatja az összes .box osztályú div elemet
$('div').filter('.box');

// Kiválogatja az összes kijelölt opciót
$('#select option').filter(function (index, element) {
  return element.selected;
});

Kiszűri az aktuális gyűjteményből azokat az elemeket, amelyek NEM felelnek meg a megadott kifejezésnek. A paraméter lehet CSS szelektor, DOM elem, DOM elemek tömbje vagy visszahívási függvény.

Ha a paraméter függvény, annak első paramétere az index, a második az aktuális elem, és a this az elemre mutat. Ha a függvény true értéket ad vissza, az elem eltávolításra kerül, ha pedig false értéket, akkor megmarad.

// Kiválogatja az összes div elemet, amelynek nincs .box osztálya
$('div').not('.box');

// Kiválogatja az összes nem kijelölt opciót
$('#select option').not(function (index, element) {
  return element.selected;
});

Meghatározza, hogy a gyűjtemény első eleme rendelkezik-e a megadott CSS osztállyal.

// Ellenőrzi, hogy az első div-nek van-e .item osztálya
$('div').hasClass('item')

Hozzáadja a megadott CSS osztályokat a gyűjtemény összes eleméhez; több osztály szóközökkel elválasztva is megadható.

Átadhat egy visszahívási függvényt is, amely visszaadja a CSS osztályneveket. A függvény első paramétere az index, a második az elem eredeti CSS osztályneve, a this pedig az aktuális elemre mutat.

// Hozzáadja az .item osztályt minden div elemhez
$('div').addClass('item')

// Hozzáadja az .item1 és .item2 osztályokat minden div elemhez
$('div').addClass('item1 item2')

// A visszahívási függvény által visszaadott CSS osztályt adja hozzá minden div-hez
$('div').addClass(function (index, currentClassName) {
  return currentClassName + '-' + index;
})

Eltávolítja a CSS osztályokat a gyűjtemény elemeiről; több név szóközökkel választható el.

Átadhat egy visszahívási függvényt is, amely visszaadja a CSS osztályneveket. A függvény első paramétere az index, a második az elem eredeti CSS osztályneve, a this pedig az aktuális elemre mutat.

Ha nem ad meg paramétert, közvetlenül eltávolítja az elem class attribútumát.

// Eltávolítja az .item osztályt minden div elemről
$('div').removeClass('item')

// Eltávolítja az .item1 és .item2 osztályokat minden div elemről
$('div').removeClass('item1 item2')

// A visszahívási függvény által visszaadott CSS osztályt távolítja el minden div-ről
$('div').removeClass(function (index, currentClassName) {
  return 'item';
})

// Közvetlenül eltávolítja a class attribútumot
$('div').removeClass()

Váltja (toggle) a CSS osztályokat az elemeken: ha van, törli, ha nincs, hozzáadja. Több név szóközökkel választható el.

Átadhat egy visszahívási függvényt is, amely visszaadja a CSS osztályneveket. A függvény első paramétere az index, a második az elem eredeti CSS osztályneve, a this pedig az aktuális elemre mutat.

// Váltja (toggle) az .item osztályt minden div elemen
$('div').toggleClass('item')

// Váltja (toggle) az .item1 és .item2 osztályokat minden div elemen
$('div').toggleClass('item1 item2')

// A visszahívási függvény által visszaadott osztályt váltja minden div elemen
$('div').toggleClass(function (index, currentClassName) {
  return 'item';
})

Lekéri a gyűjtemény első elemének attribútum-értékét.

// Lekéri az első elem attribútumának értékét
$('input').prop('checked');

Be is állíthatja vele a gyűjtemény összes elemének attribútumát.

A beállítandó érték lehet visszahívási függvény visszatérési értéke is. A függvény első paramétere az index, a második az eredeti attribútum-érték, a this pedig az aktuális elemre mutat.

Ha az érték vagy a visszahívási függvény visszatérési értéke void vagy undefined, az eredeti attribútum nem változik meg.

Több attribútumot is beállíthat egyszerre egy objektum átadásával.

// Beállítja az összes kijelölt elem attribútumát
$('input').prop('checked', true);

// Attribútum-érték beállítása visszahívási függvény segítségével
$('input').prop('checked', function (index, oldPropValue) {
  return true;
});

// Több attribútum beállítása egyszerre
$('input').prop({
  checked: false,
  disabled: function (index, oldPropValue) {
    return true;
  }
});

Eltávolítja a megadott attribútumokat a gyűjtemény összes eleméről.

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

Lekéri a gyűjtemény első elemének tulajdonságát (property).

// Lekéri az első elem tulajdonságának értékét
$('div').attr('username');

Be is állíthatja vele a gyűjtemény összes elemének tulajdonságát.

A beállítandó érték lehet visszahívási függvény visszatérési értéke is. A függvény első paramétere az index, a második az eredeti tulajdonság-érték, a this pedig az aktuális elemre mutat.

Ha az érték vagy a visszahívási függvény visszatérési értéke void vagy undefined, az eredeti tulajdonság nem módosul. Ha az érték null, a tulajdonság törlődik.

Több tulajdonságot is beállíthat egyszerre egy objektum átadásával.

// Beállítja az összes kijelölt elem tulajdonság-értékét
$('div').attr('username', 'mdui');

// Tulajdonság beállítása visszahívási függvény segítségével
$('div').attr('username', function (index, oldAttrValue) {
  return 'mdui';
});

// Több tulajdonság beállítása egyszerre
$('div').attr({
  username: 'mdui',
  lastname: function (index, oldAttrValue) {
    return 'test';
  }
});

Eltávolítja a megadott tulajdonságokat a gyűjtemény összes eleméről; több név szóközökkel választható el.

// Egy tulajdonság eltávolítása a gyűjtemény összes eleméről
$('div').removeAttr('username');

// Több tulajdonság eltávolítása a gyűjtemény összes eleméről
$('div').removeAttr('username lastname');

Lekéri a gyűjtemény első elemének értékét.

Ha az elem egy <select multiple="multiple">, akkor egy tömböt ad vissza, amely minden kiválasztott elemet tartalmaz.

// Lekéri a kijelölt első elem értékét
$('#input').val();

Be is állíthatja vele a gyűjtemény összes elemének értékét.

Az érték lehet karakterlánc, szám, karakterláncok tömbje vagy visszahívási függvény.

Ha visszahívási függvényt használ, az első paraméter az index, a második az elem eredeti értéke, a this pedig az elemre mutat.

Ha az elem <input type="checkbox">, <input type="radio"> vagy <option>, akkor az érték (vagy a visszatérési érték) lehet tömb; ekkor a tömbben szereplő értékeknek megfelelő elemek lesznek kijelölve.

Ha az érték vagy a függvény visszatérési értéke undefined, az elem értéke üres lesz.

// Kijelölt elemek értékének beállítása
$('#input').val('input value');

// Elem értékének beállítása visszahívási függvény segítségével
$('#input').val(function (index, oldValue) {
  return 'new value';
});

Lekéri a gyűjtemény összes elemének szöveges tartalmát (beleértve azok utódait is).

// Lekéri az összes .box elem szövegét
$('.box').text();

Be is állíthatja vele a gyűjtemény összes elemének szövegét.

Az érték lehet karakterlánc, szám, logikai érték vagy visszahívási függvény.

Visszahívási függvény esetén az első paraméter az index, a második az eredeti szöveges tartalom, a this pedig az aktuális elemre mutat.

Ha az érték vagy a visszatérési érték undefined, az elem szövege nem módosul.

// Kijelölt elemek szövegének beállítása
$('.box').text('text content');

// Szöveges tartalom beállítása visszahívási függvény segítségével
$('.box').text(function (index, oldTextContent) {
  return 'new text content';
});

Lekéri a gyűjtemény első elemének HTML tartalmát.

// Lekéri az első .box elem HTML-jét
$('.box').html();

Be is állíthatja vele a gyűjtemény összes elemének HTML tartalmát.

Az érték lehet HTML karakterlánc, DOM elem vagy visszahívási függvény.

Visszahívási függvény esetén az első paraméter az index, a második az eredeti HTML tartalom, a this pedig az aktuális elemre mutat.

Ha az érték vagy a visszatérési érték undefined, az elem HTML-je nem módosul.

// Kijelölt elemek HTML tartalmának beállítása
$('.box').html('<div>new html content</div>');

// HTML tartalom beállítása visszahívási függvény segítségével
$('.box').html(function (index, oldHTMLContent) {
  return '<div>new html content</div>';
});

Adatokat tárol vagy olvas be egy megadott elemen.

Adattároláskor, ha az érték undefined, az ugyanaz, mintha beolvasná az adatot. Vagyis a $.data(element, 'key', undefined) egyenértékű a $.data(element, 'key') hívással.

Megjegyzés: Ez a módszer nem keresi az elemen lévő data-* attribútumokat.

// Adat tárolása a megadott elemen; a tárolt értéket adja vissza
$.data(document.body, 'layout', 'dark'); // Visszatérési érték: dark

// Több adat tárolása egyszerre a megadott elemen
$.data(document.body, {
  primary: 'indigo',
  accent: 'pink',
});

// Lekéri a megadott elemen tárolt adatot
$.data(document.body, 'layout'); // Visszatérési érték: dark

// Lekéri a megadott elemen tárolt összes adatot
$.data(document.body); // Visszatérési érték: { layout: 'dark', primary: 'indigo', accent: 'pink' }

Eltávolítja a megadott elemen tárolt adatokat.

Több kulcsnév szóközökkel elválasztva vagy tömbként is megadható. Ha nincs megadva kulcsnév, az összes tárolt adat törlődik az elemről.

// A "name" kulcsú adat eltávolítása az elemről
$.removeData(document.body, 'name');

// A "name1" és "name2" kulcsú adatok eltávolítása az elemről. A következő két módszer egyenértékű:
$.removeData(document.body, 'name1 name2');
$.removeData(document.body, ['name1', 'name2']);

// Az elemen tárolt összes adat eltávolítása
$.removeData(document.body);

Adatokat tárol vagy olvas be az aktuális gyűjtemény elemein.

Adattároláskor, ha az érték undefined, a tárolás nem történik meg.

Megjegyzés: Ez a módszer beolvassa az elemen lévő data-* attribútumokat is.

// Adat tárolása az aktuális gyűjtemény elemein
$('.box').data('layout', 'dark');

// Több adat tárolása egyszerre az aktuális gyűjtemény elemein
$('.box').data({
  primary: 'indigo',
  accent: 'pink',
});

// Lekéri az aktuális gyűjtemény első elemén tárolt adatot
$('.box').data('layout'); // Visszatérési érték: dark

// Lekéri az aktuális gyűjtemény első elemén tárolt összes adatot
$('.box').data(); // Visszatérési érték: { layout: 'dark', primary: 'indigo', accent: 'pink' }

Eltávolítja az aktuális gyűjtemény elemein tárolt adatokat.

Több kulcsnév szóközökkel elválasztva vagy tömbként is megadható. Ha nincs megadva kulcsnév, az összes tárolt adat törlődik.

Megjegyzés: Ez a módszer csak a .data() segítségével beállított adatokat tárolja, a data-* attribútumokat nem távolítja el.

// A "name" kulcsú adat eltávolítása
$('.box').removeData('name');

// A "name1" és "name2" kulcsú adatok eltávolítása. A következő két módszer egyenértékű:
$('.box').removeData('name1 name2');
$('.box').removeData(['name1', 'name2']);

// Az összes tárolt adat eltávolítása
$('.box').removeData();

Lekéri a gyűjtemény első elemének CSS tulajdonságát.

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

Be is állíthatja vele a gyűjtemény összes elemének CSS tulajdonságait.

Az érték lehet karakterlánc, szám, vagy egy függvény, amely ezek valamelyikét adja vissza.

Ha visszahívási függvényt használ, az első paraméter az index, a második az eredeti CSS érték, a this pedig az elemre mutat.

Ha az érték vagy a függvény void, undefined vagy null értéket ad vissza, az aktuális CSS tulajdonság nem módosul.

Ha az érték vagy a függvény számot ad vissza, a px mértékegység automatikusan hozzáadódik. Ha a tulajdonsághoz nem használható a px, az érték karakterlánccá alakul.

Több CSS tulajdonságot is beállíthat egyszerre kulcs-érték párokat tartalmazó objektummal.

// Stílusérték beállítása a gyűjtemény minden elemére
$('.box').css('color', 'red')

// Stílus beállítása visszahívási függvény visszatérési értéke alapján
$('.box').css('color', function (index, oldCSSValue) {
  return 'green';
});

// Több stílus beállítása egyszerre objektum átadásával
$('.box').css({
  'background-color': 'white',
  color: function (index, oldCSSValue) {
    return 'blue';
  },
});

Lekéri a gyűjtemény első elemének szélességét (pixelben), a padding, border és margin nélkül.

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

Be is állíthatja a gyűjtemény elemeinek szélességét (nem számítva a padding-ot, a border-t és a margin-t).

Az érték lehet mértékegységgel ellátott karakterlánc, szám, vagy visszahívási függvény.

A visszahívási függvény első paramétere az index, a második az eredeti szélesség, a this pedig az elemre mutat.

Numerikus érték esetén a px mértékegység automatikusan hozzáadódik.

Ha az érték null vagy undefined, a szélesség nem módosul.

// Szélesség beállítása minden elemre
$('.box').width('20%');

// Számérték esetén az alapértelmezett egység a px
$('.box').width(10);

// Szélesség beállítása visszahívási függvény segítségével
$('.box').width(function (index, oldWidth) {
  return 10;
});

Lekéri a gyűjtemény első elemének magasságát (pixelben), a padding, border és margin nélkül.

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

Be is állíthatja a gyűjtemény elemeinek magasságát (nem számítva a padding-ot, a border-t és a margin-t).

Az érték lehet mértékegységgel ellátott karakterlánc, szám, vagy visszahívási függvény.

A visszahívási függvény első paramétere az index, a második az eredeti magasság, a this pedig az elemre mutat.

Numerikus érték esetén a px mértékegység automatikusan hozzáadódik.

Ha az érték null vagy undefined, a magasság nem módosul.

// Magasság beállítása minden elemre
$('.box').height('20%');

// Számérték esetén az alapértelmezett egység a px
$('.box').height(10);

// Magasság beállítása visszahívási függvény segítségével
$('.box').height(function (index, oldHeight) {
  return 10;
});

Lekéri a gyűjtemény első elemének szélességét (pixelben), beleértve a padding-ot, de a border és margin nélkül.

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

Be is állíthatja a gyűjtemény elemeinek szélességét (belértve a padding-ot, de a border és margin nélkül).

Az érték lehet mértékegységgel ellátott karakterlánc, szám, vagy visszahívási függvény.

A visszahívási függvény első paramétere az index, a második az eredeti szélesség, a this pedig az elemre mutat.

Numerikus érték esetén a px mértékegység automatikusan hozzáadódik.

Ha az érték null vagy undefined, a szélesség nem módosul.

// Szélesség beállítása minden elemre
$('.box').innerWidth('20%');

// Számérték esetén az alapértelmezett egység a px
$('.box').innerWidth(10);

// Szélesség beállítása visszahívási függvény segítségével
$('.box').innerWidth(function (index, oldWidth) {
  return 10;
});

Lekéri a gyűjtemény első elemének magasságát (pixelben), beleértve a padding-ot, de a border és margin nélkül.

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

Be is állíthatja a gyűjtemény elemeinek magasságát (belértve a padding-ot, de a border és margin nélkül).

Az érték lehet mértékegységgel ellátott karakterlánc, szám, vagy visszahívási függvény.

A visszahívási függvény első paramétere az index, a második az eredeti magasság, a this pedig az elemre mutat.

Numerikus érték esetén a px mértékegység automatikusan hozzáadódik.

Ha az érték null vagy undefined, a magasság nem módosul.

// Magasság beállítása minden elemre
$('.box').innerHeight('20%');

// Számérték esetén az alapértelmezett egység a px
$('.box').innerHeight(10);

// Magasság beállítása visszahívási függvény segítségével
$('.box').innerHeight(function (index, oldHeight) {
  return 10;
});

Lekéri a gyűjtemény első elemének szélességét (pixelben), beleértve a padding-ot és a border-t, de a margin nélkül. Átadhatja a true paramétert, hogy a margin-t is tartalmazza.

// Tartalmazza a padding-ot és a border-t
$('.box').outerWidth();

// Tartalmazza a padding-ot, border-t és margin-t
$('.box').outerWidth(true);

Be is állíthatja vele az összes elem szélességét (beleértve a padding-ot és border-t, de a margin nélkül; a második paraméterként átadott true beveszi a margin-t is).

Az első paraméter lehet mértékegységgel ellátott karakterlánc, szám, vagy visszahívási függvény.

A visszahívási függvény első paramétere az elem indexe, a második pedig az eredeti szélesség; a this az aktuális elemre mutat.

Számérték esetén a px egység automatikusan hozzáadódik.

Ha az érték null vagy undefined, a szélesség nem módosul.

// Szélesség beállítása minden elemre
$('.box').outerWidth('20%');

// Számérték esetén az alapértelmezett egység a px
$('.box').outerWidth(10);

// Ha a második paraméter true, a szélesség a margót is tartalmazza
$('.box').outerWidth(10, true);

// Szélesség beállítása visszahívási függvény segítségével
$('.box').outerWidth(function (index, oldWidth) {
  return 10;
});

Lekéri a gyűjtemény első elemének magasságát (pixelben), beleértve a padding-ot és a border-t, de a margin nélkül. Átadhatja a true paramétert, hogy a margin-t is tartalmazza.

// Magasság padding-gal és border-rel
$('.box').outerHeight();

// Magasság padding-gal, border-rel és margin-nal
$('.box').outerHeight(true);

Be is állíthatja vele az összes elem magasságát (beleértve a padding-ot és border-t, de a margin nélkül; a második paraméterként átadott true beveszi a margin-t is).

Az első paraméter lehet mértékegységgel ellátott karakterlánc, szám, vagy visszahívási függvény.

A visszahívási függvény első paramétere az elem indexe, a második pedig az eredeti magasság; a this az aktuális elemre mutat.

Számérték esetén a px egység automatikusan hozzáadódik.

Ha az érték null vagy undefined, a magasság nem módosul.

// Magasság beállítása minden elemre
$('.box').outerHeight('20%');

// Számérték esetén az alapértelmezett egység a px
$('.box').outerHeight(10);

// Ha a második paraméter true, a magasság a margót is tartalmazza
$('.box').outerHeight(10, true);

// Magasság beállítása visszahívási függvény segítségével
$('.box').outerHeight(function (index, oldWidth) {
  return 10;
});

Elrejti a gyűjtemény minden elemét.

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

Megjeleníti a gyűjtemény minden elemét.

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

Váltja (toggle) az elemek láthatóságát.

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

Lekéri a gyűjtemény első elemének koordinátáit a document-hez képest.

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

Be is állíthatja az összes elem koordinátáit a document-hez képest.

A paraméter egy top és left tulajdonságokkal rendelkező objektum, vagy egy ilyen formátumot visszaadó függvény.

Függvény esetén az első paraméter az index, a második az eredeti koordináta, a this az elemre mutat.

Ha a top vagy left értéke undefined, az adott érték nem módosul.

// Koordináták beállítása minden elemre
$('.box').offset({ top: 20, left: 30 });

// Koordináták beállítása visszahívási függvény segítségével
$('.box').offset(function (index, oldOffset) {
  return { top: 20, left: 30 };
});

Visszaadja a gyűjtemény első elemének pozicionálási szülőjét (az első olyan szülő, aminek a position értéke relative vagy absolute).

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

Lekéri a gyűjtemény első elemének eltolását (offset) a szülőeleméhez képest.

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

Keresi a megadott szelektorral rendelkező utódcsomópontokat a gyűjtemény minden elemében.

// Keresi a .box osztályú utódokat a #box elemen belül
$('#box').find('.box')

Lekéri az aktuális gyűjtemény elemeinek közvetlen gyermekelemeit.

Átadhat egy CSS szelektort a gyermekelemek szűréséhez.

// Lekéri a #box összes közvetlen gyermekét
$('#box').children();

// Lekéri a #box .box osztályú közvetlen gyermekelemeit
$('#box').children('.box')

Kiválogatja azokat az elemeket, amelyek tartalmazzák a megadott utódelemet.

A paraméter lehet CSS szelektor vagy DOM elem.

// Háttérszín hozzáadása azokhoz az li elemekhez, amelyek tartalmaznak ul-t
$('li').has('ul').css('background-color', 'red');

Lekéri az aktuális gyűjtemény minden elemének közvetlen szülőit.

CSS szelektorral szűrheti, hogy melyik szülőelemek kerüljenek visszaadásra.

// Visszaadja a .box elemek közvetlen szülőit
$('.box').parent();

// Visszaadja a .box elemek azon közvetlen szülőit, amelyeknek van .parent osztálya
$('.box').parent('.parent');

Lekéri az aktuális gyűjtemény minden elemének összes ősét.

CSS szelektorral szűrheti, hogy melyik ősök kerüljenek visszaadásra.

// Visszaadja a span elem összes ősét
$('span').parents();

// Visszaadja a span elem összes p típusú ősét
$('span').parents('p');

Lekéri minden elem minden szülőjét addig, amíg az első paraméternek megfelelő elemet el nem éri (azt nem tartalmazza).

Az első paraméter lehet CSS szelektor, DOM elem vagy JQ objektum.

A második paraméter (ha van) egy CSS szelektor, amellyel tovább szűrhető a végeredmény.

Paraméter nélkül az összes ős visszakerül, ahogy a .parents() esetében.

// Lekéri az .item elem minden ősét
$('.item').parentsUntil();

// Lekéri az .item elem minden ősét a .parent elemig
$('.item').parentsUntil('.parent');

// Lekéri az .item elem minden div típusú ősét a .parent elemig
$('.item').parentsUntil('.parent', 'div');

Lekéri az aktuális gyűjtemény minden elemének közvetlen megelőző szomszédját.

CSS szelektorral szűrheti a megelőző szomszédokat.

// Lekéri a .box elem előtti elemeket
$('.box').prev();

// Lekéri a .box elem előtti div elemeket
$('.box').prev('div');

Lekéri az aktuális gyűjtemény minden eleme előtti összes szomszédos elemet.

CSS szelektorral szűrheti az előző szomszédokat.

// Lekéri a .box elem előtti összes szomszédot
$('.box').prevAll();

// Lekéri a .box elem előtti összes .selected osztályú szomszédot
$('.box').prevAll('.selected');

Lekéri minden elem előtti szomszédait addig, amíg az első paraméternek megfelelő elemet el nem éri (azt nem tartalmazza).

Az első paraméter lehet CSS szelektor, DOM elem vagy JQ objektum.

A második paraméter egy CSS szelektor a találatok szűréséhez.

// Lekéri a .box elem előtti összes szomszédot
$('.box').prevUntil();

// Lekéri a .box előtti szomszédokat az .until elemig
$('.box').prevUntil('.until');

// Lekéri a .box előtti div szomszédokat az .until elemig
$('.box').prevUntil('.until', 'div');

Lekéri az aktuális gyűjtemény minden elemének közvetlen rákövetkező szomszédját.

CSS szelektorral szűrheti a rákövetkező szomszédokat.

// Lekéri a .box elem utáni elemeket
$('.box').next();

// Lekéri a .box elem utáni div elemeket
$('.box').next('div');

Lekéri az aktuális gyűjtemény minden eleme utáni összes szomszédos elemet.

CSS szelektorral szűrheti az utánuk lévő szomszédokat.

// Lekéri a .box elem utáni összes szomszédot
$('.box').nextAll();

// Lekéri a .box elem utáni összes .selected osztályú szomszédot
$('.box').nextAll('.selected');

Lekéri minden elem utáni szomszédait addig, amíg az első paraméternek megfelelő elemet el nem éri (azt nem tartalmazza).

Az első paraméter lehet CSS szelektor, DOM elem vagy JQ objektum.

A második paraméter egy CSS szelektor a találatok szűréséhez.

// Lekéri a .box elem utáni összes szomszédot
$('.box').nextUntil();

// Lekéri a .box utáni szomszédokat az .until elemig
$('.box').nextUntil('.until');

// Lekéri a .box utáni div szomszédokat az .until elemig
$('.box').nextUntil('.until', 'div');

Felfelé haladva a DOM-ban megkeresi az első elemet, amely illeszkedik a paraméterre.

A paraméter lehet CSS szelektor, DOM elem vagy JQ objektum.

// Megkeresi a .box szülői között a legközelebbi .parent elemet
$('.box').closest('.parent');

Lekéri az aktuális gyűjtemény minden elemének összes testvérelemét.

CSS szelektorral szűrheti a testvérelemeket.

// Lekéri a .box összes testvérét
$('.box').siblings();

// Lekéri a .box .selected osztályú testvéreit
$('.box').siblings('.selected');

Új elemeket ad hozzá az aktuális gyűjteményhez.

A paraméter lehet HTML karakterlánc, CSS szelektor, JQ objektum, DOM elem, DOM elemek tömbje vagy NodeList.

// A .selected osztályú elemek hozzáadása a gyűjteményhez
$('.box').add('.selected');

Eltávolítja az aktuális elemek összes gyermekcsomópontját.

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

Eltávolítja az aktuális gyűjtemény elemeit a DOM-ból.

CSS szelektorral szűrheti az eltávolítandó elemeket.

// Minden p elem eltávolítása
$('p').remove();

// Minden .box osztályú p elem eltávolítása
$('p').remove('.box');

A megadott tartalom beszúrása az aktuális elemeken belülre, az elejére.

A paraméter lehet HTML karakterlánc, DOM elem, DOM elemek tömbje vagy JQ objektum. Több paraméter is átadható.

Átadhat egy függvényt is, amely beszúrandó tartalmat ad vissza; a paraméterei az index és az eredeti HTML, a this az elemre mutat.

A módszer az eredeti gyűjteményt adja vissza.

// Egy elem beszúrása
$('<p>I would like to say: </p>').prepend('<b>Hello</b>');
// Eredmény:<p><b>Hello</b>I would like to say: </p>

// Több elem beszúrása
$('<p>I would like to say: </p>').prepend('<b>Hello</b>', '<b>World</b>');
// Eredmény:<p><b>Hello</b><b>World</b>I would like to say: </p>

// Elem beszúrása visszahívási függvény segítségével
$('<p>Hello</p>').prepend(function (index, oldHTML) {
  return '<b>' + oldHTML + index + '</b>';
});
// Eredmény:<p><b>Hello0</b>Hello</p>

Az aktuális gyűjtemény elemeinek beszúrása a cél-elemek belsejének elejére.

A paraméter lehet CSS szelektor, HTML karakterlánc, DOM elem, DOM elemek tömbje vagy JQ objektum.

A módszer az eredeti gyűjteményt adja vissza.

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

// Eredmény:[ <div><div>Hello</div>I would like to say: </div> ]

A megadott tartalom beszúrása az aktuális elemeken belülre, a végére.

A paraméter lehet HTML karakterlánc, DOM elem, DOM elemek tömbje vagy JQ objektum. Több paraméter is átadható.

Átadhat egy függvényt is; a paraméterei az index és az eredeti HTML, a this az elemre mutat.

A módszer az eredeti gyűjteményt adja vissza.

// Egy elem beszúrása
$('<p>I would like to say: </p>').append('<b>Hello</b>');
// Eredmény:<p>I would like to say: <b>Hello</b></p>

// Több elem beszúrása
$('<p>I would like to say: </p>').append('<b>Hello</b>', '<b>World</b>');
// Eredmény:<p>I would like to say: <b>Hello</b><b>World</b></p>

// Elem beszúrása visszahívási függvény segítségével
$('<p>Hello</p>').append(function (index, oldHTML) {
  return '<b>' + oldHTML + index + '</b>';
});
// Eredmény:<p>Hello<b>Hello0</b></p>

Az aktuális gyűjtemény elemeinek beszúrása a cél-elemek belsejének végére.

A paraméter lehet CSS szelektor, HTML karakterlánc, DOM elem, DOM elemek tömbje vagy JQ objektum.

A módszer az eredeti gyűjteményt adja vissza.

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

A megadott tartalom beszúrása az aktuális elemek után, testvérelemként.

A paraméter lehet HTML karakterlánc, DOM elem, DOM elemek tömbje vagy JQ objektum. Több paraméter is átadható.

Átadhat egy függvényt is; a paraméterei az index és az eredeti HTML, a this az elemre mutat.

A módszer az eredeti gyűjteményt adja vissza.

// Egy elem beszúrása
$('<p>I would like to say: </p>').after('<b>Hello</b>')
// Eredmény:<p>I would like to say: </p><b>Hello</b>

// Több elem beszúrása
$('<p>I would like to say: </p>').after('<b>Hello</b>', '<b>World</b>')
// Eredmény:<p>I would like to say: </p><b>Hello</b><b>World</b>

// Elem beszúrása visszahívási függvény segítségével
$('<p>Hello</p>').after(function (index, oldHTML) {
  return '<b>' + oldHTML + index + '</b>';
});
// Eredmény:<p>Hello</p><b>Hello0</b>

Az aktuális gyűjtemény elemeinek beszúrása a cél-elemek után, testvérelemként.

Ha az elem már a DOM része, akkor áthelyezésre kerül. Több célpont esetén klónozva lesz.

A célpont lehet HTML karakterlánc, CSS szelektor, DOM elem, tömb vagy JQ objektum.

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

A megadott tartalom beszúrása az aktuális elemek elé, testvérelemként.

A paraméter lehet HTML karakterlánc, DOM elem, DOM elemek tömbje vagy JQ objektum. Több paraméter is átadható.

Átadhat egy függvényt is; a paraméterei az index és az eredeti HTML, a this az elemre mutat.

A módszer az eredeti gyűjteményt adja vissza.

// Egy elem beszúrása
$('<p>I would like to say: </p>').before('<b>Hello</b>')
// Eredmény:<b>Hello</b><p>I would like to say: </p>

// Több elem beszúrása
$('<p>I would like to say: </p>').before('<b>Hello</b>', '<b>World</b>')
// Eredmény:<b>Hello</b><b>World</b><p>I would like to say: </p>

// Elem beszúrása visszahívási függvény segítségével
$('<p>Hello</p>').before(function (index, oldHTML) {
  return '<b>' + oldHTML + index + '</b>';
});
// Eredmény:<b>Hello0</b><p>Hello</p>

Az aktuális gyűjtemény elemeinek beszúrása a cél-elemek elé, testvérelemként.

Ha az elem már a DOM része, akkor áthelyezésre kerül. Több célpont esetén klónozva lesz.

A célpont lehet HTML karakterlánc, CSS szelektor, DOM elem, tömb vagy JQ objektum.

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

Lecseréli az aktuális gyűjtemény elemeit a megadott elemekkel.

A paraméter lehet HTML karakterlánc, DOM elem, DOM elemek tömbje vagy JQ objektum.

Átadhat egy függvényt is; a paraméterei az index és az eredeti HTML, a this az elemre mutat.

Visszaadja az eredeti (lecserélt) gyűjteményt.

// Minden .box elem lecserélése a <p>Hello</p> tartalomra
$('.box').replaceWith('<p>Hello</p>');

// Minden .box elem lecserélése a visszahívási függvény által visszaadott tartalomra
$('.box').replaceWith(function (index, oldHTML) {
  return oldHTML + index;
});

Lecseréli a cél-elemeket az aktuális gyűjtemény elemeire.

A paraméter lehet CSS szelektor, DOM elem, tömb vagy JQ objektum.

Az új (behelyettesített) elemekből álló gyűjteményt adja vissza.

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

Mély-klónozással másolja a gyűjtemény összes elemét.

A natív cloneNode segítségével klónoz. Az adatokat és eseménykezelőket nem másolja le, ami különbség a jQuery-hez képest.

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

Az űrlap-elemek értékeit egy name és value párokból álló tömbbé vonja össze.

Ez a módszer használható egyedi űrlap-elemeken vagy a teljes <form> elemen is.

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

Szerializálja az űrlap-elemek értékeit.

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

Eseménykezelőt rendel az elemek megadott eseményeihez. Példák alább:

// Kattintás esemény rögzítése
$('.box').on('click', function (e) {
  console.log('Kattintás történt a .box elemen');
});

// Több esemény rögzítése
$('.box').on('click focus', function (e) {
  console.log('A függvény mind a click, mind a focus eseményre lefut');
});

// Esemény-delegálás
$(document).on('click', '.box', function (e) {
  console.log('A függvény akkor fut le, ha a .box elemre kattintanak');
});

// Több esemény és eseménykezelő rögzítése egyszerre
$('.box').on({
  'click': function (e) {
    console.log('Lefutott a click esemény');
  },
  'focus': function (e) {
    console.log('Lefutott a focus esemény');
  }
});

// Paraméterek átadása
$('.box').on('click', { key1: 'value1', key2: 'value2' }, function (e) {
  console.log('Kattintás a .box-on paraméterek átadásával');
  // e._data értéke {key1: 'value1', key2: 'value2'}
});

// Több esemény és kezelő rögzítése paraméterekkel
$('.box').on({
  'click': function (e) {
    console.log('Lefutott a click esemény');
    // e._data értéke {key1: 'value1', key2: 'value2'}
  },
  'focus': function (e) {
    console.log('Lefutott a focus esemény');
    // e._data értéke {key1: 'value1', key2: 'value2'}
  }
}, { key1: 'value1', key2: 'value2' });

// Esemény-delegálás paraméterekkel
$(document).on('click', '.box', { key1: 'value1', key2: 'value2' }, function (e) {
  console.log('Kattintás a .box-on paraméterek átadásával');
  // e._data értéke {key1: 'value1', key2: 'value2'}
});

// Több delegált esemény és kezelő rögzítése
$(document).on({
  'click': function (e) {
    console.log('Lefutott a click esemény');
  },
  'focus': function (e) {
    console.log('Lefutott a focus esemény');
  }
}, '.box');

// Több delegált esemény és kezelő rögzítése paraméterekkel
$(document).on({
  'click': function (e) {
    console.log('Lefutott a click esemény');
    // e._data értéke {key1: 'value1', key2: 'value2'}
  },
  'focus': function (e) {
    console.log('Lefutott a focus esemény');
    // e._data értéke {key1: 'value1', key2: 'value2'}
  }
}, '.box', { key1: 'value1', key2: 'value2' });

// Esemény-paraméterek lekérése
$('.box').on('click', function (e, data) {
  // A data megegyezik az e._detail értékével
});

// Az eseménynevek támogatják a névtereket
$('.box').on('click.myPlugin', function () {
  console.log('Kattintás történt a .box elemen');
});

Eseménykezelő rögzítése, amely csak egyszer fut le.

A használata megegyezik az .on() módszerrel.

Leválasztja (unbind) az eseménykezelőket az elemekről.

// Minden rögzített eseménykezelő eltávolítása
$('.box').off();

// Adott esemény leválasztása
$('.box').off('click');

// Több esemény leválasztása egyszerre
$('.box').off('click focus');

// Egy konkrét eseménykezelő leválasztása
$('.box').off('click', callback);

// Delegált esemény leválasztása
$(document).off('click', '.box');

// Delegált esemény egy konkrét kezelőjének leválasztása
$(document).off('click', '.box', callback);

// Több eseménykezelő leválasztása egyszerre
$('.box').off({
  'click': callback1,
  'focus': callback2,
});

// Több delegált eseménykezelő leválasztása egyszerre
$(document).off({
  'click': callback1,
  'focus': callback2,
}, '.box');

// Névterek használata az eltávolításnál; minden .myPlugin névtérbe tartozó eseményt töröl
$(document).off('.myPlugin');

Kiváltja a megadott eseményt.

// Adott esemény kiváltása
$('.box').trigger('click');

// Esemény kiváltása paraméterekkel
$('.box').trigger('click', { key1: 'value1', key2: 'value2' });

Globális konfiguráció beállítása az Ajax kérésekhez.

$.ajaxSetup({
  // Globális AJAX események letiltása alapértelmezés szerint
  global: false,

  // POST kérés használata alapértelmezés szerint
  method: 'POST'
});

A részletes paraméterlistát lásd az AJAX paraméterek alatt.

AJAX kérést küld, Promise-t ad vissza.

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

A részletes paraméterlistát lásd az AJAX paraméterek alatt.

Globális AJAX események.

Függvény végrehajtása az AJAX kérés indításakor.

$(document).ajaxStart(function (event, xhr, options) {
  // xhr: az XMLHttpRequest objektum
  // options: a kérés konfigurációs paraméterei
});

Globális AJAX események.

Sikeres AJAX kérés esetén lefutó függvény.

$(document).ajaxSuccess(function (event, xhr, options, data) {
  // xhr: az XMLHttpRequest objektum
  // options: a kérés konfigurációs paraméterei
  // data: a válaszban kapott adatok
});

Globális AJAX események.

Hiba esetén lefutó függvény.

$(document).ajaxError(function (event, xhr, options) {
  // xhr: az XMLHttpRequest objektum
  // options: a kérés konfigurációs paraméterei
});

Globális AJAX események.

A kérés befejezésekor (sikertől függetlenül) lefutó függvény.

$(document).ajaxComplete(function (event, xhr, options) {
  // xhr: az XMLHttpRequest objektum
  // options: a kérés konfigurációs paraméterei
});

Kérés típusa (HTTP method).

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

A fejrészhez (Headers) adandó adatok; a beforeSend-ben felülírható.

A karakterlánc vagy null értékű mezők elküldésre kerülnek, az undefined mezők törlődnek.

Az XMLHttpRequest objektumon beállítandó adatok.

$.ajax({
  url: 'Egy domain-ek közötti (cross-domain) URL',
  xhrFields: {
    withCredentials: true
  }
});

HTTP állapotkódok és hozzájuk rendelt függvények.

$.ajax({
  statusCode: {
    404: function (xhr, textStatus) {
      alert('Meghívódik 404-es kód esetén');
    },
    200: function (data, textStatus, xhr) {
      alert('Meghívódik 200-as kód esetén');
    }
  }
});

200-299 közötti kód vagy 304 esetén sikeres; a paraméterek megegyeznek a success vagy error paramétereivel.

A szerver által visszaadott adat típusa.

Lehet: text, json

A kérés elküldése előtt hívódik meg; false visszatolásával a kérés megszakítható.

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

Sikeres kérés után hívódik meg.

$.ajax({
  success: function (data, textStatus, xhr) {
    // data: a válaszban kapott adatok
    // textStatus: a sikerkódot tartalmazó karakterlánc
    // xhr: az XMLHttpRequest objektum
  }
});

Hiba esetén hívódik meg.

$.ajax({
  error: function (xhr, textStatus) {
    // xhr: az XMLHttpRequest objektum
    // textStatus: a sikerkódot tartalmazó karakterlánc
  }
});

A kérés befejezése után hívódik meg.

$.ajax({
  complete: function (xhr, textStatus) {
    // xhr: az XMLHttpRequest objektum
    // textStatus: a sikerkódot tartalmazó karakterlánc
  }
});

Az aktuális elem kényszerített újrarajzolása.

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

Beállítja az elem transition-duration tulajdonságát.

Lehet mértékegységgel ellátott időérték vagy anélküli; utóbbi esetben az ms automatikusan hozzáadódik.

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

Transitionend eseménykezelő hozzáadása az elemhez.

A visszahívási függvény paramétere a transitionend eseményobjektum, a this az elemre mutat.

$('.box').transitionEnd(function () {
  console.log('A .box elem transitionend eseménye kiváltódott');
})

Beállítja az elem transform tulajdonságát.

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

Beállítja az elem transform-origin tulajdonságát.

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

Végrehajtja az elemen és utódain regisztrált inicializáló függvényeket.

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

Létrehozza és megjeleníti a maszkot (overlay); a maszk JQ objektumát adja vissza.

Paraméterként megadható a z-index értéke, alapértelmezése 2000.

$.showOverlay();

Elrejti a maszkot.

Többszöri $.showOverlay() hívás esetén ugyanannyi $.hideOverlay() szükséges, kivéve, ha true paraméterrel kényszerítjük az elrejtést.

$.hideOverlay();

Zárolja az oldalt, megakadályozva a görgetést.

$.lockScreen();

Feloldja az oldal zárolását.

Többszöri $.lockScreen() hívás esetén ugyanannyi $.unlockScreen() szükséges, kivéve, ha true paraméterrel kényszerítjük a feloldást.

$.unlockScreen();

Függvény fojtás (throttle).

Paraméterként a végrehajtandó függvényt és a késleltetést (milliszekundum) várja.

$.throttle(function () {
  console.log('Ez a függvény legfeljebb 100 ms-onként egyszer fut le');
}, 100)

Globálisan egyedi azonosítót (ID) generál.

$.guid();

Paraméterként átadott értékhez, ha nem létezik guid, újat generál; ha már létezik, a meglévőt adja vissza.

// Az alábbi két sor ugyanazt az értéket adja vissza
$.guid('test');
$.guid('test');