DOM manipulācijas ar jQuery

DOM koks DOM koks ir mūsu dokumenta satura hierarhiskā organizācija HTMLTas ir ļoti noderīgi, identificējot dažādus dokumentā ietvertos elementus, jo ar unikāliem identifikatoriem mēs varam piešķirt dažādus nosaukumus struktūrām, kurām, neskatoties uz līdzīgām etiķetēm, ir atšķirīgs mērķis.
Agrāk problēma bija tā, ka nebija iespējams viegli iziet cauri DOM koks reālajā laikā, jo bija jāizveido apgrūtinošas rutīnas un funkcijas Javascript, tomēr tas viss mainījās līdz ar izskatu jQuery. Šī sistēma palīdzēja nodrošināt pieeju Javascript neekspertiem tas lika viņa popularitātei atkal pieaugt.
Viena no interesantākajām lietām, kas var šķist ļoti sarežģīta, ir izvēlēties stihijas bērniRunājot par hierarhisku struktūru, mēs varam runāt par ģimeni, kur tēvs ir visaugstākais elements, un viņa bērni ir elementi, kas valda zem viņa apvalka vai aizsardzības.
Pieņemsim, ka, piemēram, mums ir nesakārtots saraksts vai elements , ir loģiski domāt, ka viņu bērni ir elementi ko tas var saturēt, ja mēs vēlamies atlasīt elementu Konkrēts saraksts var šķist ļoti sarežģīts uzdevums, bet ar jQuery mēs to varam sasniegt ļoti vienkāršā un tīrā veidā.
MetodesLai to izdarītu, mums tikai jāpiešķir vecāku elementam unikāls identifikators un pēc tam jāizsauc šī atlasītāja metode bērni (), ar to mēs iegūsim pozīciju, kurā mēs varam izmantot šo metodi katrs () katrs viņa bērns.
Tālāk redzamajā kodā apskatīsim nelielu piemēru tam, par ko mēs runājam:

 DOM manipulācijas ar JQuery

Dēls 1
Dēls 2
Dēls 3

Izmēģini 

Pirmkārt, mēs sākam ar iekļaušanu jQuery no CDN oficiāli, tāpēc mums nav jāglabā fails ar avota kodu mūsu datorā, tāpēc ar pārlūkprogrammu un savienojumu ar Internets mēs varam izmantot šo piemēru.
Tad mēs izveidojam nelielu skriptu, kur mēs to norādām, noklikšķinot uz elementa ar ID Sākt kods tiek izpildīts.
Izpildāmais kods vienkārši izsaka, ka ir jāmeklē elements ar ID tētis un šim atlasītājam mēs izmantojam metodi bērni () lai atrastu savus bērnus un visbeidzot ar metodi katrs () Mēs ejam cauri katram no tiem, koda gadījumā ir trīs, kas ļaus mums veikt ceļojumu, un tam vajadzētu parādīt tekstu, ko katrs satur. Apskatīsim, kā iepriekš minētais kods darbojas mūsu pārlūkprogrammā:

Pēc noklikšķināšanas uz pogas izmēģini mēs varam redzēt pirmo Brīdinājums:

PALIELINĀT

Ja turpināsim slēgt brīdinājumus, mēs redzēsim visus hierarhijas struktūrā ietvertos pakārtotos elementus:

PALIELINĀT

Kā mēs redzējām, elementu apstrāde mūsu lapas struktūrā nemaz nav sarežģīta, tas ir tikai neliels piemērs, kas ļauj mums atvērt muti par to, ko mēs turpināsim redzēt šajā apmācībā.
Lai gan bērnu elementu atrašana ir diezgan noderīga, pastāv metode, kas ļauj mums veikt tiešāku meklēšanu, izmantojot iet, viļņi nodarbības. Mēs atsaucamies uz metodi atrast (), šī metode atradīs visas atlasītāja, kas to izsauc, pakārtoto elementu atbilstības.
Ar to mēs varam iegūt lielisku un zvaniet a atrast () uz tā, lai atrastu klases vai ID, ar kuru mēs nonākam pie nākamā punkta.
Injicēšanas stiliKad mēs esam atraduši vēlamo vienumu sadaļā SAULE, daudzas reizes mēs nevēlamies drukāt tā saturu, ja to kaut kādā veidā neizceļam, interesants veids ir pievienot stilam minēto elementu, tas ļaus mums manipulēt ar CSS no mūsu lapas netieši un lai spētu izcelt tajā svarīgus elementus, un tādējādi mēs savā dokumentā varam redzēt kaut ko dinamiskāku HTML.
Tālāk redzēsim, kā mēs īstenosim metodes izmantošanu atrast () un tad stila injekcija par atrastajiem elementiem šādā veidā mēs varam tuvināties kaut kam, ko varam sniegt noderīgi reālajā dzīvē:

 DOM manipulācijas ar JQuery

