✅ JQuery querySelector - Примеры для querySelector () в различных свойствах

Что такое jQuery querySelector?

Что такое jQuery querySelector?

jQuery querySelector выберите или найдите элемент DOM (объектная модель документа) в документе HTML. JQuery позволяет нам манипулировать элементами HTML. Он используется для выбора одного или нескольких элементов HTML на основе идентификатора, имени, типов, атрибутов, класса, значений атрибутов и т. Д. Он основан на существующих селекторах CSS.

Введение в querySelector

Метод querySelector () возвращает только первый элемент, который соответствует указанным селекторам CSS в документе. Если идентификатор в документе используется более одного раза, он вернет первый соответствующий элемент.

Синтаксис querySelector

Ниже приведен синтаксис querySelector:

querySelector (CSS селекторы)
Возвращает первый элемент, который соответствует указанным селекторам.
Чтобы вернуть все совпадающие элементы, мы используем метод querySelectorAll ().
Селекторы CSS, которые мы передаем, должны быть строкового типа.
Обязательно пройти CSS-селекторы.
Строка, которую мы передаем, должна быть допустимым селектором CSS.
Если переданная строка недопустима, генерируется исключение SYNTAX_ERRexception.
Если совпадение не найдено, возвращается ноль.
Сопоставление первого элемента выполняется с использованием предварительного заказа документа в глубину.
Определяет один или несколько селекторов CSS для соответствия элементу.
Для нескольких селекторов разделяйте запятой.
Символы, которые не являются частью стандартного синтаксиса CSS, должны быть экранированы с помощью символа обратной косой черты.

Примеры для метода querySelector ()

Ниже приведены примеры методов querySelector ():

В jQuery вы можете выбирать элементы на странице, используя множество различных свойств элемента: Тип, Класс, ID, Владение атрибутом, Значения атрибута и т. Д. Ниже приведен пример использования Jquery с использованием типа.

Пример № 1 - Выбор по типу

1. Следующий селектор запросов содержит два <a>

Объяснение приведенного выше кода: В этом примере мы можем наблюдать, что мы использовали два тега привязки, а внутри тега привязки мы передали гиперссылку двух изображений. Используя querySelector («a»). Style.backgroundColor = «red»; мы передали тег привязки («a») в querySelector. В методе querySelector (), если мы передадим несколько селекторов, он вернет первый элемент, который соответствует указанным селекторам. Хотя он содержит два тега привязки, первый найденный тег привязки применяет его style.backgroundColor = «red»; только для первого тега привязки.

Выход 1: Перед нажатием на кнопку («Нажми меня»).

Вывод 2: После нажатия на кнопку («Нажми меня») цвет фона цветка меняется на «красный».

Выход 3: При нажатии на гиперссылки будут открыты соответствующие изображения.

2. Этот querySelector также содержит два Но в приведенном ниже примере я изменил последовательность изображения. Сначала я сохранил гиперссылку в пустыне, а затем - гиперссылку цветка.

Объяснение приведенного выше кода: В этом примере мы также можем заметить, что мы использовали два тега привязки, а внутри тега привязки мы передали гиперссылку двух изображений. Используя querySelector («a»). Style.backgroundColor = «red»; мы передали тег привязки («a») в селектор запросов. На этот раз в querySelector () он сначала обнаружит гиперссылку «Пустыня», когда мы изменили последовательность. Хотя он содержит два тега привязки, первый найденный тег привязки применяет его style.backgroundColor = «red»; только для первого тега привязки.

Выход 1: На выходе мы можем наблюдать, что первое изображение - Пустыня. Поэтому из-за метода querySelector () цвет фона пустыни изменился на красный.

Выход 2: При нажатии на гиперссылку откроется изображение пустыни.

Выход 3: При нажатии на гиперссылку цветка, изображение цветка откроется.

Пример № 2 - Выбор по классу

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

Объяснение приведенного выше кода: В приведенном выше примере мы используем имя класса, а здесь имя класса - Selector. Одно и то же имя класса передается как для h2 (тег заголовка), так и для тега абзаца. Для метода querySelector () мы передаем имя класса, которое он проверит для конкретного имени класса в программе. Теперь он нашел те теги, которые имеют такое же имя класса, как упомянуто. Используя предварительный порядок обхода документа в глубину, выполняется сопоставление первого элемента. Первым элементом в примере, который содержит имя класса в качестве селектора, является h2 (заголовочный тег). Метод querySelector () извлекает тег h2 и с помощью style.backgroundColor применяет определенный цвет фона к тегу h2.

Выход 1: Перед нажатием кнопки («щелкни по мне») содержимое тега h2 не меняет цвет фона на синий.

Вывод 2: После нажатия на кнопку («нажмите меня») содержимое тега h2 меняет цвет фона на синий.

Пример № 3 - Выбор по ID

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

Объяснение приведенного выше кода: В примере мы выбираем с помощью идентификатора, идентификатор здесь - Селектор. Для метода querySelector () мы передаем идентификатор, который он проверит для конкретного имени идентификатора в программе. Теперь он нашел тег, имеющий то же имя, что и упомянутый. Используя предварительный порядок обхода документа в глубину, выполняется сопоставление первого элемента. Элемент в примере, который содержит имя идентификатора в качестве селектора, является тегом абзаца. Метод querySelector () извлекает тег абзаца и применяет конкретные изменения к содержимому в соответствии с указанным кодом.

Выход 1: Перед нажатием на кнопку «щелкни по мне» содержание тега абзаца будет «Это элемент ap с идентификатором = = селектор».

Вывод 2: После нажатия на кнопку «щелкнуть меня» содержимое тега абзаца будет изменено на «Изменить в тексте».

Использование jQuery querySelector

Ниже приведены две точки, объясняющие использование querySelector:

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

JQuery querySelector - Примеры для querySelector () в различных свойствах