JQuery II - manipulace s DOM

Získávání obsahu a hodnot atributů

Velmi důležitou součástí jQuery je možnost manipulovat s DOM.

jQuery přichází s řadou metod souvisejících s DOM, které usnadňují přístup a manipulaci s prvky a atributy.

Získání obsahu - text(), html() a val()

Tři jednoduché, ale užitečné metody jQuery pro manipulaci s DOM jsou:

• text() - Nastavuje nebo vrací textový obsah vybraných prvků.
• html() - Nastavuje nebo vrací obsah vybraných prvků (včetně označení HTML).
• val() - Nastaví nebo vrátí hodnotu polí formuláře.

Následující příklad ukazuje, jak získat obsah pomocí jQuery text() a html()metod:

Následující příklad ukazuje, jak získat hodnotu vstupního pole pomocí val() metody jQuery:

Získat hodnoty atributu - attr()

Metoda jQuery attr() se používá k získání hodnot atributů.

Následující příklad ukazuje, jak získat hodnotu atributu href v odkazu:

Nastavení obsahu a hodnot atributů

Nastavení obsahu - text(), html() a val()

K nastavení obsahu použijeme stejné tři metody z předchozí části:

• text() - Nastavuje nebo vrací textový obsah vybraných prvků.
• html() - Nastavuje nebo vrací obsah vybraných prvků (včetně označení HTML).
• val() - Nastaví nebo vrátí hodnotu polí formuláře.

Následující příklad ukazuje, jak nastavit obsah s jQuery text(), html()a val()metody:

Funkce zpětného volání pro text (), html () a val ()

Všechny tři výše uvedené metody: text(), html() a val() se dají spojit s funkcí zpětného volání. Funkce zpětného volání má dva parametry: index aktuálního prvku v seznamu vybraných prvků a původní (stará) hodnota. Potom vrátíte řetězec, který chcete použít jako novou hodnotu z funkce.

Následující příklad ukazuje, text() a html() s funkcí zpětného volání:

Nastavení atributu - attr()

Metoda jQuery attr() se také používá k nastavení/změně hodnot atributů.

Následující příklad ukazuje, jak změnit (nastavit) hodnotu atributu href v odkazu:

Tato attr() metoda také umožňuje nastavit více atributů současně.

Následující příklad ukazuje, jak nastavit atributy href a title současně:

Funkce zpětného volání pro attr()

Metoda jQuery attr() také obsahuje funkci zpětného volání. Funkce zpětného volání má dva parametry: index aktuálního prvku v seznamu vybraných prvků a původní (původní) hodnotu atributu. Potom z funkce vrátíte řetězec, který chcete použít jako novou hodnotu atributu.

Následující příklad ukazuje attr()funkci zpětného volání:

Přidávání prvků

S jQuery je snadné přidávat nové prvky/obsah.

Přidat nový obsah HTML

Budeme se zabývat čtyřmi metodami jQuery, které se používají k přidání nového obsahu:

• append() - Vloží obsah na konec vybraných prvků.
• prepend() - Vloží obsah na začátek vybraných prvků.
• after() - Vloží obsah za vybrané prvky.
• before() - Vloží obsah před vybrané prvky.

Metoda jQuery append()

Metoda jQuery append() vloží obsah ZA KONEC vybraných prvků HTML.

Metoda jQuery prepend ()

Metoda jQuery prepend() vloží obsah NA ZAČÁTEK vybraných prvků HTML.

Přidejte několik nových prvků pomocí append() a prepend()

V obou výše uvedených příkladech jsme vložili pouze text/HTML na začátek/konec vybraných prvků HTML.

Nicméně, jak append() tak i prepend() mohou mít nekonečný počet nových prvků jako parametry. Nové prvky lze generovat pomocí textu/HTML (jako jsme to udělali ve výše uvedených příkladech), pomocí jQuery nebo pomocí kódu JavaScript a prvků DOM.

V následujícím příkladu vytvoříme několik nových prvků. Prvky jsou vytvářeny pomocí textu/HTML, jQuery a JavaScript/DOM. Poté připojíme nové prvky k textu append() metodou (to by také fungovalo s prepend()):

jQuery after() a before() metodami

Metoda jQuery after() vloží obsah ZA vybrané prvky HTML.

Metoda jQuery before() vloží obsah PŘED vybranými prvky HTML.

Přidání několika nových prvků after() a before()

Také, jak after() tak i before() způsoby mohou mít nekonečný počet nových prvků jako parametry. Nové prvky lze generovat pomocí textu/HTML (jako jsme to udělali ve výše uvedeném příkladu), pomocí jQuery nebo pomocí kódu JavaScript a prvků DOM.

V následujícím příkladu vytvoříme několik nových prvků. Prvky jsou vytvářeny pomocí textu / HTML, jQuery a JavaScript / DOM. Pak vložíme nové prvky do textu after() metodou (to by také fungovalo before()):

Odebírání prvků

Odebrat prvky / obsah

Chcete-li odebrat prvky a obsah, existují dvě metody jQuery:

• remove() - Odstraní vybraný prvek (a jeho podřízené prvky)
• empty() - Odstraní podřízené prvky z vybraného prvku

Metoda jQuery remove()

Metoda jQuery remove() odstraní vybrané prvky a jejich podřízené prvky.

Metoda jQuery empty()

Metoda jQuery empty() odstraní podřízené prvky vybraných prvků.

Filtrování prvků, které mají být odstraněny

Metoda jQuery remove() přijímá jeden parametr, který umožňuje filtrovat prvky, které mají být odstraněny.

Parametrem může být libovolná syntaxe selektoru jQuery.

Následující příklad odstraní všechny prvky pomocí class="test":  

Tento příklad odstraní všechny prvky pomocí class="test"nebo class="demo":