Vzhůru ke dnu

.html() vrátí obsah prvku v textové podobě včetně všech HTML značek. Zadáním parametru můžete naopak obsah změnit.

.text() vrátí obsah prvku v textové podobě, ale na rozdíl od .html() z textu odstraní všechny HTML značky. Lze tak dobře použít na text, který obsahuje odřádkování BR případně jiné formátovací značky (B, I, Strong, atd.) a vy potřebujete získat čistý text (např. pro zobrazení v tooltipu nebo alertu). Pokud do této metody zadáte parametr, dojde k automatickému nahrazení všech znaků, které nejsou bezpečné pro HTML, a následně je předán metodě .html().

.children() je základní metoda pro získání všech přímých potomků. Pozor ale na to, že vrací jen skutečné potomky a nikoliv text. Metoda se dá použít právě pro otestování, zda element obsahuje pouze text:

if (0 === $(el).children().length) {
    //obsahuje jen čistý text
}.

Zadáním parametru můžete vrácené prvky rovnou profiltrovat:

$(el).children(':visible')
         //vrátí jen viditelné potomky

.contents() je obdoba .children(), ale vrácí taktéž textové položky. Např. pokud odstavec obsahuje čistý text rozdělený odřádkováním (BR), metoda .children() vrátí jen tagy BR, zatímco .contents() vrátí jak odřádkování tak i text (rozdělený po řádkách):

$(p).contents()
       // vrátí

.find() vrátí všechny potomky odpovídající selectoru zadanému v parametru. Na rozdíl od .children() a .contents() však hledá na všech úrovních – tedy najde i potomky potomků.
Pokud metodu zavoláte bez parametru, nic nevrátí – pro získání všech potomků je potřeba použít selektor „*„.

Metody .append() a .prepend() naopak slouží pro vložení potomka do daného elementu:

$('div.section')
    //vloží odstavec na začátek každé sekce
    .prepend($('p.section-start'))
    //vloží odstavec na konec každé sekce
    .append($('p.section-end'))

Důležité je si uvědomit, že vkládaný prvek se naklonuje tak, aby ho bylo možno vložit libovolněkrát na začátek či konec všech elementů ve výběru (takže např. nastavit mu atribut id není příliš vhodné).

Stoupání po žebříku

.parent() vrátí přímého rodiče daného prvku.

.parents() vrátí všechny rodiče prvku až po element HTML. Zadáním parametru lze rodiče profiltrovat a najít tak pouze rodiče daného typu:

$(el).parents('div')
 //najde všechny nadřazené DIVy

.closest() hledá rodiče stejně jako .parents(), ale vrátí jen prvního (nejbližšího), který odpovídá danému selektoru. Tato metoda je užitečná pokud máte např. strukturovaný seznam UL-LI a potřebujete najít nadřazený seznam pro konkrétní položky:

$('li.highlighted').closest('ul')
//vrátí všechny UL, které obsahují
// zvýrazněné odrážky

Metodu .closest() byste také měli používat, pokud hledáte konkrétního rodiče konkrétního prvky – např. formulář, ve kterém je daný prvek. Rozdíl oproti metodě .parents() je v tom, že .closest() po nalezení požadovaného rodiče již dál nehledá, zatímco .parents() musí prohledat zbytek DOMu, aby se ujistila, že žádný další podobný rodič neexistuje:

$(input).parents('form')
    //najde formulář, do kterého patří daný input

Poslední metoda pro výběr rodičů, .parentsUntil(), vrací všechny rodiče až do určitého elementu:

$('[type=hidden]').parentsUntil('form').hide()
 //skryje všechny obalovací prvky skrytých inputů
 // uvnitř formuláře (samotný form to neovlivní)

Metody .appendTo() a .prependTo() jsou opakem metod .append() a .prepend() a složí pro vložení vybraných elementů na začátek či konec zvoleného prvku či prvků:

$('p.submitWarning').appendTo(form)
   //přidá varování na konec všech formulářů

Bráchové a ségry

.siblings() vrací seznam všech prvků, které jsou na stejné úrovni jako současný prvek (tzv. sourozenců). Jinými slovi vrací všechny děti rodiče současného prvku kromě jeho samotného:

 $(this).parent().children().not(this)

Opět je možno zadat selektor pro filtrování:

$('li.selected').siblings('.highlighted')
//vrací zvýrazněné odrážky na stejné úrovni
// jako je ta momentálně vybraná

.prev() a .next() vrací předchozího nebo následujícího sourozence. Je možno zvolit jeho typ pomocí selektoru:

$('form#users.multiadd #username_1')
       .next('input[type=password]').val()
         //zjistí heslo patřící prvnímu uživateli

Dále můžete použít metody .prevAll() a .nextAll(), které vrátí úplně všechny následující/předcházející sourozence a nebo .prevUntil() a .nextUntil(), které vrátí všechny následující/předcházející sourozence, ale jen dokud nenaleznou zadaný prvek:

$('form input[type=submit]')
      .nextAll('input').remove();
      //odstraní všechny inputy následující
      // po odesílacím tlačítku 
$('form input.password')
    .prevUntil('input.username', 'label');
      //vrátí všechy labely nalézající
      // se mezi inputy pro jméno a heslo

Metody .after() a .before() naopak slouží k vložení nového sourozence do HTML:

$(input).before(label).after(error)

Předchozí příklad vezme input a před něj vloží jeho label a za něj element pro zobrazení validační chyby. Důležité je uvědomit si, že pokud původní selektor obsahuje více prvků, dojde k naklonování přidávaného elementu a přidání před/za každý prvek selektoru:

