Видове селектор в JQuery - Научете различните видове селектори за JQuery

Съдържание:

Anonim

Въведение в селекторите на JQuery и техните t

Когато работите с JavaScript, често ще се окажете в ситуация, в която трябва да намерите и модифицирате някакво съдържание на страницата. В тези случаи ще трябва да използвате поддръжката на селектора в JQuery. JQuery улеснява намирането на елементи на страницата въз основа на техните типове, стойности, атрибути и др. Тези елементи се базират на CSS селектори и след като сте практикували, ще видите, че намирането на елементи в страниците е преглед. В зависимост от тяхното използване можем да класифицираме различни типове селектори на JQuery в различни типове. Нека да разгледаме някои от най-използваните селектори.

Използване на селектор

Следва синтаксис на JQuery Selector:

  • $ (Селектор) .methodname ():

Ако имате нужда, можете да веригирате няколко селектора, като добавите „.“ Между методите.

  • $ (селектор) .method1 () Method2 () method3 ()..;

Видове селектор в JQuery

Ето различните видове Selector в JQuery

1) Основни селектори за JQuery

Можем да изберем елементи на страницата, използвайки техния идентификатор, клас или името на маркера им. Ако е необходимо, може да се използва и комбинация от тях. Следват някои основни селектори:

  • : header Selector - Това е основен тип селектор, който ни позволява да намираме елементи с техните HTML заглавия. За целта използваме многословния селектор $ („секция h1, раздел h2, раздел h3“) или можем да използваме и много по-краткия селектор $ („section: header“).
  • : target Selector - Този селектор намира цели на страницата или хеш на URI на документа. Например, ако URI на страницата е „https://example.com/#test“. След това селекторът $ ("h2: target") ще избере елемента

    ,

  • : анимационен селектор - Този селектор се използва за намиране на всички елементи, които имат анимация. Имайте предвид, че за да бъде избрана анимацията, тя трябва да се изпълнява, когато се изпълнява селекторът.

2) Селектори въз основа на индекс

JQuery има собствен набор от базирани на индекси селектори, които използват нулево базирано индексиране. Следват няколко примера:

  • : eq (k) Селектор - Този селектор връща елемента в индекс k. Той също поддържа отрицателни стойности на индекса.
  • : lt (k) Селектор - Този селектор връща всички елементи, които имат индекс по-малък от k. Точно както по-горе се приемат и отрицателни стойности
  • : gt (n) Селектор - Този селектор е подобен: lt (k) Селектор, освен че работи за стойност на индекса, по-голяма или равна на k.

3) Детски селектори

Можете да използвате JQuery, за да изберете деца на всеки елемент въз основа на техния тип или индекс.

  • : първо дете - Този селектор ще върне всички елементи, които са първо дете на техните родители.
  • : първи от типа - Този селектор на JQuery се използва за избор на всички елементи, които са първият брат
  • : last-child - Както подсказва името, този селектор ще избере последното дете на родителя.
  • : last-of-type - Това ще избере всички деца, които са последни от типа си в родител. Ако има повече от един родител, той ще избере няколко елемента.
  • : only-of-type - Можем да използваме единствения тип селектор, за да намерим всички елементи, които имат братя и сестри от същия тип в страницата.
  • : only-child - В ситуации, когато трябва да намерите и изберете елементи, които са единственото дете на техния родител, можете да използвате този селектор. В случай, че родител на страницата има повече от едно дете, то ще бъде игнорирано.

4) Селектори на атрибути

Елементите могат да бъдат избрани въз основа на техните атрибути, следват някои общи избрани атрибути:

  • $ ("(Attribute | = 'valuehere')") - "Атрибутът съдържа префикс селектор" избира всички елементи с атрибути, където стойността е равна или започва с дадения низ, последван от тире.
  • $ ("(Attribute ~ = 'valuehere')") - Това връща всички елементи с атрибути, където стойността съдържа дадена дума, обозначена с интервали.
  • $ ("(Attribute * = 'valuehere')") - Той ще избере елементи, където стойността съдържа дадената подреда. Докато стойността съвпада, местоположението няма значение

5) Избор на съдържание

Както подсказва името, тези селектори за JQuery се използват за намиране и избор на съдържание вътре в елементите.

  • : съдържа (текст) - Използва се за избор на елементи, които имат определено текстово съдържание вътре. Едно нещо, което трябва да имате предвид, когато използвате този селектор, е, че тестът тук е чувствителен към регистъра.
  • : има (селектор) - Той ще се върне с елементи, които имат поне един елемент вътре, който съответства на посочения селектор. Например, $ ("section: има (h1)") ще се върне с всички секции, които имат h1 елемент.
  • : empty - Този селектор ще върне елементите на страницата, в които няма деца, включително текстови възли.
  • : родител - Този селектор се използва за избор на всички елементи на уеб страницата, които имат поне един дъщерен възел. Можете да го считате за обратна на: празния JQuery Selector.

6) Избор на йерархия

  • $ („Потомък на прародител“) - Използва се за избор на всички низходящи елементи на родител. Потомъкът в нашия случай може да бъде дете, внуче и т.н.
  • $ ("Родител> дете") - Използва се в случаите, когато трябва да изберем само прякото дете на конкретен родител.
  • $ ("Предишен + следващ") - в случай, че трябва да изберете всички елементи, които съответстват на селектора "следващ" и имат родителя "предишен". Избраните елементи също ще бъдат незабавно пристъпени от „предишен“, който е братята.

7) Селектори за видимост

В JQuery са налични и два селектора: видимо и: скрито. Те могат да се използват, за да намерите съответно видими или скрити елементи в уеб страницата. Всеки елемент в уеб страницата се счита за скрит, ако:

  • Неговият дисплей правилно е зададен на няма.
  • Ширината и височината му са определени нула.
  • Той има type = скрит, споменат в елемента на формата.
  • Всички предци на елемента вече са скрити.

Имайте предвид, че дори ако даден елемент има непрозрачност, зададен като Zero, той все още ще се счита за видим, защото все пак ще заема място.

8) Селектори за формуляри

За да спести време и караница, JQuery има сортиращи версии на селектори за входни елементи на уеб формуляри.

Например, докато $ ("бутон, вход (тип =" бутон ")") ще работи, за да изберете бутона в страницата, можем да използваме $ (": бутон"), за да го направим бързо.

По същия начин можем да използваме $ (": radio"), за да изберем радио бутона.

Заключение - Видове селектор в JQuery

Селекторите са една от важните характеристики на JQuery, изборът на JavaScript не е толкова интуитивен и здрав бит с добавянето на селектори чрез JQuery, програмирането за мрежата стана по-лесно.

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

Това е ръководство за Видовете селектор в JQuery. Тук обсъждаме различните типове селектори на JQuery със синтаксиса. Може да разгледате и следните статии, за да научите повече-

  1. jQuery методи
  2. jQuery Алтернативи
  3. Използва JQuery
  4. Какво може да направи Javascript?
  5. jQuery querySelector
  6. Ръководство за примерите на JQuery Progress Bar