Мы с вами научились получать группу элементов через jQuery и даже видели некоторые примеры работы с методами. Давайте теперь разберемся с ними более подробно.

Изменение текста элемента через jQuery

Решим следующую задачу: получим все элементы с классом .www и одновременно поменяем всем им текст на '!!!'.

Вспомните, как это делается на чистом JavaScript - нужно получить массив элементов, к примеру, через getElementsByClassName, и перебрать его циклом. Много писанины и длинных слов:

<p class="www">Абзац.</p>
<p class="www">Абзац.</p>
<p class="www">Абзац.</p>
<p>Абзац.</p>
<input type="submit" onclick="func()">
var elems = document.getElementsByClassName('www');
for (var i = 0; i < elems.length; i++) {
	elems[i].innerHTML = '!!!';
}

Через jQuery все будет намного проще: получим все элементы с помощью доллара, вот так: $('.www'), а потом применим к ним метод .html(), который параметром принимает новый текст - $('.www').html('Новый текст'). Всё! Эта строчка выполнит всю работу без всяких циклов и прочей ерунды. Запустите пример и убедитесь в этом сами:

<p class="www">Абзац.</p>
<p class="www">Абзац.</p>
<p class="www">Абзац.</p>
<p>Абзац.</p>
$('.www').html('!!!');

Можно не выстраивать цепочку $('.www').html('!!!'), а сначала записать набор элементов $('.www') в переменную (я назвал ее elems), и затем уже к этой переменной применить метод .html('!!!'):

<p class="www">Абзац.</p>
<p class="www">Абзац.</p>
<p class="www">Абзац.</p>
<p>Абзац.</p>
var elems = $('.www');
elems.html('!!!');

Есть соглашение, которым желательно пользоваться для удобства: названия переменных, которые содержат в себе обернутый набор jQuery, принято начинать с доллара. То есть в нашем случае нужно не elems, а $elems.

Если вас смущает такое имя переменной - $elems - учтите, что доллар в JavaScript является обычным символом и его можно использовать, где угодно. Можно даже сделать имя функции, состоящее из одного символа $, как это сделано в jQuery и некоторых других библиотеках.

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

Давайте используем это в нашем примере:

<p class="www">Абзац.</p>
<p class="www">Абзац.</p>
<p class="www">Абзац.</p>
<p>Абзац.</p>
var $elems = $('.www');
$elems.html('!!!');

Вывод текста элемента через jQuery

Метод .html() можно использовать не только для изменения текста элементов, но и для вывода его на экран. Давайте получим элемент и выведем алертом его текст:

<p id="test">Абзац.</p>
alert($('#test').html());

Если вы попытаетесь получить текст не одного элемента, а многих, то увидите только содержимое первого элемента (используйте метод .each(), чтобы получить тексты всех элементов, о нем будет ниже в данном уроке).

В примере ниже мы получаем все абзацы с классом www и выводим алертом содержимое с помощью .html(), выведется только текст первого абзаца из полученных:

<p class="www">Текст абзаца 1.</p>
<p class="www">Текст абзаца 2.</p>
<p class="www">Текст абзаца 3.</p>
alert($('.www').html()); //выведет 'Текст абзаца 1.'

Работа с CSS через jQuery

Для работы с CSS в jQuery предусмотрен метод .css(). Первым параметром он принимает имя CSS свойства, а вторым - его новое значение.

Давайте получим все элементы с классом .www и поменяем их цвет на красный:

<p class="www">Абзац.</p>
$('.www').css('color', 'red');

Если свойство, как это часто бывает в CSS, состоит из нескольких слов, разделенных дефисом, то с этим нет никаких проблем - оно записывается так же, как и в CSS:

<p class="www">Абзац.</p>
$('.www').css('font-size', '20px');

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

<p class="www">Абзац.</p>
$('.www').css({color: 'red', font: '12px Arial'});

Однако, тут уже будут проблемы со свойствами типа font-size - нужно писать не font-size, а fontSize:

