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

Ромчик
0

Уроки по jQuery

Доброго времени суток. Мы продолжаем изучать фреймворк JavaScript — jQuery, а точнее методы манипуляции над элементами. Прежде чем приступить к манипулированию над объектами jQuery необходимо выбрать эти объекты. Как правильно выбрать элемент Вы можете прочитать в моей статье «Изучаем jQuery. Часть 3. Выборка элементов», а чтобы более точно отобрать элементы можно воспользоваться фильтрами. О фильтрах Вы можете прочитать в статье «Изучаем jQuery. Часть 4. Фильтры». И уже после можно производит какие-либо действия. Так мы с Вами уже рассмотрели три статьи посвященных методам jQuery https://web-programming.com.ua/izuchaem-jquery-chast-7-1-metody-manipulyacii-nad-elementami/ , https://web-programming.com.ua/izuchaem-jquery-chast-7-2-metody-manipulyacii-nad-elementami/ , https://web-programming.com.ua/izuchaem-jquery-chast-7-3-metody-manipulyacii-nad-elementami/

И в этой статье мы продолжим изучать методы jQuery.

И первый метод на котором мы остановимся — это метод html().

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

Если нам необходимо получить или изменить html-код, то используется метод html($html). В качестве параметра $html принимает новый html-код. Если мы хотим получить html-код, то параметр не указываем и получаем 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">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>

Мы хотим получить html-код элемента div с id=»example». Открываем файл с нашим скриптом и добавляем в него следующий код:

$(function(){ 
var html = $('#example').html(); 
alert(html); 
});

Проверяем в браузере и мы должны получить сообщение в котором будет содержаться «Example»

Теперь мы хотим изменить html-код в элементе div с id=»example». Открываем файл с нашим скриптом и добавляем в него следующий код:

$(function(){ 
$('#example').html('Новый html-код'); 
});

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

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

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

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

Пример. Рассмотрим html-код приведенный выше. Из div c id=»content» мы хотим выбрать все p и посмотреть сколько p у нас попали в выборку. Для этого в нашем файле скриптов напишем следующий код:

$(function(){ 
var col = $('#content p').size(); 
alert (col);
});

Как мы видим, что в div c id=»content» находятся два абзаца p, то в сообщение мы должны получить «2». Смотрим видео:

Иногда требуется достать из выборки определенный элемент.

get() — метод возвращает элемент или элементы из выборки

Если нам нам необходимо вернуть элемент или элементы из выборки, то используется метод get($id), где $id — не обязательный параметр указывающий номер элемента из выборки. Учтите, что нумерация начинается с нуля, т. е. если нам необходимо взять первый элемент выборки, то в качестве параметра ставим 0. Если мы параметр не укажем в методе get(), то он нам вернет массив элементов выборки.

Давайте посмотрим, как данный метод действует. Возьмем html-код приведенный выше. И выберем из него все абзацы p в div с id=»content» и посмотрим, что попало в выборку:

$(function(){ 
var col = $('#content p').get(); 
alert (col); 
});

Дальше из этой выборки выберем второй элемент и узнаем его тег:

$(function(){ 
var col = $('#content p').get(1).tagName;
alert (col); 
});

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

Следующий метод копирует элемент.

сlone() – метод копирования элемента

Для того, чтобы скопировать элемент применяется метод clone().

Например. Рассмотрим html-код приведенный выше. Наша задача скопировать div с id=»header» после div с id=»footer». Как мы знаем уже для вставки элемента используется метод appendTo(). Но если мы просто применим данный метод, то мы просто перенесем элемент. Для того, чтобы скопировать элемент необходимо применить clone, а затем уже appendTo.

$(function(){ 
$("#header").clone().appendTo("#footer"); 
}); 

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

Бывают ситуации, когда нам необходимо удалить элемент.

remove() – метод удаления элемента

Для того, чтобы удалить элемент применяется метод remove().

detach() — метод удаления элемента с сохранением информации о нем

Если нам необходимо удалить элемент, но сохранить о нем информацию для того, чтобы после его восстановить применяется метод detach(). В качестве параметра метод detach() принимает селектор. Если мы методу deatch() передадим параметр, то мы удалим те элементы из выборки, которые удовлетворяют этому параметру.

Например, рассмотрим html-код приведенный выше. И мы хотим удалить div c id=«header». Для этого используем следующий код

$(function(){ 
$("#header").remove();
});

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

Мы очень часто встречали методы, которые возвращают значения только первых элементов из выборки, например, html() или width(). А как быть, если нам надо получить значения всех элементов в выборке?

each() – метод, который выполняет заданную функцию для всех элементов из выборки

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

Например, рассмотрим приведенный выше html-код. Нам необходимо получить html-код у всех p, которые находятся в div с id=»content». Как мы уже знаем для получения html-кода используется метод html(), но если мы в нашем скрипте напишем следующий код:

$(function(){
var a = $("#content p").html();
alert(a);
});

то мы получим html-код только первого элемента. В таких случаях и используется метод each(), изменим наш код:

$(function(){ 
$("#content p").each(function(){ 
var a = $(this).html();
alert(a);
});
});

Теперь мы получим html-код для всех элементов из выборки.

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

На этом мы заканчиваем большой раздел jQuery посвященный методам манипуляции над элементами.

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

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

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