Выборщики jQuery

Селекторы позволяют вам выполнять операции с группами элементов или с отдельными элементами.

Выборщики jQuery

В предыдущих главах мы показали несколько примеров того, как выбирать элементы HTML.

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

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

Селекторы позволяют вам выполнять операции с группой или единичным элементом HTML.

В терминах HTML DOM:

Селекторы позволяют вам выполнять операции с группой или единичным узлом DOM.

Селекторы элементов jQuery

jQuery использует CSS-селекторы для выбора HTML-элементов.

$("p") выбирает элемент <p>.

$("p.intro") выбирает все элементы <p> с class="intro".

$("p#demo") выбирает все элементы <p> с id="demo".

Селекторы свойств jQuery

jQuery использует XPath-выражения для выбора элементов с заданным атрибутом.

$("[href]") выбирает все элементы с атрибутом href.

$("[href='#']") выбирает все элементы с href-значением, равным "#".

$("[href!='#']") выбирает все элементы с href-значением, не равным "#".

$("[href$='.jpg']") выбирает все элементы с href-значением, заканчивающимся на ".jpg".

Селекторы CSS jQuery

Селекторы CSS jQuery могут использоваться для изменения CSS-атрибутов HTML-элементов.

Ниже приведен пример, который изменяет цвет фона всех элементов <p> на красный:

Пример

$("p").css("background-color","red");

Попробуйте сами

Более примеров селекторов

Грамматика Описание
$(this) текущий HTML-элемент
$("p") все элементы <p>
$("p.intro") все элементы <p> с class="intro"
$(".intro") все элементы с class="intro"
$("#intro") элемент с id="intro"
$("ul li:first") первый элемент <li> в каждом <ul>
$("[href$='.jpg']") все атрибуты href, заканчивающиеся на ".jpg"
$("div#intro .head") элемент <div> с id="intro" и всеми элементами class="head"

Для полного руководства обратитесь на наш Референтное руководство по селектору jQuery.