DOM-манипуляции - презентация, доклад, проект скачать

Нажмите для полного просмотра!

Содержание ▲

Вы можете ознакомиться и скачать презентацию на тему DOM-манипуляции. Доклад-сообщение содержит 20 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

Слайды и текст этой презентации

Слайд 1

Описание слайда:

DOM-манипуляции DOM-манипуляции Создание новых элементов Создание элементов с использованием функции $() Одним из способов создания элементов является передача строки, содержащей HTML-фрагмент, функции $ (), которая выполнит синтаксический анализ строки и создаст соответствующие DOM-объекты. var newElem=$(''); var tr1= $('aaaaaaaabbbbbbbb'); создание новой строки Создание новых элементов путем клонирования существующих Метод clone () позволяет создавать новые элементы на основе существующих. Вызов этого метода приводит к клонированию каждого из элементов, содержащихся в объекте jQuery, вместе со всеми их элементами-потомками. var cloneCell = $('li.dcell').clone();

Слайд 2

Описание слайда:

cloneCell.each(function (index, elem) { cloneCell.each(function (index, elem) { console.log ("Новый элемент: " + elem.tagName +" " + elem.className); }); cloneCell.children('img').each(function(index, elem) { console.log("Дочерний элемент: " + elem.tagName + " " + elem.src); }); //$('ul#forclone').append(cloneCell); В этом сценарии выбираются и клонируются все элементы li принадлежащие классу dcell. Для демонстрации того, что при этом клонируются также элементы-потомки, в сценарии вызывается метод children() с селектором, обеспечивающим получение клонированных элементов img. Информация об элементах div и img выводится на консоль.

Слайд 3

Описание слайда:

Вставка дочерних элементов и элементов- потомков Вставка дочерних элементов и элементов- потомков Методы для вставки дочерних элементов и элементов-потомков append(HTML) append( jQuery) , append(HTMLElement[]) - Вставляет указанные элементы в качестве последних дочерних элементов во все выбранные элементы prepend(HTML) preend(jQuery) prepend(HTMLElement[]) – Вставляет указанные элементы в качестве первых дочерних элементов во все выбранные элементы appendTo(jQuery) appendTo(HTMLElement[]) - Вставляет элементы, содержащиеся в объекте jQuery, в качестве последних дочерних элементов в элементы, заданные аргументом. prependTo(HTML) preendTo(jQuery),prependTo(HTMLElement[] ) Вставляет элементы, содержащиеся в объекте jQuery, в качестве первых дочерних элементов в элементы, заданные аргументом

Слайд 4

Описание слайда:

Пример Our users: Пример Our users: Ivanov Ivan Sokolov Dmitrii Kolesnokov Semen var newUser1=$('Constantinov Vladimir'); //создаст элемент $('ul.myUsers').append(newUser1); // добавит в конец списка $('ul.myUsers').prepend('Staameskin Konstantin'); //добавит в начало списка.

Слайд 5

Описание слайда:

В случае использования методов appendTo () и prependTo () все меняется местами: элементы, содержащиеся в объекте jQuery, вставляются в качестве дочерних элементов внутрь элементов, заданных аргументом В случае использования методов appendTo () и prependTo () все меняется местами: элементы, содержащиеся в объекте jQuery, вставляются в качестве дочерних элементов внутрь элементов, заданных аргументом var span=$('!! '); span.prependTo($('ul.myUsers li')); $('').prependTo($('ul.myUsers li>span')); $('ul.myUsers li>span').each(function(index,elem){ var newch=$(''); newch.prependTo($(elem)); });

Слайд 6

Описание слайда:

var row3= $(' '); var row3= $(' '); var cell=$(' ') .append('') .append(' 3D принтер Leapfrog Creatr 2 '); cell.appendTo(row3); row3.appendTo('#printers');

Слайд 7

Описание слайда:

append(функция) prepend(функция) append(функция) prepend(функция) Добавляет результат, возвращаемый функцией, в окончание или начало содержимого каждого из элементов, содержащихся в объекте jQuery Элементы, которые передаются перечисленным выше методам в виде аргументов, вставляются в качестве дочерних элементов в каждый выбранный элемент, содержащийся в объекте jQuery. В связи с этим очень важно правильно формировать наборы элементов. $('ul.myUsers li>span').append( function(index){ var newch=$(''); return newch; })

Слайд 8

Описание слайда:

Вставка родительских элементов и элементов-предков Вставка родительских элементов и элементов-предков Библиoтeкa jQuery предоставляет набор методов, обеспечивающих вставку элементов в документ как родительских или элементов-предков по отношению к существующим элементам. Такого рода операции называются обертыванием (wrapping), или внешней вставкой, (поскольку добавляемый элемент окружает собой уже существующие элементы). wrap(HTML),wrap(jQuery),wrap(HTMLElement[]) -Обертывает указанные элементы вокруг каждого из элементов, содержащихся в объекте jQuery wrapAll(HTML),wrapAll(jQuery),wrapAll(HTMLElement[]) Обертывает указанные элементы вокруг набора элементов, содержащихся в объекте jQuery (рассматриваемых как единая группа) wrapInner(HTML),wrapInner(jQuery),wrapInner(HTMLElement[]) Обертывает указанные элементы вокруг содержимого каждого из элементов, содержащихся в объекте jQuery wrap(функция),wrapInner(функция) Динамически обертывает элементы с использованием функции При обертывании элементов эти методы могут принимать HTML-фрагмент в качестве аргумента, но всегда следует проверять, чтобы этот фрагмент содержал только один внутренний элемент. В противном случае jQuety не сможет определить, что именно необходимо сделать. Отсюда следует, что каждый элемент в аргументе метода может иметь не более одного родительского и не более одного дочернего элемента.

Слайд 9

Описание слайда:

Пример использования метода wrap () Пример использования метода wrap () $(document).ready(function() { var newElem = $("").css("border", "thick solid red"); $('li.dcell> img').wrap(newElem); }); В этом сценарии мы создаем новый элемент div и используем метод css () для установки значения CSS-свойства border. Затем элемент div добавляется в качестве родительского элемента по отношению ко всем элементам img.

Слайд 10

Описание слайда:

Элементы, которые вы передаете в виде аргумента методу wrap(), вставляются между каждым из элементов, содержащихся в объекте jQuery, и его текущим родительским элементом. Элементы, которые вы передаете в виде аргумента методу wrap(), вставляются между каждым из элементов, содержащихся в объекте jQuery, и его текущим родительским элементом. Для того, чтобы вставить в документ элемент, который станет родительским сразу для нескольких элементов, следует использовать метод wrapAll () $(document).ready(function() { var newElem = $("") .css("border", "thick solid green"); $ ('ul.dtable,ul.myUsers') .wrapAll (newElem) ; }); Этот сценарий отличается от предыдущего лишь тем, что в нем используется метод wrapAll (). Новый элемент добавляется как общий родительский элемент для всего набора выбранных элементов. Будьте внимательны, используя этот метод. Если выбранные элементы не имеют общих родителей, то новый элемент будет добавлен как родительский для первого из них. После этого jQuery переместит все остальные элементы так, чтобы они стали сестринскими по отношению к первому элементу.

Слайд 11

Описание слайда:

Обертывание содержимого элементов Обертывание содержимого элементов Метод wrapInner () позволяет окружать элементами содержимое других элементов (а не сами элементы). Соответствующий пример приведен в листинге $(document).ready(function() { var newElem = $("").css("border", "thick solid red"); $('li.dcell').wrapInner(newElem); }); Метод wrapInner () вставляет новые элементы между каждым из содержащихся в объекте jQuery элементом и его дочерним элементом. В данном сценарии выбираются элементы, принадлежащие классу dcell, и содержимое каждого из них заключается в новый элемент div. Обертывание элементов с использованием функции Методам wrap () и wrapAll() в качестве аргумента может быть передана функция, что обеспечивает возможность динамической генерации элементов. Единственным аргументом этой функции является индекс элемента в выбранном наборе. Внутри этой функции специальная переменная this ссылается на обрабатываемый элемент.

Слайд 12

Описание слайда:

Вставка сестринских элементов Вставка сестринских элементов jQuery предоставляет также набор методов, обеспечивающих вставку элементов в документ как сестринских по отношению к существующим элементам. after(HTML),after(jQuery),after(HTMLElement[]) Вставляет указанные элементы в качестве последних сестринских элементов во все выбранные элементы before(HTML) before(jQuery) before(HTMLElement[]) Вставляет указанные элементы в качестве первых сестринских элементов во все выбранные элементы insertAfter(HTML) insertAfter(jQuery) insertAfter(HTMLElement[]) Вставляет элементы, содержащиеся в объекте jQuery, в качестве последних сестринских элементов в элементы, заданные аргументом insertBefore(HTML) insertBefore(jQuery) insertBefore(HTMLElement[]) Вставляет элементы, содержащиеся в объекте jQuery, в качестве первых сестринских элементов в элементы, заданные аргументом after(функция) before(функция) Добавляет результат, возвращаемый функцией, в окончание или начало содержимого

Слайд 13

Описание слайда:

var newCell=$(' ') var newCell=$(' ') .append('') .append(' 3D принтер Leapfrog Creatr 2 '); $('#row1 li.dcell#dc11').after(newCell); или $('#row1 li.dcell#dc11').before(newCell);

Слайд 14

Описание слайда:

Вставка сестринских элементов из объекта jQuery Вставка сестринских элементов из объекта jQuery Методы insertAfter () и insertBefore () вставляют элементы, содержащиеся в объекте jQuery, в качестве следующих или предшествующих сестринских элементов по отношению к элементам, переданным методу в качестве аргумента. Это та же функциональность, которую обеспечивают методы after () и before (), но отличающаяся тем, что объект jQuery и аргумент метода меняются ролями newCell.insertAfter('#row1 #dc11); Вставка сестринских элементов с использованием функции Сестринские элементы можно вставлять динамически, передавая методам after() и before() функцию в качестве аргумента, как мы это уже делали при вставке родительских и дочерних элементов.

Слайд 15

Описание слайда:

Замена элементов Замена элементов С помощью методов, описанных далее можно заменить один набор элементов другим. Методы замены элементов replaceWith(HTML), replaceWith (jQuery), replaceWith(HTMLElement [] ) Заменяет элементы, содержащиеся в объекте jQuery, указанным содержимым replaceAll (jQuery),replaceAll (HTMLElement [] ) Заменяет элементы, заданные аргументом, элементами, содержащимися в объекте jQuery replaceWith (функция) Выполняет динамическую замену элементов, содержащихся в объекте jQuery, с использованием функции Методы replaceWith() и replaceAll () работают одинаковым образом, за исключением того, что объект jQuery и аргумент играют в них противоположные pоли.

Слайд 16

Описание слайда:

Пример использования обоих методов приведен в листинге Пример использования обоих методов приведен в листинге var newCell=$(' ') .append('') .append(' 3D сканер Sense '); $('#row4').children().first().replaceWith(newCell); $("").replaceAll('#row2 img') .css("border", "thick solid red"); В этом сценарии сначала создается набор элементов, а затем в документе выполняется поиск элемента ul атрибут id которого равен row4, и его первый дочерний элемент заменяется новым содержимым с помощью метода replaceWith (). Наконец, с помощью метода replaseAll () все элементы img, являющиеся потомками элемента, атрибут id которого равен row2, заменяются другими изображениями.

Слайд 17

Описание слайда:

Удаление элементов Удаление элементов В дополнение к возможности вставки и замены элементов библиотека jQuery предлагает ряд методов для удаления элементов из DOM detach(), detach(селектор) Удаляет элементы из DOM. Данные, связанные с элементами, сохраняются empty() Удаляет все дочерние узлы каждого из элементов, содержащихся в объекте jQuery remove(),remove(селектор) Удаляет элементы из DOM. По мере удаления элементов связанные с ними данные уничтожаются unwrap() Удаляет родительские элементы каждого из элементов, содержащихся в объекте jQuery

Слайд 18

$$(document).ready(function() { $('img[src*=Cube_3], img[src*=Duplicator_4x]').parent().remove(); }); В этом сценарии мы выбираем элементы img,...$

Описание слайда:

$(document).ready(function() { $('img[src*=Cube_3], img[src*=Duplicator_4x]').parent().remove(); }); В этом сценарии мы выбираем элементы img, атрибуты src которых содержат Cube_3 и Duplicator, получаем их родительские элементы, а затем удаляем их. Можно также отфильтровать удаляемые элементы, передав селектор методу remove (), как показано в листинге Фильтрация удаляемых элементов с помощью селектора $(document).ready(function() { $('li.dcell').remove(':has(img[src*=Cube_3], img[src*=Duplicator_4x])'); }); Оба сценария приводят к одному и тому же результату

Слайд 19

Описание слайда:

Удаление элементов с сохранением данных Удаление элементов с сохранением данных Метод detach () работает аналогично методу remove () с тем лишь отличием, что связанные с удаляемыми элементами данные сохраняются. Если планируется последующая вставка удаленных элементов в другое место документа, то обычно предпочтение следует отдавать методу detach (). Пример использования метода detach () приведен в листинге $(document).ready(function() { $('#row2').append($('img[src*=Duplicator_4x]').parent().detach()); }); В этом сценарии удаляется родительский элемент элемента img, атрибут src которого содержит Duplicator_4x Затем элементы вновь вставляются в документ с помощью рассмотренного нами ранее метода append (). Лучше избегать такого подхода, поскольку использование метода append () без вызова метода detach () дает тот же эффект. Инструкцию, являющуюся ключевой в листинге, можно переписать следующим образом: $('#row2').append($('img[src*=Duplicator_4x]').parent());

Слайд 20

Описание слайда:

Очистка элементов Очистка элементов Метод empty () удаляет все элементы-потомки и текст из элементов, содержащихся в объекте jQuery. Сами элементы остаются в документе. Использование метода empty () $(document).ready(function() { $('#row1').children().eq(1).empty().css("border", "thick solid red"); }); В этом сценарии из дочерних элементов элемента с атрибутом id, равным rowl, выбирается элемент с индексом, равным 1, и вызывается метод empty(). Чтобы сделать изменение более заметным, соответствующая позиция в документе заключена в красную рамку Метод unwrap () Метод unwrap () удаляет родительские элементы для элементов, содержащихся в объекте jQuery. Выбранные элементы становятся дочерними элементами родителей своих бывших родительских элементов. Пример использования метода unwrap () $(document).ready(function() { $('div.bot_part> *').unwrap().css({' display':'block'}); }); В этом сценарии выбираются элементы являющиеся потомками элемента div класса bot_part, и вызывается метод unwrap (

Теги манипуляции

Похожие презентации