Uvod v izbirnike JQuery in njihove t

Ko delate z JavaScriptom, se boste pogosto znašli v situaciji, ko boste morali najti in spremeniti nekaj vsebine na strani. V teh primerih boste morali uporabiti podporo izbirnika v JQuery. JQuery omogoča preprosto iskanje elementov strani na podlagi njihovih vrst, vrednosti, atributov itd. Ti elementi temeljijo na izbirnikih CSS in ko boste imeli nekaj prakse, boste videli, da je iskanje elementov na straneh potekalna poteza. Glede na njihovo uporabo lahko razvrstimo različne vrste izbirnikov JQuery v različne vrste. Oglejmo si nekaj najpogosteje uporabljenih izbirnikov.

Uporaba izbirnika

Sledi sintaksa izbirnika JQuery:

  • $ (Izbirnik) .ime metode ():

Če potrebujete, lahko več izbirnikov povežete tako, da med metodami dodate ».«.

  • $ (izbirnik) .method1 (). method2 (). method3 ();

Vrste izbirnika v JQueryju

Tu so različne vrste izbirnika v JQueryju

1) Osnovni izbirniki JQuery

Elemente strani lahko izberemo z uporabo njihovega ID-ja, razreda ali imena oznake. Po potrebi se lahko uporabi tudi kombinacija le-teh. Sledi nekaj osnovnih izbirnikov:

  • : header Selector - To je osnovna vrsta izbirnika, ki nam omogoča iskanje elementov z njihovimi HTML naslovi. To storimo tako, da uporabimo dobesedni izbirnik $ ("odsek h1, oddelek h2, oddelek h3") ali pa uporabimo tudi veliko krajši izbirnik $ ("odsek: glava").
  • : target Selector - Ta izbirnik najde cilje strani ali hash URI dokumenta. Na primer, če je URI strani "https://example.com/#test". Nato bo izbirnik $ ("h2: target") izbral element

    .

  • : animirani izbirnik - Ta izbirnik se uporablja za iskanje vseh elementov z animacijo. Upoštevajte, da mora biti animacija izbrana, če je izbran.

2) Izbirniki na podlagi indeksa

JQuery ima svoj nabor izbirnikov, ki temeljijo na indeksu, ki uporabljajo indeksiranje na podlagi nič. Sledi nekaj primerov:

  • : eq (k) Selector - Ta izbirnik vrne element v indeksu k. Podpira tudi negativne vrednosti indeksa.
  • : lt (k) Izbirnik - Ta izbirnik vrne vse elemente, ki imajo indeks manj kot k. Tako kot zgoraj so tudi negativne vrednosti sprejete
  • : gt (n) Izbirnik - Ta izbirnik je podoben: lt (k) Izbirnik, razen da deluje za vrednost indeksa, večjo ali enako k.

3) Otroški izbirniki

S pomočjo JQuery lahko izberete otroke katerega koli elementa glede na njihovo vrsto ali indeks.

  • : prvi otrok - Ta izbirnik bo vrnil vse elemente, ki so prvi otrok njihovih staršev.
  • : prva vrsta - Ta izbirnik JQuery se uporablja za izbiro vseh elementov, ki so prvi brat
  • : last-otrok - Kot že ime pove, bo ta izbirnik izbral zadnjega otroka starša.
  • : last-of-type - V tem primeru bodo izbrani vsi otroci, ki so pri svojem staršu zadnji. Če je več staršev, bo izbral več elementov.
  • : only-of-type - S pomočjo izbirnika edinega tipa lahko najdemo na strani vse elemente, ki imajo sorojenca iste vrste.
  • : only-otrok - V situacijah, ko morate najti in izbrati elemente, ki so edini otrok njihovega starša, lahko uporabite ta izbirnik. Če ima starš na strani več kot enega otroka, ga bo prezrl.

4) Izbirniki atributov

