jQuery: замена элемента, его вложение, перемещение и другие действия

В этом уроке мы попробуем свои силы в изменении содержимого элементов в jQuery.

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

Библиотека jQuery также позволяет использовать это свойство. Для этого находим элемент с помощью функции $ (), а затем преобразуем коллекцию элементов jQuery в набор DOM-элементов.

Для этой цели можно также воспользоваться методом get () .

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

- text ( [3начение] ) — позволяет получить или задать текст элемента. Если параметр не указан, то метод возвращает текстовое значение без тегов. При наличии нескольких элементов в коллекции будут возвращены все значения в виде строки. Если необходимо получить значение только первого элемента из коллекции, то можно воспользоваться методом eq () .

Можно также ограничить набор с помощью селектора :

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

В этом примере строка в исходном HTML-коде будет выглядеть следующим образом.

- html ( [3начение] ) — позволяет получить или задать HTML-код элемента. Если параметр не указан, то метод возвращает значение вместе с тегами. При наличии нескольких элементов в коллекции будет возвращено значение только первого элемента.

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

Если необходимо изменить значение только первого элемента из коллекции, то можно воспользоваться методом eq () или селектором : first.

- append (Выражение) — добавляет Выражение в конец содержимого выбранного элемента. В качестве параметра может быть указан HTML-код, DOM-элемент или коллекция элементов jQuery. Для примера добавим HTML-код в конец элемента.

Результат будет выглядеть следующим образом.

Теперь добавим DOM-элемент.

- prepend(Выражение) — добавляет Выражение в начало содержимого выбранного элемента. В качестве параметра может быть указан HTML-код, DOM-элемент или коллекция элементов jQuery. Метод полностью идентичен методу appendO, за исключением того, что добавляет Выражение не в конец элемента, а в его начало. Для примера добавим HTML-код в начало элемента.

- appendTo (Селектор) — добавляет коллекцию элементов jQuery в конец всех элементов, соответствующих указанному селектору. Для примера добавим HTML-код в конец элемента с идентификатором divl.

Как видно из примера, мы поменяли параметры местами и использовали метод append () вместо метода appendTo ().

- prependTo (Селектор) — добавляет коллекцию элементов jQuery в начало всех элементов, соответствующих указанному селектору. Для примера добавим HTML-код в начало элемента с идентификатором divl.

Как добавить содержимое перед элементом или после него

В предыдущем разделе мы рассмотрели изменение внутреннего содержимого элемента. Библиотека jQuery предоставляет также методы, которые позволяют добавить какое-либо содержимое перед элементом или после него. Рассмотрим эти методы.

- aftег (Выражение) — добавляет Выражение после всех элементов коллекции. В качестве параметра может быть указан HTML-код, DOM-элемент или коллекция элементов jQuery. Для примера добавим HTML-код после элемента.

А теперь добавим созданный элемент коллекции jQuery. $("#divl").after($("<u>Новый текст</u>"));

- before (Выражение) — добавляет Выражение перед всеми элементами коллекции. В качестве параметра может быть указан HTML-код, DOM-элемент или коллекция элементов jQuery. Метод полностью идентичен методу after (), за исключением того, что добавляет Выражение не после элемента, а перед ним. Для примера добавим HTML-код перед элементом.

Результат будет выглядеть следующим образом. <u>Новый текст </u><div > текст </div>

- insertAfter (Селектор) — добавляет коллекцию элементов jQuery после всех элементов, соответствующих указанному селектору. Для примера добавим HTML-код после элемента с идентификатором divl.

Результат будет таким же, как и при использовании метода after () . $("#divl").after("<u>Новый текст</u>");

- insertBefore (Селектор) — добавляет коллекцию элементов jQuery перед всеми элементами, соответствующими указанному селектору. Для примера добавим HTML-код перед элементом с идентификатором divl.

Результат будет таким же, как и при использовании метода before () . $("#divl").before("<u>Новый текст</u>");

Вложение элементов

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

- wraplnner (HTML-элемент или BОМ-элемент) —вкладывает внутреннее содержимое каждого элемента коллекции в другой элемент. Для примера выделим содержимое всех тегов div.

