Turinys
DOM medisThe DOM medis yra hierarchinė mūsų dokumento turinio organizacija HTMLTai labai naudinga identifikuojant skirtingus minėtame dokumente esančius elementus, nes turėdami unikalius identifikatorius mes galime priskirti skirtingus pavadinimus struktūroms, kurios, nepaisant panašių etikečių, turi skirtingą tikslą.Anksčiau problema buvo ta, kad nebuvo įmanoma lengvai vaikščioti DOM medis realiu laiku, nes reikėjo sukurti sudėtingas procedūras ir funkcijas Javascripttačiau visa tai pasikeitė atsiradus „jQuery“. Ši sistema padėjo pateikti požiūrį į naudojimą Javascript ne ekspertams tai vėl išpopuliarino jo populiarumą.
Vienas iš įdomiausių dalykų, kuriuos atlikti gali atrodyti labai sudėtinga, yra pasirinkti elemento vaikaiKalbėdami apie hierarchinę struktūrą, galime kalbėti apie šeimą, kurioje tėvas yra aukščiausias elementas, o jo vaikai yra elementai, kuriuos valdo jo apsiaustas ar apsauga.
Tarkime, pavyzdžiui, turime nesutvarkytą sąrašą ar elementą , logiška manyti, kad jų vaikai yra elementai kad jame gali būti, jei norime pasirinkti elementą Tam tikras sąrašas gali atrodyti labai sudėtinga užduotis, tačiau su „jQuery“ mes galime tai pasiekti labai paprastai ir švariai.
MetodaiNorėdami tai padaryti, mes turime tik duoti savo pirminiam elementui unikalų identifikatorių ir tada iškviesti metodą jo parinkiklyje vaikai (), tokiu būdu mes gausime poziciją, pagal kurią galime pereiti prie metodo kiekvienas () kiekvienas jo vaikas.
Toliau pateiktame kode rasite nedidelį pavyzdį, apie ką mes kalbame:
DOM manipuliavimas naudojant „JQuery“
- Sūnus 1
- Sūnus 2
- Sūnus 3
Pirmiausia pradedame įtraukdami „jQuery“ nuo CDN oficialiai, todėl mums nereikia išsaugoti failo su šaltinio kodu savo kompiuteryje, todėl naudojant naršyklę ir prisijungus prie internetas galime naudoti šį pavyzdį.
Tada sukuriame nedidelį scenarijų, kuriame nurodome, kai spustelite elementą su ID Pradėti kodas yra vykdomas viduje.
Vykdomas kodas tiesiog išreiškia, kad elemento su ID reikia ieškoti tėtis ir šiam selektoriui taikome metodą vaikai () surasti savo vaikus ir galiausiai su metodu kiekvienas () Mes einame per kiekvieną iš jų, kodo atveju yra trys, kurie leis mums keliauti, ir tai turėtų parodyti kiekvieno teksto tekstą. Pažiūrėkime, kaip aukščiau pateiktas kodas veikia mūsų naršyklėje:
DIDELIS
DIDELIS
Nors vaikų elementų paieška yra gana naudinga, yra metodas, leidžiantis mums atlikti tiesioginę paiešką naudojant eiti, bangos pamokas. Mes kreipiamės į metodą rasti (), šis metodas ras visas jį iškviečiančio parinkiklio antrinių elementų atitiktis.
Su tuo mes galime turėti puikų ir paskambink a rasti () ant jo, kad surastumėte klases ar ypač ID, su kuriais mes pasiekiame kitą tašką.
Įpurškimo stiliaiKai radome norimą elementą SAULĖ, daug kartų nenorime spausdinti jo turinio, jei jo tam tikru būdu nepažymime, įdomus būdas yra pridėti stilių prie minėto elemento, tai leis mums manipuliuoti CSS mūsų puslapio netiesiogiai ir kad galėtume išryškinti svarbius jo elementus, todėl galime matyti kažką dinamiškesnio savo dokumente HTML.
Toliau pateiktame kode pamatysime, kaip ketiname įgyvendinti metodo naudojimą rasti () ir tada stiliaus injekcija dėl rastų elementų tokiu būdu galime priartėti prie to, ką galime duoti naudingo realiame gyvenime:
DOM manipuliavimas naudojant „JQuery“
- Sūnus 1
- Sūnus 2
- Sūnus 3
Šiame kode, jei atrodome, turime kažką labai panašaus į ankstesnį triuką, ką pakeitėme tai, kad pirmiausia čia yra etiketės turinys, o ne elemento elementai rasti () surasti elementą su klase paryškinti ir į tą elementą su metodu css () Mes ketiname į jį įterpti stilių, šiuo atveju nustatysime jį kaip raudoną fono spalvą.
Pažiūrėkime, kaip jis atrodo mūsų naršyklėje spustelėjus mygtuką pabandyk:
Tėvų () metodasTam mes turime metodą tėvai () kad panašiu būdu vaikai () suranda iškviečiamo selektoriaus tėvą. Jei prie to pridėsime kiekvieną () metodą, gausime visą elemento paveldėjimą, pavyzdžiui, jei jis yra atnešime elementą ir jei mes einame aukščiau hierarchijos į elementą ir taip toliau, kol pasieksime elementą, nes pagal hierarchiją visi jie yra tėvai pagal savo sudėtį.
Kitame kode pamatysime, kaip galime sukurti scenarijų „jQuery“ tai leidžia mums pasiekti šį tikslą parodyti visiems mūsų pasirinkto elemento tėvams:
DOM manipuliavimas naudojant „JQuery“
- Sūnus 1
- Sūnus 2
- Sūnus 3
Struktūra labai panaši į ankstesnius pavyzdžius, tačiau čia mes keičiame, šį kartą naudojame klasę paryškinti kaip selektorius ir taikome metodą tėvai () ir tada su kiekvienu () galime pereiti hierarchiją iš vidaus į išorę.
Pažiūrėkime, kaip atrodo aukščiau pateiktas kodas, kai jį paleidžiame savo naršyklėje:
DIDELIS
Ankstesnis triukas padeda mums nustatyti elemento genealoginį medį, galbūt tai padės mums derinti savo HTML, bet kas atsitiks, jei norime gauti konkretų tėvą, pavyzdžiui, jei turime kelis įrašus, bet norime, kad būtų pabrėžtas konkretaus tėvas.
Mes neturėtume jaudintis, šiuo atveju turime metodą tėvai iki (), tai mes galime nurodyti atvykimo tašką ir galime padaryti a HTML injekcija Norėdami paryškinti visą bloką, pažiūrėkime šį kodą, kuriame pritaikėme šias žinias:
DOM manipuliavimas naudojant „JQuery“
- Sūnus 1
- Sūnus 2
- Sūnus 3
Jei pastebime, kad šis kodas šiek tiek skiriasi nuo ankstesnio, pagrindinis pokytis įvyksta skambinant metodui, kurį ką tik paaiškinome tėvai iki () į kurią praėjome div, kur bus sustabdyta pasirinkimo elemento, kurį mes veikiame, paieška.
Norėdami parodyti, kad viskas veikia, mes šiek tiek suleidome HTML Norėdami pažymėtą skyrių nuspalvinti raudonai, pažiūrėkime, kaip tai atrodo mūsų naršyklėje, kai spustelime pabandyk:
Tuo mes baigėme savo pamoką, tai tik nedidelė visos galios demonstracija „jQuery“ manipuliuoti SAULĖ iš mūsų HTML, svarbu tai, kad turime daug praktikuoti ir labai gerai perskaityti dokumentus, nes su jais galėsime įgyti papildomų žinių ir išteklių, kad galėtume pakelti savo išsivystymo lygį.Ar jums patiko ir padėjo ši pamoka?Galite apdovanoti autorių paspausdami šį mygtuką, kad suteiktumėte jam teigiamą tašką
