jQuery фильтры

jQuery фильтры, это почти тоже самое что и jQuery селекторы, о которых я писал в этой статье – jQuery селекторы.
С помощью jQuery фильтров можно делать более сложные выборки данных, переходим к примерам:

$('h1:first'); // выбрать первый элемент h1
$('h1:last'); // выбрать последний элемент h1
$('h1:not(#test)'); // выбрать элемент h1 в котором нет id="test"
// где "#test" - можно написать любой селектор
$('h1:even'); // выбрать четные h1
$('h1:odd'); // выбрать нечетные h1
$('h1:eq(3)'); // выбрать третий h1
$('h1:gt(5)'); // выбрать все h1, номер которых больше 5
$('h1:lt(5)'); // выбрать все h1, номер которых меньше 5
$(':header'); // выбор всех h1, h2, h3, h4, h5, h6
$('h1:animated'); // выбор h1 которые в данный момент анимированы

jQuery фильтрация по контенту:

$('h1:contains(text)'); // взять все элементы содержащие "text"
$('h1:empty'); // взять все пустые элементы
$('h1:has(b)'); // взять все h1 содержащие b
$('h1:parent'); // взять все h1 которые содержат контент
// последнее не точно, если кто знает отпишите

jQuery фильтрация по видимости:

$('h1:hidden'); // взять все невидимые h1
$('h1:visible'); // взять все видимые h1
// Зависит от CSS стиля display: block или none

jQuery фильтрация по иерархии:

$('table td'); // взять все td которые находятся в table
$('table > td'); // взять все td которые являются прямыми потомками table
$('table + div'); // взять все div-ы, которые идут перед table
$('table ~ div'); // взять все div-ы, которые идут после table
// в последних двух примерах, берутся только те div-ы
// которые находятся на одном уровне с table, то есть
// например
<table></table>
<div id="a">
   <div id="b"></div>
</div>
// тут будет выбран только div где id="a".

jQuery фильтрация по потомкам:

$('table td:nth-child(3)'); // выбрать каждый 3-ий td во всех table
$('table td:first-child'); // выбрать каждый первый td во всех table
$('table td:last-child'); // выбрать каждый последний td во всех table
$('table td:only-child'); // выбрать только прямые дочерние td во всех

jQuery фильтрация по атрибутам:

$('[href]'); // выбрать все элементы содержащие атрибут href
$('[class="blue"]'); // выбрать все элементы где class="blue"
$('[class!="blue"]'); // выбрать все элементы где class не равно blue
$('[href^="#"]'); // выбрать все элементы, где атрибут href начинается с "#"
// это пример того как выбрать все ссылки которые
// не перенаправляют на другие страницы.
$('[href$=".jpg"]'); // выбрать все элементы, у которых значение атрибута
// href заканчивается на ".jpg" (так можно выбрать все ссылки ведущие
// на JPEG-картинки)
$('[class*="text"]'); // выбрать все элементы где class содержит "text"
$('[class|="text"]'); // выбрать все элементы, где class равно либо содержит "text"
$('[class~="text"]'); // выбрать все элементы, где атрибутом class содержит text
// в списке значений разделенных пробелом
$('[class][href]'); // выбрать все элементы, которые содержат
// два атрибута class и href

jQuery фильтрация по формам:

$(':input'); // выбрать все input, дальше так же по схеме:
$(':text'); // где type="text"
$(':password'); // где type="password"
$(':radio'); // где type="radio"
$(':checkbox'); // где type="checkbox"
$(':submit'); // где type="submit"
$(':image'); // где type="image"
$(':reset'); // где type="reset"
$(':button'); // где type="button"
$(':file'); // где type="file"

Другие jQuery фильтрации по формам:

$(':enabled'); // взять все активные
$(':disabled'); // взять все неактивные
$(':checked'); // взять все включенные
$(':selected'); // взять все выбранные

Это все, а теперь я хочу сказать очень важную вещь, внимательно вникайте – ВСЕ эти фильтрации и выборки можно использовать абсолютно как угодно! :)

Можно придумывать самые разные методы получения тегов, вот примеры для чего это может понадобиться:

// Таким образом можно всем ссылкам добавить класс "image" которые ведут на картинки:
$('a[href$=".jpg"], a[href$=".jpeg"], a[href$=".gif"], a[href$=".png"]').addClass('image');
 
// Так выбираем все исходящие ссылки (например в википедии добавляются картиночки,
// которые опомещают о том, что эта ссылка ведет за пределы их сайта)
$('a[target="_blank"]').addClass('имя_класса');
 
// Так мы выбираем все ссылки, которые ведут на JPG картинки, у которых еще есть атрибут
// "mypictures" (заметьте, такого атрибута не существует в HTML, но все равно работает ).
$('a[href$=".jpg"][mypictures]').любая_функция();
 
// Самом верху статьи я всегда приписывал H1 ($('h1:empty');) а можно и не приписывать:
$(':empty').css({ border: '#f00 4px solid' }); // всем пустым элементам делаем рамку
// и такие манипуляции можно проводить с любыми перечисленными фильтрациями

В общем включаем воображение и творим что хотим :)

В фильтры можно еще обычным способом внедрять JS переменные, создавая сложные интерфейсы и т.п.

Желаю удачи в освоении jQuery фильтров! :) В следующих статьях мы начнем усердно использовать jQuery селекторы и фильтры.

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