Изучаем jQuery. Часть 7.4 Методы манипуляции над элементами
Доброго времени суток. Мы продолжаем изучать фреймворк 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-код');
});
Смотрим видео:
[tube]https://www.youtube.com/watch?v=MGU8R0naOkQ[/tube]
После того, как мы произвели выборку элементов иногда требуется узнать количество элементов попавших в эту выборку.
size() — метод просмотра количества элементов в выборке
Если нам необходимо узнать количество элементов попавших в выборку используем метод size(), который не принимает ни каких параметров.
Пример. Рассмотрим html-код приведенный выше. Из div c id=»content» мы хотим выбрать все p и посмотреть сколько p у нас попали в выборку. Для этого в нашем файле скриптов напишем следующий код:
$(function(){
var col = $('#content p').size();
alert (col);
});
Как мы видим, что в div c id=»content» находятся два абзаца p, то в сообщение мы должны получить «2». Смотрим видео:
[tube]https://www.youtube.com/watch?v=EfPB6mOYA34[/tube]
Иногда требуется достать из выборки определенный элемент.
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);
});
Смотрим видео:
[tube]https://www.youtube.com/watch?v=MMRkHW9v2Hg[/tube]
Следующий метод копирует элемент.
сlone() – метод копирования элемента
Для того, чтобы скопировать элемент применяется метод clone().
Например. Рассмотрим html-код приведенный выше. Наша задача скопировать div с id=»header» после div с id=»footer». Как мы знаем уже для вставки элемента используется метод appendTo(). Но если мы просто применим данный метод, то мы просто перенесем элемент. Для того, чтобы скопировать элемент необходимо применить clone, а затем уже appendTo.
$(function(){
$("#header").clone().appendTo("#footer");
});
Смотрим видео:
[tube]https://www.youtube.com/watch?v=WvJi2U5lk_g[/tube]
Бывают ситуации, когда нам необходимо удалить элемент.
remove() – метод удаления элемента
Для того, чтобы удалить элемент применяется метод remove().
detach() — метод удаления элемента с сохранением информации о нем
Если нам необходимо удалить элемент, но сохранить о нем информацию для того, чтобы после его восстановить применяется метод detach(). В качестве параметра метод detach() принимает селектор. Если мы методу deatch() передадим параметр, то мы удалим те элементы из выборки, которые удовлетворяют этому параметру.
Например, рассмотрим html-код приведенный выше. И мы хотим удалить div c id=«header». Для этого используем следующий код
$(function(){
$("#header").remove();
});
Смотрим видео:
[tube]https://www.youtube.com/watch?v=8GKHuObrR-Q[/tube]
Мы очень часто встречали методы, которые возвращают значения только первых элементов из выборки, например, 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-код для всех элементов из выборки.
Смотрим видео
[tube]https://www.youtube.com/watch?v=Dr1HESv3c2A[/tube]
На этом мы заканчиваем большой раздел jQuery посвященный методам манипуляции над элементами.