Такого же эффекта можно достичь, передав в качестве параметра DOM-элемент.

Можно также передать элемент, созданный с помощью функции $ ().

- wrap (HTML-элемент или BОМ-элемент) —полностью вкладывает каждый элемент коллекции в другой элемент.

- wrapAll (HTML-элемент или ВОМ-элемент) — собирает все элементы коллекции в одном месте и вкладывает их в другой элемент.

Результат будет выглядеть следующим образом. <b>Какой-то текст 1</b> <u><div>Текст l</div><div>Текст 2</div><div>Текст 3 </div></u> <b>Какой-то текст 2</b> <b>Какой-то текст 3</b>

Как видно из примера, все элементы коллекции были размещены после первого элемента и расположены внутри тега u.

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

Если в качестве параметра методов before (), prepend (), append () и after () указать коллекцию существующих элементов jQuery, то они будут перемещены. Куда будут вставлены элементы, зависит от конкретного метода: before () (перед элементом), ргеpend() (в начало содержимого), append () (в конец содержимого), after () (после элемента). Для примера найдем все ссылки на странице и добавим их в конец элемента.

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

Такого же эффекта можно достичь при помощи методов insertBefore (), prependTo (), appendTo () и insertAfter (). Куда будут вставлены элементы, зависит от конкретного метода: insertBefore О (перед элементом), prependTo () (в начало содержимого), appendTo () (в конец содержимого), insertAfter () (после элемента). Для примера найдем все ссылки на странице и добавим их перед элементом.

В результате все ссылки будут размещены непосредственно перед элементом с идентификатором divl, и мы получим следующий HTML-код.

Библиотека jQuery позволяет создавать копии существующих элементов (клонировать). Для этого предназначен метод clone ( [true] ). Если в качестве параметра указано значение true, то будут также клонированы и обработчики событий. Создадим копию первой ссылки в документе, а затем выведем ее после элемента с идентификатором divl. $("а").eq(0).clone().insertAfter("#divl");

Результат будет выглядеть следующим образом.

Очистка содержимого и удаление элемента

Для очистки содержимого и удаления элемента применяются следующие методы.

- empty () — удаляет все подэлементы текущего элемента.

Как видно из примера, после удаления содержимого элемента с идентификатором divl сам элемент все еще остается доступным для манипуляций.

- remove ( [Селектор] ) — полностью удаляет элементы из объектной модели документа.

Данный пример демонстрирует отсутствие элемента после щелчка на кнопке Удалить. Щелкнув на кнопке Количество элементов в первый раз, мы получим число 1, а если щелкнуть на ней после удаления элемента, то получим число 0.

Если коллекция состоит более, чем из одного элемента, то будут удалены все элементы. Метод remove () позволяет задать дополнительное условие, которому должны соответствовать удаляемые элементы. В качестве примера удалим все ссылки с расширением . php.

Изменение содержимого элементов

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

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

Для этой цели можно также воспользоваться методом get () .

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

Можно также ограничить набор с помощью селектора :

В этом примере строка в исходном HTML-коде будет выглядеть следующим образом.

Результат будет выглядеть следующим образом.

Теперь добавим DOM-элемент.

- prepend(Выражение) — добавляет Выражение в начало содержимого выбранного элемента. В качестве параметра может быть указан HTML-код, DOM-элемент или коллекция элементов jQuery. Метод полностью идентичен методу append (), за исключением того, что добавляет Выражение не в конец элемента, а в его начало. Для примера добавим HTML-код в начало элемента.

Результат будет выглядеть следующим образом. <div ><u>Новый текст</u> <b>Текст</b> </div>

Результат будет таким же, как и при использовании метода append () . $("#divl").append("<u>Новый текст</u>");

Как видно из примера, мы поменяли параметры местами и использовали метод append () вместо метода appendTo ().

Результат будет таким же, как и при использовании метода prepend () . $("#divl").prepend("<u>Новый текст</u>");

Скрипт обертывания изображений в теги + исключение других классов + удаление некоторых атрибутов

📎📎📎📎📎📎📎📎📎📎