Изучаем jQuery. Часть 7.2 Методы манипуляции над элементами (дополнение)
Доброго времени суток. Данная статья является дополнением к статье «Изучаем jQuery. Часть 7.2 Методы манипуляции над элементами». И в данной статье Вы ничего не найдете нового по теории, но данная статья содержит видео примеры методов, описанных в статье «Изучаем jQuery. Часть 7.2 Методы манипуляции над элементами». Так, что приступим.
Метод text()
Рассмотрим следующий html-код:
<!doctype html> <html lang="ru"> <head> <meta charset="UTF-8"> <link href="./css/style.css" rel="stylesheet" media="screen"> <script src="http://yandex.st/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="./js/script.js"></script> <title>Изучаем jQuery</title> </head> <body> <div id="wrapper"> <div id="header" align="center">Header</div> <div id="example">Example</div> <div id="content"> <p class="content">Content</p> <p>Test</p> </div> <div id="sidebar"><span>Sidebar</span></div> <div id="clear"></div> </div> <div id="footer"> Footer </div> </body> </html>
И мы хотим узнать текст, который находиться в элементе div с id=»example». Для этого используется метод text().
В файл со скриптом добавим следующий код:
$(function(){
var text = $("#example").text();
alert(text);
});
И при обновлении страницы мы должны получить сообщение «Example».
Если же мы хотим изменить текст в элементе div с id=»example», то методу text() нужно добавить параметр с этим текстом.
Изменим наш скрипт:
$(function(){
$("#example").text('Новый текст');
});
Смотрим видео.
[tube] http://www.youtube.com/watch?v=1Hp9gz5ZPGs [/tube]
Метод html()
Рассмотрим следующий html-код:
<!doctype html> <html lang="ru"> <head> <meta charset="UTF-8"> <link href="./css/style.css" rel="stylesheet" media="screen"> <script src="http://yandex.st/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="./js/script.js"></script> <title>Изучаем jQuery</title> </head> <body> <div id="wrapper"> <div id="header" align="center">Header</div> <div id="example"><p>Example</p></div> <div id="content"> <p class="content">Content</p> <p>Test</p> </div> <div id="sidebar"><span>Sidebar</span></div> <div id="clear"></div> </div> <div id="footer"> Footer </div> </body> </html>
Как видим элемент div с id=»example» содержит следующий код:
<p>Example</p>
Наша задача извлечь этот html-код. Для этого используется метод html().
Добавим в наш файл скриптов следующий код:
$(function(){
var text = $("#example").html();
alert (text);
});
Теперь мы хотим изменить html-код в элементе div с id=»example» на следующий:
<h1>Это новый код</h1>
Для этого добавим в наш файл скриптов следующий код:
$("#example").html('<h1>Это новый код</h1>');
[tube]http://www.youtube.com/watch?v=kPFgIHgE4eU[/tube]
Метод before() и метод insertBefore()
Рассмотрим приведенный выше html код. Теперь перед элементом p, который находится внутри элемента div с id=’example’ мы хотим вставить следующий html-код:
<h1>Код вставленный с помощью метода before()</h2>
Для этого изменим наш файл скриптов следующим образом:
$(function(){
$("#example p").before("<h1>Этот код вставлен с помощью метода before()</h1>")
});
Теперь мы хотим сделать то же самое, но при помощи метода insertBefore(). Для этого изменим наш скрипт:
$(function(){
$("<h1>Этот код вставлен с помощью метода insertBefore()</h1>").insertBefore("#example p")
});
[tube] http://www.youtube.com/watch?v=qanPVeMvmFw [/tube]
Метод after() и метод insertAfter()
Рассмотрим приведенный выше html-код. Мы хотим после элемента p, который находиться в div с id=’example’ вставить следующий код:
<h1>Это код вставлен с помощью метода after</h1>
Для этого добавим в наш файл скриптов следующий код:
$(function(){
$("#example p").after("<h1>Этот код вставлен с помощью метода after()</h1>")
});
Теперь хотим получить тоже самое, но применяя метод insertAfter. Для этого изменим наш скрипт следующим образом:
$(function(){
$("<h1>Этот код вставлен с помощью метода insertAfter()</h1>").insertAfter("#example p")
});
[tube] http://www.youtube.com/watch?v=pv1tXtV3Nzo [/tube]
Метод prepend() и метод prependTo()
Рассмотим все тот, же html-код, приведенный выше. Теперь мы вначале элемента div с id=’example’ хотим вставить следующий код:
<h1>Этот код вставлен с помощью метода prepend()</h1>
Для этого изменим наш скрипт следующим образом:
$(function(){
$("#example").prepend("<h1>Этот код вставлен с помощью метода prepend()</h1>")
});
Теперь мы хотим сделать тоже самое, но используя метод prependTo(). Для этого ихменим наш скрипт:
$(function(){
$("<h1>Этот код вставлен с помощью метода prependTo()</h1>").prependTo("#example")
});
[tube] http://www.youtube.com/watch?v=O439wulmJ3w [/tube]
Метод append() и метод appendTo()
Рассмотрим html-код, который мы рассматривали раньше. Наша задача вставить html-код в конец элемента div с id=’example’.
<h1>Этот код добавлен с помощью метода append()</h1>
Для этого добавим в наш файл скриптов следующий код:
$(function(){
$("#example").append("<h1>Этот код добавлен с помощью метода append()</h1>")
});
Теперь сделаем то же самое, но применим метод appendTo(). Для этого напишем следующий jQuery скрипт:
$(function(){
$("<h1>Этот код добавлен с помощью метода appendTo()</h1>").appendTo('#example');
});
[tube] http://www.youtube.com/watch?v=VNv3uqI9D48 [/tube]
Метод wrap() и метод wrapInner()
Рассмотрим html-код приведенный выше. Теперь мы хотим элемент p, который находится в div с id=’example’ заключить в тег <h1>. Для этого используем метод wrap(). Давайте изменим код нашего скрипта на следующий:
$(function(){
$("#example p").wrap("<h1></h1>")
});
Теперь мы хотим, чтобы все, что находится в элементе p, который в свою очередь расположен в div с id=’example’ поместить в <h1>. Для этого используем метод wrapInner(). Изменим наш скрипт следующим образом:
$(function(){
$("#example p").wrapInner("<h1></h1>")
});
[tube] http://www.youtube.com/watch?v=zVKNpS3vipc [/tube]
На этом все, еще раз напоминаю, что данная статья является дополнением к статье «Изучаем jQuery. Часть 7.2 Методы манипуляции над элементами» и в начале следует ознакомиться с ней.
Исправьте ошибку в названии
«Изучаем jQuery. Часть 7.2 Методы манипуляции над элементами (доплнение)»
Спасибо исправил