Uvod u izbornike JQuery i njihove t

Kad radite s JavaScript-om, često ćete se naći u situaciji u kojoj trebate pronaći i izmijeniti neki sadržaj na stranici. U tim slučajevima morat ćete koristiti podršku selektora u JQueryju. JQuery olakšava pronalaženje elemenata stranice na temelju njihovih vrsta, vrijednosti, atributa itd. Ovi se elementi temelje na CSS-ovim biračima i nakon što ste se uvježbali, vidjet ćete da pronalaženje elemenata na stranicama predstavlja poteškoću. Ovisno o njihovoj uporabi, možemo klasificirati različite tipove JQuery Selektora u različite vrste. Pogledajmo neke od najčešće korištenih odabirača.

Korištenje Selektora

Slijedi sintaksa odabirača JQuery:

  • $ (Izbornik) .methodname ():

Ako trebate, možete povezati više odabirača dodavanjem "." Između metoda.

  • $ (selektor) .method1 () method2 () method3 ()..

Vrste odabirača u JQueryju

Ovdje su različite vrste Selektora u JQueryju

1) Osnovni izbornici JQuery

Elemente stranice možemo odabrati koristeći njihov ID, Klasu ili naziv njihove oznake. Po potrebi se može koristiti i kombinacija ovih. Evo nekoliko osnovnih odabirača:

  • : Selektor zaglavlja - Ovo je osnovna vrsta selektora koja nam omogućava pronalaženje elemenata s njihovim HTML naslovima. Da bismo to učinili, koristimo verbose selektor $ ("odjeljak h1, odjeljak h2, odjeljak h3") ili također možemo upotrijebiti znatno kraći $ ("section: header") izbornik.
  • : target Selector - Ovaj selektor pronalazi ciljeve stranice ili hash-a URI-ja dokumenta. Na primjer, ako je URI na stranici "https://example.com/#test". Tada će selektor $ ("h2: target") odabrati element

    ,

  • : animirani selektor - Ovaj se izbornik koristi za pronalaženje svih elemenata koji imaju animaciju. Imajte na umu da se animacija mora odabrati kad se selektor pokrene.

2) Selektori na temelju Indeksa

JQuery ima vlastiti skup odabirača koji se temelje na indeksima i koji koriste indeksiranje na temelju nule. Evo nekoliko primjera:

  • : eq (k) Selector - Ovaj selektor vraća element u indeksu k. Podržava i negativne vrijednosti indeksa.
  • : lt (k) Selektor - Ovaj selektor vraća sve elemente koji imaju indeks manji od k. Kao i gore, prihvaćaju se i negativne vrijednosti
  • : gt (n) Selektor - Ovaj je selektor sličan: lt (k) Selektor osim što djeluje za vrijednost indeksa veću ili jednaku k.

3) Dječji birači

Pomoću JQuery možete odabrati djecu bilo kojeg elementa na temelju njihove vrste ili indeksa.

  • : prvo dijete - ovaj će selektor vratiti sve elemente koji su prvo dijete njihovih roditelja.
  • : prva vrsta - Ovaj se odabirnik JQuery koristi za odabir svih elemenata koji su prvi brat
  • : last-child - kao što ime sugerira, ovaj će selektor odabrati posljednje dijete roditelja.
  • : last-of-type - Ovo će odabrati svu djecu koja su posljednjeg tipa u roditelju. Ako postoji više roditelja, odabirat će više elemenata.
  • : only-of-type - Možemo upotrijebiti birač jedinog tipa da bismo pronašli sve elemente koji imaju braću i sestre iste vrste na stranici.
  • : only-child - U situacijama kada morate pronaći i odabrati elemente koji su jedino dijete njihovog roditelja, možete koristiti ovaj selektor. U slučaju da roditelj na stranici ima više od jednog djeteta, to će se zanemariti.

4) Odabir atributa

