jQuery селекторы

Здесь я напишу о том, что такое JQuery селекторы и как они работают.

jQuery Селекторы надо указывать следующим способом $('.селектор');


Ниже я перечислю наиболее популярные, а может даже и все виды jQuery селекторов:

$('div'); // выбрать все div-ы
$('#id_name'); // выбрать элемент с id="id_name"
$('.class_name'); // выбрать элемент с class="class_name"

Либо так:

$('div#id_name'); // выбрать все div-ы с id="id_name"
$('div.class_name'); // выбрать все div-ы с class="class_name

Теперь посложней:

$('div h1'); // выбрать все h1 которые находятся в любых div-ах
$('#id_name .test'); // выбрать все элементы с class="test" в элементе с id="id_name"
$('.class_name, .test'); // выбрать все элементы с class="class_name" и с class="test"
// и прочие любые извращения...

(Заметьте, во второй строке я написал "в элементе" а не в "элементах", т.к. атрибут ID может быть указан только у одного элемента, а атрибут CLASS у скольких угодно).


А теперь еще сложней:

$('*'); // выбрать ВСЕ элементы
$('div *'); // выбрать все элементы во всех div-ах
$('div > h1'); // выбор всех h1 элементов в элементах div, где h1 является прямым потомком div-a
$('div > *'); и $('div').children(); // выбор всех потомков элемента div
$('div').parent(); // выбор всех предков элемента div
$('* > div'); и $('div').parents(); // выбор всех предков элементов div
$('div').parents('h1'); // выбор всех предков h1, элемента div
// в методе parents() можно тоже указать любой селектор.


Я советую Вам поиграться с разными jQuery селекторами, чтобы более четче понять их смысл и как они работают.

В следующей статье будет огромный список jQuery фильтров - их суть такая же как в jQuery селекторах, но предоставляют более расширенные возможности по поиску HTML тегов в DOM.

Копирование материалов разрешено только рерайтом, с ссылкой на главную страницу данного сайта.
© Автор - Игорь Вейник Евгеньевич www.veynik.ru 2013