Иако постоји много сличности између јКуери-ја и ЈаваСцрипт-а, постоји неколико разлика у њиховој синтакси и функционалности. За то, прво, схватите шта јКуери код покушава да уради. Затим користите алтернативне методе или атрибуте ванилла ЈаваСцрипт-а.
Овај блог ће расправљати о конверзији јКуери кода у ЈаваСцрипт.
Како претворити јКуери код у ЈаваСцрипт?
За претварање јКуери кода у ЈаваСцрипт, неопходно је разумети шта код ради и које јКуери методе се користе. Затим користите алтернативне методе у ЈаваСцрипт-у, као што је „ $() ” користи се у јКуери-ју за бирање елемената док у ЈаваСцрипт-у за бирање елемената “ доцумент.куериСелецтор() ” или “ куериСелецторАлл() ” користе се методе.
Хајде да разумемо процес конверзије уз помоћ примера.
Пример
Овде имамо јКуери код који мења боју текста и приказује текст објашњења притиском на дугме. За то, ХТМЛ документ садржи два дугмета, текст и празну ознаку <п> где ће се нови текст приказати при клику на дугме:
< див ид = 'миДив' >
< стр класа = 'текст' > ЈаваСцрипт Туториал стр >
< дугме ид = 'дугме' > Кликните овде дугме >
< дугме ид = 'дугме' > Кликните овде дугме >
< п ид = 'порука' > стр >
див >
Док радите са јКуери, обавезно је додати јКуери библиотеку у ознаку <хеад> ХТМЛ документа:
< сцрипт срц = '169ФА1ФЕ82768018ФАА3Ф4БЕ75АФ6Е3ЕЦЦ6ФЕ9АЕ' > скрипта >У ознаци <сцрипт> се користи дати код:
$ ( документ ) . спреман ( функција ( ) {
$ ( '#миДив' ) . наћи ( 'дугме:прво' ) . клик ( функција ( ) {
$ ( '.тект' ) . цсс ( 'боја' , 'Плави' ) ;
$ ( '#мессаге' ) . текст ( 'Ја сам прво дугме које ће подесити боју текста на плаву' ) ;
} ) ;
$ ( '#дугме' ) . следећи ( ) . клик ( функција ( ) {
$ ( '.тект' ) . цсс ( 'боја' , 'зелен' ) ;
$ ( '#мессаге' ) . текст ( 'Ја сам друго дугме које ће подесити боју текста на зелену' ) ;
} ) ;
} ) ;
У горњем коду
- Прво, користите „ спреман() ” функција која ће се извршити када се ДОМ потпуно учита. Често се користи да би се осигурало да је ДОМ у потпуности учитан пре извршења било ког ЈаваСцрипт кода који је у интеракцији са ДОМ елементима или манипулише њима.
- Затим приступите елементу див користећи му додељени ИД “ $('#миДив') “ и позовите „ нађи() ” да бисте пронашли прво дугме, приложите догађај клика на њега користећи „ клик () ” где ће се боја текста променити и текстуална порука ће бити приказана испод дугмета на клик на дугме.
- Затим, за проналажење другог дугмета у див, користили смо јКуери “ следећи() ” и применио исту функционалност.
Као што видите, излаз приказује текстуалну поруку о клику на дугме која ће објаснити рад и истовремено се мења боја постојећег текста:
Сада, овде ћемо конвертовати горњи јКуери код у ЈаваСцрипт без промене излаза. Можете користити различите приступе за конверзију, али ми ћемо користити ЈаваСцрипт методе као алтернативу јКуери методама.
Прво ћемо приступити дугмету помоћу „ доцумент.куериСелецтор() ” метод:
био дугме = документ. куериСелецтор ( 'дугме' ) ;Затим приложите „ клик ” догађај уз помоћ „ аддЕвентЛистенер() ” метод. За промену боје текста у ЈаваСцрипт-у користите „ стил ” атрибут док у јКуери-ју користимо „ цсс() ” метод. Слично, за текст користите „ иннерХТМЛ ” својство у ЈаваСцрипт-у док је „ текст() ” метода се користи у јКуери-ју:
дугме. аддЕвентЛистенер ( 'кликни' , функција ( ) {документ. куериСелецтор ( '.тект' ) . стил . боја = 'Плави' ;
документ. куериСелецтор ( '#мессаге' ) . иннерХТМЛ = 'Ја сам прво дугме које ће подесити боју текста на плаву' ;
} ) ;
За друго дугме користићемо „ нектЕлементСиблинг ” у ЈаваСцрипт-у, док смо у јКуери-ју користили „ следећи() ” метод:
дугме. нектЕлементСиблинг . аддЕвентЛистенер ( 'кликни' , функција ( ) {документ. куериСелецтор ( '.тект' ) . стил . боја = 'зелен' ;
документ. куериСелецтор ( '#мессаге' ) . тектЦонтент = 'Ја сам друго дугме које ће подесити боју текста на зелену' ;
} ) ;
Излаз
јКуери Алтернативне методе или атрибути у ЈаваСцрипт-у
У датој табели можете видети алтернативне методе и атрибуте јКуери-ја:
| јКуери | ЈаваСцрипт | |
|---|---|---|
| Извршите функцију када је ДОМ спреман | $(доцумент).реади(фунцтион() { // код… }); |
доцумент.аддЕвентЛистенерМ( “ДОМЦонтентЛоадед”, фунцтион() { // код… }); |
| За избор целог ХТМЛ-а | $(“хтмл”) | доцумент.куериСелецтор(селектор) |
| За избор целог ХТМЛ тела | $(„тело“) | документ.тело |
| Додајте класу ХТМЛ елементу | $елемент.аддЦласс(име-класе) | елемент.цлассЛист.адд(име-класе) |
| Уклоните класу у ХТМЛ елемент | $елемент.ремовеЦласс(име-класе) | елемент.цлассЛист.ремове(име-класе) |
| Пребаците класу на ХТМЛ елемент | $елемент.тогглеЦласс(име-класе) | елемент.цлассЛист.тоггле(име-класе) |
| Проверите да ли ХТМЛ елемент садржи класу | $елемент.хасЦласс(име-класе) | елемент.цлассЛист.хас(име-класе) |
| Кликните на догађај | $(.буттон”).цлицк( фунцтион(евент) { }); |
доцумент.куериСелецтор(.буттон”) .аддЕвентЛистенер(“клик”, (догађај) => { }); |
| Додајте ЦСС стил | $див.цсс({ боја: „жута“ }) | див.стиле.цолор= “жута” |
| Одабиром свих елемената | $('...') | доцумент.куериСелецторАлл(); |
| Изаберите Први елемент | .први(); | доцумент.куериСелецтор(); |
| Финд Елементс | .финд(); | доцумент.куериСелецтор(); или доцумент.куериСелецторАлл(); методом |
| Избор Цхилд елемента | .деца(); | ПарентНоде.цхилдрен; |
| Избор родитељског елемента | .парент(); | Ноде.парентНоде; |
| Изаберите Браћа и сестре | .сиблингс(); | Ноде.парентНоде.куериСелецторАлл( “:нот(#елем)”); |
| Изаберите Следећи брат и сестра | .следећи(); | НонДоцументТипеЦхилдНоде. нектЕлементСиблинг; |
| Изаберите Претходни брат и сестра | .прев(); | НонДоцументТипеЦхилдНоде. превиоусЕлементСиблинг; |
| Пронађите најближи одговарајући елемент | .цлосест(); | Елемент.цлосест(); |
| Гет Аттрибуте | .аттр('аттр-наме'); | Елемент.гетАттрибуте(‘аттр-наме’); |
| Додајте нови подређени елемент | .аппенд('хтмл-стринг'); | Ноде.аппендЦхилд(); |
| Уклоните све подређене чворове | .емпти(); | Елемент.реплацеЦхилдрен(); |
| Преузмите или поставите ХТМЛ садржај | .хтмл(); | елемент.иннерХТМЛ; |
| Сакриј елемент | .сакрити(); | ЕлементЦСИнлинеСтиле.стиле.дисплаи = 'ништа'; |
| Прикажи елемент | .Прикажи(); | ЕлементЦССИнлинеСтиле.стиле.дисплаи = ”; |
| Додајте слушалац догађаја | .на(); | ЕвентТаргет.аддЕвентЛистенер( 'догађај', име функције); |
| Уклони слушалац догађаја | .ван(); | ЕвентТаргет.ремовеЕвентЛистенер( 'догађај', име функције); |
| Петља кроз објекат, низ или колекцију | .еацх(); | НодеЛист.прототипе.форЕацх(); |
То је све о претварању јКуери кода у ЈаваСцрипт.
Закључак
Не постоји једноставан начин за конверзију јКуери кода у ЈаваСцрипт. Можете једноставно знати разлике између оба и користити Ванилла ЈаваСцрипт уграђене методе које су једнаке јКуери методама. Овај блог је расправљао о конверзији јКуери кода у ЈаваСцрипт.