Для работы с 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 можно выбирать четные и нечетные элементы в наборе.
Псевдокласс: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 потому что он выбирает все элементы, являющиеся родителями).