<p class="www">Абзац.</p>
$('.www').css({color: 'red', fontSize: '12px'});

Если вам не очень нравится так делать - возьмите ключ font-size в кавычки:

<p class="www">Абзац.</p>
$('.www').css({color: 'red', 'font-size': '12px'});

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

Цепочки команд jQuery

Напоминаю, что команды jQuery можно писать друг за другом в виде цепочки.

К примеру, давайте поставим всем элементам с классом www текст '!!!' и красный цвет:

<p class="www">Абзац.</p>
<p class="www">Абзац.</p>
<p class="www">Абзац.</p>
<p>Абзац.</p>
$('.www').html('!!!').css('color', 'red');

Длина цепочек не ограничена - вы можете применять подряд столько методов, сколько вам нужно.

Селекторы jQuery

jQuery поддерживает все стандартные селекторы CSS и псевдоклассы и псевдоэлементы CSS.

В дополнение к ним jQuery поддерживает нестандартные селекторы (псевдоклассы), которые позволяют расширить селекторы CSS.

Для примера возьмем псевдокласс :first, который позволяет выбрать первый элемент в наборе jQuery. Давайте с его помощью найдем первый <li> на странице:

$('li:first');

Сравните со стандартным псевдоклассом :first-child:

$('li:first-child');

С помощью :first-child мы найдем все li, которые являются первыми потомками своих родителей, а с помощью :first мы найдем первый li среди выбранных (так как выбирали мы все li, то по сути мы найдем первый li на странице).

То есть :first и другие подобные селекторы jQuery работают так: находят все элементы по заданному селектору, а затем берут первый элемент среди найденных.

Аналогичным образом работает :last, только он находит не первый элемент, а последний.

С помощью :eq мы можем выбрать элемент с любым номером в наборе, к примеру, таким образом - :eq(3) - мы выберем третий найденный элемент.

С помощью :lt и :gt можно выбирать элементы с номером, меньшим или большим заданного числа соответственно. К примеру, так - :lt(3) - мы выберем элементы с номером, меньшим трех, то есть элементы номер 2, 1 и 0.

С помощью :even и :odd можно выбирать четные и нечетные элементы в наборе.

Еще полезные селекторы jQuery

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

Псевдокласс :header

Например, псевдокласс :header выбирает одновременно все заголовки от h1 до h6.

Псевдокласс :has

Псевдокласс :has выбирает элементы по их содержимому. К примеру, можно выбрать так: все абзацы, внутри которых есть теги b:

<p>Абзац с тегом <b>b</b>.</p>
<p>Абзац с тегом <i><b>b</b></i>.</p>
<p>Абзац без b.</p>
$('p:has(b)')

Обратите внимание на то, что в примере выберется как первый абзац, так и второй, не смотря на то, что во втором абзаце тег b не лежит непосредственно внутри p, а лежит сначала в i.

Если же вам нужна непосредственная вложенность, то следует сделать так:

<p>Абзац с тегом <b>b</b>.</p>
<p>Абзац с тегом <i><b>b</b></i>.</p>
<p>Абзац без b.</p>
$('p:has(>b)')

В этом случае будет выбран только первый абзац.

Псевдокласс :contains

Псевдокласс :contains выбирает элементы по наличию определенного текста в них.

В следующем примере мы выберем абзац, внутри которого есть слово "текст":

<p>Слово "текст".</p>
<p>Просто абзац.</p>
$('p:contains("текст")')

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

Псевдоклассы :empty и :parent

Псевдокласс :empty позволяет выбрать все пустые элементы (в которых нету текста), а псевдокласс :parent - наоборот, все непустые (parent потому что он выбирает все элементы, являющиеся родителями).

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

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

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

<p>Абзац с тегом <b>b</b>.</p>
<p>Абзац без b.</p>
$('b').parent().css('color', 'red');

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

Изучите все остальные .pages/selectors() самостоятельно.

Работа с 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());
});