Основные методы JQuery для манипуляций с элементами

Автор: Амадей Красавчик Дериглазов

Методы JQuery для манипуляций позволяют легко модифицировать элементы html-кода страницы, выбранные с помощью селектора, как Вам заблагорассудится. Вот примеры, демонстрирующие наиболее распространённые в практике сайтостроения манипуляции с элементами DOM:

$('#someId').show() – сделать видимым выбранный элемент
$('#someId').hide() – сделать невидимым выбранный элемент

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

$('#someId').append("<p>Произвольный текст</p>") – в конец html-кода выбранного элемента с id="someId" будет добавлен указанный в качества параметра html-код, в данном случае – <p>Произвольный текст</p>.
$('#someId').remove() – удалить со страницы выбранный элемент с id="someId".
$('#someId').attr("class", "zzzz") – изменяет значение класса элемента.

Пояснение: например, если на странице присутствует элемент <div id="someId"></div>, то после применённой манипуляции attr("class", "zzzz") он будет выглядеть <div id="someId" class="zzzz"></div>. Данную функцию можно использовать и с одним аргументом, тогда она вернёт значение для указанного атрибута. Например:

$('#someId').attr("class").

Для получения значений и изменения значений атрибута value для полей ввода форм существует более удобная функция val(), которая работает аналогично attr(). Пример:

$('#someId').val() – вернёт значение value для выбранного элемента.
$('#someId').val(7) – установит значение value для выбранного элемента равное 7.

По аналогичному принципу работает функция для манипуляции со стилями:

$('#someId').css("top") – вернёт значение css-параметра top.
$('#someId').css("top","7px") - установит значение css-параметра top равное 7.

Для изменения нескольких параметров стиля одновременно используйте синтаксис:

$('#someId').css({"top":"7px","left":"0"})

Если селектор возвращает целый набор элементов, то не всегда требуется произвести изменения ко всем элементам этого набора, иногда потребуется осуществлять манипуляции только с определёнными элементами набора. Для этого Вам пригодятся методы JQuery для работы с набором элементов. Вот Вам перечень наиболее полезных для этих целей методов и приёмов:

$('div.someClass').first() – вернёт первый div-элемент на странице среди других div-элементов с соответствующим указанному классу

Однако более универсальной является функция eq(). Вот примеры её использования:

$('div').eq(0) – вернёт первый элемент набора
$('div').eq(1) – вернёт второй элемент набора
$('div').eq(2) – вернёт третий элемент набора
$('div').eq(-1) – вернёт последний элемент набора
$('div').eq(-2) – вернёт предпоследний элемент набора
$('div').eq(-2) – вернёт третий с конца элемент набора

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

var heights = [];
var i=0;
$("div").each(function(){
 heights[i++] = $(this).height();
});

Обратите внимание, что конструкция $(this) является указателем на определённый элемент набора, соответствующий текущей итерации.

Разумеется, методов для манипуляций и осуществления метаморфоз с элементами DOM в JQuery в десятки раз больше, чем указано в моём кратком обзоре. Все их можно найти в официальной документации проекта, доступной по ссылке https://api.jquery.com/. Главное, понять базовые принципы работы с селекторами – если Вам это удалось, то Вы без труда сможете применить и все оставшиеся методы JQuery, оставшиеся за скобками данной статьи.

Итак, теперь Вы знаете всё, чтобы самостоятельно продолжить путешествие в мир программирования на JQuery. Разумеется арсенал JQuery гораздо шире данного обзора. Поэтому в дальнейшем я обещаю продолжить цикл статей о других более продвинутых возможностях JQuery. Если же у Вас появились вопросы, то Вы их все можете задать в комментариях.

Начало статьи:
Начальные сведения о JQuery
Как подключить JQuery к страницам сайта и что такое селекторы

Дата публикации: 28.06.2016

К списку гламурных манифестов сообщества «Профессия – делать сайты»