jQuery. Селекторы

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

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

Заголовок H1

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

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

Lorem ipsum dolor sit amet.

Voluptatem incidunt labore fugiat quibusdam.

Lorem ipsum dolor sit amet.

Incidunt laudantium itaque, fuga sunt.

Напомню, что скрипт нужно разместить перед закрывающим тегом 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>

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

.

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.

Lorem ipsum dolor sit amet.

Voluptatem incidunt labore fugiat quibusdam.

Lorem ipsum dolor sit amet.

Incidunt laudantium itaque, fuga sunt.


<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)');
Реклама