В данном уроке разбирается работа с атрибутами, со свойствами, с продвинутыми селекторами jQuery.

Работа с атрибутами

Сейчас мы с вами научимся считывать, добавлять и изменять атрибуты HTML тегов через jQuery. Все это делается с помощью метода .attr(). Работает он подобно методу .html() - в зависимости от количества параметров он будет считывать или изменять значение атрибута.

Первым параметром .attr() принимает имя атрибута, а вторым - его новое значение. Например, так - .attr('value', 'www') - мы запишем строку 'www' в атрибут value.

Если же вызывать .attr() с одним параметром, то он вернет значения атрибута, название которого мы указываем в первом параметре. Например, так - .attr('value') - мы получим значение атрибута value.

В следующем примере мы получаем инпут по его id и выводим на экран значение его атрибута value:

<input type="text" value="!!!" id="test">
alert($('#test').attr('value')); //выведет '!!!'

А теперь запишем новое значение 'www' в этот же атрибут:

<input type="text" value="!!!" id="test">
$('#test').attr('value', 'www');

HTML код станет выглядеть так:

<input type="text" value="www" id="test">

Удаление атрибута

Если вы хотите удалить какой-нибудь атрибут совсем, для этого следует использовать метод .removeAttr(имя атрибута). Давайте посмотрим, как он работает, на следующем примере:

<input type="text" value="!!!" id="test">
$('#test').removeAttr('value');

HTML код станет выглядеть так - атрибута value больше нет:

<input type="text" id="test">

Свойства

Для атрибутов типа disabled и checked метод .attr() не подходит (такие атрибуты называются 'свойства'). Для них необходимо использовать метод .prop(), который первым параметром принимает имя атрибута, а вторым - true или false.

Если поставить true - атрибут установится, а если false - удалится.

Давайте установим для инпута атрибут disabled:

<input type="text" id="test">
$('#test').prop('disabled', true);

HTML код станет выглядеть так:

<input type="text" id="test" disabled>

А теперь, наоборот, уберем disabled:

<input type="text" id="test" disabled>
$('#test').prop('disabled', false);

HTML код станет выглядеть так:

<input type="text" id="test">

Можно не только изменять значения таких атрибутов-свойств, но и считывать их:

<input type="text" id="test" disabled>
alert($('#test').prop('disabled')); //выведет true - атрибут есть

value форм

Для работы с атрибутом value инпутов также можно использовать метод .val(), который позволяет считывать и записывать новые значения.

Давайте запишем новое значение 'www' в атрибут value:

<input type="text" id="test" value="!!!">
$('#test').val('www');

HTML код станет выглядеть так:

<input type="text" id="test" value="www">

А теперь давайте выведем текущее значение на экран:

<input type="text" id="test" value="!!!">
alert($('#test').val());

Есть еще один нюанс - для тега textarea нельзя получить внутреннее содержимое через метод .html(). Для этого нужно пользоваться методом .val():

<textarea>!!!</textarea>
alert($('#test').val()); //выведет '!!!'

Скорее всего это сделано для однотипности работы с формами.

Работа с классами

Напоминаю, что в атрибуте class в HTML коде можно писать несколько классов через пробел.

Представим себе такую ситуацию - вы хотите добавить новый класс к имеющимся, не затерев их при этом. В этом случае, просто взять и сделать .attr('class', 'new-class') не получится - вы затрете те классы, которые уже есть в атрибуте.

Можно, конечно же, сначала считать классы, которые там есть, затем добавить к ним наш класс через пробел и записать все обратно в атрибут, но есть способ проще - в jQuery для таких вещей предусмотрен метод addClass().

Метод .addClass() позволяет добавить класс элементу (или элементам), не затерев при этом другие классы. Класс, который вы хотите добавить в элемент, принимается параметром этого метода.

В следующем примере элементу, у которого уже есть два класса - class="www zzz" - добавляется еще и класс kkk. В результате содержимое атрибута станет таким - class="www zzz kkk":

<p class="www zzz" id="test">Текст абзаца.</p>
$('#test').addClass('kkk');

HTML код станет выглядеть так:

<p class="www zzz kkk" id="test">Текст абзаца.</p>

Аналогичный метод существует и для удаления класса - .removeClass(). Он удаляет указанный в параметре класс, не затрагивая остальных.

В следующем примере из атрибута class="www zzz" удаляется класс zzz:

<p class="www zzz" id="test">Текст абзаца.</p>
$('#test').removeClass('zzz');

HTML код станет выглядеть так:

<p class="www" id="test">Текст абзаца.</p>

Существует также полезный метод .toggleClass(), который будет добавлять указанный класс, если его нет, и убирать его если он есть. Он может понадобится, чтобы по клику на одну и ту же кнопку с элементом страницы происходили периодические изменения.

Давайте, например, сделаем так - по нажатию на кнопку первый раз - элементу будет добавляться класс red, который добавляет красный цвет, а по повторному нажатию - этот класс будет убираться и красный цвет будет пропадать. Если опять нажать на кнопку - все повторится опять.

Попробуйте запустите следующий код и убедитесь в этом (класс zzz делает курсив, чтобы показать, что toggleClass не будет мешать другим классам работать):

.red {
	color: red;
}

.zzz {
	font-style: italic;
}
<p class="zzz" id="test">Текст абзаца.</p>
$('#test').toggleClass('red');

После первого нажатия HTML код станет выглядеть так (добавится класс red):

<p class="zzz red" id="test">Текст абзаца.</p>

А после второго нажатия - так (исчезнет класс red):

<p class="zzz" id="test">Текст абзаца.</p>

Ну, и последний метод работы с классами, который мы разберем, называется .hasClass(). Он проверяет наличие или отсутствие класса, переданного ему параметром. Если такой класс есть у элемента - выведет true, а если такого класса нет - выведет false.

Оборачивание элементов

Теги можно оборачивать в другие теги, к примеру, если у нас есть абзацы, то мы их можем дополнительно обернуть в теги <div>. Для таких вещей используется метод .wrap(), который позволяет обернуть каждый найденный элемент в указанный тег.

К примеру, обернем все абзацы с классом www тегом <div>. Для этого параметром метода передадим строку 'div', вот так - .wrap('div'). Смотрите, что у нас получится:

<p class="www">Текст абзаца.</p>
<p class="www">Текст абзаца.</p>
<p class="www">Текст абзаца.</p>
<p>Текст абзаца.</p>
$('.www').wrap('div');

HTML код станет выглядеть так:

<div><p class="www">Текст абзаца.</p></div>
<div><p class="www">Текст абзаца.</p></div>
<div><p class="www">Текст абзаца.</p></div>
<p>Текст абзаца.</p>

Параметром можно передавать не только имя тега, но и такую конструкцию - '<div></div>' - в этом случае эффект будет абсолютно такой же:

<p class="www">Текст абзаца.</p>
<p class="www">Текст абзаца.</p>
<p class="www">Текст абзаца.</p>
<p>Текст абзаца.</p>
$('.www').wrap('<div></div>');

HTML код станет выглядеть так:

<div><p class="www">Текст абзаца.</p></div>
<div><p class="www">Текст абзаца.</p></div>
<div><p class="www">Текст абзаца.</p></div>
<p>Текст абзаца.</p>

Конечно же, второй способ - '<div></div>' - менее удобный, однако, у него есть преимущество - в открывающий тег (в нашем случае див <div>) можно писать любые атрибуты, при этом оборачивание будет вместе с этими атрибутами.

Давайте обернем наши абзацы дивом с классом zzz:

<p class="www">Текст абзаца.</p>
<p class="www">Текст абзаца.</p>
<p class="www">Текст абзаца.</p>
<p>Текст абзаца.</p>
$('.www').wrap('<div class="zzz"></div>');

HTML код станет выглядеть так:

<div class="zzz"><p class="www">Текст абзаца.</p></div>
<div class="zzz"><p class="www">Текст абзаца.</p></div>
<div class="zzz"><p class="www">Текст абзаца.</p></div>
<p>Текст абзаца.</p>

Можно наоборот, не обернуть элемент, а развернуть его (то есть убрать родителя) с помощью метода .unwrap().

В следующем примере у нас есть абзацы, которые находятся внутри тегов <div>. Давайте для абзацев с классом www выполним операцию разворачивания unwrap:

<div><p class="www">Текст абзаца.</p></div>
<div><p class="www">Текст абзаца.</p></div>
<div><p class="www">Текст абзаца.</p></div>
<div><p>Текст абзаца.</p></div>
$('.www').unwrap();

HTML код станет выглядеть так:

<p class="www">Текст абзаца.</p>
<p class="www">Текст абзаца.</p>
<p class="www">Текст абзаца.</p>
<div><p>Текст абзаца.</p></div>

Можно также оборачивать теги не снаружи, а внутри. Это делается с помощью метода .wrapInner(). Параметры он принимает таким же образом, как и .wrap(), только обернет не найденные теги, а текст внутри этих тегов.

В следующем примере обернем текст внутри абзацев с классом www в тег <b>:

<p class="www">Текст абзаца.</p>
<p class="www">Текст абзаца.</p>
<p class="www">Текст абзаца.</p>
<p>Текст абзаца.</p>
$('.www').wrapInner('b');

HTML код станет выглядеть так:

<p class="www"><b>Текст абзаца.</b></p>
<p class="www"><b>Текст абзаца.</b></p>
<p class="www"><b>Текст абзаца.</b></p>
<p>Текст абзаца.</p>

Можно оборачивать не каждый элемент по отдельности, а все найденные элементы вместе с помощью метода .wrapAll()

Давайте найдем все абзацы с классом www и обернем их всех в один тег <div>:

<p class="www">Текст абзаца.</p>
<p class="www">Текст абзаца.</p>
<p class="www">Текст абзаца.</p>
<p>Текст абзаца.</p>
$('.www').wrapAll('div');

