jq könyvtár

Az mdui egy könnyűsúlyú JavaScript segédkönyvtárat tartalmaz, amely a jQuery-hez hasonló API-t és láncolható hívásokat biztosít, de a mérete csak a jQuery hatoda.

A segédfüggvény importálása:

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

Alap

`$()`

A függvénynek többféle használata van:

Adjon meg egy CSS szelektort paraméterként, és adja vissza a kiválasztott elemeket tartalmazó JQ objektumot.

$('.box');

Adjon meg egy DOM elemet, tetszőleges tömböt, NodeList-et vagy JQ objektumot, és adja vissza a megadott elemeket tartalmazó JQ objektumot.

$(document);

Adjon meg egy HTML karakterláncot, és adja vissza a HTML alapján létrehozott DOM-okat tartalmazó JQ objektumot.

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

Adjon meg egy függvényt, amely a DOM betöltődése után fog meghívódni.

$(function () {
  console.log('DOM betöltve');
});

Kiterjesztés

`$.extend()`

Ha csak egy objektumot ad meg, az objektum tulajdonságai a $ objektumba lesznek összefésülve, ami új funkciók hozzáadását jelenti a $ névtérhez.

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

// Ezután a saját metódus így hívható
$.customFunc();

Ha két vagy több objektumot ad meg, az összes objektum tulajdonsága hozzáadódik az első objektumhoz, és visszaadja az összefésült objektumot. Az undefined értékű tulajdonságok nem kerülnek összefésülésre.

const 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 }

`$.fn.extend()`

Metódusok kiterjesztése a $ prototípus láncán.

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

// Ezután a kiterjesztett metódus így használható
$(document).customFunc();

URL

`$.param()`

Egy tömböt vagy objektumot sorosít URL lekérdezési karakterlánccá.

$.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 paraméter egy tömb, akkor a tömb formátumának meg kell egyeznie a .serializeArray() által visszaadott formátummal.

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

Tömb- és objektumműveletek

`$.each()`

Bejár egy tömböt vagy objektumot. Visszatérési értéke az első paraméter, vagyis a bejárt tömb vagy objektum.

A visszahívási függvény első paramétere a tömb indexe vagy az objektum kulcsa, a második paraméter a tömb vagy objektum adott pozíciójában lévő érték.

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

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

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

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

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

`$.merge()`