Elemente lahko izberemo na podlagi njihovih atributov, nekaj skupnih izbirnikov atributov:

  • $ ("(Atribut | = 'valuehere')") - "Atribut vsebuje izbirnik predpone" izbere vse elemente z atributi, pri katerih je vrednost enaka, ali se začne z dano vrstico, ki ji sledi veznik.
  • $ ("(Atribut ~ = 'valuehere')") - To vrne vse elemente z atributi, kjer vrednost vsebuje dano besedo, ločeno s presledki.
  • $ ("(Atribut * = 'valuehere')") - Izbral bo elemente, kjer vrednost vsebuje dano vrstico. Dokler se vrednost ujema, lokacija ne bo pomembna

5) Izbirniki vsebine

Kot že ime pove, se ti izbirniki JQuery uporabljajo za iskanje in izbiro vsebine znotraj elementov.

  • : vsebuje (besedilo) - Uporablja se za izbiro elementov, ki imajo v sebi določeno besedilno vsebino. Pri uporabi tega izbirnika je treba upoštevati, da je test tukaj odvisen od velikih in malih črk.
  • : ima (izbirnik) - Vrnil se bo z elementi, ki imajo vsaj en element v notranjosti, ki ustreza določenemu izbirniku. Na primer, $ ("section: has (h1)") se vrne z vsemi razdelki, ki imajo element h1.
  • : prazno - Ta izbirnik bo vrnil elemente strani, na katerih ni otrok, vključno z besedilnimi vozlišči.
  • : parent - Ta izbirnik se uporablja za izbiro vseh elementov spletne strani, ki imajo vsaj eno nadrejeno vozlišče. Lahko ga razumete kot obratno k: praznemu izbirniku JQuery.

6) Hierarhijski izbirniki

  • $ ("Potomec prednikov") - Uporablja se za izbiro vseh potomcev starševskih elementov. Potomec bi bil v našem primeru lahko otrok, vnuk in tako naprej.
  • $ ("Starš> otrok") - To se uporablja v primerih, ko moramo izbrati samo neposrednega otroka določenega starša.
  • $ ("Prejšnja + naslednja") - Če moramo izbrati vse elemente, ki se ujemajo z izbirnikom "Naslednji" in imajo nadrejeni "prejšnji". Izbrane elemente bo takoj nadaljeval "prejšnji", ki je sorodnik.

7) Izbirniki vidnosti

V JQueryju sta na voljo tudi dva izbirnika: vidni in: skriti. Z njimi je mogoče najti vidne ali skrite elemente na spletni strani. Vsak element na spletni strani se šteje za skrit, če:

  • Njegov zaslon pravilno nastavljen na nič.
  • Njegova širina in višina sta definirani na nič.
  • V elementu obrazca je vrsta = skrita.
  • Vsak prednik elementa je že skrit.

Upoštevajte, da četudi ima element neprozornost nastavljeno kot nič, bo še vedno viden kot viden, ker bo še vedno zavzel prostor.

8) Izbirniki obrazcev

Da bi prihranili čas in težave, ima JQuery razvrščene različice izbirnikov za vhodne elemente spletnih obrazcev.

Na primer, medtem ko bo $ ("gumb, vnos (tip = 'gumb')") deloval na izbiri gumba na strani, lahko za to hitro uporabimo $ (": gumb").

Podobno lahko uporabimo $ (": radio") za izbiro izbirnega gumba.

Zaključek - Vrste izbirnika v JQueryju

Izbirniki so ena od pomembnih lastnosti JQueryja, izbira v JavaScript ni tako intuitiven in robusten bit, z dodajanjem izbirnikov prek JQueryja je programiranje za splet postalo lažje.

Priporočeni članki

To je vodnik za Vrste izbirnika v JQueryju. Tukaj razpravljamo o različnih vrstah izbirnikov JQuery s sintakso. Za več informacij si lahko ogledate tudi naslednje članke -

  1. jQuery metode
  2. jQuery alternative
  3. Uporabe JQueryja
  4. Kaj lahko naredi Javascript?
  5. jQuery querySelector
  6. Vodnik po primerih JQuery Progress Bar

Kategorija:

Razvoj programske opreme