ВЫБОРКА в jQuery

Перед началом отбора

Для выборки используется универсальная функция, появившаяся после подключения библиотеки jQuery.

Вспомнить: УНИВЕРСАЛЬНАЯ функция jquery('   ');

Краткое написание: $('   ');   =   jquery('   ');

Кавычки внутри ОДИНАРНЫЕ!

Основы выборки элементов в jQuery

Буду использовать краткое написание функции выбора: $('   ');

ПРИНЦИП отбора в jQuery
(по тэгам, идентификаторам, классам)

$('p'); - отберёт ВСЕ тэги p (абзацы) на странице

$('#main'); - отберёт ВСЕ элементы с идентификатором id="main"

$('.class'); - отберёт ВСЕ элементы с классом class="class"

Вложенные и дочерние селекторы, следующий тэг

$('#main p'); - отберёт ВСЕ тэги p, вложенные в элемент с идентификатором id="main"

$('#main + p'); - отберёт только 1 тэг p, следующий ЗА элементом с id="main"

$('#for_img > img'); - отберёт ВСЕ "дочерние" (т.е., которые принадлежат САМОМУ элементу, а НЕ его "детям") тэги img, содержащиеся в элементе с id="for_img"

Выборка по наличию и значению атрибутов

[ ]-символ атрибута     ^-начало строки     $-конец строки     *-в любом месте атрибута

Внутри [ ] символа атрибута БЕЗ кавычек!

$('img[width=200]'); - отберёт ВСЕ картинки (тэги img), у которых атрибут width=200

$('a[href^=http]'); - отберёт ВСЕ ссылки (тэги a), у которых атрибут href начинается ИМЕННО с http

$('img[src$=.jpg]'); - отберёт ВСЕ картинки (тэги img), у которых расширение .jpg

$('img[src*=moto]'); - отберёт ВСЕ картинки (тэги img), в атрибуте src которых есть значение, слово moto

P.S.**   У меня символы ^ и $ работали ПЛОХО(!), а символ * чаще всего вообще был НЕ нужен!
Лучше использовать другие способы выборки. Их в jQuery полно!

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

Фильтры нужны для ОСОБЫХ условий выборки.    : -символ фильтра

Чётные/нечётные

Задание: выбрать только чётные строки таблицы.

$('#moto_table tr:even'); - выберет чётные строки таблицы с id="moto_table"

$('#moto_table tr:odd'); - выберет нечётные строки таблицы с id="moto_table"

*Учесть! Чётные/нечётные - с точки зрения скрипта, а для него первый элемент массива 0 - чётный!

Отрицание

not() - КРОМЕ того, что в скобках

Задание: выбрать ВСЕ РИСУНКИ, кроме тех, что внутри элемента с id="navig"

$('img:not(#navig)'); - выберет, как указано в задании.

"Содержащие"

has() - которые СОДЕРЖАТ то,что в скобках

Задание: выбрать ВСЕ блоки div, которые СОДЕРЖАТ внутри себя тэги fieldset

$('div:has(fieldset)'); - выберет, как указано в задании.

Отбор по слову (контенту)

contains() - содержащие текст, слово, что указано в скобках.

Задание: выбрать ВСЕ абзацы p, в которых есть слово мотоцикл

$('p:contains(мотоцикл)'); - выберет, как указано в задании.

Фильтр первого/последнего элемента

first - первого     last - последнего

Задание: в элементе с id="main" отобрать последний, входящий в него рисунок (img).

$('#main img:last'); - выберет, как указано в задании.

Спрятанный/видимый элемент

hidden - спрятанный     visibility - видимый

Задание: отобрать ВСЕ спрятанные блоки div.

$('div:hidden'); - выберет, как указано в задании. (*P.S. Это часто применяют на сайтах: сначала прячут, а потом выводят что-либо.)

Список фильтров и их состояний для форм

(Взято из уроков 93 и 94)

Список фильтров

:input - для всех элементов типа input (их много)

:checkbox - для чекбоксов

:radio - для радиокнопок

:text - текстовые поля форм

:password - для ввода паролей

:file - поля поиска файлов (не забыть! в коде формы - enctype="multipart/form-data")

:reset - СБРОС введённого в поля

:submit - фильтр для кнопки СОЕДИНИТЬ

:image - для кнопки-рисунка СОЕДИНИТЬ

:button - просто КНОПКА

:hidden - спрятанные, невидимые поля

Список состояний фильтров элементов форм

:checked - "отмечено" - может использоваться для чекбоксов и радиокнопок

:selected - "выбрано" - для полей, создаваемых тэгами <select>

Формы - это "особое сословие". Вот им и уделяется столько внимания. И фильтры у них есть, и состояния у некоторых фильтров есть ... ... .

Примеры написания

Приведу несколько примеров написания для использования в jQuery.

$(':checkbox').fadeOut(5000); - За 5 секунд растают ВСЕ чекбоксы.

$('#my_form :submit').fadeOut(); - СРАЗУ скроет кнопку отправки (она такая всего одна в отобранном блоке формы).
Пробел именно так, т.к. : (двоеточие) принадлежит фильтру!

$('#my_form :checkbox:checked').fadeOut(); - Скроет лишь ТОЛЬКО ОТМЕЧЕННЫЕ чекбоксы.
Причём, важно! Фильтр и его состояние - БЕЗ пробела!

Важно! Прямой выбор с фильтром НЕ РАБОТАЕТ!
К примеру: $('#my_button :submit').fadeOut(); - НИЧЕГО(!) не скроет.
Фильтру здесь нечего фильтровать. Уже всё без него выбрано, и он только мешает!

БЕЗ него же - вот так: $('#my_button').fadeOut(); - всё пройдёт "на ура"!

Полезная информация

Отбор разнотипных элементов

Чтобы собрать в один jQuery-набор элементы разных типов, нужно это делать через запятую  , 

Задание: нужно отобрать ВСЕ КАРТИНКИ шириной 200px, и ВСЕ ССЫЛКИ, содержащие в любом месте атрибута href слово documents

$('img[width=200], a[href*=documents]'); - отберёт, как указано в задании.

ГЛОБАЛЬНАЯ переменная

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

Такая переменная называется "глобальной".

var global = $('#myForm input'); - отберёт ВСЕ элементы формы с тэгом input, которые сохранятся в переменной (станут её значением). Имя переменной любое!

Теперь эту переменную можно использовать уже БЕЗ кода отбора!

global.filter(':checkbox'); - найдёт все "флажки" (чекбоксы) формы.

global.filter(':text'); - найдёт все текстовые поля.

global.filter(':text[value != ""]'); - найдёт все НЕпустые текстовые поля.

Последняя запись кода интересна тем, что используется очень(!) часто.

Смысл написания символов  != "" - означает: НЕ равно ПУСТОТЕ!
Причём, очень важно(!), чтобы между кавычками  ""  НИЧЕГО НЕ БЫЛО! Иначе, смысл выражения сменится ровно на противоположное. *Пробел - тоже символ!

В последних примерах написания кода уже присутствует информация из раздела "Методы". Пора переходить к ним.

* * *

Тема ВЫБОРКИ объектов закончена, перехожу к МЕТОДАМ:

Нижняя стрелка вернёт на 1-ую страницу справки "Основы jQuery" (подключение).

ВВЕРХ