JQuery valija tüübid - Õppige erinevaid JQuery valijate tüüpe

Lang L: none (table-of-contents):

Anonim

Sissejuhatus JQuery selektoritesse ja nende t

JavaScripti kasutamisel satute sageli olukorda, kus peate leidma ja muutma mõnda lehe sisu. Sellistel juhtudel peate kasutama JQuery valija tuge. JQuery abil on lehe elementide leidmine nende tüüpide, väärtuste, atribuutide jms põhjal üsna lihtne. Need elemendid põhinevad CSS-i valijatel ja kui olete juba mõnda praktiseerinud, näete, et lehtedelt elementide leidmine on koogitee. Sõltuvalt nende kasutamisest saame liigitada erinevaid JQuery selektorite tüüpe erinevat tüüpi. Vaatame mõnda enim kasutatud valijat.

Valija kasutamine

Järgnev on JQuery selektori süntaks:

  • $ (Valija) .meetodi nimi ():

Kui vajate, saate mitu valijat aheldada, lisades meetodite vahele tähe.

  • $ (valija) .meetod1 (). meetod2 (). meetod3 ();

JQuery valija tüübid

Siin on JQuery erinevat tüüpi valijat

1) JQuery põhivalijad

Lehe elemente saame valida nende ID, klassi või sildi nime järgi. Vajadusel võib kasutada ka nende kombinatsiooni. Järgnevalt on toodud mõned põhivalijad:

  • : header Selector - see on põhiline valija tüüp, mis võimaldab meil leida elemente nende HTML-i päistega. Selleks kasutame sõnalist valijat $ (“sektsioon h1, jaotis h2, jaotis h3”) või kasutame ka märksa lühemat valijat $ (“sektsioon: päis”).
  • : sihtvalija - see valija leiab dokumendi URI lehe või räsi sihtmärgid. Näiteks kui lehe URI on „https://example.com/#test”. Seejärel valib valija $ (“h2: sihtmärk”) elemendi

    .

  • : animeeritud selektor - seda selektorit kasutatakse kõigi animatsiooniga elementide otsimiseks. Pidage meeles, et animatsiooni valimiseks peab valija käitamisel see töötama.

2) Valijad põhinevad indeksil

JQueryl on oma indeksipõhiste selektorite komplekt, mis kasutab nullpõhist indekseerimist. Järgnevalt on toodud mõned näited:

  • : eq (k) selektor - see selektor tagastab elemendi indeksis k. See toetab ka negatiivseid indeksi väärtusi.
  • : lt (k) selektor - see selektor tagastab kõik elemendid, mille indeks on alla k. Nii nagu ülal, aktsepteeritakse ka negatiivseid väärtusi
  • : gt (n) selektor - see selektor on similor: lt (k) selektor, välja arvatud juhul, kui see töötab indeksi väärtuse korral, mis on suurem või võrdne k-ga.

3) Lapsevalijad

JQuery abil saate valida mis tahes elemendi lapsi nende tüübi või indeksi alusel.

  • : esimene laps - see valija tagastab kõik elemendid, mis on nende vanemate esimene laps.
  • : first-of-type - seda JQuery valijat kasutatakse kõigi elementide valimiseks, kes on esimene õde ja vend
  • : viimane laps - nagu nimigi ütleb, valib see valija vanema viimase lapse.
  • : last-of-type - see valib kõik lapsed, kelle vanemad on viimast tüüpi. Kui vanemaid on rohkem kui üks, valib see mitu elementi.
  • : Ainult tüüpi - saame kasutada tüübi ainus tüüpi valijat kõigi elementide, millel on sama tüüpi õed-vennad, leidmiseks.
  • : ainult laps - olukordades, kus peate leidma ja valima elemendid, mis on nende vanema ainus laps, saate seda valijat kasutada. Kui ühel vanemal lehel on rohkem kui üks laps, jäetakse see tähelepanuta.

4) Atribuutide valijad

