Селекторы jQuery

В этом уроке вы узнаете, что такое селекторы и как выбирать элементы HTML с помощью jQuery.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вы можете использовать селектор атрибутов, чтобы выбрать элемент по одному из его HTML-атрибутов, таких как атрибут ссылки href или атрибут типа ввода полей (например text) и т.д.

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

<script type="text/javascript">
  $(document).ready(function(){
    // Подсвечиваем все поля для ввода текста
    $('input[type="text"]').css("background", "yellow");
  });
</script>

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

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

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

<script type="text/javascript">
  $(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");

    // Подсвечиваем все ссылки которые открываются в новом окне
    $('a[target="_blank"]').css("background", "yellow");
  });
</script>

jQuery Custom Selector

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

<script type="text/javascript">
  $(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
    $("form :text").css("background", "purple");

    // Подсвечиваем все поля ввода имеющие тип password внутри элемента form
    $("form :password").css("background", "blue");

    // Подсвечиваем все кнопки имеющие тип submit внутри элемента form
    $("form :submit").css("background", "violet");
  });
</script>