Wiki-учебник по веб-технологиям: jQuery/Выборки ...

Главная | Каталог |
Оглавление документа

1. Три основных метода отбора элементов


Один из основополагающих моментов в изучении jQuery – научится отбирать элементы. Это очень важно!!!
Как было сказано во вступлении, отбор элементов основан на CSS. Если открыть любой CSS 
файл, то можно увидеть, что перед фигурными скобками стоит название элемента, либо название класса, либо идентификатора. Так называемые «селекторы». Если перед названием ничего не стоит, точка или решетка(#), то это тэг, класс и идентификатор, соответственно. Подобно тому, как браузер обрабатывает стили к тому или иному элементу, точно так же происходит и обработка элементов в выборке jQuery. Более подробно, прочитайте в разделе CSS.

1.1. Выбор элемента по названию тэга:


Необходимо вызвать универсальную функцию jquery таким образом

$('p');

В данном случае будут отобраны все абзацы. В обычном javascript это так же доступно:

document.getElementsByTagName("p");

Сразу можно заметить, насколько короче выглядит вариант в jquery.

1.2. Выбор элемента по идентификатору:


$('#element');

В данном примере будет выбраны все элементы, имеющие id="element". Обратите внимание, отбор элемента осуществляется через #, точно так же как в CSS. Опять же, об этом говорилось выше.

1.3. Выбор элемента по классу


$('.greened');

В данном примере будут выбраны все элементы, имеющие class="greened". И снова, схожесть с CSS.

Итак, в jQuery 3 основных метода отбора элементов:

$('p');   // по названию тэга
$('#element');   // по названию идентификатора
$('.greened');   // по названию класса

2. Более сложные методы отбора элементов

2.1. Вложенные тэги


Допустим, вам необходимо выбрать абзацы с вложенным тэгом <strong>. Подобно тому, как это делается в CSS, через пробел, указываем это в выборке:
$('p strong');

2.2. Следующий тэг


Для того, чтобы выбрать следующий тэг, следует использовать следующую конструкцию:

$('div + img');

2.3. Дочерний тэг


Для того, чтобы выбрать дочерний тэг, следует использовать следующую конструкцию:
$('div > img');

3. Вложенные элементы


Часто бывает необходимо выбрать элементы, в зависимости от их вложенных элементов. Делается это так:

3.1. По точному значению элемента

$('img[alt=изображение]');

Будут выбраны все изображения, в значении alt которых стоит «изображение»

3.2. По начальному значению элемента

$('img[src^=photo]');

Будут выбраны все изображения, адрес которых начинается с ключевого слова “photo”, хотя адрес может быть “photo001.jpg”

3.3. По конечному значению элемента

$('img[src$=.jpg]');

Будут выбраны все изображения, в адрес которых входит “001”, хотя адрес может быть “photo001.jpg”

3.4. По вхождению в значение

$('img[src*=001]');

Будут выбраны все изображения, в адрес которых входит “001”, хотя адрес может быть “photo001.jpg”

4. Фильтрация выборок

Помимо отбора элементов, что описаны выше, возможно фильтровать следующими способами:

4.1. Четные/нечетные

$('img:even'); // выбор четных элементов
$('img:odd'); // выбор нечетных элементов

4.2. Все, кроме

$('img:not(.green img)');

В данном случае будут отобраны все изображения не имеющие класс “green”, т.е. в скобках после not пишется условие отрицания.

4.3. По содержанию тэга

$('img:has(alt)');

Будут отобраны все изображения, у которых есть атрибут “alt”.

4.4. По содержанию текста

Если нужно выбрать абзац, содержащий определенный текст, то используется такая конструкция:
$('p:contains(текст)');

4.5. Первый/последний

С помощью следующей конструкции возможно отбирать только первый или только последний элемент из множества
$('img:first'); // первый
$('img:last'); // последний

4.6. Видимый/невидимый

$('img:hidden'); // невидимый
$('img:visibility'); // видимый