Селекторы jQuery

Выбор элементов с помощью jQuery

Чаще всего JavaScript используется для получения или изменения содержимого HTML-элементов на странице или для применения некоторых эффектов, таких как «затухание», «появление», «скрытие» HTML-элементов.

Выбор элементов с помощью чистого JavaScript не всегда удобен, но с jQuery выбор элементов DOM прост и легок и является его одной из самых мощных функций.

В jQuery выбор элементов страницы производится с помощью специальных селекторов. Ниже представлены распространенные способы поиска элементов на странице.

Селектор по элементу

Самый часто используемый селектор по имени элемента. Указание имени элемента в виде строки, например $(‘p’), вернет массив всех элементов

на веб-странице.

<script type="text/javascript">
$(document).ready(function(){
    // Посдсвечиваем все элементы p
    $("p").css("background", "green");
});
</script>

Селектор по идентификатору

Используйте селектор по идентификатору, чтобы выбрать один элемент с уникальным идентификатором на странице (идентификаторы задаются для HTML элементов с помощью атрибута id, например, id='name'). Укажите идентификатор элемента, для которого вы хотите получить ссылку, начиная с символа #.

Выбор элемента по идентификатору
Например, следующий код jQuery выберет и выделит элемент, с атрибут id="need"

<script type="text/javascript">
$(document).ready(function(){
    // Подсвечиваем элемент с id='need'
    $("#need").css("background", "yellow");
});
</script>

В приведенном выше примере $(document).ready() это событие, которое наступит только после того, когда DOM страницы будет полностью построен (то есть будет загружена страница).

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

Выбор элементов по классу используется для поиска всех элементов страницы с определенным именем класса. Основное требование использования — должен начинаться с точки а после слитно идет имя класса .svet. Например, следующий код jQuery найдет и выделит элементы, имеющие атрибут class class = "svet", после загрузки документа.

<script type="text/javascript">
$(document).ready(function(){
    // Подсвечиваем элемент с class='svet'
    $(".svet").css("background", "yellow");
});
</script> 

Селектор по атрибуту

jQuery также позволяет найти элемент на основе атрибутов, прописанных в нем. Необходимо указать имя атрибута в квадратных скобках, например, $(‘[class]’), вернет все элементы, которые имеют атрибут класса, независимо от его значения.

Выбор по атрибуту

В следующем примере jQuery возвращает все элементы, имеющие атрибут class или primer_tag, независимо от значения.

<script type="text/javascript">
$(document).ready(function(){
    // Посдсвечиваем элементы с атрибутами primer_tag и class
    $("[primer_tag]").css("background", "green");
    $("[class]").css("background", "yellow");
});
</script>

Вы также можете указать конкретное значение атрибута в селекторе атрибутов. Например, $('[class ="myClass"]') вернет все элементы, которые имеют атрибут class с myClass в качестве значения.

Шпаргалка: список селекторов jQuery

Селектор Пример Описание
Название элемента $(‘div’) Выбрать все <div>
:first $(‘div:first’) Выбрать первый <div> в иерархии DOM.
:last $(‘div:last’) Выбрать последний <div> в иерархии DOM.
Множество элементов $(‘p, div, code’) Выбрать все <p>,<div> и <code> элементы
С учетом родительского элемента $(‘div p’) Выбрать все <p> элементы входящие в <div>
Наличие дочернего $(‘div > p’) Выбрать <p>, которые является дочерним элементом <div>
* $(*) Выбрать все элементы
#Id $(«#myDiv») Выбрать элементы с id равным myDiv
element#id $(«div#myDiv») Выбрать <div> элементы с id равным myDiv
#id, #id $(«#myDiv1, #myDiv2») Выбрать элементы где id равен myDiv1 или myDiv2.
.class $(«.myCSSClass») Выбрать элементы с классом class=myCSSClass.
.class .class $(«.myCSSClass1, .myCSSClass2 «) Найти все элементы у которых класс myCSSClass1 или myCSSClass2
Элемент.класс $(«div.myCSSClass») найти все <div> элементы с классом class=myCSSClass
:first-child $(«p:first-child») Selects all <p> elements which is the first child of its parent element. (parent element can be anything)
:last-child $(«p:last-child») Выбрать все <p> элементы, которые являются последним дочерним элементом своего родительского элемента.
:nth-child(n) $(«p:nth-child(5)») Выбрать все <p> элементы, которые являются 5-м дочерним элементом своего родительского элемента
:nth-last-child(n) $(«p:nth-last-child(2)») Выбрать все <p> элементы, которые являются 2-м последним дочерним элементом своего родительского элемента
:only-child $(«p:only-child») Выбрать все <p> элементы, которые являются единственным дочерним элементом своего родителя
[attribute] $(‘[class]’) Выбрать все элементы с атрибутом class (без учета его занчения).
[element[attribute] $(«div[class]») Выбрать все <div> содержащие атрибут class .
element[attribute = value] $(«div[class=’myCls’]») Выбрать все <div> которые содержат атрибут class со значением myCls.
element[attribute *= «value»] $(«div[class *= ‘myCls’]») Выбрать все <div> элементы атрибут class которых содержит myCls.
element[attribute $= «value»] $(«div[class $= ‘myCls’]») Выбрать все <div> у которых атрибут class заканчивается как myCls. Сравнение регистрозависимое
element[attribute != «value»] $(«div[class != ‘myCls’]») Выбрать все <div> атрибут class, которых не равен myCls.
element[attribute ^= «value»] $(«div[class ^= ‘myCls’]») Выбрать <div> элементы атрибут class у которых начинается с myCls.
:contains(«value»)

$(«div:contains(‘учебник’)» Выбрать все <div> которые содержат текст ‘учебник’
:input $(«:input») Выбрать все поля ввода.
:button $(«:button») Выбрать все поля ввода с типом type=»button».
:radio $(«:text») Выбрать все поля ввода с типом =»radio»
:text $(«:radio») Selects all input elements where type=»text» .
«:checkbox» $(«:checkbox») Выбрать все чекбоксы.
:submit $(«:submit») Выбрать все поля формы с типом type=»submit».
:password $(«:password») Выбрать все поля формы с типом type=»password».
:reset $(«:reset») Выбрать все поля формы с типом type=»reset».
:image $(‘:image’) Выбрать все поля формы с типом type=»image».
:file $(‘:file’) Выбрать все поля формы с типом type=»file».
:enabled $(‘:enabled’) Выбрать все активные элементы.
:disabled $(‘:disabled’) Выбрать все заблокированные элементы.
:selected $(‘:selected’) Выбрать все selected элементы (для radiobutton).
:checked $(‘:checked’) Выбрать все checked элементы (для чекбоксов).
:hidden $(‘:hidden’) Выбрать все скрытые элементы.
:visible $(‘:visible’) Выбрать все видимые элементы.
:odd $(‘tr:odd’) Выбирает все нечетные строки. (1,3,5,7..)
:even $(‘tr:even’) Выбирает все четные строки.(0,2,4,6..)