jQuery Селекторы

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'

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

Вход



Регистрация