Своеобразие русской архитектуры: Основной материал – дерево – быстрота постройки, но недолговечность и необходимость деления...
Папиллярные узоры пальцев рук - маркер спортивных способностей: дерматоглифические признаки формируются на 3-5 месяце беременности, не изменяются в течение жизни...
Топ:
Определение места расположения распределительного центра: Фирма реализует продукцию на рынках сбыта и имеет постоянных поставщиков в разных регионах. Увеличение объема продаж...
Основы обеспечения единства измерений: Обеспечение единства измерений - деятельность метрологических служб, направленная на достижение...
История развития методов оптимизации: теорема Куна-Таккера, метод Лагранжа, роль выпуклости в оптимизации...
Интересное:
Финансовый рынок и его значение в управлении денежными потоками на современном этапе: любому предприятию для расширения производства и увеличения прибыли нужны...
Как мы говорим и как мы слушаем: общение можно сравнить с огромным зонтиком, под которым скрыто все...
Средства для ингаляционного наркоза: Наркоз наступает в результате вдыхания (ингаляции) средств, которое осуществляют или с помощью маски...
Дисциплины:
2019-09-04 | 85 |
5.00
из
|
Заказать работу |
|
|
Мы уже познакомились с методами html() и text(), позволяющими изменять содержимое элемента. В этом разделе будут рассматриваться методы, позволяющие производить более сложные изменения в документе.
В браузере HTML документы представлены в виде дерева узлов, а не в виде линейной последовательности символов, поэтому вставку, удаление и замену фрагмента документа выполнить не так просто, как фрагмента строки или массива.
Вставка и замена элементов
Все методы, демонстрирующийся ниже, принимают аргумент, определяющий содержимое, которое должно быть вставлено в документ. Это может быть строка с простым текстом или с разметкой HTML, определяющая содержимое, объект jQuery, элемент Element или текстовый узел Node.
Вставка может быть выполнена внутрь, перед, после или вместо (в зависимости от метода) каждого выбранного элемента. Если в качестве вставляемого содержимого используется элемент, уже присутствующий в документе, он перемещается из текущего местоположения. Если выполняется вставка сразу в несколько мест, элемент будет скопирован необходимое число раз. Все эти методы возвращают объект jQuery, относительно которого они вызываются. Обратите, однако, внимание, что после вызова метода replaceWith() элементы, находящиеся в объекте jQuery, исключаются из документа:
$("#log").append("<br>" + message); // добавить содержимое в конец элемента #log
$("h1").prepend("§"); // добавить символ параграфа в начало каждого элемента <h1>
$("h1").before("<hr>"); // вставить линию перед каждым элементом <h1>
$("h1").after("<hr>"); // вставить линию после <h1>
$("hr").replacewith("<br>"); // заменить элементы <hr> на <br>
|
Все пять методов, представленные выше, применяются к целевым элементам и принимают вставляемое содержимое в виде аргумента.
Для каждого из этих пяти методов имеется парный метод, действующий в обратном порядке: он вызывается относительно содержимого и принимает целевые элементы в виде аргументов. Пары методов перечислены в следующей таблице:
Есть несколько важных замечаний, касающихся этих методов:
· Если любому методу из второго столбца передать строку, он будет интерпретировать ее как разметку HTML. Если передать строку любому методу из третьего столбца, он будет интерпретировать ее как селектор, идентифицирующий целевые элементы.
· Методы из третьего столбца не принимают функции в аргументах, в отличие от методов из второго столбца.
· Методы из второго столбца возвращают объект jQuery, относительно которого они вызываются. Элементы в этом объекте jQuery могут иметь новое содержимое или новые братские элементы, но сами они не изменяются. Методы из третьего столбца вызываются относительно содержимого, которое должно быть вставлено, и возвращают новый объект jQuery, представляющий новое содержимое после вставки. В частности, обратите внимание, что если содержимое вставляется сразу в несколько мест, возвращаемый объект jQuery будет включать по одному элементу для каждой позиции вставки.
После перечисления различий реализуем те же операции, что и в примере выше, с помощью методов из третьего столбца. Обратите внимание, что во второй строке методу $() нельзя передать простой текст (без угловых скобок, которые позволили бы идентифицировать его как разметку HTML), потому что он будет интерпретироваться как селектор. По этой причине требуется явно создать текстовый узел, который должен быть вставлен:
$("<br>"+message").appendTo("#log"); // Добавить разметку html в #log
$(document.createTextNode("§")).prependTo("h1"); // Добавить текстовый узел во все <h1>
$("<hr>").insertBefore("h1"); // Вставить линию перед каждым
|
$("<hr>").insertAfter("h1"); // Вставить линию после каждого
$("<br>").replaceAll("hr"); // Заменить элементы <hr> на <br>
Копирование элементов
Как отмечалось выше, при вставке элементов, уже являющихся частью документа, эти элементы не копируются, а просто перемещаются в новое местоположение. Если элемент вставляется в несколько мест, библиотека jQuery скопирует элемент столько раз, сколько потребуется, но копирование не выполняется при вставке только в одно местоположение. Если потребуется не переместить, а скопировать элемент, необходимо сначала создать копию с помощью метода clone().
Метод clone() создает и возвращает копии всех выбранных элементов (и всех потомков этих элементов).
Копии элементов, находящиеся в возвращаемом объекте jQuery, не являются частью документа, но их можно вставить в документ с помощью любого из методов, представленных выше:
// Добавить новый div с атрибутом id="linklist" в конец документа
$(document.body).append("<div id='linklist' ><h1>List of Links</h1></div>");
// Скопировать все ссылки в документе и вставить их в этот новый div $("a").clone().appendTo("#linklist");
// Вставить элементы <br> после каждой ссылки, чтобы они отображались в отдельных строках
$("#linklist > a").after("<br>");
По умолчанию метод clone() не копирует обработчики событий и другие данные, связанные с элементами. Если необходимо будет скопировать эти дополнительные данные, передайте методу clone() значение true.
Обертывание элементов
Другой способ вставки элементов в HTML-документ связан с обертыванием новым элементом (или элементами) одного или более элементов.
Объект jQuery определяет три метода обертывания.
1. Метод wrap() обертывает каждый выбранный элемент.
2. Метод wrapInner() обертывает содержимое каждого выбранного элемента.
3. Метод wrapAll() обертывает все выбранные элементы как единое целое.
По умолчанию этим методам передается вновь созданный обертывающий элемент или строка с разметкой HTML, которая будет использована для создания обертки.
Строка с разметкой HTML может включать вложенные элементы, если это необходимо, но на самом верхнем уровне она должна содержать единственный элемент.
Если любому из этих методов передать функцию, она будет вызываться по одному разу в контексте каждого элемента (с индексом элемента в виде единственного аргумента) и должна возвращать строку, элемент Element или объект jQuery.
|
Например:
$("h1").wrap(document.createElement("i")); // Обернуть каждый элемент <h1> элементом <i>
$("h1").wrapInner("<i>"); // Обернуть содержимое каждого элемента <h1> элементом <i>
Удаление элементов
Помимо методов вставки и замены в объекте jQuery имеются также методы удаления элементов.
Метод empty() удаляет все дочерние элементы (включая текстовые узлы) из каждого выбранного элемента без изменения самого элемента.
Метод remove(), напротив, удаляет из документа все выбранные элементы (и все их содержимое). Обычно метод remove() вызывается без аргументов и удаляет все элементы, находящиеся в объекте jQuery. Однако если передать методу аргумент, этот аргумент будет интерпретироваться как селектор, и удалены будут только элементы из объекта jQuery, соответствующие селектору. Метод remove() удаляет также все обработчики событий и другие данные, которые могли быть связаны с удаляемыми элементами.
Метод detach() действует подобно методу remove(), но не удаляет обработчики событий и данные. Метод detach() может оказаться удобнее, когда элементы требуется удалить из документа на время и позднее вставить их обратно.
Наконец, метод unwrap() выполняет удаление элементов способом, противоположным тому, каким действует метод wrap() или wrapAll(): он удаляет родительский элемент каждого выбранного элемента, не оказывая влияния на выбранные элементы и их братские элементы. То есть для каждого выбранного элемента он замещает родителя этого элемента его дочерними элементами. В отличие от методов remove() и detach(), метод unwrap() не принимает необязательный аргумент с селектором.
|
|
Эмиссия газов от очистных сооружений канализации: В последние годы внимание мирового сообщества сосредоточено на экологических проблемах...
История развития хранилищ для нефти: Первые склады нефти появились в XVII веке. Они представляли собой землянные ямы-амбара глубиной 4…5 м...
Историки об Елизавете Петровне: Елизавета попала между двумя встречными культурными течениями, воспитывалась среди новых европейских веяний и преданий...
Кормораздатчик мобильный электрифицированный: схема и процесс работы устройства...
© cyberpedia.su 2017-2024 - Не является автором материалов. Исключительное право сохранено за автором текста.
Если вы не хотите, чтобы данный материал был у нас на сайте, перейдите по ссылке: Нарушение авторских прав. Мы поможем в написании вашей работы!