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

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

JQuery поддерживает почти все селекторы, определенные в последних спецификациях CSS3, а также имеет свои собственные селекторы. Эти пользовательские селекторы значительно расширяют возможности выбора HTML-элементов на странице.

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

Выбор элементов по 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.

Похожие посты

Руководство по синтаксису в jQuery

Оператор jQuery обычно начинается со знака доллара ($) и заканчивается точкой с запятой (;). В jQuery знак доллара ($) — это просто псевдоним для jQuery. Давайте рассмотрим следующий пример кода, который демонстрирует синтаксис кода на jQuery. Приведенный выше пример просто отображает предупреждающее сообщение «Hello World!» пользователю. Объяснение кода Давайте разберем приведенный выше пример подробнее. Тег…

Руководство по методу animate() в jQuery

jQuery-метод animate() используется для создания пользовательских анимаций. Метод animate() обычно используется для анимации числовых CSS-свойств, таких как width, height, margin, padding, opacity, top, left и т. д., Но нечисловые свойства, такие как color или background-color нельзя анимировать с помощью базовой функциональности jQuery. Не все CSS-свойства являются анимируемыми. Как правило, любое CSS-свойство, которое принимает значения в…

Руководство по callback-функциям в jQuery

Операторы JavaScript выполняются построчно. Но, поскольку для завершения эффекта jQuery требуется некоторое время, код следующей строки может выполняться, пока предыдущий эффект все еще выполняется. Чтобы этого не происходило, jQuery предоставляет функцию обратного вызова (Callback) для каждого метода. Функция обратного вызова — это функция, которая выполняется после завершения эффекта. Функция обратного вызова передается в качестве аргумента…

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.