Руководство по селекторам в jQuery

JavaScript чаще всего используется для получения или изменения содержимого или значения HTML-элементов на странице, а также для применения некоторых эффектов, таких как show, hide, animations и т. д. Но прежде чем вы сможете выполнить какое-либо действие, вам нужно найти или выбрать целевой HTML-элемент.

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

В этом разделе вы увидите некоторые распространенные способы выбора элементов на странице.

Выбор элементов по ID

Вы можете использовать селектор ID, чтобы выбрать один элемент с уникальным идентификатором на странице.

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

<script>
$(document).ready(function(){
    // Выделяем элемент с id mark
    $("#mark").css("background", "yellow");
});
</script>

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

Выбор элементов по классу

Селектор class может использоваться для выбора элементов с определенным классом.

Например, следующий код jQuery выберет и выделит элементы, имеющие атрибут class="mark", когда документ будет готов.

<script>
$(document).ready(function(){
    // Выделяем элементы c классом mark
    $(".mark").css("background", "yellow");
});
</script>

Выбор элементов по селектору

Селектор элементов может использоваться для выбора элементов на основе имени элемента.

Например, следующий код jQuery выберет и выделит все абзацы, то есть элементы <p> документа, когда он будет готов.

<script>
$(document).ready(function(){
    // Выделяем элементы c селектором p
    $("p").css("background", "yellow");
});
</script>

Выбор элементов по атрибуту

Вы можете использовать селектор атрибутов, чтобы выбрать элемент по одному из его атрибутов HTML, например target.

Например, следующий код jQuery выберет и выделит все элементы <input> с type="text", когда документ будет готов.

<script>
$(document).ready(function(){
    // Выделяем элементы input[type="text"]
    $('input[type="text"]').css("background", "yellow");
});
</script>

Выбор элементов с помощью составного CSS-селектора

Вы также можете комбинировать CSS-селекторы, чтобы сделать ваш выбор еще более точным.

Например, вы можете комбинировать селектор класса с селектором элемента, чтобы найти элементы в документе, который имеет определенный тип и класс.

<script>
$(document).ready(function(){
    // Выделяем только элементы абзаца с классом mark
    $("p.mark").css("background", "yellow");
  
    // Выделяем только элементы span внутри элемента с id mark
    $("#mark span").css("background", "yellow");
  
    // Выделяем элементы li внутри элементов ul
    $("ul li").css("background", "red");
  
    // Выделяем элементы li только внутри элемента ul с id mark
    $("ul#mark li").css("background", "yellow");
  
    // Выделяем элементы li внутри всех элементов ul с классом mark
    $("ul.mark li").css("background", "green");
  
    // Выделяем все элементы ссылок с target="_blank"
    $('a[target="_blank"]').css("background", "yellow");
});
</script>

Пользовательский селектор jQuery

В дополнение к определенным в CSS селекторам, jQuery предоставляет собственный настраиваемый селектор для дальнейшего расширения возможностей выбора элементов на странице.

<script>
$(document).ready(function(){
    // Выделяем нечетные строки таблицы
    $("tr:odd").css("background", "yellow");
  
    // Выделяем четные строки таблицы
    $("tr:even").css("background", "orange");
  
    // Выделяем первый элемент абзаца
    $("p:first").css("background", "red");
  
    // Выделяем последний элемент абзаца
    $("p:last").css("background", "green");
  
    // Выделяем все элементы ввода с типом text внутри формы
    $("form :text").css("background", "purple");
  
    // Выделяем все элементы ввода с типом password внутри формы
    $("form :password").css("background", "blue");
  
    // Выделяем все элементы ввода с типом submit внутри формы
    $("form :submit").css("background", "violet");
});
</script>

Подробнее см. Все селекторы jQuery.