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

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

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

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

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

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

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

$(init); function init() { // Удаляем содержимое #myDiv1 и #myDiv2 $(".emptyMe").empty(); }

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

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

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

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

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

$(init); function init() { // Удаляем #myDiv1 и #myDiv2 целиком $(".removeMe").remove(); }

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

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

Текстовый узел, как он есть

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

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

$(init); function init() { // Удаляем только #myDiv2 $(".removeMe").remove(":contains("Другой параграф")"); }

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

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

Текстовый узел, как он есть

В выше приведённом примере будет удалён только элемент 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 { color: red; } $(init); function init() { // Назначаем событие click каждому параграфу div $("#myDiv1>p").click(function() { $(this).toggleClass("red"); }); $("#myDiv2>p").click(function() { $(this).toggleClass("red"); }); // Удаляем и восстанавливаем параграф #myDiv1 var myDiv1Para = $("#myDiv1>p").remove(); myDiv1Para.appendTo("#myDiv1"); // Удаляем и восстанавливаем параграф #myDiv2 var myDiv2Para = $("#myDiv2>p").detach(); myDiv2Para.appendTo("#myDiv2"); }

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

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

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

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

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

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

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

$(init); function init() { // Удаляем элемент #myDiv, но сохраняем его содержимое $("#myPara").unwrap(); }

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

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

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

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

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

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

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

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

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

$(init); function init() { // Заменяем параграф в #myDiv1 новым параграфом $("#myDiv1>p").replaceWith("

Новый параграф с текстом

"); // Заменяем параграф в #myDiv2 горизонтальной линией var hr = document.createElement("hr"); $("#myDiv2>p").replaceWith(hr); // Заменяем параграф в #myDiv3 строкой с текущим временем $("#myDiv3>p").replaceWith(currentTime); function currentTime() { var currentTime = new Date(); var currentHours = currentTime.getHours (); var currentMinutes = currentTime.getMinutes (); var currentSeconds = currentTime.getSeconds (); // Pad the minutes and seconds with leading zeros, if required currentMinutes = (currentMinutes < 10 ? "0" : "") + currentMinutes; currentSeconds = (currentSeconds < 10 ? "0" : "") + currentSeconds; return ("

Текущее время: " + currentHours + ":" + currentMinutes + ":" + currentSeconds + "

"); } }

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

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

Новый параграф с текстом

Текущее время: 13:52:17

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

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

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

$("#myDiv").replaceWith("

Здесь новый текст

"); $("

Здесь новый текст

").replaceAll("#myDiv");

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

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

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

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

$(init); function init() { // Перемещаем параграф из #myDiv1 в #myDiv2 $("#myDiv2").append($("#myDiv1>p")); }

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

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

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

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

// Перемещаем параграф из #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 сначала удалит контент из старого родителя, затем клонирует контент столько раз, сколько нужно и добавит клоны в каждый указанный родительский элемент. Например:

$(init); function init() { // Перемещаем параграф из #myDiv1 в #myDiv2 и #myDiv3 $("#myDiv2, #myDiv3").append($("#myDiv1>p")); }

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

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

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

Резюме

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

Бывают случаи, когда вам может понадобиться создать перетаскиваемый элемент внутри вашего веб-приложения. Это отличная функциональность, однако, возможно вы хотите, чтобы элемент оставался на новом месте, после перетаскивания. В сегодняшней статье вы узнаете, как можно легко перетаскивать и закреплять в новом месте нужный элемент даже после перезагрузки страницы, с помощью захвата и хранения его X и Y координат.

Сценарий

Итак, у вас есть элемент на странице. Вы можете перетаскивать его туда-сюда. Но, когда страница перезагружается, элемент возвращается на исходную позицию. И хотя нам нужно, чтобы элемент был перетаскиваемый, при этом нужно, чтобы наш элемент достаточно было перетащить один раз. Давайте рассмотрим простое решение, реализующее данную функциональность.

Начало

Для этого примера нам понадобится библиотека , и плагин JQuery-JSON . Кроме этого, мы также будем использовать PHP и базу данных MySQL для разбора и хранения наших данных. Если вы новичок в jQuery, не беспокойтесь. JQuery — это расширяемая, быстрая и легковесная JavaScript-библиотека, которую легко и весело использовать. Библиотека имеет хорошо структурированную документацию и огромное сообщество.

HTML и CSS

Начнем с HTML-разметки и стилей для нашего примера. Сначала CSS:

Html, body { background:#151515; margin:0 0 0 0; padding:0 0 0 0; } #glassbox { background:#333; border:1px solid #000; height:400px; margin:30px auto auto auto; position:relative; width:960px; -moz-border-radius: 10px; -webkit-border-radius: 10px; } #element { background:#666; border:1px #000 solid; cursor:move; height:143px; padding:10px 10px 10px 10px; width:202px; -moz-border-radius: 10px; -webkit-border-radius: 10px; } #respond{ color:#fff; margin:0 auto 0 auto; width:960px; }

CSS – очень простой. Мы назначаем html и body нулевые свойства, для чистки внешних и внутренних отступов, далее устанавливаем значения высоты, ширины и другие свойства для наших элементов. — moz-border-radius и -webkit-border-radius – это два свойства, позволяющие нам создать закругленные углы (работает пока только в Mozilla Firefox и Safari 3) для наших элементов. Теперь, давайте взглянем на HTML:

Simple Draggable Element Persistence with jQuery Move the Box

Как видите, мы создали очень простую страницу, в которую подключили наш CSS, библиотеку JavaScript и плагины, кроме того, страница содержит элементы, к которым мы будем применять некоторые эффекты и события. Обратите внимание, что файл jquery-ui представляет собой специальную сборку, включающую в себя только ядро и функции перетаскивания элементов.

JavaScript

Теперь самое интересное! Сначала давайте рассмотрим базовые функции, которые мы будем использовать для применения некоторых эффектов к нашим элементам. Разберем все до основания.

$(document).ready(function() { $("#element").draggable({ containment: "#glassbox", scroll: false })

Сначала мы говорим браузеру: «Эй, это код, который мы хотим запустить; это не HTML, это JavaScript». Затем, мы ждем пока документ полностью загрузится, после того как это случилось, вызываем функцию для получения нашего блока #element , и добавляем к нему обработчик перетаскивания с базовыми настройками. Опция containment содержит наш элемент внутри родительского блока, и мы устанавливаем значение scroll в false , потому что, нам не нужен скролл.

Mousemove(function(){ var coord = $(this).position(); $("p:last").text("left: " + coord.left + ", top: " + coord.top); })

Внутри этого фрагмента, мы вызываем, обработчик события mousemove и говорим ему: «Когда мышь передвигается, установить переменную coord равной значению текущей позиции нашего блока #element» Затем мы получаем последний параграф в блоке #(“p: last”) и печатаем текст, выводящий значения свойств left(x) и top(y) нашего элемента, относительно родительского объекта (которым является блок #glassbox).

Mouseup(function(){ var coords=; var coord = $(this).position(); var item={ coordTop: coord.left, coordLeft: coord.top }; coords.push(item); var order = { coords: coords }; $.post("updatecoords.php", "data="+$.toJSON(order), function(response){ if(response=="success") $("#respond").html("X and Y Coordinates Saved!").hide().fadeIn(1000); setTimeout(function(){ $("#respond").fadeOut(1000); }, 2000); }); }); }); lt;/script>

Ну да, здесь уже сложнее. В этом фрагменте мы собираемся сделать кучу вещей. Сначала, мы устанавливаем пустой массив, а затем получаем некоторые значения для его наполнения. С помощью вызова обработчика событий.mouseup() мы велим браузеру отслеживать событие, когда вы отпускаете кнопку мыши. Мы указываем, что переменная coords – это пустой массив и снова устанавливаем ее значение равной позиции нашего блока #element .

Затем, нам нужно создать список из двух строчек, которыми будут coordTop: и coordLeft: , соответствующие позициям left и top , нашего блока. С помощью строки coords.push(item) , мы заполним наш список массивом из координат. Затем задаем переменную order как новый список, в котором ключ coords будет соответствовать нашему массиву coords . Теперь немного аякса.

$.post – это обработчик запроса AJAX, который загружает удаленную страницу, с помощью метода HTTP POST . Эта функция принимает следующие параметры: url, дата, ответ и тип данных для возврата. В этом примере, мы укажем файле updatecoords.php в качестве нашего URL, потому что, именно этому файлы мы хотим отправить наши данные. Затем, мы опишем тип данных, с помощью включения функции $.toJSON , определенной в плагине JSON и назначим переменную order , в качестве данных, которые должен вернуть.toJSON .

Далее, мы создаем ответ, который проверяет возвращение успешного ответа от нашего PHP-файла. В случае получения успешного ответа, мы отображаем сообщение об успешном сохранении координат, используя метод.fadeIn() и скорость 1000 миллисекунд, затем задаем таймер на 2000 миллисекунд, и снова медленно прячем это сообщение, с помощью метода.fadeOut() . Вот так будет выглядеть наш JavaScript в целом виде:

$(document).ready(function() { $("#element").draggable({ containment: "#glassbox", scroll: false }).mousemove(function(){ var coord = $(this).position(); $("p:last").text("left: " + coord.left + ", top: " + coord.top); }).mouseup(function(){ var coords=; var coord = $(this).position(); var item={ coordTop: coord.left, coordLeft: coord.top }; coords.push(item); var order = { coords: coords }; $.post("updatecoords.php", "data="+$.toJSON(order), function(response){ if(response=="success") $("#respond").html("X and Y Coordinates Saved!").hide().fadeIn(1000); setTimeout(function(){ $("#respond").fadeOut(1000); }, 2000); }); }); });

Поместите этот код ниже HTML, сразу после закрывающего тега body.

PHP

Хорошо, давайте сделаем что-нибудь с данными, которые приходят от нашего JQuery. Сначала нужно создать простую базу данных, для хранения наших координат, которые мы впоследствии будем использовать для определения позиции нашего элемента. Затем, нам понадобится файл config.php, в котором будут записаны параметры подключения к базе данных, а затем мы перейдем к updatecords.php.

Database: "xycoords" CREATE TABLE IF NOT EXISTS coords (id int(11) NOT NULL AUTO_INCREMENT, x_pos int(4) NOT NULL, y_pos int(4) NOT NULL, PRIMARY KEY (id)) ENGINE=MyISAM DEFAULT CHARSET=latin1;

Config.php

updatecoords.php

Здесь все довольно просто. Первое, что мы делаем – это проверяем, были ли переданы данные в файл. Если это произошло, мы включаем наш файл с настройками config.php и назначаем переменной $data значение json_decode(passed post variable); json_decode – это PHP-функция, представленная в PHP 5.2.0, которая позволяет декодировать строку JSON.

Поскольку наша переменная $data содержит массив данных, нам нужно разобрать его на части, чтобы получить нужные значения. Для этого мы пройдемся по массиву $data->coords () (который был получен из переменной order в JavaScript) и обработаем каждый элемент. В результате, из каждой пары ключ – значение будет создан объект списка, который мы в дальнейшем укажем и создадим переменную для его вывода. При этом мы будем использовать функцию preg_replace , для исключения ненужных символов. Кроме того, мы подготовим наши значения для вставки в базу данных, путем экранирования кавычек, и апострофов, с помощью функции mysqli_real_escape_string . Если все прошло хорошо, нам нужно будет вернуть успешный результат JavaScript.

В заключение

Теперь, когда у нас уже все готово, для того чтобы получить координаты элемента и передать их в PHP для записи, нам понадобится изменить нашу HTML-разметку для отображения позиции элемента. Для этого, мы удалим простую HTML-разметку и создадим ее с помощью PHP: