Разница :parent и parent()

Кроме псевдокласса :parent существует еще и метод .parent(), который позволяет выбрать родителя элемента.

Давайте, например, найдем родителя тега b и поставим ему красный цвет:

<p>Абзац с тегом <b>b</b>.</p>

<p>Абзац без b.</p>

$('b').parent().css('color', 'red');

Другие селекторы jQuery

В интернете найти и изучить другие селекторы jQuery

Работа с each

Когда у нас есть группа элементов, полученных с помощью jQuery, мы можем вносить в них изменения только для всех элементов одновременно.

К примеру, если мы хотим сменить текст всех найденных абзацев - у нас не получится сделать его разным.

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

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

Мы можем просто воспользоваться этим this на чистом JavaScript, к примеру, так - this.innerHTML - и вывести внутреннее содержимое наших элементов. Но лучше обернуть this в доллар jQuery таким образом - $(this) - в этом случае мы сможем применять к нему все методы и цепочки jQuery.

В следующем примере мы получаем все элементы с классом .www и выводим на экран их содержимое. Как это делается: с помощью $('.www') мы получаем нужные нам элементы, затем с помощью .each(test) мы к каждому полученному элементу применяем функцию test. Она сначала применится к первому абзацу, потом ко второму, к третьему и так далее.

Внутри функции this будет указывать на тот элемент, к которому применяется функция test - сначала это будет первый элемент, потом второй, ну и так далее. С помощью такой конструкции $(this) мы вместо обычного this от JavaScript получим элемент jQuery и применим к нему метод .html(), который получит текст нашего элемента. Ну, а дальше он выведется на экран:

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

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

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

<p>Абзац.</p>

Имя функции test пишем без кавычек и (),

так как нам нужен ее код, а не результат:

$('.www').each(test);

function test() {

alert($(this).html());

}

Можно и с анонимными функциями - так делают чаще всего:

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

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

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

<p>Абзац.</p>

$('.www').each(function() {

alert($(this).html());

});

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

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

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

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

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

alert($('#test').attr('value')); //выведет '!!!'

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

$('#test').attr('value', 'www');

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

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

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

$('#test').removeAttr('value');

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

Свойства

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

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

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

$('#test').prop('disabled', true);

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

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

$('#test').prop('disabled', false);

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

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

alert($('#test').prop('disabled')); //выведет true - атрибут есть

Value форм

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

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

$('#test').val('www');

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

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

alert($('#test').val());

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

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>Текст абзаца.</p>

$('.www').wrap('div');

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

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

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

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

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

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

$('.www').wrap('<div></div>');

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

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

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

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

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

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

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

$('.www').wrap('<div class="zzz"></div>');

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

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

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

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

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

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

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

$('.www').unwrap();

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

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

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

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

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

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

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

$('.www').wrapInner('b');

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

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

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

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

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

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

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

$('.www').wrapAll('div');

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

<div>

<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>Текст абзаца.</p>

$('.www').replaceWith('<div>!!!</div>');

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

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

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

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

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

<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.

Разница :parent и parent()

Поиск по сайту