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

Ромчик
2

Уроки по jQuery

Доброго времени суток. Данная статья является дополнением к статье «Изучаем 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('Новый текст');

});

Смотрим видео.

Метод 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>');

Метод 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")

});

Метод 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")

});

Метод prepend() и метод prependTo()

Рассмотим все тот, же html-код, приведенный выше. Теперь мы вначале элемента div с id=’example’ хотим вставить следующий код:


<h1>Этот код вставлен с помощью метода prepend()</h1>

Для этого изменим наш скрипт следующим образом:


$(function(){

$("#example").prepend("<h1>Этот код вставлен с помощью метода prepend()</h1>")

});

Теперь мы хотим сделать тоже самое, но используя метод prependTo(). Для этого ихменим наш скрипт:


$(function(){

$("<h1>Этот код вставлен с помощью метода prependTo()</h1>").prependTo("#example")

});

Метод append() и метод appendTo()

Рассмотрим html-код, который мы рассматривали раньше. Наша задача вставить html-код в конец элемента div с id=’example’.


<h1>Этот код добавлен с помощью метода append()</h1>

Для этого добавим в наш файл скриптов следующий код:


$(function(){

$("#example").append("<h1>Этот код добавлен с помощью метода append()</h1>")

});

Теперь сделаем то же самое, но применим метод appendTo(). Для этого напишем следующий jQuery скрипт:


$(function(){

$("<h1>Этот код добавлен с помощью метода appendTo()</h1>").appendTo('#example');

});

Метод 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>")

});

На этом все, еще раз напоминаю, что данная статья является дополнением к статье «Изучаем jQuery. Часть 7.2 Методы манипуляции над элементами»  и в начале следует ознакомиться с ней.

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

  • Михаил Бойченко - 12.08.2013 в 12:20

    Исправьте ошибку в названии

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

    • Roman - 12.08.2013 в 21:10

      Спасибо исправил

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

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