jQuery Селекторы

Примеры с селекторами

• $('#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'a
• $('div, span'); - выбор всех div и span элементов
• $('span + img'); - выбор всех img элементов перед которыми идут span элементы
• $('span ~ img'); - выбор всех img элементов после первого элемента span
• $('#banner').prev(); - выбор предыдущего элемента от найденого
• $('#banner').next(); - выбор следующего элемента от найденого
• $('*'); - выбор всех элементов
• $('p > *'); - выбор всех потомков элементов p
• $('p').children(); - тоже самое
• $('p').parent(); - выбор всех прямых предков элементов p
• $('* > p'); - выбор всех предков элементов p
• $('p').parents(); - тоже самое
• $('p').parents('div'); - выбор всех предков элемента p которые есть div (parents принимает в качестве параметра селектор)
• $('div:first'); - выбираем первый div в доме
• $('div:last'); - выбираем последний div в доме
• $('div:not(.red)'); - выбираем div'ы у которых нету класса red
• $('a:not(a[target])'); - выбираем ссылки у которых нету атрибута target
• $('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$='my']"); - выбор всех div с атрибутом title заканчивающихся на my
• $("div[title*='my']"); - выбор всех div с атрибутом title содержащим my
• $("a[rel~='external']"); - выбор всех A с атрибутом rel содержащим external в списке значений разделенных пробелом
• $(":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"); - выбор всех выбранных чекбоксов

Изменение DOM структуры

• $("form").prepend('new'); - добавить 'span' внутрь формы, самым первым
• $("form").append('new'); - добавить 'span' внутрь формы, самым последним
• $("form").before('new'); - добавить 'span' перед формой
• $("form").wrap('
  '); - поместить форму в 'div'
• $("form").replaceWith(''); - заменить форму на 'span'

По материалам официальной документации.