jQuery (4): DOM

категория: jQuery
В jQuery содержится множество полезных методов значительно упрощающих взаимодействие с DOM. Ниже рассмотрим самые используемые. Первые два метода, которые рассмотрим, это text() и html(). Первый работает только с самим текстом, второй с текстом и html разметкой. К примеру нужно сохранить текст заголовка h1 в переменную title:
var title = $("h1").text();
А теперь изменим текст заголовка на новый:
title.text("New text");
А теперь сделаем то же самое только получим контекст вместе с html разметкой:
var title = $("h1").html();
title.html("<strong>New text</strong>");
С помощью метода append() можно вставить любой текст вместе с html разметкой в конец содержимого выбранного элемента, а с помощью prepend() - перед:
$("some_tag").append("some text after element's context");
$("some_tag").prepend("some text before element's context");
С помощь функций before() и after() можно всунуть контекст до выделенного элемента и после:
$("some_tag").before("<p>I'm before</p>");
$("some_tag").after("<p>I'm after</p>");
Еще одна очень полезная функция - remove() - удаление, по сравнению с функцией hide(), которая просто скрывает элемент дерева, remove() удаляет его полностью. Часто используется, когда нужно что-то удалить с прежнего места и перенести на другое. Поставим последнюю таблицу перед первой:
var some_tag = $("table:last").html();
$("table:last").remove();
$("table:first").before(some_tag);
Дальше будет еще веселее: будем рассматривать события и анимацию с елементами DOM. Всем успехов.


blog comments powered by Disqus