Какво е 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 можете да изберете елементи в дадена страница, използвайки много различни свойства на елемента, те са Тип, Клас, ИД, Притежание на атрибут, Стойности на атрибутите и т.н. По-долу е примерът на Jquery, като използвате type.

Пример №1 - Избор по тип

1. Следващият селектор на заявки съдържа две <a>

Обяснение на горния код: В този пример можем да отбележим, че сме използвали два кодове на котва и вътре в тага на котва сме преминали хипервръзката на две изображения. Чрез използване на querySelector ("a"). Style.backgroundColor = "червен"; ние предадохме котвата ("a") на querySelector. В метода querySelector (), ако предадем множеството селектори, той ще върне първия елемент, който съответства на посочените селектори. Въпреки че съдържа два маркера за закрепване, първият открит маркер за котва, приложен неговия style.backgroundColor = “червен”; до само за първи маркер за котва.

Резултат 1: Преди да кликнете върху бутона ("Кликнете върху мен").

Резултат 2: След като кликнете върху бутона („Кликнете върху мен“) цветът на фона на цветя се променя на „червен“.

Резултат 3: При щракване върху хипервръзките ще се отворят съответните изображения.

2. Тази заявкаSelector също съдържа две, но в по-долу примера аз промених последователността на картината. Запазих първо пустинната хипервръзка, после хипервръзката на цветето втората.

Обяснение на горния код: В този пример също можем да отбележим, че сме използвали два кода на котва и вътре в тага на котва сме преминали хипервръзката на две изображения. Чрез използване на querySelector ("a"). Style.backgroundColor = "червен"; ние предадохме кода за маркиране ("a") на селектора на заявки. Този път в querySelector () първо ще открие хипервръзката „Desert“, докато сменихме последователността. Въпреки че съдържа два маркера за закрепване, първият открит маркер за котва, приложен неговия style.backgroundColor = “червен”; до само за първи маркер за котва.

Резултат 1: В изхода можем да наблюдаваме, че първото изображение е Desert. Поради метода querySelector () цветът на фона на пустинята се промени в червен.

Резултат 2: При щракване върху хипервръзката изображението на пустинята ще се отвори.

Резултат 3: При щракване върху хипервръзката на цветето изображението на цветя ще се отвори.

Пример №2 - Избор по клас

В този по-долу пример ние избираме с помощта на името на класа.

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

Резултат 1: Преди да кликнете върху бутона („кликнете върху мен“), съдържанието на маркера h2 не променя цвета на фона на син.

Резултат 2: След като кликнете върху бутона („щракнете върху мен“), съдържанието на маркера h2 променя цвета си на фона на син.

Пример №3 - Избор по идентификатор

В този пример по-долу избираме с помощта на id.

Обяснение на горния код: В примера ние избираме, използвайки id, id тук е Selector. За метода querySelector () предаваме идентификатора, той ще провери за конкретното име на ID в програмата. Сега той е намерил маркера, който има същото име за идентификация, както бе споменато. Използвайки преминаването на предварителна заявка за дълбочина на първия документ, съответствието на първия елемент се извършва. Елементът в примера, който съдържа името на id като Selector, е таг за абзаци. Методът querySelector () извлича маркера на абзаца и прилага конкретните промени в съдържанието според споменатия код.

Резултат 1: Преди да кликнете върху бутона „щракнете върху мен“ съдържанието на маркера за абзаци ще бъде „Това е ap елемент с селектор id =“.

Резултат 2: След натискане на бутона „щракнете върху мен“ съдържанието на маркера за абзаци ще бъде променено на „Промяна в текста“.

Използване на jQuery querySelector

По-долу са описани двете точки, които обясняват употребата на querySelector:

  • Кодовете на jQuery са по-прецизни, по-къси и по-прости от стандартните JavaScript кодове. Той може да изпълнява различни функции.
  • Призивът към querySelector () връща първия елемент, докато избира един, така че е по-бърз и също така по-кратък за писане.

Препоръчителни статии

Това е ръководство за jQuery querySelector. Тук обсъждаме какво е jQuery querySelector, въведение в querySelector, синтаксис и примера на Jquery, като използваме type. Можете също да прегледате и другите ни свързани статии, за да научите повече -

  1. jQuery Събития
  2. Използва JQuery
  3. jQuery методи
  4. Как да инсталирате Jquery?
  5. HTML събития
  6. Топ 5 HTML атрибута на събитията с примери
  7. Хвърли срещу Хвърли | Топ 5 разлики, които трябва да знаете
  8. Ръководство за примерите на JQuery Progress Bar

Категория:

Разработване на софтуер