Изучаем jQuery. Часть 7.2 Методы манипуляции над элементами

Ромчик
2

Уроки по jQuery

Доброго времени суток. И мы продолжаем изучать jQuery. jQuery — это фреймворк JavaScript. В статье «Изучаем jQuery. Введение» мы рассмотрели все преимущества и недостатки данного фреймворка, в статье «Изучаем jQuery. Часть 1. Подключение jQuery» остановились на подключении jQuery различными способами к проекту, в статье «Изучаем jQuery. Часть 2. Основы jQuery» познакомились с основами jQuery, в статье «Изучаем jQuery. Часть 3. Выборка элементов» научились выбирать необходимые элементы из DOM-дерева, в статье «Изучаем jQuery. Часть 4. Фильтры» мы расширили возможности выбора элементов изучив фильтры в jQuery, в статьях «Изучаем jQuery. Часть 5. Понятие цепной функции» и «Изучаем jQuery. Часть 6. Понятие автоматических циклов» мы остановились на двух понятиях, которые существенно облегчают нам написание кода на jQuery, а в статье «Изучаем jQuery. Часть 7.1 Методы манипуляции над элементами» мы начали рассматривать методы манипуляции над объектами jQuery. И в этой статье мы пополним наши знания о jQuery добавив еще несколько методов манипуляции над элементами.

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

А сейчас первый метод, который я хотел бы рассмотреть в данной статье.

text() — метод для получения или изменения текста в выбранном элементе

Для того, чтобы получить или изменить текст, который находиться в элементе используется метод text(). Если мы методу text не зададим никакого параметра, то он нам вернет текст в соответствующем элементе, если в качестве параметра мы зададим какой-либо текст, то данный метод изменит текст в элементе на введенный.

Например, у нас есть p с id равным text, мы хотим изменить текст внутри этого параграфа на «Изменяем текст с помощью jQuery»:


$('#text').text('Изменяем текст с помощью jQuery');

html() — метод получения или изменения HTML-кода

Например мы хотим получить HTML-код элемента с классом равным class.


$('.class').html();

Но учтите, что в этом случае метод html() вернет html-код только первого из выборки элемента.

Если же мы хотим изменить html-код у элемента с классом class на <p>Новый код</p>, то в метод html() следует вставить в качестве параметра новый html-код.


$('.class').html('<p>Новый код</p>');

Но опять же, html-код изменится только у первого элемента из выборки.

before() — метод добавления кода перед выбранным элементом

Если нам необходимо добавить html-код перед каким-либо элементом, то используется метод before(), который в качестве параметра принимает html-код, который необходимо добавить.

Например, мы хоти добавить <p>Метод before</p> перед элементом с id равным id


$('#id').before('<p>Метод Before</p>');

В качестве параметра мы также можем передать объект jQuery, но в этом случае учтите, что элементы будут перенесены, а не скопированы.

В качестве параметра может быть передана функция, в этом случае будет вставлен html-код, который вернет данная функция.

insertBefore() — метод добавления html-кода

Метод insertBefore аналогичный методу before, за исключением одного. В начале мы прописываем html-код, а затем указываем перед каким элементом его вставить. Возьмем пример из предыдущего метода. Мы хоти добавить <p>Метод before</p> перед элементом с id равным id.


$('<p>Метод before</p>').insertBefore('#id');

after() — метод добавления html-кода после выбранного элемента

Этот метод аналогичен методу before(), единственное его отличие — это, данный метод добавляет html-код после выбранного элемента. Например, мы хотим вставить html-код <p>Метод after</p> после элемента с id равным id.


$('#id').after('<p>Метод after</p>');

Метод after в качестве параметров может принимать и объекты jQuery, и пользовательские функции.

insertAfter() — метод добавления html-кода

Метод insertAfter() аналогичен методу after за исключением одного: в начале мы указываем html-код, который хотим вставить, а затем элемент после, которого хотим вставить код. Рассмотрим пример из предыдущего метода. Мы хотим вставить html-код <p>Метод after</p> после элемента с id равным id.


$('<p>Метод after</p>').insertAfter('#id');

prepend() — метод добавления html-код в выбранный элемент

Если нам необходимо вставить html-код в выбранный элемент, но перед html-кодом, который находиться в этом элементе используется метод prepend(). В качестве параметров данный метод может принимать html-код, jQuery-объект, пользовательскую функцию.

Например, у нас есть:


<div id='test'>