HTML код станет выглядеть так:

<div>
	<p class="www">Текст абзаца.</p>
	<p class="www">Текст абзаца.</p>
	<p class="www">Текст абзаца.</p>
</div>
<p>Текст абзаца.</p>

Учтите, что если оборачиваемые элементы стоят не рядом, то метод .wrapAll() сначала переместит элементы в одно место, а потом обернет их. Смотрите следующий пример:

<p class="www">Текст абзаца 1.</p>
<p class="www">Текст абзаца 2.</p>
<p>Текст абзаца.</p>
<p class="www">Текст абзаца 3.</p>
$('.www').wrapAll('div');

HTML код станет выглядеть так:

<div>
	<p class="www">Текст абзаца 1.</p>
	<p class="www">Текст абзаца 2.</p>
	<p class="www">Текст абзаца 3.</p>
</div>
<p>Текст абзаца.</p>

Вставка элементов

Для вставки элементов в jQuery предусмотрено 4 метода: .append(), .prepend(), .after(), .before().

Метод .prepend() позволяет добавлять текст в начало элементов:

<p>Текст абзаца.</p>
$('p').prepend('<b>!!!</b>');

HTML код станет выглядеть так:

<p><b>!!!</b>Текст абзаца.</p>

Метод .append() позволяет добавлять текст в конец элементов:

<p>Текст абзаца.</p>
$('p').append('<b>!!!</b>');

HTML код станет выглядеть так:

<p>Текст абзаца.<b>!!!</b></p>

Метод .before() позволяет добавлять текст в перед элементами:

<p>Текст абзаца.</p>
$('p').before('<b>!!!</b>');

HTML код станет выглядеть так:

<b>!!!</b><p>Текст абзаца.</p>

Метод .after() позволяет добавлять текст в после элементов:

<p>Текст абзаца.</p>
$('p').after('<b>!!!</b>');

HTML код станет выглядеть так:

<p>Текст абзаца.</p><b>!!!</b>

Существуют также альтернативные формы методов для вставки элементов. К примеру, вместо .append() можно использовать .appendTo().

Разница в способе применения: если append принимает параметром вставляемые текст, то appendTo наоборот - параметром принимает селектор элементов, для которых следует применить append.

Следующие записи эквиваленты:

$('.www').append('<b>!!!</b>')
$('<b>!!!</b>').appendTo('.www')

Есть также и другие эквивалентные методы. Вот они:

Методы .prepend() и .prependTo():

$('.www').prepend('<b>!!!</b>')
$('<b>!!!</b>').prependTo('.www')

Методы .before() и .insertBefore():

$('.www').before('<b>!!!</b>')
$('<b>!!!</b>').insertBefore('.www')

Методы .after() и .insertAfter():

$('.www').after('<b>!!!</b>')
$('<b>!!!</b>').insertAfter('.www')

Замена элементов

Можно заменять одни элементы на другие с помощью метода .replaceWith(). Давайте заменим все абзацы с классом www на <div>!!!</div>:

<p class="www">Текст абзаца.</p>
<p class="www">Текст абзаца.</p>
<p class="www">Текст абзаца.</p>
<p>Текст абзаца.</p>
$('.www').replaceWith('<div>!!!</div>');

HTML код станет выглядеть так:

<div>!!!</div>
<div>!!!</div>
<div>!!!</div>
<p>Текст абзаца.</p>

Удаление элементов

Для удаления элементов в jQuery существуют два метода: .remove() и .detach().

Метод .remove() удаляет элементы навсегда:

<p class="www">Текст абзаца.</p>
<p class="www">Текст абзаца.</p>
<p class="www">Текст абзаца.</p>
<p>Текст абзаца.</p>
$('.www').remove('.www');

HTML код станет выглядеть так:

<p>Текст абзаца.</p>

А вот метод .detach() удаляет выбранные элементы с возможностью их восстановления.

Давайте сначала удалим элемент #test с помощью detach, а потом восстановим его в другом месте с помощью .appendTo (это возможно, так как в переменной $elem после удаления все равно осталась ссылка на него):

var $elem = $('#test');$elem.detach(); //удаляем элемент

/*
	Вставляем элемент обратно на страницу
	(не обязательно в то же место, где он был):
*/
$elem.appendTo('body');

Напоминаю, что доллар в переменной $elem написан в знак того, что в ней хранится набор jQuery.

Удаление содержимого элементов

С помощью метода .empty() можно удалить содержимое элементов (сами элементы никуда не деваются). Давайте, например, удалим содержимое всех абзацев:

<p>Текст абзаца.</p>
<p>Текст абзаца.</p>
<p>Текст абзаца.</p>
$('p').empty();

HTML код станет выглядеть так:

<p></p>
<p></p>
<p></p>

Размеры элементов

Тут нужно разместить информацию о методах width, innerWidth, outerWidth height, innerHeight, outerHeight. Появится попозже.