Као што смо већ говорили, на јКуери се може гледати као на библиотеку „изабери и уради“. Прилично смо разговарали о одабиру, па ћемо сада разговарати о неким поступцима. Запамтите да образац у основи изгледа овако:
// Select something! $(".something") // Do something! .hide();Уместо да радимо са више теоретских примера, ми прелазимо у нешто из стварног света. Пронашли смо ову оловку Древа Баронтинија и рачвали је.
Погледајте образац за кредитну картицу оловке Цхрис Цоииер (@цхрисцоииер) на ЦодеПен
У нашем примеру смо подразумевано сакрили образац кредитне картице. Затим смо створили везу на коју можете кликнути да бисте превукли нагоре и спустили образац кредитне картице. Ми смо изабрали везу, а затим до а слидеТоггле на обрасцу. Изаберите и учините!
Још увек нисмо пуно разговарали о догађајима, али то је огроман део јКуери-а. Догађај је нешто попут клика мишем, притиска тастера, помицања итд. Дио „уради“ („уради“) често се догађа након догађаја. Не брините, разговараћемо пуно о догађајима пре него што ова серија заврши. За сада само знајте да је он () најбољи / стандардни начин повезивања догађаја у јКуери-у. Бинд, што значи „пазите на овај догађај на овом елементу или скупу елемената“.
Основни план:
$("#link-that-toggles").on("click", function() ( $("#thing-to-toggle").slideToggle(); ));У нашем примеру, веза је дословно била веза.
искључи
Начин на који хасх везе подразумевано раде у било ком претраживачу је тај што ће се прозор померити надоле до елемента са ИД-ом који одговара тој хасх вези. Понекад је то добро. Свиђа ми се како ствара семантичку везу између те везе и тог елемента. Дакле, без икаквог ЈаваСцрипт-а, веза и даље у суштини има смисла (нарочито ако јој насловите нешто паметно).
Али понекад је такво понашање прескакања хеш везе неуобичајено. Можемо то спречити у ЈаваСцрипт-у помоћу превенДефаулт. Овако:
$("#link-that-toggles").on("click", function(event) ( $("#thing-to-toggle").slideToggle(); event.preventDefault(); ));О томе ћемо разговарати више.
Наравно, сопствена документација јКуери-а је фантастичан ресурс за све аспекте „учините“ јКуери-ја (методе).
Мислим да врло основно разумевање овог „бирај и уради“ и догађаја заиста отвара свет разумевања у ЈаваСцрипт-у. Знам да је то учинило за мене. На крају овог екранског снимања достижемо врхунац тренутног дизајна ЦСС-трикова и видимо где се ЈаваСцрипт јасно користи за реаговање на неке догађаје кликова и промену корисничког интерфејса. Веома сличне ствари ономе што смо радили у претходном демо. На пример, постављање активне класе на ствари које кликнете, на пример:
Погледајте оловку д6ф7161а5931397б4ф24195а315д52ф3 аутора Цхрис Цоииер (@цхрисцоииер) на ЦодеПен