InternetsWeb Design

Kāpēc mums ir nepieciešams un kā ierakstīt jQuery selektoru?

Mūsdienu web dizainers vajadzētu ne tikai apgūt pamatus HTML, CSS un JavaScript, bet arī jāspēj strādāt jQuery bibliotēku, kas koncentrējas uz mijiedarbību JavaScript ar HTML-dokumentu. Tas ļauj ātri piekļūt jebkuram elementa DOM (lietojumprogrammu programmēšanas interfeisu, kas nodrošina piekļuvi satura HTML failiem), un manipulēt ar tiem. Galvenās struktūrvienības bibliotēkas ir komanda. Lai piemērotu vienu vai otru komandu, jums ir nepieciešams jQuery selektoru.

Formula iezīmētājiem jQuery bibliotēkā

Ar jQuery selektori, pamatojoties uz izmantošanu CSS. Tie ir nepieciešami, lai izvēlētos mantas HTML failu, lai izmantotu tos radīt šīs un citas metodes, manipulējot ar tām (komandā). Meklēšana tiek veikta, izmantojot selektora $ () funkciju. Piemēram, $ ( "div").

Par selektori var klasificēt atkarībā no atlases elementiem:

  • pamata;
  • ar atribūtu;
  • hierarhija;
  • saturs;
  • par situāciju;
  • izvēle veidlapas laukus;
  • citi.

Galvenie selektori

90% gadījumu, ja izmanto šo bibliotēku lieto jQuery selektoru pieder pie galvenās grupas. Visi no tiem ir diezgan vienkāršs un skaidrs. Apskatīsim katru no tiem:

  • * - izvēlas visus lapas elementus, tostarp galvas, ķermeņa utt;.
  • p / div / sānjoslas / ... - tiek atlasīti visi elementi, kas attiecas uz iepriekš tag (ti p.div, sānjoslas, utt ...);
  • .myClass / p.myClass - atlasa elementus ar norādīto klases nosaukumu;
  • # MyID / p # myID -. Atlasa citu vienu objektu ar norādīto ID.

Šeit ir piemērs. Teiksim mums ir nepieciešams, lai izvēlētos visus elementus lapā ar nominālvērtību klases ieraksts būs šādi: (. PAR) $. Ja nepieciešams tikai p elementi šajā klasē, tad rakstiet: $ (p.par).

atribūts selektori

Jūs varat izmantot jQuery galveno-atlasītāju, ja mums ir nepieciešams, lai izvēlētos objektu, kas pieder jebkurai klasei, kurai ID vai atlasiet visus elementus lapā. Tomēr ir gadījumi, kad prece nav klasi vai ID. Tas ir tas, un ir izvēles ar atribūtu. Tās ļauj jums veikt izvēli par kādu atribūtā HTML elementiem, piemēram, href vai src. Šis atribūts ir rakstīts kvadrātiekavās [].

Visvienkāršākais piemērs: $ ([src]) - tiek atlasīti visi elementi, kas ir src atribūtu. Tas ir iespējams, lai sašaurinātu paraugu, norādot konkrētu atribūta vērtība: $ ([src = 'http: // vietne / article / 132222 / vērtība "]).

Jūs varat izmantot dažas jQuery selektori, ja jūs vēlaties, lai sašaurinātu izvēli. Piemēram, $ (p [color = blue] [size = 12]), - tiek atlasīti tikai tie elementi, p, kas ir zilā krāsā un izmēru 12.

selektori saturs

Tādā gadījumā, ja jūs nevarat izvēlēties elementus, pamatojoties uz kritērijiem, vai pamata pārslēdzējiem, jums vajadzētu atsaukties uz to saturu. Pavisam ir 4 selektors šāda veida:

  • : Satur - izvēlas priekšmetus, kas satur norādīto tekstu;
  • : Vai - izvēlas elementi, kas satur citas raksturīgās līnijas elementu;
  • : Parent - izvēlas elementi, kas satur jebkuru citu;
  • : Tukšs - izvēlas elementi, kas nav iekļauts jebkurš cits.

Šeit ir piemērs. Lai atlasītu visus elementus div, kas satur tekstu Sveiki, jums ir nepieciešams, lai rakstītu $ (div: satur ( "Sveiki")).

selektori hierarhija

Ir vēl viens veids, lai izvēlētos elementus JQuery, proti - saskaņā ar to hierarhiju (tas ir, attiecība otru HTML lapā). Daudz no viņiem, tāpēc mēs piedāvājam divas no populārākajiem, "bērns" un "pēcnācējs".

Pirmajā gadījumā tiek atlasīti elementi, kas ir tiešie pēcnācēji (bērniem) no konkrētā elementa (sencis). Piemēram, lai izvēlētos elementus sarakstā gaismas klasē, kas ir bērns NAV sarakstu, tad jums ir nepieciešams, lai rakstītu: $ (ul # NAV> li.light).

Otra lieta - vairāk kopumā. Tur var atlasīt un netiešie pēcteči elementa. Piemēram, lai atlasītu saitēm saraksta NAV izrakstīt: $ (ul # NAV a) apakšpunktu.

Tādējādi, JQuery elementus var izvēlēties dažādos veidos, izmantojot parametrus, piemēram, klases, ID, atribūtiem, saturu vai hierarhijā HTML dokumentu elementiem.

Similar articles

 

 

 

 

Trending Now

 

 

 

 

Newest

Copyright © 2018 lv.birmiss.com. Theme powered by WordPress.