Кроме псевдокласса :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:
<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 - удалится.
Давайте установим для input атрибут 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 input также можно использовать метод .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.