Увод у јКуери (други део): Методе и функције

Реклама

Ово је део сталног увода за почетнике у јКуери серију веб програма. Први део је покривао основе јКуери-а јКуери Туториал - Први кораци: Основе и изборнициПрошле недеље сам говорио о томе колико је јКуери важан сваком модерном веб програмеру и зашто је то феноменално. Ове недеље мислим да је време да се умажемо руке неким кодом и научимо како ... Опширније о томе како да га укључите у свој пројекат и селекторима. У другом делу ћемо наставити са основном употребом док размотримо неке методе које можете извести на тим ДОМ елементима и неке друге језичне основе.

$(селектор).метод();

Ако се сећате из лекције 1, ово је основна структура ДОМ манипулације у јКуери-у. ДОМ манипулација није једино што можете урадити с јКуери-ом, али је то најлакше место за почетак и најчешће, па смо га зато и изабрали.

Да бисте брзо пронашли резиме, селектор део ове изјаве вам омогућава да користите ЦСС-ова имена елемената, класе или ИД-ове да бисте пронашли делове ДОМ-а. На пример, да узмем све са именом класе од .сакривен, користили бисмо:

$ ('див.хидден')

Други део ове једначине је метод да наступимо на овим ДИВ-овима након што их пронађемо (ако уопште постоје; или могу бити само једна ставка „подударања“). Запамтите, јКуери ће вратити само један елемент за селекцију ИД-а, јер се ИД-ови требају односити на јединствене ставке. Ако ћете имати више од нечега, то мора да буде дефинисано као класа у ЦСС-у.

Затим на методе; шта све можете да урадите са елементима ДОМ-а?

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

.цсс ('својство', 'вредност');

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

Ако бисте радије анимирали ЦСС промене, имам одличне вести за вас; такође постоји метода која се зове .анимате (). То је ипак мало сложеније:

.анимате ({'својство': 'вредност'}, брзина);

Као пример:

.анимате ({'опацити': '0.25', 'хеигхт': '100пк'}, 'фаст');

У овом тренутку се можда питате за шта су тачно везане коврче; они се називају „објектни буквал“ и обично се користе за прављење листе вредност имовине парови, некако попут индексирани низ ако долазите са других језика Пуно ћете их користити у јКуери-у, па ћу вам ово поново рећи - навикните се да правилно проверите да ли постоје затворене заграде и заграде!

Провери Ова страница за пуно радних примера анимиране методе.

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

Ево неколико брзих примера:

Добијте тренутну вредност поља имена у облику коментара и доделите га променљивој цоммент_наме:

вар цомментер_наме = $ (# коментар-образац # име) .вал ();

Подесите вредност до вредности узете из цомментер_наме:

$ ('спан.наме') текст (цомментер_наме);

Тада имамо велики избор метода за клонирање, кретање, убацивање или брисање делова ДОМ-а. Машта вам је заиста граница.

Рецимо да сте желели динамички уметати блок рекламних слика након сваког трећег одломак у колони са садржајем, али то радите у Јавасцрипт-у како би могло бити почетно учитавање странице одржавати чистим. Звучи прилично сложено, зар не? Тешко…

$('див # садржајп: н-дијете (3н)').после('');

Разбијајући то доле, замолили смо јКуери да:

1. Пронађите див са ИД-ом „садржаја“
2. Пронађите п-ове садржане у том диву
3. Филтрирајте на сваку 3. стр коришћењем псеудо селектора нтх-детета (више о томе овде)
4. Убаци произвољни имг после сваки одговарајући елемент

Не могу овде набрајати све методе, нити бисте то желели прочитати. Поента је у томе што постоји начин да се ради готово све што можете помислити када је у питању манипулација, тако проверите АПИ за једног који можете да користите.

Такође имајте на уму да можда постоји више начина да се нешто учини. На пример, не можете да сузите исправан објект на инсертАфтер (), можда размислите о проналажењу следећи дете доле и користи инсертБефоре () уместо тога.

Метода везивања

И коначно, нека је кратка реч о везивању метода, у основи само зато што је сјајна. Прво, размотримо следеће редове кода:

$ ('нав # мени'). фадеИн ('брзо'); $ ('нав # мени'). аддЦласс ('беингСховн'); $ ('мени # мени'). цсс ('маргин-ригхт', '10пк');

Звучи довољно разумно, зар не? Али то можете учинити у само једном ретку:

$ ('нав # мени'). фадеИн ('брза'). аддЦласс ('беингСховн'). цсс ('маргин-ригхт', '10пк');

То ради потпуно исто и зове се метода везивање. Пошто скоро све методе јКуери враћају сам јКуери објект, сваки од њих може прећи на следећи. То значи мање кода - што је увек добра ствар - али заправо и брже ради.

Зашто? Па, сваки пут када се позвате на основни јКуери $ команде и селектора, тражите да претражује ДОМ стабло у потрази за одговарајућим елементом. Када ланаците методе, не треба вам превише да се враћате ДОМ-у, јер он зна где су сада и може да изведе метод одмах.

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

Ако сте се само натакли на овај пост, вероватно сте неки веб програмер и можда желите да проверите све наше ВордПресс и блогање чланке или чак наше Најбољи додаци за ВордПресс Најбољи ВордПресс додаци Опширније страна.