<p>Пример</p>

</div>

И мы хотим в элемент div с id=test, перед абзацем вставить еще один абзац:


<p>Метод prepend</p>

Тогда используя метод prepend мы можем это сделать так:


$('#test').prepend('<p>Метод prepend</p>');

prependTo() — метод добавления html-кода в выбранный элемент

Метод prependTo аналогичен методу prepend за исключением того, что мы в начале пишем код, который хотим вставить, а затем указываем элемент в который хотим вставить данный код. Возьмем пример из предыдущего метода. Тогда решение данной задачи:


$('<p>Метод prepend</p>').prependTo('#test');

append() — метод добавления html-кода в выбранный элемент

Если нам необходимо добавить html-код в выбранный элемент, но после html-кода, который находиться в этом элементе, то используется метод append(). В качестве параметров данный метод принимает html-код, jQuery-объект или пользовательскую функцию. Например, у нас есть:


<div id='test'>

<p>Пример</p>

</div>

И мы хотим в элемент div с id=test, после абзаца вставить еще один абзац:


<p>Метод append</p>

Тогда используя метод append мы можем это сделать так:


$('#test').append('<p>Метод append</p>');

appendTo() — метод добавления html-кода в выбранный элемент

Метод appendTo() аналогичен методу appen() за исключением того, что в этом методе мы в начале прописываем код, который хотим вставить, а затем указываем элемент, в который этот код хотим вставить. Рассмотрим пример из предыдущего метода. Вот код решения данной задачи при помощи метода appendTo()


$('<p>Метод append</p>').append('#test');

wrap() — метод обертывания элементов страницы

Если нам необходимо выбранные элементы поместить в какой-то html-код, то для этого используется метод wrap(). Метод wrap() в качестве параметров может принимать html-код, jQuery-объект или пользовательскую функцию.

Например, у нас есть:


<p id='test'>Пример</p>

И мы хотим абзац с id=test поместить в div. Для этого используем следующий код:


$('#test').wrap('<div></div>');

Небольшое замечание: метод wrap будет оборачивать каждый элемент из выборки по отдельности. Если же нам необходимо обернуть всю выборку в одним общим элементом, то используется метод wrapAll().

wrapInner() — метод обертывания элементов страницы изнутри

Метод wrapInner аналогичен методу wrap, только оборачивание происходит изнутри выбранного элемента.

Если у нас есть:


<p id='example'>Пример</p>

То, применив к элементу p с id=example метод wrapInner:


$('#example').wrapInner('<div></div>');

мы получим следующий html-код:


<p id='example'><div>Пример</div></p>

Мы с Вами рассмотрели основные методы jQuery, которые производят манипуляции над содержимым элементом. Все видео-примеры к данной статье Вы можете посмотреть в дополнении к этой статье  «Изучаем jQuery. Часть 7.2 Методы манипуляции над элементами (доплнение)»  На этом я данную статью завершаю, но не завершаю рассмотрение методов jQuery. Так, что не пропускайте выхода новых статей подписавшись на RSS моего блога или подписавшись на email рассылку, Вы также можете следить за обновлениями блога в группе в Вконтакте  или в facebook.

Понравилась статья? Поделись с друзьями.
  • Add to favorites
  • Добавить ВКонтакте заметку об этой странице
  • Twitter
  • Facebook
  • Мой Мир
  • LiveJournal
  • Одноклассники
  • Блог Я.ру
  • MySpace
  • FriendFeed
  • В закладки Google
  • Google Buzz
  • Яндекс.Закладки
  • Reddit
  • StumbleUpon
  • Technorati
  • del.icio.us
  • БобрДобр
  • LinkedIn
  • Memori.ru
  • Сто закладок
  • Blogger

  • Изучаем jQuery. Часть 7.3 Методы манипуляции над элементами | Все о WEB программировании - 08.07.2013 в 07:55

    […] Доброго времени суток. Мы продолжаем изучать jQuery, а точнее методы манипуляции над элементами. И это уже третий пост посвященный методам манипуляций над элементами первые две статьи Вы можете прочитать по ссылкам http://web-programming.com.ua/izuchaem-jquery-chast-7-1-metody-manipulyacii-nad-elementami/ и http://web-programming.com.ua/izuchaem-jquery-chast-7-2-metody-manipulyacii-nad-elementami/ […]

  • ©2012-2017 По всем вопросам обращайтесь через форму обратной связи

    Яндекс.Метрика