Чтение онлайн

на главную - закладки

Жанры

JavaScript. Подробное руководство, 6-е издание
Шрифт:

• Если любому методу из второго столбца передать строку, он будет интерпретировать ее как разметку HTML. Если передать строку любому методу из третьего столбца, он будет интерпретировать ее как селектор, идентифицирующий целевые элементы. (Целевые элементы можно также указывать явно, передавая объект

jQuery
,
Element
или
Node
.)

• Методы из третьего столбца не принимают функции в аргументах, в отличие от методов из второго столбца.

• Методы из второго столбца возвращают объект

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

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

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

$C'<br/>+message").appendTo(''#log"); // Добавить разметку html в #log

$(document.createTextNode(”§")).prependTo( "h1"); // Добавить текстовый узел во все <h1>

$('<hr/>").insertBefore("h1"); // Вставить линию перед каждым <h1>

$("<hr/>").insertAfter("h1"); // Вставить линию после каждого <h1>

$("<br/>").replaceAll("hr"); // Заменить элементы <hr/> на <br/>

19.3.2. Копирование элементов

Как отмечалось выше, при вставке элементов, уже являющихся частью документа, эти элементы не копируются, а просто перемещаются в новое местоположение. Если элемент вставляется в несколько мест, библиотека jQuery скопирует элемент столько раз, сколько потребуется, но копирование не выполняется при вставке только в одно местоположение. Если потребуется не переместить, а скопировать элемент, необходимо сначала создать копию с помощью метода

clone.
Метод
сlопе
создает и возвращает копии всех выбранных элементов (и всех потомков этих элементов). Копии элементов, находящиеся в возвращаемом объекте
jQuery
, не являются частью документа, но их можно вставить в документ с помощью любого из методов, представленных выше:

// Добавить новый div с атрибутом id="linklist" в конец документа

$(document.body).append("<div id= 'linklist' ><h1>List of Links</h1></div>");

// Скопировать все ссылки в документе и вставить их в этот новый div

$("а").clone.appendTo("#linklist");

// Вставить элементы <Ьг/> после каждой ссылки, чтобы они отображались в отдельных строках

$("#linklist > а").after("<br/>");

По умолчанию метод clone не копирует обработчики событий (раздел 19.4) и другие данные (раздел 19.2.7), связанные с элементами. Если необходимо будет скопировать эти дополнительные данные, передайте методу

clone
значение true.

19.3.3. Обертывание элементов

Другой способ вставки элементов в HTML-документ связан с обертыванием новым элементом (или элементами) одного или более элементов. Объект

jQuery
определяет три метода обертывания. Метод
wrap
обертывает каждый выбранный элемент. Метод
wrapInner
обертывает содержимое каждого выбранного элемента. А метод
wrapAll
обертывает все выбранные элементы как единое целое. По умолчанию этим методам передается вновь созданный обертывающий элемент или строка с разметкой HTML, которая будет использована для создания обертки. Строка с разметкой HTML может включать вложенные элементы, если это необходимо, но на самом верхнем уровне она должна содержать единственный элемент. Если любому из этих методов передать функцию, она будет вызываться по одному разу в контексте каждого элемента (с индексом элемента в виде единственного аргумента) и должна возвращать строку, элемент
Element
или объект
jQuery
. Например:

// Обернуть каждый элемент <h1> элементом <i>

$("h1").wrap(document.createElement("i")); // Результат: <i><h1>...</h1></i>

// Обернуть содержимое каждого элемента <h1>. Строковый аргумент проще в использовании.

$("h1").wrapInner("<i/>"); //Результат: <h1><i>... </i></h1>

// Обернуть первый абзац якорем и элементом div

$("body>p:first").wrap("<a name='lead'><div class='fіrst'></div></a>"):

// Обернуть все остальные абзацы другим элементом div

$(”body>p:not(:first)").wrapAll("<div class='rest' ></div>"):

19.3.4. Удаление элементов

Помимо методов вставки и замены в объекте

jQuery
имеются также методы удаления элементов. Метод
empty
удаляет все дочерние элементы (включая текстовые узлы) из каждого выбранного элемента без изменения самого элемента. Метод
remove,
напротив, удаляет из документа все выбранные элементы (и все их содержимое). Обычно метод
remove
вызывается без аргументов и удаляет все элементы, находящиеся в объекте
jQuery
. Однако если передать методу аргумент, этот аргумент будет интерпретироваться как селектор, и удалены будут только элементы из объекта
jQuery
, соответствующие селектору. (Если необходимо удалить элементы из множества выбранных элементов, не удаляя их из документа, используйте метод
filter
, о котором рассказывается в разделе 19.8.2.) Обратите внимание, что не требуется удалять элементы перед повторной их вставкой в документ: достаточно просто вставить их в новое местоположение, а библиотека автоматически переместит их.

Поделиться:
Популярные книги

Звездная Кровь. Изгой

Елисеев Алексей Станиславович
1. Звездная Кровь. Изгой
Фантастика:
боевая фантастика
попаданцы
рпг
5.00
рейтинг книги
Звездная Кровь. Изгой

Орден Архитекторов 9

Винокуров Юрий
Фантастика:
попаданцы
фэнтези
5.00
рейтинг книги
Орден Архитекторов 9

Инженер Петра Великого 2

Гросов Виктор
2. Инженер Петра Великого
Фантастика:
попаданцы
альтернативная история
фэнтези
5.00
рейтинг книги
Инженер Петра Великого 2

Властелин Севера

Корнуэлл Бернард
3. Саксонские хроники
Приключения:
исторические приключения
8.67
рейтинг книги
Властелин Севера

Полет аистов

Гранже Жан-Кристоф
Детективы:
триллеры
8.88
рейтинг книги
Полет аистов

Первый среди равных. Книга IX

Бор Жорж
9. Первый среди Равных
Фантастика:
попаданцы
аниме
фэнтези
5.00
рейтинг книги
Первый среди равных. Книга IX

Алекс и Алекс

Афанасьев Семен
1. Алекс и Алекс
Фантастика:
боевая фантастика
6.83
рейтинг книги
Алекс и Алекс

Последний Паладин. Том 11

Саваровский Роман
11. Путь Паладина
Фантастика:
попаданцы
аниме
фэнтези
5.00
рейтинг книги
Последний Паладин. Том 11

Я все еще барон

Дрейк Сириус
4. Дорогой барон!
Фантастика:
боевая фантастика
5.00
рейтинг книги
Я все еще барон

Вечный. Книга VI

Рокотов Алексей
6. Вечный
Фантастика:
рпг
фэнтези
5.00
рейтинг книги
Вечный. Книга VI

Кодекс Императора IV

Сапфир Олег
4. Кодекс Императора
Фантастика:
аниме
фэнтези
попаданцы
5.00
рейтинг книги
Кодекс Императора IV

Тринадцатый VI

NikL
6. Видящий смерть
Фантастика:
фэнтези
попаданцы
аниме
5.00
рейтинг книги
Тринадцатый VI

Хозяин Теней 3

Петров Максим Николаевич
3. Безбожник
Фантастика:
попаданцы
аниме
фэнтези
фантастика: прочее
5.00
рейтинг книги
Хозяин Теней 3

Черный Маг Императора 9

Герда Александр
9. Черный маг императора
Фантастика:
юмористическое фэнтези
попаданцы
аниме
5.00
рейтинг книги
Черный Маг Императора 9