✅ JQuery querySelector - Приклади для querySelector () у різних властивостях

Що таке jQuery querySelector?

Що таке jQuery querySelector?

jQuery querySelector виберіть або знайдіть елемент DOM (модель об’єкта документа) в документі HTML. JQuery дозволяє нам маніпулювати елементами HTML. Він використовується для вибору одного або декількох елементів HTML на основі id, імені, типів, атрибутів, класу, значень атрибутів тощо. Він заснований на існуючих селекторах CSS.

Вступ до запитуSelector

Метод querySelector () повертає лише перший елемент, який відповідає вказаним селекторам (-ям) CSS в документі. Якщо ідентифікатор в документі використовується більше одного разу, він поверне перший елемент, що відповідає.

Синтаксис запитуSelector

Нижче наведено синтаксис запитуSelector:

querySelector (CSS селектори)
Він повертає перший елемент, який відповідає вказаним селекторам.
Щоб повернути всі елементи, які відповідають, використовуємо метод querySelectorAll ().
Вибірники CSS, які ми передаємо, повинні мати тип рядка.
Обов’язково потрібно пройти селектори CSS.
Рядок, який ми проходимо, повинен бути дійсним селектором CSS.
Якщо передана рядок недійсна, передається SYNTAX_ERRexception.
Якщо не буде знайдено відповідності, воно повернеться до нуля.
Узгодження першого елемента здійснюється за допомогою попереднього замовлення документа заздалегідь попереднього замовлення.
Визначає один або кілька CSS-селекторів для відповідності елементу.
Для декількох селекторів розділіть їх комою.
Символи, які не входять до стандартного синтаксису CSS, повинні бути використані символом зворотної косої риси.

Приклади методу querySelector ()

Нижче наведено приклади методів querySelector ():

У jQuery ви можете обрати елементи на сторінці, використовуючи безліч різних властивостей елемента, якими вони є Тип, Клас, Ідентифікатор, Наявність атрибутів, Значення атрибутів тощо. Нижче наводиться приклад Jquery за допомогою типу.

Приклад №1 - Вибір за типом

1. Наступний селектор запитів містить два <a>

Пояснення наведеного вище коду: У цьому прикладі ми можемо помітити, що ми використовували два теги прив’язки, а всередині тега якоря ми передали гіперпосилання двох зображень. Використовуючи querySelector ("a"). Style.backgroundColor = "червоний"; ми передали тег прив’язки ("a") до querySelector. У методі querySelector (), якщо ми передамо кілька селекторів, він поверне перший елемент, який відповідає вказаним селекторам. Хоча він містить два теги якоря, перший знайдений тег якоря, застосував його style.backgroundColor = “червоний”; лише для першого тега прив’язки.

Вихід 1: Перш ніж натиснути кнопку («Клацніть на мене»).

Вихід 2: Після натискання на кнопку ("Клацніть") колір фону квітки змінюється на "червоний".

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

2. Цей запитSelector також містить два Але в наведеному нижче прикладі я змінив послідовність малюнка. Я зберіг спочатку гіперпосилання пустелі, потім гіперпосилання квітки друге.

Пояснення наведеного вище коду: У цьому прикладі ми також можемо помітити, що ми використовували два теги прив’язки, а всередині тега якоря ми передали гіперпосилання двох зображень. Використовуючи querySelector ("a"). Style.backgroundColor = "червоний"; ми передали тег прив’язки ("a") до селектора запитів. Цього разу у querySelector () вона спочатку з’ясує гіперпосилання «Пустеля», коли ми змінювали послідовність. Хоча він містить два теги якоря, перший знайдений тег якоря, застосував його style.backgroundColor = “червоний”; лише для першого тега прив’язки.

Вихід 1: На виході ми можемо спостерігати, що перше зображення - пустеля. Тому через метод querySelector () колір пустелі пустелі змінився на червоний.

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

Вихід 3: При натисканні на гіперпосилання квітки відкриється зображення квітки.

Приклад №2 - Вибір за класом

У цьому нижче прикладі ми вибираємо, використовуючи назву класу.

Пояснення вищевказаного коду: У наведеному вище прикладі ми використовуємо назву класу, і тут назва класу - Selector. Те саме ім'я класу передається як h2 (тег заголовка), так і тегу абзацу. Для методу querySelector () ми передаємо ім'я класу, він перевірятиме назву конкретного класу в програмі. Тепер він знайшов ті теги, які мають те саме ім’я класу, що й згадане. Використовуючи попереднє замовлення документа за попереднім замовленням на глибину, відбувається відповідність першого елемента. Перший елемент у прикладі, який містить ім'я класу як Selector, - h2 (тег заголовка). Метод querySelector () отримує тег h2 і за допомогою style.backgroundColor застосовує особливий колір фону до тегу h2.

Вихід 1: Перед натисканням на кнопку ("натисніть на мене") вміст тегу h2 не змінює колір фону на синій.

Вихід 2: Після натискання на кнопку ("натисніть на мене") вміст тегу h2 змінює свій колір фону на синій.

Приклад №3 - Вибір за ідентифікатором

У цьому нижче прикладі ми вибираємо за допомогою id.

Пояснення наведеного вище коду: У прикладі ми вибираємо, використовуючи id, ідентифікатор тут - Selector. Для методу querySelector () ми передаємо ідентифікатор, він перевірятиме конкретне ім'я ідентифікатора в програмі. Тепер він знайшов тег, який має те саме ім'я ідентифікатора, як і згадане. Використовуючи попереднє замовлення документа за попереднім замовленням на глибину, відбувається відповідність першого елемента. Елементом у прикладі, який містить ім'я ідентифікатора як Selector, є тег абзацу. Метод querySelector () отримує тег абзацу і застосовує конкретні зміни до вмісту відповідно до згаданого коду.

Вихід 1: Перш ніж натиснути кнопку "натисніть на мене", вміст тегу абзацу буде "Це елемент додатка з селектором id =".

Вихід 2: Після натискання на кнопку "натисніть на мене" вміст тегу абзацу буде змінено на "Змінити текст".

Використання jQuery querySelector

Нижче наведено два пункти, що пояснюють використання querySelector:

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

JQuery querySelector - Приклади для querySelector () у різних властивостях