Часто сталкиваюсь с задачами по выборке средствами jQuery того или иного объекта на странице, решил для себя написать небольшую справку.
Итак.
Выбор по ID и имени класса аналог принципа используемого в CSS
$(‘#idname’); // выбор элемента с id = sidebar
$(‘.classname’); // выбор элементов с class = classname
$(‘div#idname’); // выбор элемента div с id = idname
$(‘div. classname’); // выбор элементов div с class = classname
Выбор вложенных элементов, потомков
$(‘div p’); // выбор всех p элементов в элементах div
Аналогично работает вот такое код:
$(‘div’).find(‘p’); // выбор всех p элементов в элементах div
Выбор только вложенных элементов
$(‘div > p’); // выбор всех p элементов в элементах div, где p является прямым потомком div’a
Выборка нескольких разных элементов:
$(‘div, p’); // выбор всех div и p элементов
Поиск по соседям:
$(‘div+ h1′); // выбор всех h1 элементов перед которыми идут div элементы
$(‘span ~ h1′); // выбор всех h1 элементов после первого элемента span
$(‘#idname’).prev(); // выбор предыдущего элемента от найденого
$(‘#idname’).next(); // выбор следующего элемента от найденого
Выбор всех элементов, всех предков элемента , всех потомков элемента
$(‘*’); // выбор всех элементов
$(‘ul > *’); // выбор всех потомков элементов ul
$(‘ul’).children(); // — выбор всех потомков элементов ul
$(‘ul’).parent(); // выбор всех прямых предков элементов ul
$(‘* > ul’); // выбор всех предков элементов ul
$(‘ul’).parents(); // выбор всех предков элементов ul
$(‘ul’).parents(‘div’); // выбор всех предков элемента ul которые есть li, parents как параметр селектора
$(‘ul li:first-child’); // выбор первого li в ul
$(‘ul li:last-child’); // выбор последнего li в ul
Фильтры в jQuery
$(‘li:first’); // выбираем первый div в доме
$(‘li:last’); // выбираем последний div в доме
$(‘li:not(.red)’); // выбираем div’ы у которых нету класса red
$(‘li:even’); // выбираем четные div’ы
$(‘li:odd’); // выбираем нечетные div’ы
$(‘li:eq(N)’); // выбираем div идущим под номером N в DOMe
$(‘li:gt(N)’); // выбираем div’ы, индекс которых больше чем N в DOMe
$(‘li:lt(N)’); // выбираем div’ы, индекс которых меньше чем N в DOMe
$(‘:header’); // выбо заголовоков h1, h2, h3 и т.д.
$(‘li: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’ы
Фильтры jQuery для атрибутов:
$(«div[id]«); // выбор всех div с атрибутом id
$(«div[title='my']«); // выбор всех div с атрибутом title=my
$(«div[title!='my']«); // выбор всех div с атрибутом title не равного my
$(«div[title^='my']«); // выбор всех div с атрибутом title начинающихся с my
$(«div[title$='my']«); // выбор всех div с атрибутом title заканчивающихся на my
$(«div[title*='my']«); // выбор всех div с атрибутом title содержащим my
так же стоит отдельно отметить следующий фильтр:
$(«a[rel~='external']«); // выбор всех A с атрибутом rel содержащим external в списке значений разделенных пробелом
результат сработает на rel=»nofollow external» и на rel=»friend external follow»
jQuery селекторы выбора по типу элемента и фильтров - enabled disabled selected checked :
$(«:text»); // выбор всех input элементов с типом =text
$(«:radio»); // выбор всех input элементов с типом =radio
// и так далее
$(«input:enabled»); // выбор всех включенных элементов input
$(«input:checked»); // выбор всех отмеченных чекбоксов
Группировка фильтров jQuery:
$(«span[name=reg]:visible:has(p)»); // выбор видимого span с именем reg, который содержит тег p
jQuery селекторы для работы с элементами форм:
$(«form select[name=town] option:selected»).val(); // получение выбранного(-ых) элементов в селекте town
$(«form :radio[name=son]:checked»).val(); // получение выбранного значения радиобатона с именем son
$(«form :checkbox:checked»); // выбор всех выбранных чекбоксов
Тэги: JavaScript, jQuery