ЦСС манипулација са јКуери

Витх јКуери На нивоу интеракције корисника можемо постићи много тога, укључујући манипулацију ДОМ дрвоМеђутим, једна од ствари која вам можда не пада на памет је ЦСС манипулација.
Манипулишући ЦСС можемо постићи промене у елементима које видимо на екрану на врло природан и флуидан начин без прибегавања сложеним функцијама у Јавасцрипт чисто као што смо морали да радимо пре неколико година.
Тхе СУНЦЕ је начин на који је наш документ организован ХТМЛ, омогућава нам да дамо предвидљиву и хијерархијску структуру ономе што желимо да прикажемо на екрану. Ово је веома важно јер је то начин на који претраживач тумачи документе, међутим постоји још један аспект који можемо користити у своју корист; ово је да бисте могли да лоцирате елементе како бисте предузели радње на њима.
Дакле, када морамо да променимо одређени елемент, захваљујући СУНЦЕ Можемо користити различите начине да га лоцирамо и тако манипулишемо његовим садржајем, стилом или чак уклонимо из документа у реалном времену.
Ово је веома практично у тренуцима у којима морамо да истакнемо елемент приликом предузимања радње у документу или када примамо одговор, па не морамо да мењамо страницу или да је потпуно освежавамо.
Једна од најбољих пракси при креирању стилова ЦСС је да користимо класе, са овим можемо створити аспекте које затим можемо независно применити на различите елементе без потребе да прибегавамо поновном писању кода изнова и изнова.
Атрибут класеДа би елемент преузео ове стилове, једноставно га морамо поставити у свој атрибут цласс = "" назив одговарајуће класе и ако је стил који у њој уписујемо погодан за елемент, одражаваће га.
ОграничењеСве звучи одлично, али постоји ограничење, стил се учитава приликом подизања странице, а ако морамо укључити и нови стил, обично би се страница морала поновно учитати, што узрокује прекид навигације за корисника.
јКуери омогућава нам да заобиђемо ова ограничења дајући нам могућност да наведене класе у реалном времену укључимо у документ без поновног учитавања целе странице, за то једноставно морамо користити метод аддЦласс () и проследите му назив класе ЦСС које желимо да додамо тренутку.
Погледајмо мали практични пример корак по корак, а затим ћемо видети комплетан код описаног:
1- Прво креирамо датотеку под називом адд-цлассес.хтмл и укључићемо библиотеку јКуери, из практичних разлога упућујемо директан позив са ЦДН адекватно, ово захтева интернетску везу, међутим можемо сачувати датотеку и послужити је локално.
2- Онда ћемо креирати наше часове ЦССДа бисмо боље видели промену, створили смо две класе, свака мења боју позадине елемента на који се примењује, а свака класа ће имати другу боју.
3- У телу нашег документа стварамо два и сваком од њих додељујемо ИД помоћу којег их можемо идентификовати у оквиру СУНЦЕ лако са селекторима јКуери.
4- Затим креирамо елемент коме у догађају онцлицк кажемо му да позове функцију Јавасцрипт.
5- Коначно градимо своју функцију Јавасцрипт, ово ће једноставно позвати сваки елемент својим селектором и методом аддЦласс () Додаће класу оних које смо првобитно створили, када то урадимо, одмах ћемо видети промену.
Пошто смо описали шта треба да урадимо, видећемо код какав је био:

 Додај класеНаш први јКуери ЦСС блок
Наш други јКуери ЦСС блок
Кликните да бисте променили класе

Као што видимо, то је прилично једноставно и када ово извршимо у свом прегледачу, видећемо како су елементи пре него што кликну на дугме нормални, а након клика промене боју и додају се одговарајуће класе. Погледајмо на следећој слици на шта мислимо:

ЕНЛАРГЕ

Након што кликнемо на дугме, можемо визуализовати прелаз на нашој страници:

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

 Додај класеНаш први јКуери ЦСС блок
Наш други јКуери ЦСС блок
Кликните да бисте променили класе

Сада да видимо како је извршавање нашег програма, на овој првој слици видећемо како изгледа наш документ ХТМЛ У почетном стању смо укључили конзолу Хром тако да примећујемо како се елементи мењају:

ЕНЛАРГЕ

Сада да видимо шта се дешава када кликнемо на дугме и прелаз се изврши:

ЕНЛАРГЕ

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

 Додај класеНаш први јКуери ЦСС блок
Наш други јКуери ЦСС блок
Кликните да бисте променили класе

Хајде сада да видимо шта ће се догодити када први пут учитамо документ:

Сада да видимо шта се дешава када поново притиснемо дугме:

ЕНЛАРГЕ

Ако наставимо са кликом на дугме, часови ће се наставити смењивати без ограничења.
Овим смо завршили овај водич, научили смо како можемо манипулисати ЦСС директно са јКуериТиме можемо почети имати боље идеје како бисмо побољшали функционалност наших корисничких интерфејса.