Достаточно часто встает вопрос как выбрать тот или иной элемент в DOM’е, и данный пост будет сплошь посвящен селекторам в jQuery, возможно большинство из них Вы видели в различных источниках, но собрать их воедино все же стоит…
Итак, Выборка элементов jQuery
Выбор элементов по Id либо ClassName аналогично используемому в CSS
1.$('#sidebar'); // выбор элемента с id = sidebar2.$('.post'); // выбор элементов с class = post3.$('div#sidebar'); // выбор элемента div с id = sidebar4.$('div.post'); // выбор элементов div с class = postПримечание: используйте валидные имена классов и id
Бродим по иерархии объектов в DOM’е
Простой выбор потомков:
1.$('div span'); // выбор всех span элементов в элементах div2.Аналогичный результат так же можно получить используя следующую конструкцию: 3.$('div').find('span'); // выбор всех span элементов в элементах div4.Выбор только непосредственных потомков 5.$('div > span'); // выбор всех span элементов в элементах div, где span является прямым потомком div'aКак же лучше поступить, что работает быстрее? Надо бы протестировать…
Так же селекторы можно группировать:
1.$('div, span'); // выбор всех div и span элементовПоиск по соседям:
1.$('span + img'); // выбор всех img элементов перед которыми идут span элементы2.$('span ~ img'); // выбор всех img элементов после первого элемента span3.$('#banner').prev(); // выбор предыдущего элемента от найденого4.$('#banner').next(); // выбор следующего элемента от найденогоВыбор всех элементов, всех предков, всех потомков
1.$('*'); // выбор всех элементов2.$('p > *'); // выбор всех потомков элементов p3.$('p').children(); // --4.$('p').parent(); // выбор всех прямых предков элементов p5.$('* > p'); // выбор всех предков элементов p (скорей всего Вам не понадобится)6.$('p').parents(); // --7.$('p').parents('div'); // выбор всех предков элемента p которые есть div (parents принимает в качестве параметра селектор)Фильтры
Фильтров в jQuery реализовано достаточно много, и пользоваться ими одно удовольствие:
01.$('div:first'); // выбираем первый div в доме02.$('div:last'); // выбираем последний div в доме03.$('div:not(.red)'); // выбираем div'ы у которых нету класса red04.$('div:even'); // выбираем четные div'ы05.$('div:odd'); // выбираем нечетные div'ы06.$('div:eq(N)'); // выбираем div идущим под номером N в DOMe07.$('div:gt(N)'); // выбираем div'ы, индекс которых больше чем N в DOMe08.$('div:lt(N)'); // выбираем div'ы, индекс которых меньше чем N в DOMe09.$(':header'); // выбо заголовоков h1, h2, h3 и т.д.10.$('div:animated'); // выбор элементов с активной анимациейФильтры по контенту и видимости:
1.$('div:contains(text)'); // выбираем div'ы содержащие текст2.$('div:empty'); // выбираем пустые div'ы3.$('div:has(p)'); // выбираем div'ы которые содержат p4.$('div.red').filter('.bold') // выбираем div'ы которые содержат класс red и класс bold5.$('div:hidden'); // выбираем скрытые div'ы6.$('div:visible'); // выбираем видимые div'ыТак же есть фильтры по атрибутам:
01.$("div[id]"); // выбор всех div с атрибутом id02.$("div[title='my']"); // выбор всех div с атрибутом title=my03.$("div[title!='my']"); // выбор всех div с атрибутом title не равного my04.$("div[title^='my']"); // выбор всех div с атрибутом title начинающихся с my05. // <div title="myCat">,<div title="myCoffee">, <div title="my...">06.$("div[title$='my']"); // выбор всех div с атрибутом title заканчивающихся на my07. // <div title="itsmy">,<div title="somy">, <div title="...my">08.$("div[title*='my']"); // выбор всех div с атрибутом title содержащим my09. // <div title="itsmy">,<div title="myCat">, <div title="its my cat">,<div title="...my...">так же стоит отдельно отметить следующий фильтр:
1.$("a[rel~='external']"); // выбор всех A с атрибутом rel содержащим external в списке значений разделенных пробеломВ результате его работы будут выбраны следующие теги:
1.<a href="" rel="external">link</a> - да2.<a href="" rel="nofollow external">link</a> - да3.<a href="" rel="external nofollow">link</a> - да4.<a href="" rel="friend external follow">link</a> - да5.<a href="" rel="external-link">link</a> - нетДля работы с элементами форм есть ряд селекторов позволяющий выбирать по типу элемента и фильтров —
1.$(":text"); // выбор всех input элементов с типом =text2.$(":radio"); // выбор всех input элементов с типом =radio3. // и так далее4.$("input:enabled"); // выбор всех включенных элементов input5.$("input:checked"); // выбор всех отмеченных чекбоксовФильтры так же можно группировать:
1.$("div[name=city]:visible:has(p)"); // выбор видимого div'a с именем city, который содержит тег pПриведу так же ряд полезных селекторов для работы с элементами форм:
1.$("form select[name=city] option:selected").val(); // получение выбранного(-ых) элементов в селекте city2.$("form :radio[name=some]:checked").val(); // получение выбранного значения радиобатона с именем some3.$("form :checkbox:checked"); // выбор всех выбранных чекбоксов
Comments ( 0 )