jQuery

Удаление, замена и перемещение элементов в jQuery

В данном уроке рассматриваются вопросы манипулирования существующими элементами на странице:

• Удаление элементов со страницы с помощью методов empty() , remove() , detach() и unwrap()
• Замена элементов новыми элементами с помощью методов replaceWith() и replaceAll()
• Перемещение элементов от одного родительского элемента к другому на странице

Удаление элементов со страницы

Удаление всего, что находится внутри элемента: empty()

Метод empty() — это простейший способ удаления содержимого со страницы. Вызов метода empty() для объекта jQuery удаляет все содержимое из набора, соответствующего элементу (или элементам) в объекте jQuery.

Другими словами, метод empty() удаляем все наследственные элементы и узлы (такие, как текстовые узлы) из каждого элемента, попадающего в набор, оставляя элемент пустым.

В примере удаляется содержимое из двух элементов div :

       
Параграф с текстом
 
 
Другой параграф с текстом
 Текстовый узел, как он есть
   

После выполнения выше приведённого кода содержимое страницы изменится на :

Удаление элемента целиком: remove()

Если метод empty() удаляет всё внутри элемента, то метод remove() удаляет все, включая сам элемент. Например:

       
Параграф с текстом
 
 
Другой параграф с текстом
 Текстовый узел, как он есть
   

после выполнения выше приведённого кода оба элемента div будут удалены со страницы:

Вы можете передать строку с условным селектором в метод remove() . В этом случае, удаляемые элементы будут фильтроваться селектором. Например:

       
Параграф с текстом
 
 
Другой параграф с текстом
 Текстовый узел, как он есть
   

В выше приведённом примере будет удалён только элемент div , для которого установлен класс removeMe и содержащий текст «Другой параграф». Все остальное останется на странице:

Удаление элемента без разрушения его данных: detach()

Метод remove() возвращает объект jQuery, который содержит удалённые элементы. Теоретически, можно удалить какие-нибудь элементы из одного места на странице, а позже снова присоединить их где угодно..

Однако, для того, чтобы сохранить ресурсы и избежать потенциальной проблемы с утечкой памяти, метод remove() удаляет все данные jQuery и события, ассоциированные с удалённым элементом. Например, если элементу было назначено событие jQuery click , а затем элемент был удалён со страницы с помощью метода remove() , то событие click будет удалено из элемента. Это может вызвать проблему, если позже захотите вернуть элемент обратно на страницу и восстановить его функциональность.

В данном случае может помочь метод detach() (появился в jQuery 1.4). Он действует почти также как и метод remove() , за исключением одного — он не удаляет данные jQuery и события, ассоциированные с удалённым элементом. Это означает, что позже вы можете присоединить удалённые элементы обратно с сохранением их метаданных jQuery.

Пример. Следующий скрипт назначает событие jQuery click каждому из двух параграфов на странице. Оба обработчика события просто переключают класс CSS «red» для параграфа, чтобы изменить цвет с красного на чёрный или обратно каждый раз, когда на него нажимают.

Затем скрипт удаляет первый параграф со страницы с использованием метода remove() и сохраняет объект jQuery , который содержал параграф в переменной myDiv1Para . Затем повторно присоединяем параграф к родительскому div с помощью метода appendTo() .

Тоже самое мы проделываем со вторым параграфом, только используем метод detach() вместо метода remove() .

   p.red     
Параграф с текстом
 
 
Другой параграф с текстом
 
   

После выполнения данного скрипта первый параграф потеряет обработчик события click , а второй параграф сохранит свою функциональность полностью. Вы можете проверить, открыв страницу в браузере. Если нажать кнопку мыши на втором параграфе, то он будет менять цвет, а первый никак не будет реагировать на действия мыши.

Это происходит потому, что вызов метода remove() привёл к удалению обработчика события для первого параграфа, а метод detach() сохранил обработчик события click для второго параграфа.

Далее мы рассмотрим ещё несколько способов переместить элемент.

Удаление родительского элемента: unwrap()

Метод unwrap() удаляет родителя элемента (или родителей набора элементов)из DOM. Элемент займёт место родительского элемента в DOM.

Следующий пример разворачивает содержание div . Другим словами происходит замещение div его содержимым:

       
Параграф с текстом
 
Другой параграф с текстом
 
   

После выполнения выше приведённого кода, содержание страницы примет следующий вид:

 
Параграф с текстом
 
Другой параграф с текстом
  

Замена элементов

Замена элемента новым содержимым: replaceWith()

Метод replaceWith() позволяет заменять элемент или набор элементов новым содержимым. Вы можете передать замещающий контент в любой из следующих форм:

• Объект элемента, который создан с помощью функции JavaScript DOM, такой как document.getElementById() или document.createElement()
• Строка HTML, представляющая замещающий контент
• Объект jQuery, содержащей элемент (или элементы), который будет использоваться для замещения
• Возвратная функция, которая должна возвращать замещающий HTML код

Ниже приводится пример, который показывает метод replaceWith() в действии. Производится замещение первого параграфа новой строкой HTML, второй параграф замещается объектом элемента, а третий параграф заменяется результатом функции, которая возвращает текущее время:

       
Параграф с текстом
 
 
Параграф с текстом
 
 
Параграф с текстом
 
   

После выполнения кода содержимое страницы примет вид :

  
Новый параграф с текстом
 
 
 
 
Текущее время: 13:52:17
 
  

replaceAll() : альтернатива методу replaceWith()