Hozzáfűzi a második tömb elemeit az első tömbhöz, és visszaadja az összefésült tömböt.

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()`

Eltávolítja az ismétlődő elemeket a tömbből.

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

`$.map()`

Bejár egy tömböt vagy objektumot, és visszaadja a visszahívási függvény visszatérési értékeiből álló új tömböt.

A visszahívási függvény első paramétere a tömb vagy objektum adott pozíciójában lévő érték, a második paramétere a tömb indexe vagy az objektum kulcsa.

A visszahívási függvény bármilyen értéket visszaadhat. Ha a visszatérési érték egy tömb, akkor ez a tömb kibontásra kerül. Ha a visszatérési érték null vagy undefined, akkor ez az érték figyelmen kívül lesz hagyva. A visszahívási függvényen belül a this a window objektumra mutat.

// Tömb bejárása
const 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, a tömb kibontásra kerül
const result = $.map([1, 2, 3], function (value, index) {
  return [value, value + 1];
});
console.log(result); // [1, 2, 2, 3, 3, 4]

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

`$.contains()`

Meghatározza, hogy egy csomópont tartalmaz-e egy másik csomópontot. Ha a szülő csomópont tartalmazza a gyermek csomópontot, true értéket ad vissza; egyébként false értéket.

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

Adattípus-ellenőrzés

`.is()`

Meghatározza, hogy a gyűjteményben van-e legalább egy elem, amely megfelel a paraméternek. Ha egyezik, true értéket ad vissza; egyébként false értéket.

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 egy visszahívási függvény, a függvény első paramétere az index, a második paramétere az aktuális elem. A függvényen belül a this az aktuális elemre mutat. Ha a függvény true értéket ad vissza, az aktuális elem megfelel a paraméternek; ha false értéket ad vissza, az aktuális elem nem felel meg a paraméternek.

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

// Meghatározás a visszahívási függvény visszatérési értékével
$(document).is(function (index, element) {
  return element === document;
});
// true

Objektum elérés

`.length`

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

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

`.each()`

Bejárja az aktuális gyűjteményt, és végrehajt egy függvényt a gyűjtemény minden elemére. Ha a függvény false értéket ad vissza, a bejárás leáll.

A függvény első paramétere az elem indexpozíciója, a második paramétere az aktuális elem. A függvényen belül a this az aktuális elemre mutat.

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

`.map()`

Bejárja az aktuális gyűjteményt, végrehajt egy függvényt a gyűjtemény minden elemére, és visszaadja a függvény visszatérési értékeiből álló új gyűjteményt.

A függvény visszaadhat egyetlen adatot vagy adatok tömbjét. Ha tömböt ad vissza, a tömb elemei sorban hozzáadódnak az új gyűjteményhez. Ha a függvény null vagy undefined értéket ad vissza, ez az érték nem kerül hozzáadásra az új gyűjteményhez.

A függvény első paramétere az elem indexpozíciója, a második paramétere az aktuális elem. A függvényen belül a this az aktuális elemre mutat.

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

// A result egy JQ objektum, amely a megfelelő elemek értékeit tartalmazza

`.eq()`

Visszaad egy új gyűjteményt, amely csak a megadott indexpozícióban lévő elemet tartalmazza.

$('div').eq(0); // Visszaadja az első elemet tartalmazó gyűjteményt
$('div').eq(-1); // Visszaadja az utolsó elemet tartalmazó gyűjteményt
$('div').eq(-2); // Visszaadja az utolsó előtti elemet tartalmazó gyűjteményt

`.first()`

Visszaad egy új gyűjteményt, amely csak az aktuális gyűjtemény első elemét tartalmazza.

$('div').first(); // Visszaadja az első div elemet tartalmazó gyűjteményt

`.last()`

Visszaad egy új gyűjteményt, amely csak az aktuális gyűjtemény utolsó elemét tartalmazza.

$('div').last(); // Visszaadja az utolsó div elemet tartalmazó gyűjteményt

`.get()`

Visszaadja a megadott indexpozícióban lévő elemet. Ha nem ad meg paramétert, visszaadja a gyűjtemény összes eleméből álló tömböt.

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

`.index()`

Ha nem ad meg paramétert, visszaadja az aktuális gyűjtemény első elemének indexét a testvérelemekhez viszonyítva.

Ha megad egy CSS szelektort, visszaadja az aktuális gyűjtemény első elemének indexét a CSS szelektor által kiválasztott elemekhez viszonyítva.

Ha megad egy DOM elemet, visszaadja az elem indexét az aktuális gyűjteményben.

Ha megad egy JQ objektumot, visszaadja az objektum 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

`.slice()`

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

Két paraméter megadásával megadhatja a részhalmaz kezdő- és végpozícióját (a végpozícióban lévő elem nem tartozik bele). Ha nem ad meg második paramétert, a kezdőpozíciótól a gyűjtemény végéig tartó összes elemet adja vissza.

// Visszaadja a gyűjtemény harmadik (beleértve) utáni összes elemét
$('div').slice(3);

// Visszaadja a gyűjtemény harmadik és ötödik közötti elemeit (harmadik beleértve, ötödik nem)
$('div').slice(3, 5);

`.filter()`

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

Ha a paraméter egy visszahívási függvény, a függvény első paramétere az elem indexpozíciója, a második paramétere az aktuális elem. A függvényen belül a this az aktuális elemre mutat. Ha a függvény true értéket ad vissza, az aktuális elem megmarad; ha false értéket ad vissza, az aktuális elem eltávolításra kerül.

// Kiszűri az összes .box osztályt tartalmazó div elemet
$('div').filter('.box');

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

`.not()`

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, JQ objektum vagy boolean értéket visszaadó visszahívási függvény.

Ha a paraméter egy visszahívási függvény, a függvény első paramétere az elem indexpozíciója, a második paramétere az aktuális elem. A függvényen belül a this az aktuális elemre mutat. Ha a függvény true értéket ad vissza, az aktuális elem eltávolításra kerül; ha false értéket ad vissza, az aktuális elem megmarad.

// Kiszűri az összes .box osztályt nem tartalmazó div elemet
$('div').not('.box');

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

CSS osztályok

`.hasClass()`

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

// Meghatározza, hogy az első div elem tartalmazza-e a .item osztályt
$('div').hasClass('item');

`.addClass()`

CSS osztályokat ad a gyűjtemény minden eleméhez, az osztálynevek szóközzel elválaszthatók.

A paraméter lehet egy karakterlánc vagy egy CSS osztálynevet visszaadó visszahívási függvény. Ha a paraméter egy visszahívási függvény, a függvény első paramétere az elem indexpozíciója, a második paramétere az elemen már meglévő CSS osztálynevek. A függvényen belül a this az aktuális elemre mutat.

// Hozzáadja a .item osztályt az összes div elemhez
$('div').addClass('item');

// Hozzáadja a .item1 és .item2 osztályokat az összes div elemhez
$('div').addClass('item1 item2');

// Hozzáadja a visszahívási függvény által visszaadott CSS osztályt az összes div elemhez
$('div').addClass(function (index, currentClassName) {
  return currentClassName + '-' + index;
});

`.removeClass()`

Eltávolítja a megadott CSS osztályokat a gyűjtemény minden eleméről, az osztálynevek szóközzel elválaszthatók.

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

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

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

// Eltávolítja a visszahívási függvény által visszaadott CSS osztályt az összes div elemről
$('div').removeClass(function (index, currentClassName) {
  return 'item';
});

`.toggleClass()`

Ha az elemen van a megadott CSS osztály, eltávolítja; ha nincs, hozzáadja. Több osztálynév szóközzel elválasztható.

// Váltja a .item osztályt az összes div elemen
$('div').toggleClass('item');

// Váltja a .item1 és .item2 osztályokat az összes div elemen
$('div').toggleClass('item1 item2');

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

Csomópont attribútumok

`.prop()`

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

// Lekéri az első elem checked tulajdonságát
$('input').prop('checked');

Ha két paramétert ad meg, a metódus beállítja a gyűjtemény összes elemének megadott JavaScript tulajdonságát.

A tulajdonság értéke bármilyen típusú lehet, vagy egy visszahívási függvény visszatérési értéke. A visszahívási függvény első paramétere az elem indexpozíciója, a második paramétere az elemen lévő eredeti tulajdonság értéke, a függvényen belüli this az aktuális elemre mutat.

Ha a tulajdonság értéke vagy a visszahívási függvény visszatérési értéke undefined, a metódus nem módosítja az elem eredeti tulajdonságát.

// Beállítja az összes kiválasztott elem checked tulajdonságát true értékre
$('input').prop('checked', true);

// A tulajdonság értékének beállítása a visszahívási függvény visszatérési értékével
$('input').prop('checked', function (index, oldPropValue) {
  return true;
});

Egy objektum megadásával egyszerre több tulajdonságot is beállíthat.

// Egyszerre több tulajdonság beállítása az elemeken
$('input').prop({
  checked: false,
  disabled: function (index, oldPropValue) {
    return true;
  },
});

`.removeProp()`

Eltávolítja a megadott JavaScript tulajdonságot a gyűjtemény összes eleméről.

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

`.attr()`

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

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

Ha két paramétert ad meg, a metódus beállítja a gyűjtemény összes elemének megadott HTML attribútumát.

Az attribútum értéke lehet karakterlánc vagy szám, vagy egy attribútum értéket visszaadó visszahívási függvény. Ha a paraméter egy visszahívási függvény, a függvény első paramétere az elem indexpozíciója, a második paramétere az elemen lévő eredeti attribútum értéke. A függvényen belül a this az aktuális elemre mutat.

Ha az attribútum értéke vagy a visszahívási függvény visszatérési értéke null, a metódus eltávolítja a megadott attribútumot; ha undefined, nem módosítja az elem eredeti attribútumát.

// Beállítja az összes kiválasztott elem attribútumának értékét
$('div').attr('username', 'mdui');

// Az attribútum értékének beállítása a visszahívási függvény visszatérési értékével
$('div').attr('username', function (index, oldAttrValue) {
  return 'mdui';
});

Egy objektum megadásával egyszerre több attribútumot is beállíthat.

// Egyszerre több attribútum beállítása az elemeken
$('div').attr({
  username: 'mdui',
  lastname: function (index, oldAttrValue) {
    return 'test';
  },
});

`.removeAttr()`

Eltávolítja a megadott HTML attribútumokat a gyűjtemény összes eleméről, több attribútumnév szóközzel elválasztható.

// Eltávolít egy attribútumot a gyűjtemény összes eleméről
$('div').removeAttr('username');

// Eltávolít több attribútumot a gyűjtemény összes eleméről
$('div').removeAttr('username lastname');

`.val()`

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

Ha az elem egy <select multiple="multiple">, visszaadja az összes kijelölt elemet tartalmazó tömböt.

// Lekéri a kiválasztott első elem értékét
$('#input').val();

Ha paramétert ad meg, a metódus beállítja a gyűjtemény összes elemének értékét.

Az érték lehet karakterlánc, szám, karakterláncok tömbje, vagy egy értéket visszaadó visszahívási függvény. Ha a paraméter egy visszahívási függvény, a függvény első paramétere az elem indexpozíciója, a második paramétere az elem eredeti értéke. A függvényen belül a this az aktuális elemre mutat.

Ha az elem <input type="checkbox">, <input type="radio">, <option>, akkor az érték vagy a visszahívási függvény visszatérési értéke lehet tömb, ekkor a tömbben lévő értékek lesznek kijelölve, a tömbben nem szereplő értékek kijelölése megszűnik.

Ha az érték vagy a visszahívási függvény visszatérési értéke undefined, az elem értéke üresre lesz állítva.

// Beállítja a kiválasztott elem értékét
$('#input').val('mdui');

// Az elem értékének beállítása a visszahívási függvény visszatérési értékével
$('#input').val(function (index, oldValue) {
  return 'mdui';
});

`.text()`

Visszaadja a gyűjtemény összes elemének (beleértve a leszármazott elemeket is) szöveges tartalmát.

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

Ha paramétert ad meg, a metódus beállítja a gyűjtemény összes elemének szöveges tartalmát.

Az érték lehet karakterlánc, szám, logikai érték, vagy egy szöveges tartalmat visszaadó visszahívási függvény. Ha a paraméter egy visszahívási függvény, a függvény első paramétere az elem indexpozíciója, a második paramétere az elem eredeti szöveges tartalma. A függvényen belül a this az aktuális elemre mutat.

Ha az érték vagy a visszahívási függvény visszatérési értéke undefined, nem módosítja az elem szöveges tartalmát.

// Beállítja a kiválasztott elem szöveges tartalmát
$('.box').text('szöveges tartalom');

// Az elem szöveges tartalmának beállítása a visszahívási függvény visszatérési értékével
$('.box').text(function (index, oldTextContent) {
  return 'új szöveges tartalom';
});

`.html()`

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

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

Ha paramétert ad meg, a metódus beállítja a gyűjtemény összes elemének HTML tartalmát.

Az érték lehet HTML karakterlánc, DOM elem, vagy egy HTML karakterláncot vagy DOM elemet visszaadó visszahívási függvény. Ha a paraméter egy visszahívási függvény, a függvény első paramétere az elem indexpozíciója, a második paramétere az elem eredeti HTML tartalma. A függvényen belül a this az aktuális elemre mutat.

Ha az érték vagy a visszahívási függvény visszatérési értéke undefined, nem módosítja az elem HTML tartalmát.

// Beállítja a kiválasztott elem HTML tartalmát
$('.box').html('<div>új html tartalom</div>');

// Az elem HTML tartalmának beállítása a visszahívási függvény visszatérési értékével
$('.box').html(function (index, oldHTMLContent) {
  return '<div>új html tartalom</div>';
});

Adattárolás

`$.data()`

Adatokat olvas ki vagy tárol a megadott elemen.

Az adatok tárolásakor, ha az érték undefined, akkor az az elemen lévő megfelelő adat lekérésének felel meg. Vagyis $.data(element, 'key', undefined) és $.data(element, 'key') egyenértékű.

Figyelem: Ez a metódus nem kéri le az elem data-* attribútumait.

// Adatok tárolása a megadott elemen, visszaadja a tárolt értéket
$.data(document.body, 'layout', 'dark'); // dark értéket ad vissza

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

// A megadott elemen tárolt adatok lekérése
$.data(document.body, 'layout'); // dark értéket ad vissza

// A megadott elemen tárolt összes adat lekérése
$.data(document.body); // Visszaadja: { layout: 'dark', primary: 'indigo', accent: 'pink' }

`$.removeData()`

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

Megadhat több kulcsnevet szóközzel elválasztva, vagy tömbben megadva. Ha nem ad meg kulcsnevet, eltávolítja az elem összes adatát.

// Eltávolítja az elemről a name kulcsú adatot
$.removeData(document.body, 'name');

// Eltávolítja a name1 és name2 kulcsú adatokat az elemről. Az alábbi két módszer egyenértékű:
$.removeData(document.body, 'name1 name2');
$.removeData(document.body, ['name1', 'name2']);

// Eltávolítja az elemen tárolt összes adatot
$.removeData(document.body);

`.data()`

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

Ha a tárolt érték undefined, nem történik tárolás.

Figyelem: Ez a metódus a lekérdezett adatok között tartalmazza az elem data-* attribútumait is.

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

// Több adat egyidejű tárolása 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 megadott adatot
$('.box').data('layout'); // dark értéket ad vissza

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

`.removeData()`

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

Megadhat több kulcsnevet szóközzel elválasztva, vagy tömbben megadva. Ha nem ad meg kulcsnevet, eltávolítja az elem összes adatát.

Figyelem: Ez a metódus csak a .data() metódussal beállított adatokat távolítja el, nem távolítja el a data-* attribútumokon lévő adatokat.

// Eltávolítja a name kulcsú adatot
$('.box').removeData('name');

// Eltávolítja a name1 és name2 kulcsú adatokat. Az alábbi két módszer egyenértékű:
$('.box').removeData('name1 name2');
$('.box').removeData(['name1', 'name2']);

// Eltávolítja az elemen tárolt összes adatot
$('.box').removeData();

Stílus

`.css()`

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

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

Ha paramétert ad meg, a metódus beállítja a gyűjtemény összes elemének CSS tulajdonságát.

A tulajdonság értéke lehet karakterlánc, szám, vagy egy karakterláncot vagy számot visszaadó visszahívási függvény. Ha a paraméter egy visszahívási függvény, a függvény első paramétere az elem indexpozíciója, a második paramétere az elem eredeti CSS tulajdonságának értéke. A függvényen belül a this az aktuális elemre mutat.

Ha az érték vagy a visszahívási függvény visszatérési értéke undefined, nem módosítja az elem CSS tulajdonságát. Ha az érték null, eltávolítja az elem megfelelő CSS tulajdonságát. Ha az érték szám, automatikusan hozzáadja a px mértékegységet, kivéve, ha az adott tulajdonság nem használhatja a px mértékegységet, akkor az érték egyszerűen karakterlánccá alakul.

// Beállítja a gyűjtemény összes elemének stílusát
$('.box').css('color', 'red');

// A gyűjtemény összes elemének stílusának beállítása a visszahívási függvény visszatérési értékével
$('.box').css('color', function (index, oldCSSValue) {
  return 'green';
});

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

`.width()`

Lekéri a gyűjtemény első elemének szélességét (nem tartalmazza a padding, border, margin értékeket).

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

Ha paramétert ad meg, a metódus beállítja a gyűjtemény összes elemének szélességét.

Az érték lehet mértékegységgel ellátott karakterlánc, szám, vagy egy mértékegységgel ellátott karakterláncot vagy számot visszaadó visszahívási függvény. Ha a paraméter egy visszahívási függvény, a függvény első paramétere az elem indexpozíciója, a második paramétere az elem eredeti szélessége. A függvényen belül a this az aktuális elemre mutat.

Ha az érték vagy a visszahívási függvény visszatérési értéke null vagy undefined, nem módosítja az elem szélességét. Ha az érték szám, automatikusan hozzáadja a px mértékegységet.

// Beállítja a gyűjtemény összes elemének szélességét
$('.box').width('20%');

// Ha az érték szám, az alapértelmezett mértékegység a px
$('.box').width(10);

// A szélesség beállítása a visszahívási függvény visszatérési értékével
$('.box').width(function (index, oldWidth) {
  return 10;
});

`.height()`

Lekéri a gyűjtemény első elemének magasságát (nem tartalmazza a padding, border, margin értékeket).

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

Ha paramétert ad meg, a metódus beállítja a gyűjtemény összes elemének magasságát.

Az érték lehet mértékegységgel ellátott karakterlánc, szám, vagy egy mértékegységgel ellátott karakterláncot vagy számot visszaadó visszahívási függvény. Ha a paraméter egy visszahívási függvény, a függvény első paramétere az elem indexpozíciója, a második paramétere az elem eredeti magassága. A függvényen belül a this az aktuális elemre mutat.

Ha az érték vagy a visszahívási függvény visszatérési értéke null vagy undefined, nem módosítja az elem magasságát. Ha az érték szám, automatikusan hozzáadja a px mértékegységet.

// Beállítja a gyűjtemény összes elemének magasságát
$('.box').height('20%');

// Ha az érték szám, az alapértelmezett mértékegység a px
$('.box').height(10);

// A magasság beállítása a visszahívási függvény visszatérési értékével
$('.box').height(function (index, oldHeight) {
  return 10;
});

`.innerWidth()`

Lekéri a gyűjtemény első elemének szélességét (tartalmazza a padding-et, nem tartalmazza a border, margin értékeket).

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

Ha paramétert ad meg, a metódus beállítja a gyűjtemény összes elemének szélességét.

// Beállítja a gyűjtemény összes elemének szélességét
$('.box').innerWidth('20%');

// Ha az érték szám, az alapértelmezett mértékegység a px
$('.box').innerWidth(10);

// A szélesség beállítása a visszahívási függvény visszatérési értékével
$('.box').innerWidth(function (index, oldWidth) {
  return 10;
});

`.innerHeight()`

Lekéri a gyűjtemény első elemének magasságát (tartalmazza a padding-et, nem tartalmazza a border, margin értékeket).

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

Ha paramétert ad meg, a metódus beállítja a gyűjtemény összes elemének magasságát.

Az érték lehet mértékegységgel ellátott karakterlánc, szám, vagy egy mértékegységgel ellátott karakterláncot vagy számot visszaadó visszahívási függvény. Ha a paraméter egy visszahívási függvény, a függvény első paramétere az elem indexpozíciója, a második paramétere az elem eredeti magassága. A függvényen belül a this az aktuális elemre mutat.

// Beállítja a gyűjtemény összes elemének magasságát
$('.box').innerHeight('20%');

// Ha az érték szám, az alapértelmezett mértékegység a px
$('.box').innerHeight(10);

// A magasság beállítása a visszahívási függvény visszatérési értékével
$('.box').innerHeight(function (index, oldHeight) {
  return 10;
});

`.outerWidth()`

Lekéri a gyűjtemény első elemének szélességét (tartalmazza a padding-et, border-t, nem tartalmazza a margin-et. A true paraméter megadásával a szélesség a margin-et is tartalmazza).

// A padding-et és border-t tartalmazó szélesség
$('.box').outerWidth();

// A padding-et, border-t és margin-t tartalmazó szélesség
$('.box').outerWidth(true);

Ezzel a metódussal is beállíthatja a gyűjtemény összes elemének szélességét (tartalmazza a padding-et, border-t, nem tartalmazza a margin-et. A második paraméterben a true megadásával a szélesség a margin-et is tartalmazza).

Az első paraméter lehet mértékegységgel ellátott karakterlánc, szám, vagy egy mértékegységgel ellátott karakterláncot vagy számot visszaadó visszahívási függvény. Ha a paraméter egy visszahívási függvény, a függvény első paramétere az elem indexpozíciója, a második paramétere az elem eredeti szélessége. A függvényen belül a this az aktuális elemre mutat.

// Beállítja a gyűjtemény összes elemének szélességét
$('.box').outerWidth('20%');

// Ha az érték szám, az alapértelmezett mértékegység a px
$('.box').outerWidth(10);

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

// A szélesség beállítása a visszahívási függvény visszatérési értékével
$('.box').outerWidth(function (index, oldWidth) {
  return 10;
});

`.outerHeight()`

Lekéri a gyűjtemény első elemének magasságát (tartalmazza a padding-et, border-t, nem tartalmazza a margin-et. A true paraméter megadásával a magasság a margin-et is tartalmazza).

// A padding-et és border-t tartalmazó magasság
$('.box').outerHeight();

// A padding-et, border-t és margin-t tartalmazó magasság
$('.box').outerHeight(true);

Ezzel a metódussal is beállíthatja a gyűjtemény összes elemének magasságát (tartalmazza a padding-et, border-t, nem tartalmazza a margin-et. A második paraméterben a true megadásával a magasság a margin-et is tartalmazza).

Az első paraméter lehet mértékegységgel ellátott karakterlánc, szám, vagy egy mértékegységgel ellátott karakterláncot vagy számot visszaadó visszahívási függvény. Ha a paraméter egy visszahívási függvény, a függvény első paramétere az elem indexpozíciója, a második paramétere az elem eredeti magassága. A függvényen belül a this az aktuális elemre mutat.

// Beállítja a gyűjtemény összes elemének magasságát
$('.box').outerHeight('20%');

// Ha az érték szám, az alapértelmezett mértékegység a px
$('.box').outerHeight(10);

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

// A magasság beállítása a visszahívási függvény visszatérési értékével
$('.box').outerHeight(function (index, oldHeight) {
  return 10;
});

`.hide()`

Elrejti a gyűjtemény összes elemét.

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

`.show()`

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

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

`.toggle()`

Váltja a gyűjtemény összes elemének megjelenítési állapotát.

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

`.offset()`

Lekéri az aktuális gyűjtemény első elemének a document-hez viszonyított koordinátáit.

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

Ha paramétert ad meg, a metódus beállítja a gyűjtemény összes elemének a document-hez viszonyított koordinátáit.

A paraméter lehet egy top és left tulajdonságokat tartalmazó objektum, vagy egy ilyen formátumú objektumot visszaadó visszahívási függvény. Ha a paraméter egy visszahívási függvény, a függvény első paramétere az elem indexpozíciója, a második paramétere az elem eredeti koordinátái. A függvényen belül a this az aktuális elemre mutat.

Ha a paraméterben a top vagy left értéke undefined, akkor a megfelelő érték nem módosul.

// Beállítja a gyűjtemény összes elemének koordinátáit
$('.box').offset({ top: 20, left: 30 });

// A koordináták beállítása a visszahívási függvény visszatérési értékével
$('.box').offset(function (index, oldOffset) {
  return { top: 20, left: 30 };
});

`.offsetParent()`

Lekéri az aktuális gyűjtemény első elemének pozicionált szülőelemét. Vagyis az első olyan szülőelemet, amelynek position tulajdonsága relative vagy absolute.

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

`.position()`

Lekéri az aktuális gyűjtemény első elemének eltolását a pozicionált szülőeleméhez képest.

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

Csomópont keresése

`.find()`

Az aktuális gyűjteményben a CSS szelektor alapján megkeresi a megadott leszármazott csomópontok gyűjteményét.

// Megkeresi a #box leszármazott csomópontjai közül a .box-t tartalmazó csomópontok gyűjteményét
$('#box').find('.box');

`.children()`

Az aktuális gyűjteményben lekéri a közvetlen gyermek elemekből álló gyűjteményt. Megadhat egy CSS szelektort paraméterként a gyermek elemek szűréséhez.

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

// Lekéri a #box közvetlen gyermek elemei közül a .box-t tartalmazó elemeket
$('#box').children('.box');

`.has()`

Az aktuális gyűjteményben kiszűri azokat az elemeket, amelyek tartalmazzák a megadott gyermek elemet. A paraméter lehet CSS szelektor vagy DOM elem.

// Piros háttérszínt ad azoknak a li elemeknek, amelyek tartalmaznak ul elemet
$('li').has('ul').css('background-color', 'red');

`.parent()`

Lekéri az aktuális gyűjtemény összes elemének közvetlen szülőelemének gyűjteményét. Megadhat egy CSS szelektort paraméterként, és csak azokat a szülőelemeket adja vissza, amelyek megfelelnek a paraméternek.

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

// Visszaadja a .box elemek közvetlen szülőelemei közül azokat, amelyek tartalmazzák a .parent osztályt
$('.box').parent('.parent');

`.parents()`

Lekéri az aktuális gyűjtemény összes elemének őselemeinek gyűjteményét. Megadhat egy CSS szelektort paraméterként, és csak azokat az őselemeket adja vissza, amelyek megfelelnek a paraméternek.

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

// Visszaadja a span elem azon őseleit, amelyek p elemek
$('span').parents('p');

`.parentsUntil()`

Lekéri az aktuális gyűjtemény minden elemének összes szülőelemét, amíg el nem éri az első paraméternek megfelelő elemet (a megfelelő elem nem tartozik bele).

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

Megadhat egy második paramétert, amelynek CSS szelektornak kell lennie, ami azt jelzi, hogy csak azokat az elemeket adja vissza, amelyek megfelelnek ennek a paraméternek.

Ha nem ad meg paramétert, akkor az összes ős elem egyezni fog, vagyis ugyanaz a hatás, mint a .parents() esetén.

// Lekéri a .item elem összes ős elemét
$('.item').parentsUntil();

// Megkeresi a .item elem összes szülőelemét, amíg el nem éri a .parent elemet
$('.item').parentsUntil('.parent');

// Lekéri a .item elem azon ős elemeit, amelyek div elemek, amíg el nem éri a .parent elemet
$('.item').parentsUntil('.parent', 'div');

`.prev()`

Lekéri az aktuális gyűjtemény minden elemének előző testvéreleméből álló gyűjteményt. Megadhat egy CSS szelektort paraméterként, és csak azokat a testvérelemeket adja vissza, amelyek megfelelnek a paraméternek.

// Lekéri a .box elem előző testvérelemének gyűjteményét
$('.box').prev();

// Lekéri a .box elem előző testvérelemei közül azokat, amelyek div elemek
$('.box').prev('div');

`.prevAll()`

Lekéri az aktuális gyűjtemény minden eleme előtti összes testvérelemből álló gyűjteményt. Megadhat egy CSS szelektort paraméterként, és csak azokat a testvérelemeket adja vissza, amelyek megfelelnek a paraméternek.

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

// Lekéri a .box elem előtti összes .selected osztályt tartalmazó testvérelemet
$('.box').prevAll('.selected');

`.prevUntil()`

Lekéri az aktuális gyűjtemény minden eleme előtti összes testvérelemet, amíg el nem éri az első paraméternek megfelelő elemet (a megfelelő elem nem tartozik bele).

Az első paraméter lehet CSS szelektor, DOM elem, JQ objektum. Megadhat egy második paramétert, amelynek CSS szelektornak kell lennie, ami azt jelzi, hogy csak azokat az elemeket adja vissza, amelyek megfelelnek ennek a paraméternek.

Ha nem ad meg paramétert, akkor az összes előtti testvérelemet adja vissza, ami megegyezik a .prevAll() metódus hatásával.

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

// Lekéri a .box elem előtti összes testvérelemet, amíg el nem éri a .until elemet
$('.box').prevUntil('.until');

// Lekéri a .box elem előtti olyan testvérelemeket, amelyek div-ek, amíg el nem éri a .until elemet
$('.box').prevUntil('.until', 'div');

`.next()`

Lekéri az aktuális gyűjtemény minden elemének következő testvéreleméből álló gyűjteményt. Megadhat egy CSS szelektort paraméterként, és csak azokat a testvérelemeket adja vissza, amelyek megfelelnek a paraméternek.

// Lekéri a .box elem következő testvérelemének gyűjteményét
$('.box').next();

// Lekéri a .box elem következő testvérelemei közül azokat, amelyek div elemek
$('.box').next('div');

`.nextAll()`

Lekéri az aktuális gyűjtemény minden eleme utáni összes testvérelemből álló gyűjteményt. Megadhat egy CSS szelektort paraméterként, és csak azokat a testvérelemeket adja vissza, amelyek megfelelnek a paraméternek.

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

// Lekéri a .box elem utáni összes .selected osztályt tartalmazó testvérelemet
$('.box').nextAll('.selected');

`.nextUntil()`

Lekéri az aktuális gyűjtemény minden eleme utáni összes testvérelemet, amíg el nem éri az első paraméternek megfelelő elemet (a megfelelő elem nem tartozik bele).

Ha nem ad meg paramétert, akkor az összes utáni testvérelemet adja vissza, ami megegyezik a .nextAll() metódus hatásával.

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

// Lekéri a .box elem utáni összes testvérelemet, amíg el nem éri a .until elemet
$('.box').nextUntil('.until');

// Lekéri a .box elem utáni, div-nek minősülő testvérelemeket, amíg el nem éri a .until elemet
$('.box').nextUntil('.until', 'div');

`.closest()`

Az aktuális elemtől kezdve felfelé haladva megkeresi a legközelebbi egyező elemet. A paraméter lehet CSS szelektor, DOM elem, JQ objektum.

// Lekéri a .box elem szülőelemei közül a legközelebbi .parent elemet
$('.box').closest('.parent');

`.siblings()`

Lekéri az aktuális gyűjtemény minden elemének összes testvérelemét. Megadhat egy CSS szelektort paraméterként, és csak azokat a testvérelemeket adja vissza, amelyek megfelelnek a paraméternek.

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

// Lekéri a .box elem testvérelemei közül az összes .selected osztályt tartalmazó elemet
$('.box').siblings('.selected');

`.add()`

Elemeket ad az aktuális gyűjteményhez. A paraméter lehet HTML karakterlánc, CSS szelektor, JQ objektum, DOM elem, DOM elemek tömbje, NodeList.

// Hozzáadja a .selected osztályt tartalmazó elemeket az aktuális gyűjteményhez
$('.box').add('.selected');

Csomópont műveletek

`.empty()`

Eltávolítja az aktuális elem összes gyermek elemét.

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

`.remove()`

Eltávolítja az aktuális gyűjtemény elemeit a DOM-ból. Megadhat egy CSS szelektort paraméterként, és csak azokat az elemeket távolítja el, amelyek megfelelnek a paraméternek.

// Eltávolítja az összes p elemet
$('p').remove();

// Eltávolítja az összes olyan p elemet, amely tartalmazza a .box osztályt
$('p').remove('.box');

`.prepend()`

Az aktuális gyűjtemény elemei belsejének elejére illeszt be megadott tartalmat. A paraméter lehet HTML karakterlánc, DOM elem, DOM elemek tömbje, JQ objektum. Több paraméter is megadható.

Megadhat egy visszahívási függvényt is, amely HTML karakterláncot, DOM elemet, DOM elemek tömbjét vagy JQ objektumot ad vissza. A függvény első paramétere az aktuális elem indexpozíciója, a második paramétere az elem eredeti HTML-je, a függvényen belüli this az aktuális elemre mutat.

Ez a metódus az eredeti gyűjteményt adja vissza.

// Egy elem beszúrása
$('<p>Mondani szeretném: </p>').prepend('<b>Hello</b>');
// Eredmény: <p><b>Hello</b>Mondani szeretném: </p>

// Több elem beszúrása
$('<p>Mondani szeretném: </p>').prepend('<b>Hello</b>', '<b>Világ</b>');
// Eredmény: <p><b>Hello</b><b>Világ</b>Mondani szeretném: </p>

// Egy elem beszúrása a 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>

`.prependTo()`

Az aktuális gyűjtemény elemeit a megadott elem belsejének elejére illeszti. A paraméter lehet CSS szelektor, HTML karakterlánc, DOM elem, DOM elemek tömbje, JQ objektum.

Ez a metódus az eredeti gyűjteményt adja vissza.

$('<p>Hello</p>').prependTo('<p>Mondani szeretném: </p>');
// Eredmény: [ <p><p>Hello</p>Mondani szeretném: </p> ]

`.append()`

Az aktuális elem belsejének végére illeszt be megadott tartalmat. A paraméter lehet HTML karakterlánc, DOM elem, DOM elemek tömbje, JQ objektum. Több paraméter is megadható.

Ez a metódus az eredeti gyűjteményt adja vissza.

// Egy elem beszúrása
$('<p>Mondani szeretném: </p>').append('<b>Hello</b>');
// Eredmény: <p>Mondani szeretném: <b>Hello</b></p>

// Több elem beszúrása
$('<p>Mondani szeretném: </p>').append('<b>Hello</b>', '<b>Világ</b>');
// Eredmény: <p>Mondani szeretném: <b>Hello</b><b>Világ</b></p>

// Egy elem beszúrása a 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>

`.appendTo()`

Az aktuális gyűjtemény elemeit a megadott elem belsejének végére illeszti. A paraméter lehet CSS szelektor, HTML karakterlánc, DOM elem, DOM elemek tömbje, JQ objektum.

Ez a metódus az eredeti gyűjteményt adja vissza.

$('<p>Hello</p>').appendTo('<p>Mondani szeretném: </p>');
// Eredmény: <p>Mondani szeretném: <p>Hello</p></p>

`.after()`

Az aktuális gyűjtemény elemei mögé illeszt be megadott tartalmat, annak testvérelemeként. A paraméter lehet HTML karakterlánc, DOM elem, DOM elemek tömbje, JQ objektum. Több paraméter is megadható.

Ez a metódus az eredeti gyűjteményt adja vissza.

// Egy elem beszúrása
$('<p>Mondani szeretném: </p>').after('<b>Hello</b>');
// Eredmény: <p>Mondani szeretném: </p><b>Hello</b>

// Több elem beszúrása
$('<p>Mondani szeretném: </p>').after('<b>Hello</b>', '<b>Világ</b>');
// Eredmény: <p>Mondani szeretném: </p><b>Hello</b><b>Világ</b>

// Egy elem beszúrása a 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>

`.insertAfter()`

Az aktuális gyűjtemény elemeit a cél elem mögé illeszti, annak testvérelemeként.

Ha az aktuális gyűjtemény elemei már meglévő elemek az oldalon, akkor az elem mozgatásra kerül, nem másolásra. Ha több cél van, akkor az aktuális gyűjtemény elemei klónozódnak, és minden cél elem mögé hozzáadódnak.

Megadhat egy HTML karakterláncot, CSS szelektort, DOM elemet, DOM elemek tömbjét vagy JQ objektumot paraméterként a cél elem megadásához.

$('<b>Hello</b>').insertAfter('<p>Mondani szeretném: </p>');
// Eredmény: <p>Mondani szeretném: </p><b>Hello</b>

`.before()`

Az aktuális gyűjtemény elemei elé illeszt be megadott tartalmat, annak testvérelemeként. A paraméter lehet HTML karakterlánc, DOM elem, DOM elemek tömbje, JQ objektum. Több paraméter is megadható.

Ez a metódus az eredeti gyűjteményt adja vissza.

// Egy elem beszúrása
$('<p>Mondani szeretném: </p>').before('<b>Hello</b>');
// Eredmény: <b>Hello</b><p>Mondani szeretném: </p>

// Több elem beszúrása
$('<p>Mondani szeretném: </p>').before('<b>Hello</b>', '<b>Világ</b>');
// Eredmény: <b>Hello</b><b>Világ</b><p>Mondani szeretném: </p>

// Egy elem beszúrása a 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>

`.insertBefore()`

Az aktuális gyűjtemény elemeit a cél elem elé illeszti, annak testvérelemeként.

Megadhat egy HTML karakterláncot, CSS szelektort, DOM elemet, DOM elemek tömbjét vagy JQ objektumot paraméterként a cél elem megadásához.

$('<p>Mondani szeretném: </p>').insertBefore('<b>Hello</b>');
// Eredmény: <p>Mondani szeretném: </p><b>Hello</b>

`.replaceWith()`

Az aktuális gyűjtemény elemeit lecseréli a megadott elemekre.

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

Ez a metódus a lecserélt eredeti gyűjteményt adja vissza.

// Lecseréli az összes .box elemet a <p>Hello</p> elemre
$('.box').replaceWith('<p>Hello</p>');

// Lecseréli az összes .box elemet a visszahívási függvény visszatérési értékére
$('.box').replaceWith(function (index, oldHTML) {
  return oldHTML + index;
});

`.replaceAll()`

Az aktuális gyűjtemény elemeivel lecseréli a megadott elemeket.

A paraméter a lecserélendő elem, lehet CSS szelektor, DOM elem, DOM elemek tömbje, JQ objektum.

Ez a metódus az eredeti gyűjteményt adja vissza, vagyis a lecseréléshez használt elemek gyűjteményét.

// Lecseréli az összes .box elemet a .new elemekre
$('.new').replaceAll('.box');

`.clone()`

Mély klónozással másolatot készít a gyűjtemény összes eleméről.

Ez a metódus a natív cloneNode metódust használja a mély klónozáshoz, de nem másolja az adatokat és az eseménykezelőket az új elemekre. Ez eltér a jQuery-től, ahol egy paraméter segítségével lehet meghatározni, hogy az adatok és az események másolódjanak-e.

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

Űrlap

`.serializeArray()`

Az űrlapelemek értékeit name és value kulcs-érték párokból álló tömbbé kombinálja.

Ez a metódus működik egyedi űrlapelemeken is, és a teljes <form> űrlapon is.

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

`.serializeObject()`

Az űrlapelemek értékeit objektummá alakítja.

Ha ugyanaz a kulcsnév többször előfordul, a megfelelő érték tömbbé alakul.

Ez a metódus működik egyedi űrlapelemeken is, és a teljes <form> űrlapon is.

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

`.serialize()`

Az űrlapelemek értékeit URL-kódolt karakterlánccá alakítja.

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

Esemény

`.on()`

Eseménykezelő függvényt rendel a gyűjtemény minden elemének adott eseményéhez. A részletes használatot lásd az alábbi példákban:

// Kattintási esemény hozzárendelése
$('.box').on('click', function (e) {
  console.log('Rákattintottak a .box elemre');
});

// Több esemény hozzárendelése
$('.box').on('click focus', function (e) {
  console.log('A click és focus események is ezt a függvényt váltják ki');
});

// Esemény delegálás
$(document).on('click', '.box', function (e) {
  console.log('A .box-ra kattintva ez a függvény aktiválódik');
});

// Több esemény és eseménykezelő egyidejű hozzárendelése
$('.box').on({
  click: function (e) {
    console.log('click esemény aktiválódott');
  },
  focus: function (e) {
    console.log('focus esemény aktiválódott');
  },
});

// Paraméterek átadása
$('.box').on('click', { key1: 'value1', key2: 'value2' }, function (e) {
  console.log(
    'Rákattintottak a .box elemre, és paramétereket adtak át az eseménykezelőnek',
  );
  // e._data értéke: {key1: 'value1', key2: 'value2'}
});

// Több esemény és eseménykezelő egyidejű hozzárendelése paraméterekkel
$('.box').on(
  {
    click: function (e) {
      console.log('click esemény aktiválódott');
      // e._data értéke: {key1: 'value1', key2: 'value2'}
    },
    focus: function (e) {
      console.log('focus esemény aktiválódott');
      // 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', keys: 'value2' },
  function (e) {
    console.log(
      'Rákattintottak a .box elemre, és paramétereket adtak át az eseménykezelőnek',
    );
    // e._data értéke: {key1: 'value1', key2: 'value2'}
  },
);

// Több esemény és eseménykezelő egyidejű hozzárendelése esemény delegálással
$(document).on(
  {
    click: function (e) {
      console.log('click esemény aktiválódott');
    },
    focus: function (e) {
      console.log('focus esemény aktiválódott');
    },
  },
  '.box',
);

// Több esemény és eseménykezelő egyidejű hozzárendelése esemény delegálással paraméterekkel
$(document).on(
  {
    click: function (e) {
      console.log('click esemény aktiválódott');
      // e._data értéke: {key1: 'value1', key2: 'value2'}
    },
    focus: function (e) {
      console.log('focus esemény aktiválódott');
      // e._data értéke: {key1: 'value1', key2: 'value2'}
    },
  },
  '.box',
  { key1: 'value1', key2: 'value2' },
);

// Eseményparaméterek lekérése
$('.box').on('click', function (e, data) {
  // data egyenlő e.detail-lel
});

// Eseménynév támogatja a névterek használatát
$('.box').on('click.myPlugin', function () {
  console.log('Rákattintottak a .box elemre');
});

`.one()`

Eseménykezelő függvényt rendel a gyűjtemény minden elemének adott eseményéhez, de az esemény csak egyszer aktiválódik.

Ennek a metódusnak a használata megegyezik a .on() metóduséval, ezért nem adunk rá példát.

`.off()`

Eltávolítja a gyűjtemény elemeihez rendelt eseményeket. A részletes használatot lásd az alábbi példákban:

// Eltávolítja az összes hozzárendelt eseménykezelő függvényt
$('.box').off();

// Eltávolítja a megadott eseményhez rendelt összes eseménykezelőt
$('.box').off('click');

// Több eseményhez rendelt eseménykezelők egyidejű eltávolítása
$('.box').off('click focus');

// Eltávolítja a megadott eseményhez rendelt meghatározott eseménykezelőt
$('.box').off('click', callback);

// Eltávolítja az esemény delegálással hozzárendelt eseményeket
$(document).off('click', '.box');

// Eltávolítja az esemény delegálással hozzárendelt meghatározott eseménykezelőt
$(document).off('click', '.box', callback);

// Több eseménykezelő egyidejű eltávolítása
$('.box').off({
  click: callback1,
  focus: callback2,
});

// Több, esemény delegálással hozzárendelt eseménykezelő egyidejű eltávolítása
$(document).off(
  {
    click: callback1,
    focus: callback2,
  },
  '.box',
);

// Az eseménynév támogatja a névterek használatát, az alábbi használat eltávolítja az összes .myPlugin névtérre végződő eseményt
$(document).off('.myPlugin');

`.trigger()`

A megadott eseményt aktiválja. A részletes használatot lásd az alábbi példákban:

// Aktiválja a megadott eseményt
$('.box').trigger('click');

// Paraméterek átadása az esemény aktiválásakor
$('.box').trigger('click', { key1: 'value1', key2: 'value2' });

// Az eseménynév támogatja a névterek használatát
$('.box').trigger('click.myPlugin');

// A CustomEvent paramétereinek átadása
$('.box').trigger('click', undefined, {
  bubbles: true,
  cancelable: true,
  composed: true,
});

ajax

`$.ajaxSetup()`

Globális AJAX kérési paramétereket állít be.

$.ajaxSetup({
  // Alapértelmezés szerint ne aktiváljon globális AJAX eseményeket
  global: false,

  // Alapértelmezés szerint POST metódust használjon a kérés küldéséhez
  method: 'POST',
});

A részletes paraméterlista az alábbi AJAX paraméterek között található.

`$.ajax()`

AJAX kérést küld, és egy Promise objektumot ad vissza.

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);
  });

A részletes paraméterlista az alábbi AJAX paraméterek között található.

A .on() metódussal is figyelheti az AJAX globális eseményeit.

// Amikor egy AJAX kérés elkezdődik, ez az esemény aktiválódik
$(document).on('ajaxStart', function (e, { xhr, options }) {
  // xhr: XMLHttpRequest objektum
  // options: a $.ajax() metódus paraméterei
});

// Amikor egy AJAX kérés sikeres, ez az esemény aktiválódik
$(document).on('ajaxSuccess', function (e, { xhr, options, response }) {
  // xhr: XMLHttpRequest objektum
  // options: a $.ajax() metódus paraméterei
  // response: a kérés válasza
});

// Amikor egy AJAX kérés meghiúsul, ez az esemény aktiválódik
$(document).on('ajaxError', function (e, { xhr, options }) {
  // xhr: XMLHttpRequest objektum
  // options: a $.ajax() metódus paraméterei
});

// Amikor egy AJAX kérés befejeződik (sikertől függetlenül), ez az esemény aktiválódik
$(document).on('ajaxComplete', function (e, { xhr, options }) {
  // xhr: XMLHttpRequest objektum
  // options: a $.ajax() metódus paraméterei
});

AJAX paraméterek

Attribútum név	Típus	Alapértelmezett érték
`url`	`string`	az aktuális oldal URL-je
a kérés URL címe
`method`	`string`	`GET`
A kérés HTTP metódusa. Elérhető értékek: `GET`, `POST`, `PUT`, `PATCH`, `HEAD`, `OPTIONS`, `DELETE`.
`data`	`any`	`''`
a szerverre küldött adatok
`processData`	`boolean`	`true`
átalakítja-e a bemeneti adatokat lekérdezési karakterlánccá
`async`	`boolean`	`true`
aszinkron kérés-e
`cache`	`boolean`	`true`
használja-e a gyorsítótárat az adatok lekéréséhez. Csak `GET`, `HEAD` kéréseknél érvényes.
`username`	`string`	`''`
a HTTP hozzáférési hitelesítéshez használt felhasználónév
`password`	`string`	`''`
a HTTP hozzáférési hitelesítéshez használt jelszó
`headers`	`object`	`{}`
A HTTP kérés fejlécéhez hozzáadandó adatok. A `beforeSend` visszahívási függvényben felülírhatja ezt az értéket. A karakterlánc vagy `null` értékű mezők elküldésre kerülnek, az `undefined` értékű mezők figyelmen kívül lesznek hagyva.
`xhrFields`	`object`	`{}`
A `XMLHttpRequest` objektumon beállítandó adatok. `$.ajax({ url: 'egy cross-origin URL', xhrFields: { withCredentials: true } });`
`statusCode`	`object`	`{}`
A HTTP állapotkódok és a hozzájuk tartozó kezelőfüggvények leképezése. `$.ajax({ statusCode: { 404: function (xhr, textStatus) { alert('Meghívódik, ha a visszatérési állapotkód 404'); }, 200: function (data, textStatus, xhr) { alert('Meghívódik, ha a visszatérési állapotkód 200'); } } });` Ha az állapotkód a 200-299 tartományban van, vagy 304, az a kérés sikerességét jelzi, a függvény paraméterei megegyeznek a `success` visszahívás paramétereivel; egyéb esetben a kérés sikertelenségét jelzi, a függvény paraméterei megegyeznek az `error` visszahívás paramétereivel.
`dataType`	`string`	`text`
A szervertől várt válasz típusa. Tartalmazza: `text`, `json`
`contentType`	`string`	`application/x-www-form-urlencoded`
a kérés tartalmának MIME típusa. Ha `false` értékre állítja, akkor nem állítja be a `Content-Type` fejlécet.
`timeout`	`number`	`0`
a kérés időtúllépési ideje (ezredmásodpercben). Ha `0`, akkor nincs időtúllépés.
`global`	`boolean`	`true`
aktiválja-e a globális AJAX eseményeket
`beforeSend`	`function`	-
A kérés elküldése előtt hívódik meg. Ha `false` értéket ad vissza, megszakítja az AJAX kérést. `$.ajax({ beforeSend: function (xhr) { // xhr az XMLHttpRequest objektum } });`
`success`	`function`	-
A sikeres kérés után hívódik meg. `$.ajax({ success: function (data, textStatus, xhr) { // data az AJAX kérés által visszaadott adatok // textStatus egy sikerkódot tartalmazó karakterlánc // xhr az XMLHttpRequest objektum } });`
`error`	`function`	-
Hiba esetén hívódik meg. `$.ajax({ error: function (xhr, textStatus) { // xhr az XMLHttpRequest objektum // textStatus egy hibakódot tartalmazó karakterlánc } });`
`complete`	`function`	-
A kérés befejeződésekor hívódik meg, függetlenül a sikerességtől. `$.ajax({ complete: function (xhr, textStatus) { // xhr az XMLHttpRequest objektum // textStatus egy sikert vagy hibát jelző karakterlánc } });`

Előző fejezet

TopAppBar Felső alkalmazássáv

Következő fejezet

dialog