Elementi se mogu odabrati na temelju njihovih atributa, evo nekoliko uobičajenih odabira atributa:

  • $ ("(Attribute | = 'valuehere')") - "Atribut sadrži prefiks selektor" odabire sve elemente s atributima gdje je vrijednost jednaka ili započinje zadanim nizom, a slijedi crtica.
  • $ ("(Attribute ~ = 'valuehere')") - Vraća sve elemente s atributima gdje vrijednost sadrži zadanu riječ koja je ograničena razmacima.
  • $ ("(Attribute * = 'valuehere')") - Bit će odabrani elementi s kojima vrijednost sadrži zadani podstitak. Sve dok se vrijednost podudara, lokacija neće biti važna

5) Odabir sadržaja

Kao što ime sugerira, ovi JQuery Selektori koriste se za pronalaženje i odabir sadržaja unutar elemenata.

  • : sadrži (tekst) - koristi se za odabir elemenata koji imaju unutra određeni tekstualni sadržaj. Jedna stvar koja treba imati na umu pri korištenju ovog selektora je da je test ovdje osjetljiv na velika i mala slova.
  • : has (selector) - Vraćaće se sa elementima koji u sebi imaju barem jedan element koji odgovara specificiranom selektoru. Na primjer, $ ("odjeljak: ima (h1)") će se vratiti sa svim odjeljcima koji imaju h1 element.
  • : prazno - Ovaj će selektor vratiti elemente stranice na kojima nema djece, uključujući tekstualne čvorove.
  • : parent - Ovaj se izbornik koristi za odabir svih elemenata web stranice koji imaju barem jedan podređeni čvor. Možete to smatrati obrnutim prema: praznom izborniku JQuery.

6) Odabir hijerarhije

  • $ ("Potomak predaka") - koristi se za odabir svih elemenata roditelja koji potječu. Potomak u našem slučaju može biti dijete, unučad i tako dalje.
  • $ ("Roditelj> dijete") - koristi se u slučajevima kada trebamo odabrati samo izravno dijete određenog roditelja.
  • $ ("Prethodna + sljedeća") - u slučaju da trebamo odabrati sve elemente koji odgovaraju selektoru "sljedeći" i koji imaju roditelj "prethodni". Odabrani elementi će odmah biti nastavljeni s "prethodnim", što je braća.

7) Selektori vidljivosti

U JQueryju su također dostupna i dva odabirača: vidljivi i: skriveni. Oni se mogu koristiti za pronalaženje vidljivih ili skrivenih elemenata na web stranici. Bilo koji element na web stranici smatra se skrivenim ako:

  • Pravilno je prikazan na nijedan.
  • Njegova širina i visina su definirani na nuli.
  • Ima element = skriveno spomenuto u elementu obrasca.
  • Svi preci elementa su već skriveni.

Imajte na umu da čak i ako element ima neprozirnost postavljenu kao Nula, i dalje će se smatrati vidljivom jer će i dalje zauzimati prostor.

8) Selektori oblika

Radi uštede vremena i gnjavaže, JQuery ima razvrstane verzije odabirača za unos elemenata web obrazaca.

Na primjer, dok će $ ("gumb, ulaz (tip = 'gumb')") raditi na odabiru gumba na stranici, za brzo bi to mogli koristiti $ (": gumb").

Slično tome, možemo koristiti $ (": radio") za odabir radio gumba.

Zaključak - Vrste odabirača u JQueryju

Selektori su jedna od važnih značajki JQuery-a, odabir na JavaScriptu nije toliko intuitivan i robustan bit, uz dodavanje odabirača putem JQuery-a, programiranje za web postalo je lakše.

Preporučeni članci

Ovo je vodič za Tipove selektora u JQueryju. Ovdje smo razgovarali o različitim vrstama JQuery Selectors sa Sintaksom. Također možete pogledati sljedeće članke da biste saznali više -

  1. jQuery metode
  2. jQuery alternative
  3. Koristi JQuery
  4. Što Javascript može učiniti?
  5. jQuery upitSelector
  6. Vodič za primjere JQuery Progress Bar-a

Kategorija:

Razvoj softvera