$required = $('<p>').text('Vyžadovaná položka');
$('form input.required').after($required);

Předchozí příklad způsobí, že do všech formulářů na stránce se přidá text „Vyžadovaná položka“ za všechny inputy označené příslušnou třídou!

Filtrování seznamu

.filter() probere aktuální seznam prvků a vybere jen ty, které odpovídají selektoru z parametru:

$(items).filter(':visible')
           //vrátí jen viditelné prvky

.not() je opak .filter() a vrátí jen prvky, které neodpovídají danému selektoru:

$('form input').not('checkbox, radio')
  //vrátí všechny inputy kromě těch zaškrtávacích

.first() a .last() vrátí první nebo poslední položku ze seznamu:

$('body').last().addClass('last')
    //přidá třídu poslednímu elementu na stránce

metoda .eq() vrátí prvek s konkrétním indexem ze seznamu – je to prakticky to samé jako když jQuery objekt použijete jako pole:

$('p').eq(2) //vrátí 3. odstavec
$('p')[2]    //totéž (a snad i trochu rychlejší)

Často se ale plete s metodou .get(), která sice také vrací prvek na daném indexu, ale zatímco .eq() vrací jQuery objekt, tak .get() vrátí původní DOM element:

$('p').eq(2).parents()   //jQuery
$('p').get(2).parentNode //DOM element

.andSelf() a .addBack() vrátí do seznamu elementů prvek, ze kterého byl aktuální seznam získán. Často používané, pokud chcete získat seznam potomků nebo rodičů, a zároveň v seznamu zachovat původní prvek:

$(el).children().andSelf().width('100%')
   //nastaví šířku elementu a všem jeho potomkům

(Metoda .andSelf() je deprecated a neměla by se používat.)

.add() spojí dva seznamy prvků, získané např. různými selektory:

$(this).children().addBack().add(
    $(this).parent()
)
//vrátí seznam všech potomků
// včetně samotného elementu a jeho rodiče

.end() zruší naposledy použitý filtr a vrátí se k předchozímu seznamu prvků:

$(el).children().empty().end().hide()
//smaže obsah všech potomků
// a skryje jejich rodiče (el)
//(potomci zůstanou nedotčeni)

.filter(‚:even‘) a .filter(‚:odd‘) vybere ze seznamu pouze liché (odd) nebo sudé (even) prvky. Díky tomu můžete např. snadno obarvit řádky tabulky:

$('table tr')
    .filter(':odd')
        //bílé pozadí pro 1., 3., 5., ... řádek
        .css('backgroundColor', 'white')
    .end()
    .filter(':even')
        //šedivé pozadí pro 2., 4., 6., ... řádek
        .css('backgroundColor', 'gray')
;

Destruktivní chování

.remove() je nejtvrdší způsob odstranění elementu. Tato metoda odstraní element z DOMu, smaže všechna jeho uložená data a atributy, odstraní všechny jeho události (listenery/observery) a totéž provede všem jeho potomkům. Metodu je samozřejmě možné omezit pomocí parametru:

$('form').children().remove('label')
    //odstraní všechny labely ve formuláři

.empty() je o něco jemnější, protože odstraní pouze obsah elementu a element samotný zachová:

$('#upload-state').empty().load('/upload/status')
  //smaže obsah prvku a pak do něj načte nový

.detach() je nejmírnější způsob odtranění, který pouze odstraní prvkem z DOMu, ale nic dalšího s ním neudělá, takže je možné ho později opět přidat:

var content = chat.contents();
content.detach();
chat.load('/chat/update', function() {
    chat.append(content);
});  //odstraní současný obsah chatu,
  // načte nový obsah a pak vrátí starý
  // obsah zpět (nové zprávy pak budou nahoře)

Co se stalo?

.on() registruje handler (listener, observer) pro událost daného elementu:

 $(button).on('click', this.clicked).

Pro nejčastější události existuje ještě alias se jménem dané události, např.: $(button).click(this.clicked).

.off() slouží pro zrušení registrace handleru z .on(). Metodě buď předáte jméno události a ona pak zruší všechny handlery, nebo jako druhý parametr můžete zadat referenci na metodu, která byla použita v .on() a tím zrušit jen konkrétné handler. Pokud však již nemáte referenci na danou metodu (protože byla např. vytvořena pomocí .bind(), můžete handler pojmenovat:

//zaregistruje muj_klik handler
$(button).on('click.muj_klik',
    this.clicked.bind(this)
);
//zruší muj_klik handler
$(button).off('click.muj_klik');

.one() je obdoba .on(), která se liší tím, že daný handler se provede jen jednou a poté se sám zruší (zavolá na sebe metodu .off().

Pokud metodám .on() nebo .one() předáte jako druhý parametr selektor (handler pak bude třetí parametr), provedete tzv. delegování (dříve k tomu sloužily metody .bind() a .live()). Užitečné je např. pro hlídání kliku na odkazy:

$(document).on('click', 'a', this.anyLinkClicked)

nebo pro obecný handler pro tlačítka formuláře:

$(form).on('click', 'input[type|=button]',
    form.buttonHandler
)

.trigger() vyvolá událost a provede všechny handlery pro ni zaregistrované. První parametr je jméno události a druhý volitelný je pole s parametry, které se mají předat handlerům:

$(this).trigger('start',
    [this.startTime, this.duration]
)

Alternativně lze použít metodu se jménem události:

$(button).click()

Obdobně funguje i .triggerHandler() s tím rozdílem, že neprovede ostatní akce spojené s událostí. Např. $(form).trigger(‚submit‘) na závěr provede odeslání formuláře, zatímco $(form).triggerHandler(‚submit‘) nikoliv.