JQuery Селекторы

Syntax	                        Description	

$("*")	                        Selects all elements
$(this)	                        Selects the current HTML element
$("p.intro")	                Selects all <p> elements with class="intro"
$("p:first")	                Selects the first <p> element
$("ul li:first")	        Selects the first <li> element of the first <ul>
$("ul li:first-child")	        Selects the first <li> element of every <ul>
$("[href]")	                Selects all elements with an href attribute
$("a[target='_blank']")	        Selects all <a> elements with a target attribute value equal to "_blank"
$("a[target!='_blank']")	Selects all <a> elements with a target attribute value NOT equal to "_blank"
$(":button")	                Selects all <button> elements and <input> elements of type="button"
$("tr:even")	                Selects all even <tr> elements
$("tr:odd")	                Selects all odd <tr> elements

$("*")                          Выбирает все элементы
$(this)                         Выбирает текущий элемент HTML
$("p.intro")                    Выбирает все элементы <p> с классом = "intro"
$("p:first")                    Выбирает первый элемент <p>
$("ul li:first")                Выбирает первый элемент <li> первого <ul>
$("ul li:first-child")          Выбирает первый элемент <li> каждого <ul>
$("[href]")                     Выбирает все элементы с атрибутом href
$("a[target='_blank']")         Выбирает все элементы <a> с целевым значением атрибута, равным "_blank"
$("a[target!='_blank']")        Выбирает все <a> элементы с целевым значением атрибута NOT, равным "_blank"
$(":button")                    Выбирает все элементы <button> и <input> элементы типа = "button"
$("tr:even")                    Выбирает все четные элементы <tr>
$("tr:odd")                     Выбирает все нечетные элементы <tr>

Код примера

<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me to hide paragraphs</button>
<script type="text/javascript" src="jq/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").hide();
    });
});
</script>
This is a heading
This is a paragraph.
This is another paragraph.
Click me to hide paragraphs




  
Таблица 1. Селекторы jQuery

Селектор
Описание, пример


Элемента
Выбирает все элементы данного типа на странице, например, $("div").


Элемент 1 элемент 2
Выбирает все элементы 2, вложенные непосредственно в элемент 1, например, $("p img").


Класса
Выбирает все элементы заданного класса, например, $(".sidebar").


Идентификатора
Выбирает элемент с указанным идентификатором, например, $("#main").


Элемент класс
Выбирает из элементов данного типа только те элементы, которым назначен указанный класс, например, $("p.first").


Потомка
Выбирает все указанные элементы выбранного селектора, например, $(".sidebar a").


Дочерние
Выбирает элементы, соответствующие второму селектору, которые содержатся непосредственно внутри первого селектора, являющиеся дочерними по отношению к нему, например, $("body > p").


Сестринские
Выбирает элементы, соответствующие второму селектору, идущие непосредственно за первым элементом, являющимся для него сестринским, например, $("h2 + p").


Выбирает элементы, соответствующие второму селектору, являющиеся сестринскими по отношению к первому элементу и расположенные после него, например, $("h2 ~ p").


Атрибута
Выбирает все элементы, которые содержат данный атрибут или указанно значение атрибута, например, $("img[alt]"), $("a[href]"), $("input[type='text']").


Выбирает все элементы, начинающиеся с определенного значения, например, $("a[href^='http://']").


Выбирает все элементы, заканчивающиеся на определенное значение, например, $("a[href$='.pdf']").


Выбирает все элементы, содержащие в любом месте определенное значение, например, $("a[target*='blank']").


:even
Выбирает элементы по четным значениям индекса 0, 2, 4…, т.е. выбирает 1, 3, 5… элементы, например, $("li:even").


:odd
Выбирает элементы по нечетным значениям индекса, т.е. выбирает 0, 2, 4… элементы.


:first
Выбирает только один элемент, первый из подходящих, например, $("p:first").


:last
Выбирает только один элемент, последний из подходящих.


:first-child
Выбирает элементы, которые являются первыми дочерними элементами своих родителей.


:last-child
Выбирает элементы, которые являются последними дочерними элементами своих родителей.


:only-child
Выбирает элементы, являющиеся единственными дочерними элементами своих родителей.


:nth-child(n)
Выбирает элементы, которые являются n-дочерними элементами своих родителей.


:nth-child(Xn+Y)
Выбирает n-элемент, порядковый номер которого рассчитывается по формуле в круглых скобках.


:nth-of-type(n)
Выбирает элементы, являющиеся n-ми дочерними элементами данного типа для своих родителей.


:parent
Выбирает непустые элементы, которые имеют вложенные (дочерние) элементы, а также содержащие текст.


:eq(n)
Выбирает элементы с индексом n, при этом индексы отсчитываются от нуля.


:gt(n)
Выбирает все элементы, индекс которых больше n, индексы отсчитываются от нуля.


:lt(n)
Выбирает все элементы, расположенные перед n-элементом, не включая n-элемент.


:not(селектор)
Позволяет выбрать элемент, не соответствующий данному типу селектора, например, $("a:not(.link)"), $("a:not([href$='.pdf'])").


:has(селектор)
Выбирает элементы, которые содержат внутри себя указанный селектор, например, элементы списка, содержащие внутри себя ссылки: $("li:has(a)").


:contains(текст)
Выбирает элементы, которые содержат указанный в скобках текст, например, $("a:contains(Скачать)").


:hidden
Выбирает скрытые элементы, для которых установлено значение display: none;, а также элементы форм со значением type="hidden" например, $("ul:hidden").show() — делает скрытые элементы видимыми.


:visible
Выбирает видимые элементы, к видимым элементам относятся элементы, размеры которых больше нуля, а также элементы со значением visibility: hidden и opacity: 0.


:active
Выбирает элемент, который активизирован пользователем, например, с помощью щелчка мыши.


:checked
Выбирает только отмеченные флажки или радиокнопки.


:focus
Выбирает элемент, находящийся в фокусе.


:hover
Выбирает элемент, на который наведен указатель мыши.


:disabled
Выбирает неактивные элементы (форм).


:enabled
Выбирает активные элементы (форм).


:empty
Выбирает элементы, не содержащие дочерних элементов.


:target
Выбирает элементы, на которые ссылается идентификатор фрагмента в url-адресе.


:animated
Выбирает все анимируемые в данный момент элементы.


:button
Выбирает все кнопки input[type=submit], input[type=reset], input[type=button], button.


:checkbox
Выбирает элементы-флажки input[type=checkbox].


:file
Выбирает элементы типа file, input[type=file].


:header
Выбирает элементы-заголовки от h1 до h6.


:image
Выбирает изображения в элементах форм input[type=image].


:input
Выбирает элементы форм input, select, textarea, button.


:password
Выбирает элементы ввода пароля input[type=password].


:radio
Выбирает радиокнопки input[type=radio].


:reset
Выбирает кнопки сброса input[type=reset], button[type=reset].


:selected
Выбирает выделенные элементы option.


:submit
Выбирает кнопки отправки формы input[type=submit], button[type=submit].


:text
Выбирает элементы ввода текстаinput[type=text].