Преглед: DOM модификация с jQuery

След като намериш колекция от елементи с функцията jQuery, можеш да ги промениш, като използваш различни методи.

Виж техния вътрешен html с text():
$("h1").text("Всичко за котките"); (Виж пример)

Виж техния вътрешен html с html():
$("h1").html("Аз <strong>обичам</strong> котки"); (Виж пример)

Задай атрибутите с attr():
$(".dog-pic").attr("src", "dog.jpg");
$(".google-link").attr("href", "http://www.google.com"); (Виж пример)

Промени CSS стиловете с css():
$("h1").css("font-family", "monospace");
$("h1").css({"font-family": "monospace", color: "red"}); (Виж пример)

Добави име на класа с addClass():
$("h1").addClass("warning");

Можеш също така да създадеш нови елементи от нулата, като подадеш стринг от HTML в jQuery функцията:
var $p = $("<p>");

Ако искаш, можеш да подадеш целия HTML, включително съдържанието на таговете, атрибутите и стиловете.
var $p = $('<p style="color:red;">Обичам хора, които обичат котки.</p>');

След като създадеш елемент, можеш да го промениш, като използваш някой от горните методи:
$p.addClass("warning");

След това можеш да го прикрепиш към съществуващ елемент, като използваш append(), :
$("#main-div").append($p); (Виж пример)

Можеш да го вмъкнеш в страница и като използваш prepend() (Виж пример) или appendTo() (Виж пример).

Прочети документацията на jQuery за повече подробности за всеки от тези методи, като кликнеш върху имената на методите по-горе. Няма да можем да разкажем всичко и тъй като добрите практики в уеб разработката се променят бързо, ще трябва да задобрееш в четенето на документация, за да си винаги в час с най-новите и най-добрите. Добре е да започнеш да работиш върху това още сега!