Метод replaceAll() выполняет туже самую работу, что и метод replaceWith() , но вместо передачи замещающего контента в качестве аргумента, вам нужно передать элемент, который нужно заменить.

Например, следующие 2 строки кода делают одно и тоже:

$('#myDiv').replaceWith( "
Здесь новый текст
" ); $("
Здесь новый текст
").replaceAll( '#myDiv' );

Перемещение элементов

Теперь вы знаете, как удалять и заменять элементы. Остаётся открытым вопрос: как перемещать элементы по дереву DOM? Например, есть параграф внутри элемента div , и нужно его переместить в другой div .

Несмотря на то, что в jQuery нет специального метода для перемещения элементов по дереву DOM, в действительности это очень просто реализовать. Все, что нужно сделать, это выделить элемент(ы), которые вы хотите переместить; затем вызвать метод «добавления» , например, append() , appendTo() или prepend() , чтобы добавить выделенный элемент к другому родительскому элементу. jQuery автоматически распознает, что элемент(ы) уже существует на странице и переместит его к новому родителю.

Пример воспроизводит описанный процесс. Параграф перемещается из первого div во второй:

       
Параграф с текстом
 
   

После выполнения кода страница примет следующий вид:

А здесь другой способ перемещения элемента:

// Перемещаем параграф из #myDiv1 в #myDiv2 $('#myDiv1>p').appendTo( $('#myDiv2') ); // Пермещаем параграф из #myDiv1 в #myDiv2 var para = $('#myDiv1>p'); para.prependTo( '#myDiv2' ); // Перемещаем параграф из #myDiv1 в #myDiv2 // с помощью явного отсоединения его и добавления в новое место $('#myDiv1>p').detach().prependTo('#myDiv2');

З-й пример демонстрирует очень полезную технику jQuery — связывание методов. Так как большинство методов jQuery возвращает объекты, то можно вызывать другой метод для возвращаемого объекта. Что в свою очередь приведёт к возвращению следующего объекта jQuery и так далее.

Так в выше приведённом примере объект jQuery возвращается методом detach() , который вызывается для удаления параграфа. А метод prependTo() вызывается для возвращённого объекта jQuery, чтобы добавить удалённый параграф к новому родительскому элементу.

Что произойдёт, если попытаться переместить какой-нибудь контент в более чем один родительский элемент в одно и то же время? Если это сделать, jQuery сначала удалит контент из старого родителя, затем клонирует контент столько раз, сколько нужно и добавит клоны в каждый указанный родительский элемент. Например:

       
Параграф с текстом
 
   

После выполнения выше описанного кода, содержимое страницы будет выглядеть так:

  
Параграф с текстом
 
 
Параграф с текстом
 
  

Резюме

Удаление, замена и перемещение контента являются фундаментальными концепциями, которые позволяют строить замечательные сайты на основе jQuery.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.elated.com/articles/jquery-removing-replacing-moving-elements/
Перевел: Сергей Фастунов
Урок создан: 11 Августа 2010
Просмотров: 321647
Правила перепечатки

5 последних уроков рубрики «jQuery»

• 

Анимация набора текста на jQuery

Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.

Временная шкала на jQuery

Заметка: Перезагрузка и редирект на JavaScript

Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.

Источник

Как заменить / изменить содержимое HTML элементов с помощью jQuery

jQuery представляет два метода, с помощью которых можно получить или изменить содержимое HTML элементов. Первый метод — это html(). Если мы применим метод без параметров, то мы получим содержимое элемента в формате HTML.

Синтаксис метода html() без параметров
.html()	Возвращает HTML-содержимое первого элемента из набора
Параметры	Отсутствуют.
Возвращает	Содержимое первого элемента набора (HTML и текст).

Давайте посмотрим на примере. У нас на странице ест блочный элемент div, который имеет атрибут id с значением blockIdOne. У нас есть задача получить содержимое (с тегами и текстами) данного элемента.

       
Первый параграф первого дива
 
Второй параграф первого дива
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
 
 
   

Выбираем конкретный элемент, содержимое которого хотим получить используя метод html().

var data = $("#blockIdOne").html(); console.log(data);

Если мы применим метод с параметром, то вместо получение содержимого, содержимое элемента будет изменен. Ниже приведен синтаксис метода с параметром.

Синтаксис метода html() с параметром
.html(content)	Присваивает переданный HTML-фрагмент всем элементам набора в качестве содержимого.
Параметры	content — (Строка | Функция) HTML-фрагмент, который будет присвоен всем элементам набора в качестве содержимого. Если это функция, то она будет вызвана для каждого элемента набора, причем сам элемент будет передан в нее в виде контекста функции (this). Функция принимает два значения: индекс элемента и его содержимое, а возвращаемое ею значение используется как новое содержимое элемента.
Возвращает	Коллекцию jQuery

Ниже приведен пример использование метода html() с параметром, который заменит содержимое HTML элемента.

$("#hello").html("Lorem ipsum 
dolor sit amet");

После выполнение данного кода мы заменим содержимое элемента на то, что указан в качестве параметра метода. В данном случае теги указанные в параметре будут работать на странице как HTML разметка.

Выше мы узнали, что можно получить и изменить HTML содержимое элемента, но мы кроме этого можем получить текстовое содержимое элемента или изменить / заменить его. Для этого мы можем использовать метод .text().

Пример использование метода text() для получение текстового содержимое элемента:

var data = $("#blockIdOne").text(); console.log(data);

Пример использование метода text() для замена текстового содержимое элемента:

$("#blockIdOne").text("hello hello hello");

Похожие статьи

Источник