Dēls 1
Dēls 2
Dēls 3

Izmēģini 

Šajā kodā, ja mēs izskatāmies, mums ir kaut kas ļoti līdzīgs iepriekšējam triks, mēs esam mainījuši to, ka, pirmkārt, etiķetes saturs šeit, nevis elementa elementu šķērsošana, mēs izmantojam metodi atrast () lai atrastu elementu kopā ar klasi izcelt un šim elementam ar metodi css () Mēs tajā ievadīsim stilus, šajā gadījumā mēs to iestatīsim kā sarkanu fona krāsu.
Apskatīsim, kā tas izskatās mūsu pārlūkprogrammā, kad noklikšķināsim uz pogas izmēģini:

Tāpat kā mēs varējām atrast elementa bērnu, mēs varam panākt efektu pretējā hierarhijas nozīmē, tas ir, no dēls, mēs varam atrast tēvu. Tas ir ļoti noderīgi garos sarakstos, kas tiek ģenerēti dinamiski, jo tādā veidā mēs varam izcelt vai izmantot vecākus atbilstoši savām vajadzībām.
Vecāku () metodeŠim nolūkam mums ir metode vecāki () ka līdzīgā veidā kā bērni () atrod izsauktā atlasītāja vecākus. Ja tam pievienosim katru () metodi, mēs iegūsim visu elementa mantojumu, piemēram, ja tas ir mēs atnesīsim elementu un, ja mēs ejam tālāk pa hierarhiju līdz elementam un tā tālāk, līdz sasniedzam elementu, jo pēc hierarhijas viņi visi ir vecāki pēc to satura.
Tālāk redzēsim, kā mēs varam izveidot skriptu jQuery kas ļauj mums sasniegt šo mērķi - parādīt visiem mūsu izvēlētā elementa vecākiem:

 DOM manipulācijas ar JQuery

Dēls 1
Dēls 2
Dēls 3

Izmēģini 

Struktūra ir ļoti līdzīga iepriekšējiem piemēriem, tomēr šeit mēs veicam izmaiņas, šoreiz mēs izmantojam klasi izcelt kā selektors, un mēs izmantojam metodi vecāki () un tad ar katru () mēs varam iet caur hierarhiju no iekšpuses uz āru.
Apskatīsim, kā izskatās iepriekš minētais kods, kad to palaižam savā pārlūkprogrammā:

PALIELINĀT

Tāpat kā iepriekšējais piemērs, kamēr mēs aizveram Brīdinājumi mēs redzēsim visus stihijas vecākus, līdz nonāksim HTML.
Iepriekšējais triks palīdz mums izveidot elementa ģenealoģisko koku, iespējams, tas palīdzēs mums atkļūdot savu HTML, bet kas notiek, ja mēs vēlamies iegūt noteiktu vecāku, piemēram, ja mums ir vairāki ieraksti, bet mēs vēlamies, lai tiktu izcelts konkrētā vecāks.
Mums nevajadzētu uztraukties, šajā gadījumā mums ir metode vecāki līdz (), ar to mēs varam norādīt ierašanās punktu un mēs varam izveidot a HTML injekcija Lai izceltu visu bloku, aplūkosim šādu kodu, kurā esam izmantojuši šīs zināšanas:

 DOM manipulācijas ar JQuery

Dēls 1
Dēls 2
Dēls 3

Izmēģini 

Ja pamanām, ka šis kods nedaudz atšķiras no iepriekšējā, galvenās izmaiņas notiek, zvanot uz tikko izskaidroto metodi vecāki līdz () kam mēs pārgājām div, kur tiks pārtraukta selektora vecāku elementu meklēšana, ko mēs ietekmējam.
Lai parādītu, ka viss darbojas, mēs esam nedaudz injicējuši HTML Lai atzīmēto sadaļu iekrāsotu sarkanā krāsā, redzēsim, kā tas izskatās mūsu pārlūkprogrammā, noklikšķinot uz izmēģini:

Tad mēs redzam, ka tikai sadaļa ar div ir sarkanā krāsā, tādējādi parādot, ka esam pārtraukuši vecāku meklēšanu konkrētajā elementā, pat ja mums ir tiešs vecāks, piemēram, elements kas parāda mums meklēšanas spēku DOM koks.
Ar to mēs esam pabeiguši mūsu apmācību, tā ir tikai neliela visu spēku demonstrācija jQuery manipulēt ar SAULE no mūsu HTML, svarīgi ir tas, ka mums ir daudz jātrenējas un ļoti labi jāizlasa dokumentācija, jo līdz ar to mēs varēsim iegūt papildu zināšanas un resursus, lai varētu paaugstināt mūsu attīstības līmeni.Vai jums patika šī apmācība un palīdzējāt tai?Jūs varat apbalvot autoru, nospiežot šo pogu, lai sniegtu viņam pozitīvu punktu