Форум | Последние учебники веб-разработки
 

jQuery Селекторы


JQuery селекторы

Используйте нашу Jquery Selector Tester для демонстрации различных селекторов.

селектор пример Выбор
* $("*") Все элементы
# id $("#lastname") Элемент с id="lastname"
. class $(".intro") Все элементы с class="intro"
. class, . class $(".intro,.demo") Все элементы с class "intro" или "demo"
element $("p") Все <p> элементы
el1 , el2 , el3 $("h1,div,p") Все <h1>, <div> <p> <h1>, <div> <p> элементы
   
:first $("p:first") Первая <p> элемент
:last $("p:last") Последнее <p> элемент
:even $("tr:even") Все даже <tr> элементы
:odd $("tr:odd") Все нечетные <tr> элементы
   
:first-child $("p:first-child") Все <p> элементы , которые являются первым ребенком своих родителей
:first-of-type $("p:first-of-type") Все <p> элементы , которые являются первым <p> элемент своего родителя
:last-child $("p:last-child") Все <p> элементы , которые являются последним ребенком своего родителя
:last-of-type $("p:last-of-type") Все <p> элементы , которые являются последним <p> элемент своего родителя
:nth-child( n ) $("p:nth-child(2)") Все <p> элементы , которые являются вторым ребенком своих родителей
:nth-last-child( n ) $("p:nth-last-child(2)") Все <p> элементы , которые являются вторым ребенком своих родителей, считая от последнего ребенка
:nth-of-type( n ) $("p:nth-of-type(2)") Все <p> элементы , которые являются вторым <p> элемент своего родителя
:nth-last-of-type( n ) $("p:nth-last-of-type(2)") Все <p> элементы , которые являются вторым <p> элемент своего родителя, считая от последнего ребенка
:only-child $("p:only-child") Все <p> элементы , которые являются единственным ребенком своих родителей
:only-of-type $("p:only-of-type") Все <p> элементы , которые являются единственным ребенком, его типа, их родителей
   
parent > child $("div > p") Все <p> элементы , которые являются прямым потомком в <div> элемент
parent descendant $("div p") Все <p> элементы , которые являются потомками <div> элемент
element + next $("div + p") <p> элемент , который находятся рядом друг с <div> элементы
element ~ siblings $("div ~ p") Все <p> элементы , которые являются братья и сестры в <div> элемент
   
:eq( index ) $("ul li:eq(3)") Четвертый элемент в списке (индекс начинается с 0)
:gt( no ) $("ul li:gt(3)") Список элементов с индексом больше, чем 3
:lt( no ) $("ul li:lt(3)") Список элементов с индексом меньше 3
:not( selector ) $("input:not(:empty)") Все входные элементы, которые не являются пустыми
   
:header $(":header") Все элементы заголовка <h1>, <h2> ...
:animated $(":animated") Все анимированные элементы
:focus $(":focus") Элемент, который в настоящее время имеет фокус
:contains( text ) $(":contains('Hello')") Все элементы, содержащие текст "Hello"
:has( selector ) $("div:has(p)") Все <div> элементы, которые имеют элемент <p>
:empty $(":empty") Все элементы, которые являются пустыми
:parent $(":parent") Все элементы, которые являются родителем другого элемента
:hidden $("p:hidden") Все скрытые <p> элементы
:visible $("table:visible") Все видимые таблицы
:root $(":root") Корневой элемент документа
:lang( language ) $("p:lang(de)") Все <p> элементы со значением атрибута Ланг , начиная с "de"
   
[ attribute ] $("[href]") Все элементы с href атрибута
[ attribute = value ] $("[href='default.htm']") Все элементы с href значение атрибута равны "default.htm"
[ attribute != value ] $("[href!='default.htm']") Все элементы с href значение атрибута не равные "default.htm"
[ attribute $= value ] $("[href$='.jpg']") Все элементы с href значение атрибута , заканчивающейся ".jpg"
[attribute|=value] $("[title|='Tomorrow']") Все элементы с названием атрибута значение , равное 'Tomorrow' , или начиная с 'Tomorrow' , за которым следует дефис
[attribute^=value] $("[title^='Tom']") Все элементы с заголовка , значение атрибута , начиная с "Tom"
[attribute~=value] $("[title~='hello']") Все элементы со значением атрибута заголовка , содержащие определенное слово "hello"
[attribute*=value] $("[title*='hello']") Все элементы со значением атрибута заголовка , содержащие слово "hello"
   
:input $(":input") Все элементы ввода
:text $(":text") Все элементы ввода с type="text"
:password $(":password") Все элементы ввода с type="password"
:radio $(":radio") Все элементы ввода с type="radio"
:checkbox $(":checkbox") Все элементы ввода с type="checkbox"
:submit $(":submit") Все элементы ввода с type="submit"
:reset $(":reset") Все элементы ввода с type="reset"
:button $(":button") Все элементы ввода с type="button"
:image $(":image") Все элементы ввода с type="image"
:file $(":file") Все элементы ввода с type="file"
:enabled $(":enabled") Все enabled элементы ввода
:disabled $(":disabled") Все disabled элементы ввода
:selected $(":selected") Все selected элементы ввода
:checked $(":checked") Все checked элементы ввода