ДОМ манипулација са јКуери

ДОМ дрвоТхе ДОМ дрво је хијерархијска организација садржаја нашег документа ХТМЛОво је врло корисно при идентификацији различитих елемената који су садржани у наведеном документу, будући да с јединственим идентификаторима можемо додијелити различита имена структурама које, иако имају сличне ознаке, имају различит циљ.
Проблем у прошлости је био тај што није било могуће лако проћи кроз ДОМ дрво у реалном времену, јер су се у њему морале створити гломазне рутине и функције Јавасцрипт, међутим све се то променило са појавом јКуери. Овај оквир је помогао да се обезбеди приступ коришћењу Јавасцрипт за нестручњаке то му је поново повећало популарност.
Једна од најзанимљивијих ствари које се могу чинити врло компликованим је одабрати деца елементаДок говоримо о хијерархијској структури, можемо говорити о породици у којој је отац највиши елемент, а његова деца елементи којима влада под његовим плаштом или заштитом.
Рецимо на пример да имамо неуређену листу или елемент , логично је мислити да су њихова деца елементи које може да садржи, ако желимо да изаберемо елемент Одређена листа може изгледати као веома сложен задатак, али са јКуери можемо то постићи на врло једноставан и чист начин.
МетодеДа бисмо то урадили, морамо само дати јединствени идентификатор нашем родитељском елементу, а затим позвати методу на његовом селектору деца (), са овим ћемо добити позицију на коју можемо ићи са методом сваки () свако његово дете.
Погледајмо у следећем коду мали пример о чему говоримо:

 ДОМ манипулација са ЈКуери

Син 1
Син 2
Син 3

Испробати 

Пре свега почињемо укључивањем јКуери фром ЦДН службени, овим немамо потребу да складиштимо датотеку са изворним кодом на свом рачунару, па са прегледачем и везом за Интернет можемо користити овај пример.
Затим креирамо малу скрипту где то означавамо када кликнете на елемент са ид -ом Почетак код унутра се извршава.
Код који се извршава једноставно изражава да се елемент са ид -ом мора претраживати тата и на овај селектор примењујемо методу деца () да лоцира своју децу и на крају методом сваки () Пролазимо кроз сваки од њих, у случају кода постоје три која ће нам омогућити да кренемо на пут и ово би нам требало показати текст који сваки садржи. Хајде да видимо како горњи код функционише у нашем прегледачу:

Након што кликнете на дугме испробати можемо видети први Упозорење:

ЕНЛАРГЕ

Ако наставимо са затварањем упозорења, видећемо све подређене елементе садржане у хијерархијској структури:

ЕНЛАРГЕ

Као што смо могли видети, руковање елементима у структури наше странице није нимало компликовано, ово је само мали пример који нам отвара уста онога што ћемо и даље видети у овом водичу.
Иако је проналажење подређених елемената прилично корисно, постоји метода која нам омогућава да извршимо директније претраживање кроз иди, таласи лекције. Позивамо се на методу нађи (), овај метод ће пронаћи све подударности подређених елемената селектора који га позива.
Са овим можемо бити сјајни и позовите а нађи () на њему да лоцирамо класе или ид, са чиме долазимо до следеће тачке.
Ињецт СтилесНакон што смо пронашли жељену ставку у СУНЦЕ, много пута не желимо да одштампамо његов садржај ако га на неки начин не истакнемо, занимљив начин је додавање стила наведеном елементу, што ће нам омогућити да манипулишемо ЦСС наше странице посредно и како бисмо могли истакнути важне елементе на њој и тако можемо видјети нешто динамичније у нашем документу ХТМЛ.
Погледајмо у следећем коду како ћемо применити употребу методе нађи () а затим и стилска ињекција на пронађеним елементима, на овај начин можемо се приближити нечему што можемо дати корисним у стварном животу:

 ДОМ манипулација са ЈКуери

Син 1
Син 2
Син 3

Испробати 

У овом коду, ако погледамо, имамо нешто врло слично претходном трику, оно што смо променили је да на првом месту садржај ознаке овде уместо да прелазимо преко деце елемента, користимо методу нађи () да лоцира елемент са класом истакнути и на тај елемент са методом цсс () Убацићемо стилове у њега, у овом случају ћемо га поставити као црвену боју позадине.
Хајде да видимо како то изгледа у нашем прегледачу када кликнемо на дугме испробати:

Баш као што смо успели да лоцирамо дете елемента, можемо постићи ефекат у супротном смислу хијерархије, односно из сине, можемо лоцирати оца. Ово је веома корисно на дугим листама које се генеришу динамички, јер на овај начин можемо означити или користити родитеље према нашим потребама.
Родитељи () методаЗа ово имамо метод родитељи () да на сличан начин да деца () лоцира родитеље селектора који се позива. Ако овоме додамо сваки () метод, донећемо све наслеђе елемента, на пример ако је донећемо елемент и ако идемо даље по хијерархији до елемента и тако даље док не дођемо до елемента будући да су сви по хијерархији родитељи по начину на који су садржани.
Погледајмо у следећем коду како можемо да направимо скрипту јКуери то нам омогућава да постигнемо овај циљ приказивања свих родитеља нашег изабраног елемента:

 ДОМ манипулација са ЈКуери

Син 1
Син 2
Син 3

Испробати 

Структура је врло слична претходним примерима, међутим овде правимо промену, овај пут користимо класу истакнути као селектор и примењујемо метод родитељи () а затим са сваки () можемо проћи кроз хијерархију изнутра према споља.
Хајде да видимо како горњи код изгледа када га покренемо у прегледачу:

ЕНЛАРГЕ

Као и претходни пример све док затварамо Упозорења видећемо све родитеље елемента док не дођемо до ХТМЛ.
Претходни трик нам помаже да успоставимо генеалошко стабло елемента, можда ће нам помоћи да отклонимо грешке у нашем ХТМЛ, али шта се дешава ако желимо да добијемо одређеног родитеља, на пример ако имамо неколико спискова, али желимо да родитељ одређеног буде истакнут.
Не треба да бринемо, за овај случај имамо методу родитељи до (), са овим можемо одредити тачку доласка и можемо направити а ХТМЛ ињекција Да бисмо истакли цео блок, погледајмо следећи код где смо применили ово знање:

 ДОМ манипулација са ЈКуери

Син 1
Син 2
Син 3

Испробати 

Ако приметимо да је овај код мала варијација претходног, главна промена се дешава у позиву на метод који смо управо објаснили родитељи до () до којих смо прошли див, где ће престати тражење родитељских елемената селектора на који утичемо.
Да бисмо показали да све функционише, убризгали смо мало ХТМЛ Да бисмо обојени део означили црвеном бојом, да видимо како ово изгледа у нашем прегледачу када кликнемо на испробати:

Затим видимо да је само део са див -ом онај који је обојен црвеном бојом, показујући тако да смо зауставили тражење родитеља у одређеном елементу, чак и ако имамо директног родитеља као што је елемент што нам показује моћ претраживања кроз ДОМ дрво.
Овим смо завршили наш водич, то је само мала демонстрација све снаге јКуери да манипулишу СУНЦЕ од нашег ХТМЛ, важно је да морамо пуно вјежбати и врло добро читати документацију јер ћемо с њом моћи стећи додатна знања и ресурсе како бисмо могли повећати свој ниво развоја.Да ли вам се допао и помогао овај водич?Можете наградити аутора притиском на ово дугме да бисте му дали позитиван поен