Elemente saab nende atribuutide põhjal valida, järgnevalt on toodud mõned tavalisemad atribuutide valijad:

  • $ (“(Atribuut | = 'valuehere')") - „Atribuut sisaldab prefiksi valijat“ valib kõik elemendid atribuutidega, mille väärtus on võrdne või algab antud stringiga, millele järgneb sidekriips.
  • $ (“(Atribuut ~ = 'väärtus siin') ')) - see tagastab kõik elemendid atribuutidega, kus väärtus sisaldab antud sõna, mis on eraldatud tühikutega.
  • $ (“(Atribuut * = 'valuehere') ')) - see valib elemente, kus väärtus sisaldab antud alamstringi. Kuni väärtus langeb kokku, pole asukoht oluline

5) sisu valijad

Nagu nimigi ütleb, kasutatakse neid JQuery valijaid elementide sisemise sisu leidmiseks ja valimiseks.

  • : sisaldab (tekst) - seda kasutatakse elementide valimiseks, millel on kindlaksmääratud teksti sisu. Selle valija kasutamisel tuleb meeles pidada, et test on tõstutundlik.
  • : omab (valijat) - naaseb koos elementidega, mille sees on vähemalt üks element, mis vastab määratud valijale. Näiteks naaseb $ (“sektsioon: omab (h1)”) kõigi jaotistega, millel on element h1.
  • : tühi - see valija tagastab lehe elemendid, millel pole lapsi, sealhulgas tekstisõlmed.
  • : parent - seda valijat kasutatakse veebilehe kõigi elementide valimiseks, millel on vähemalt üks alamsõlm. Võite seda pidada pöördvõrdetuks tühjale JQuery selektorile.

6) Hierarhia valijad

  • $ (“Esivanemate järeltulija”) - seda kasutatakse vanemate kõigi järeltulija elementide valimiseks. Meie puhul võib järeltulija olla laps, lapselaps ja nii edasi.
  • $ (“Vanem> laps”) - seda kasutatakse juhtudel, kui peame valima ainult konkreetse vanema otsese lapse.
  • $ (“Eelmine + järgmine”) - juhuks, kui peame valima kõik elemendid, mis sobivad valijaga “järgmine” ja mille vanem on “eelmine”. Valitud elementide juurde astub kohe ka “eelmine”, mis on õde-vend.

7) Nähtavusvalijad

Kaks valijat: nähtav ja varjatud on saadaval ka JQuery'is. Neid saab kasutada vastavalt veebilehelt nähtavate või peidetud elementide leidmiseks. Veebilehe mis tahes elementi peetakse varjatuks, kui:

  • Selle kuvar ei ole korralikult reguleeritud.
  • Selle laius ja kõrgus on määratletud nullina.
  • Sellel on tüüp = peidetud, mida mainitakse vormi elemendis.
  • Elemendi kõik esivanemad on juba peidetud.

Pidage meeles, et isegi kui elemendi läbipaistmatus on seatud nulliks, loetakse see ikkagi nähtavaks, kuna see võtab siiski ruumi.

8) Vormi valijad

Aja ja vaeva säästmiseks on JQuery veebivormide sisendielementide selektorite sorteerimisversioonid.

Näiteks kui $ (“nupp, sisend (tüüp =“ nupp ”)”) töötab lehe nupu valimiseks, saame selle kiireks tegemiseks kasutada dollarit (“nupp”).

Samamoodi saame raadionuppu valida $ (“: radio”) abil.

Järeldus - JQuery valija tüübid

Valikud on JQuery üks olulisi funktsioone, JavaScripti valik pole nii intuitiivne ja jõuline, kui valijaid lisada JQuery kaudu, veebis programmeerimine on muutunud lihtsamaks.

Soovitatavad artiklid

See on juhend JQuery valijatüüpide kohta. Siin arutame süntaksiga JQuery selektorite erinevaid tüüpe. Võite lisateabe saamiseks vaadata ka järgmisi artikleid -

  1. jQuery meetodid
  2. jQuery Alternatiivid
  3. JQuery kasutusalad
  4. Mida Javascript teha saab?
  5. jQuery querySelector
  6. JQuery edenemisriba näidete juhend