Примеры использования селекторов jQuery

R5AM, Александр Ящук, Москва, 2017г.
На главную


На основе статьи на Хабре: habrahabr.ru/post/51717
Часто используемые:
$('tr[class*=oddrow0]') все tr с классом СОДЕРЖАЩИМ oddrow0
Выбор элементов по Id либо ClassName аналогично используемому в CSS:
$('#sidebar'); выбор элемента с id = sidebar
$('.post'); выбор элементов с class = post
$('div#sidebar'); выбор элемента div с id = sidebar
$('div.post'); выбор элементов div с class = post
Простой выбор потомков:
$('div span'); выбор всех span элементов в элементах div
$('div').find('span'); выбор всех span элементов в элементах div
Выбор только непосредственных потомков:
$('div > span'); выбор всех span элементов в элементах div,
где span является прямым потомком
Группировка селекторов:
$('div, span'); выбор всех div и span элементов
Поиск по соседям:
$('span + img'); выбор всех img элементов перед которыми идут span элементы
$('span ~ img'); выбор всех img элементов после первого элемента span
$('#banner').prev(); выбор предыдущего элемента от найденого
$('#banner').next(); выбор следующего элемента от найденого
Выбор всех элементов, всех предков, всех потомков:
$('*'); выбор всех элементов
$('p > *');
$('p').children();
выбор всех потомков элементов p
$('p').parent(); выбор всех прямых предков элементов p
$('* > p');
$('p').parents();
выбор всех предков элементов p
$('p').parents('div'); выбор всех предков элемента p которые есть div (parents принимает в качестве параметра селектор)
Фильтры:
$('div:first'); выбираем первый div в доме
$('div:last'); выбираем последний div в доме
$('div:not(.red)'); выбираем div'ы у которых нету класса red
$('div:even'); выбираем четные div'ы
$('div:odd'); выбираем нечетные div'ы
$('div:eq(N)'); выбираем div идущим под номером N в DOMe
$('div:gt(N)'); выбираем div'ы, индекс которых больше чем N в DOMe
$('div:lt(N)'); выбираем div'ы, индекс которых меньше чем N в DOMe
$(':header'); выбор заголовоков h1, h2, h3 и т.д.
$('div:animated'); выбор элементов с активной анимацией
Фильтры по контенту и видимости:
$('div:contains(text)'); выбираем div'ы содержащие текст
$('div:empty'); выбираем пустые div'ы
$('div:has(p)'); выбираем div'ы которые содержат p
$('div.red').filter('.bold') выбираем div'ы которые содержат класс red и класс bold
$('div:hidden'); выбираем скрытые div'ы
$('div:visible'); выбираем видимые div'ы
Фильтры по атрибутам:
$("div[id]"); выбор всех div с атрибутом id
$("div[title='my']"); выбор всех div с атрибутом title, имеющему значение my
$("div[title!='my']"); выбор всех div с атрибутом title не равного my
$("div[title^='my']"); выбор всех div с атрибутом title начинающихся с my:
<div title="myCat">,
<div title="myCoffee">,
<div title="my...">
$("div[title$='my']"); выбор всех div с атрибутом title заканчивающихся на my:
<div title="itsmy">,
<div title="somy">,
<div title="...my">
$("div[title*='my']"); выбор всех div с атрибутом title содержащим my:
<div title="itsmy">,
<div title="myCat">,
<div title="its my cat">,
<div title="...my...">
Стоит отдельно отметить следующий фильтр:
$("a[rel~='external']"); выбор всех a с атрибутом rel, содержащим external в списке значений разделенных пробелом

Будут выбраны следующие теги:
<a href="" rel="external">link</a> - да <a href="" rel="nofollow external">link</a> - да <a href="" rel="external nofollow">link</a> - да <a href="" rel="friend external follow">link</a> - да <a href="" rel="external-link">link</a> - нет

Селекторы для работы с элементами форм, позволяющие выбирать по типу элемента и фильтров - enabled/disabled/selected/checked:
$(":text"); выбор всех input элементов с типом =text
$(":radio"); выбор всех input элементов с типом =radio и так далее
$("input:enabled"); выбор всех включенных элементов input
$("input:checked"); выбор всех отмеченных чекбоксов
Группировка фильтров:
$("div[name=city]:visible:has(p)"); выбор видимого div'a с именем city, который содержит тег p
Полезные селекторов для работы с элементами форм:
$("form select[name=city] option:selected").val(); получение выбранного(-ых) элементов в селекте city
$("form :radio[name=some]:checked").val(); получение выбранного значения радиобатона с именем some
$("form :checkbox:checked"); выбор всех выбранных чекбоксов




На главную
К началу страницы