jQuery. Селекторы

В примере Hello World! мы узнали, как можно выбрать элемент h2. Страница может содержать разные элементы и существуют разные способы выбрать нужный.

Создадим для демонстрации несколько разных объектов.

Заголовок H1

Первый заголовок H2

Второй заголовок H2

Go

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5

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

$(function(){
	console.log($('h1'));
	console.log($('h2'));
});

Мы выбрали все заголовки первого и второго уровней, всего четыре заголовка - три заголовка из примера и самый верхний в начале статьи.

Можно сократить код, указав объекты через запятую.

console.log($('h1, h2'));

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

var h1_h2 = $('h1, h2');
$(function()
    {
        h1_h2.click(function()
            {
                h1_h2.fadeOut();
            }
        );
    }
);

Выбирать можно не только по тегам, но и по классу или идентификатору. Выберем все блоки с классом contentClass и идентификатором contentID:

console.log($('.contentClass, #contentID'));

Можно выбрать все элементы документа с помощью символа звездочка (*). Хотя на практике такое случается редко.

console.log($('*'));

Можно выбрать все элементы какого-то конкретного элемента документа, например, нам нужны все элементы body и элементы form:

console.log($('body *'));
console.log($('form *'));

Выберем все параграфы:

var paragraph = $('p');
console.log(paragraph);

Допустим, мы хотим выбрать только параграфы, которые находятся внутри блока div с классом contentClass.

var paragraph = $('.contentClass > p'); 
console.log(paragraph);

jQuery позволяет гибко выбирать элементы по значению любого атрибута или даже по его наличию. Это может быть атрибут width или height у картинки, name у элементов формы и т.д.

Выберем все элементы с атрибутом height:

var element = $('*[height]');
console.log(element);

В список могут попасть не только картинки, но и другие элементы, например, iframe, у которого тоже есть атрибут height.

Можно явно указать, что нужно именно картинки.

var element = $('img[height]');
console.log(element);

Можем выбрать картинки только определённой высоты:

var element = $('img[height=31]');
console.log(element);

Можем указать сразу несколько атрибутов - высоту и ширину:

var element = $('img[height=31][width=88]');
console.log(element);

Также мы можем инвертировать результат. Например, мы хотим взять любые изображения, высота которых не равна 100 пикселям:

var image = $('img[height!=100]');
console.log(image);

Можно использовать символы регулярных выражений для того, чтобы указать с чего начинается (^) или чем заканчивается значение атрибута ($). Примеры:

var element = $('img[height^=1]'); // картинки с высотой, значение которой начинается с 1
var element = $('img[height$=00]'); // картинки с высотой, значение которой заканчивается 00

Еще одним полезным при работе со значениями атрибутов символом, является символ звездочки (*). Он позволяет указать часть значения, подстроку. Давайте к списку добавим произвольный атрибут data-item

<ul>
	<li data-item="item 1"><a href="#">Item 1</a></li>
	<li data-item="item 2"><a href="#">Item 2</a></li>
	<li data-item="атрибут 3"><a href="#">Item 3</a></li>
	<li data-item="item 4"><a href="#">Item 4</a></li>
	<li data-item="item 5"><a href="#">Item 5</a></li>
</ul>

А теперь попробуем выбрать тот элемент, в значении атрибута которого встречается буква «т»:

var element = $('li[data-item*="т"]');

Выберем поле формы со значением атрибута name, равным email:

var input = $('input[name="email"]');
console.log(input);

Можно выбрать первый и последний элементы списка. В спецификации CSS3 есть псевдоклассы :first-child и :last-child.

var firstLi = $('li:first-child');
var	lastLi = $('li:last-child');
console.log(firstLi);
console.log(lastLi);

Также мы можем инвертировать результат, выбрав все элементы, кроме первого и последнего в наборе. Для этого используем псевдокласс :not

var li = $('li:not(:first-child, :last-child)');
console.log(li);

А ещё выбрать соседний элемент, который идет после указанного. Для этого используется селектор плюс (+).

Укажем атрибут data-item, содержащий "2". Следующим будет третий элемент.

var nextLi = $('li[data-item*="2"] + li');
console.log(nextLi);

Можно указать конкретный элемент, используя счётчи элементов. Любой элемент коллекции имеет свой индекс. Нумерация элементов начинается с нуля. Используя селектор :eq выберем четвёртый элемент списка, чей индекс равен трём.

var fourthLi = $('li:eq(3)');
console.log(fourthLi);

Формы

Отдельно поработаем с элементами формы.

Создадим простейшую форму с некоторым набором полей.

<form>
	<p>
		<input type="text" name="name">
	</p>
	<p>
		<input type="email" name="email">
	</p>
	<p>
		<input type="password" name="password">
	</p>
	<p>
		<input type="checkbox" name="chk1">
		<input type="checkbox" name="chk2" checked>
	</p>
	<p>
		<input type="radio" name="r1">
		<input type="radio" name="r2" checked>
	</p>
	<p>
		<textarea name="text"></textarea>
	</p>
	<button type="submit">Go</button>
</form>

Go

Нам уже встречалась конструкция для выбора всех элементов формы.

.

console.log($('form *'));

Селектор :input позволяет выбрать все поля формы типа input, button и textarea:

var fields = $(':input');
console.log(fields);

Данный селектор может пригодиться, если мы хотим пройтись по всем элементам формы в цикле .

Также мы можем получить элементы по отдельности. Например, поля input типа text можно выбрать через селектор :text. Поля типа checkbox и radio можно получить через :checkbox и :radio.

console.log($(':text'));
console.log($(':checkbox'));
console.log($(':radio'));

Можно обратиться к кнопке через селектор :button:

console.log($(':button'));

К полю для ввода пароля через селектор :password.

console.log($(':password'));

Селектор :checked поможет получить отдельно отмеченные флажки и переключатели.

console.log($(':checked'));

Селекторы :disabled и :enabled выбирают неактивные и активные элементы формы. Добавим для поля ввода имени атрибут disabled для проверки:

<input type="text" name="name" disabled>

console.log($(':disabled'));

Селектор :has выбирает все элементы, содержащие элемент, переданный параметром селектору :has.

<div class="content block1">
	<p>Lorem ipsum dolor sit amet.</p>
	<p>Voluptatem incidunt labore fugiat quibusdam.</p>
</div>
<div class="content block2">
	<p>Lorem ipsum dolor sit amet.</p>
	<ul>
		<li><a href="#">Item 1</a></li>
		<li><a href="#">Item 2</a></li>
		<li><a href="#">Item 3</a></li>
	</ul>
	<p>Incidunt laudantium itaque, fuga sunt.</p>
</div>

Попробуем выбрать блок div, внутри которого есть список:

var hasList = $('div:has(ul)');
console.log(hasList);

Селекторы even и odd фильтруют набор элементов, оставляя элементы с четным индексом (:even) или нечетным индексом (:odd).

var evenElement = $('li:even');
var oddElement = $('li:odd');
console.log(evenElement);
console.log(oddElement);

Селектор :hidden позволяет выбрать скрытые на странице элементы. Скрытым не будет считаться элемент, который просто невидим. Селектор :hidden считает скрытыми элементы, для которых указано свойство display: none, а также скрытые поля формы. Попробуем выбрать все скрытые элементы в body документа:

var hiddenElement = $('body *:hidden');
console.log(hiddenElement);

Мы можем исключить ненужные теги script из выборки, использовав селектор :not.

var element = $('body *:hidden:not(script)');

Реклама