jQuery návod – (6) Úprava prvků

Vítejte v šestém díle našeho seriálu o jQuery. Po poutavých efektech se dnes zaměříme na základní kámen webu – manipulaci s prveky. Díky jQuery můžete snadno a rychle měnit obsah, třídy, vlastnosti prvků nebo dokonce celý HTML kód. Připravte se, protože se dozvíte spoustu užitečných triků!

1. Změna obsahu

text(): Nastaví nebo získá textový obsah prvku.

$("#prvek").text("Nový text"); // nastaví nový text
var text = $("#prvek").text(); // získá text prvku

$("#prvek").text("Nový text"); // nastaví nový text

var text = $("#prvek").text(); // získá text prvku

html(): Nastaví nebo získá HTML obsah prvku.

$("#prvek").html("<strong>Nový HTML</strong>"); // nastaví nový HTML
var html = $("#prvek").html(); // získá HTML prvku

$("#prvek").html("<strong>Nový HTML</strong>"); // nastaví nový HTML

var html = $("#prvek").html(); // získá HTML prvku

2. Práce s třídami

addClass(): Přidá třídu k prvku.

$("#prvek").addClass("noveTridy");

$("#prvek").addClass("noveTridy");

removeClass(): Odebere třídu z prvku.

$("#prvek").removeClass("noveTridy");

$("#prvek").removeClass("noveTridy");

toggleClass(): Přidá třídu, pokud ji prvek nemá, nebo ji odebere, pokud ji má.

$("#prvek").toggleClass("noveTridy");

$("#prvek").toggleClass("noveTridy");

3. Změna vlastností prvků

attr(): Nastaví nebo získá hodnotu atributu.

$("#prvek").attr("src", "obrazek.jpg"); // nastaví zdroj obrázku
var zdroj = $("#prvek").attr("src");    // získá zdroj obrázku

$("#prvek").attr("src", "obrazek.jpg"); // nastaví zdroj obrázku

var zdroj = $("#prvek").attr("src");    // získá zdroj obrázku

removeAttr(): Odebere atribut z prvku.

$("#prvek").removeAttr("src"); // odebere atribut src

$("#prvek").removeAttr("src"); // odebere atribut src

4. Změna CSS

css(): Nastaví nebo získá hodnotu CSS vlastnosti.

$("#prvek").css("color", "red"); // nastaví barvu textu na červenou
var barva = $("#prvek").css("color"); // získá barvu textu

$("#prvek").css("color", "red"); // nastaví barvu textu na červenou

var barva = $("#prvek").css("color"); // získá barvu textu

5. Vložení nových prvků

append(): Vloží obsah na konec prvku.

$("#prvek").append("<span>Konec</span>");

$("#prvek").append("<span>Konec</span>");

prepend(): Vloží obsah na začátek prvku.

$("#prvek").prepend("<span>Začátek</span>");

$("#prvek").prepend("<span>Začátek</span>");

Závěr

V dnešním díle jsme si ukázali, jak s pomocí jQuery měnit obsah, vlastnosti a styly webových prvků. Tato knihovna vám skutečně umožňuje manipulovat s webovým obsahem snadno a intuitivně.

V příštím díle se budeme věnovat událostem a zjistíme, jak s jejich pomocí reagovat na různé akce uživatelů. Děkuji za pozornost a těším se na další setkání!