JQuery селекторы и фильтры - шпаргалка по JQuery


Статья - шпаргалка списку фильтров и селекторов используемых на фреймворке JQuery.

С помощью данных фильтров и селекторов JQuery можно выбирать как конкретные элементы дерева DOM, так и группы элементов.

Селекторы делают общий выбор, а фильтры делают более точечную выборку.

Фильтры по позиции в списке элементов:

$('DIV:first'); 		// выбрать первый элемент DIV
$('DIV:last'); 			// выбрать последний элемент DIV
$('DIV:not(#TEST)'); 	// выбрать элемент DIV в котором нет id="TEST". Вместо "#TEST" - можно написать любой селектор
$('DIV:even'); 			// выбрать четные DIV
$('DIV:odd'); 			// выбрать нечетные DIV
$('DIV:eq(3)'); 		// выбрать третий DIV
$('DIV:gt(5)'); 		// выбрать все DIV, номер которых больше 5
$('DIV:lt(5)'); 		// выбрать все DIV, номер которых меньше 5
$('DIV:animated'); 		// выбор DIV которые в данный момент анимированы

 

Фильтры по контенту элемента:

$('DIV:contains(text)'); 	// все элементы содержащие текст "text"
$('DIV:empty'); 			// все пустые элементы
$('DIV:has(b)'); 			// все DIV содержащие b

 

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

$('DIV:hidden'); 	// все невидимые DIV
$('DIV:visible'); 	// все видимые DIV

 

Фильтры по иерархии элемента в структуре DOM:

$('table td'); 		// все td которые находятся в table
$('table > td'); 	// все td которые являются прямыми потомками table
$('table + div'); 	// все div-ы, которые идут перед table и находятся на одном уровне
$('table ~ div'); 	// все div-ы, которые идут после table и находятся на одном уровне

 

Фильтры по потомка элемента в структуре DOM:

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

 

Фильтры по атрибутам элемента (самый распространенный фильтр):

$('[href]'); 			// все элементы содержащие атрибут href
$('[class="red"]'); 	// все элементы где class="red" (аналог ".red")
$('[class!="red"]'); 	// все элементы где class не равно red
$('[href^="#"]'); 		// все элементы, где атрибут href начинается с "#"
$('[href$=".GIF"]'); 	// все элементы, у которых href заканчивается на ".GIF" (все ссылки на gif-ки)
$('[class*="test"]'); 	// все элементы, где class содержит "test"
$('[class|="test"]'); 	// все элементы, где class равно либо содержит "test"
$('[class~="test"]'); 	// все элементы, где атрибутом class содержит test
$('[class][href]'); 	// все элементы, у которых есть атрибут class и атрибут href

 

Фильтрация по типу объекта:

$(':input'); 	// выбрать все, где type="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"

 

Фильтрация по состоянию объекта:

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

 

Комбинирование JQuery фильтров (возможно комбинирование ЛЮБЫХ фильтров):

$('.form_chekbox:not(#all_).in_checked');	// Все элементы с классом form_chekbox и in_checked но не с id="all_"
$('.list_url:first[href^="test"]');			// Все первые элементы в элементе с class="list_url", у которых href начинается со строки "test"
$('#my_form input[type="hidden"]');			// Все скрытые input в форме с id="my_form"

Как видно из предыдущего примера можно комбинировать абсолютно любые фильтры, "сжимая" таким образом круг необходимых элементов.

 


Тэги:

Комментарии: 0

Прокомментировать »

 
 
 

Прокомментировать

 
 
Сообщение *
 
Проверочный код *
 
 
 
Яндекс.Метрика