„JavaScript“ vs „jQuery“: pagrindiniai skirtumai, kuriuos turite žinoti

„JavaScript“ ir „JQuery“ žinome jau kelerius metus. „JavaScript“ buvo išrastas anksčiau nei „jQuery“. Abu jie yra galingi ir naudojami kuriant internetą ir naudojami tam pačiam tikslui, t. Y. Tam, kad tinklalapis būtų interaktyvus ir dinamiškas. Kitaip tariant, jie atgaivina tinklalapius. Žmonės gali susimąstyti, kodėl, jei jie naudojami tam pačiam tikslui, kodėl šios dvi atskiros sąvokos? Šiame „JavaScript“ ir „jQuery“ straipsnyje mes sužinosime, kas yra geresnis už kitą, tokia seka:

• „JavaScript“: galinga kalba kuriant internetą
• „JQuery“: biblioteka sukurta naudojant „JavaScript“
• Kodėl sukurtas „JQuery“ ir kokie yra ypatingi „JQuery“ pajėgumai
• „JavaScript“ ir „JQuery“ skirtumas su pavyzdžiais
  • „JavaScript“ ir „JQuery“ įtraukimas į mūsų HTML dokumentą
  • DOM perėjimas ir manipuliavimas
  • Renginių tvarkymas
  • „Ajax“ skambučiai
  • Animacija

„JavaScript“: galinga kalba kuriant internetą

„JavaScript“ yra scenarijų kalba, naudojama interaktyvumui papildyti mūsų tinklalapiuose. Tai yra viena iš trijų pagrindinių technologijų kartu su HTML ir CSS, kurios naudojamos kuriant tinklalapius. Nors HTML ir CSS apibrėžia tinklalapio struktūrą ir tinklalapių išvaizdą / stilių, „JavaScript“ naudojamas tinklalapiui padaryti dinamišką, pridedant interaktyvumo, o tai reiškia, kad naudodami „JavaScript“ galime pridėti kodą pelės paspaudimui, pelės žymekliui ant viršaus ir kitiems įvykiai tinklalapyje ir daug daugiau.

„JavaScript“ palaiko visos žiniatinklio naršyklės, o žiniatinklio naršyklėse yra įmontuotas „JavaScript“ variklis, leidžiantis identifikuoti „JavaScript“ kodą ir dirbti su juo. Taigi „JavaScript“ yra daugiausia kliento kalba. Tai viena kalba, kurią galima naudoti kaip procedūrinę kalbą, taip pat kaip prototipu pagrįstą objektinę kalbą. Kai mes naudojame pirminę „JavaScript“, mes dirbame su procedūrine kalba, o išplėstinė „JavaScript“ naudoja į objektą orientuotas sąvokas.

Pažvelkime į savo „JavaScript vs jQuery“ ir supraskime biblioteką, sukurtą iš „JavaScript“.

„jQuery“: biblioteka sukurta naudojant „JavaScript“

Bėgant metams pasirodė, kad „JavaScript“ yra galinga kalba kuriant žiniatinklį. Yra sukurta daugybė bibliotekų ir sistemų, sukurtų ant „JavaScript“. Šios bibliotekos ir sistemos yra sukurtos siekiant išplėsti „JavaScript“ galimybes, padaryti su juo daug dalykų ir palengvinti kūrėjo darbą.

„jQuery“ yra viena iš tokių „JavaScript“ bibliotekų, sukurtų iš jos. Tai yra populiariausia „John Resign“ išrasta „JavaScript“ biblioteka, kuri buvo išleista 2006 m. Sausio mėnesį „BarCamp NYC“. „jQuery“ yra nemokama, atviro kodo biblioteka, licencijuota pagal MIT licenciją. Tai turi galingą kelių naršyklių suderinamumo funkciją. Tai gali lengvai išspręsti kelių naršyklių problemas, su kuriomis susiduriame naudodami „JavaScript“. Taigi daugelis kūrėjų naudoja „jQuery“, kad išvengtų kelių naršyklių suderinamumo problemų.

Dabar pereikime prie „JavaScript vs jQuery“ tinklaraščio ir pažiūrėkime, kodėl buvo sukurtas „jQuery“.

Kodėl sukurtas „jQuery“ ir kokios yra ypatingos „jQuery“ galimybės?

„JavaScript“ turime parašyti daug kodo pagrindinėms operacijoms, o naudojant „jQuery“ tas pačias operacijas galima atlikti su viena kodo eilute. Todėl kūrėjams lengviau dirbti su „jQuery“ nei su „JavaScript“.

• Nors „JavaScript“ yra pagrindinė „jQuery“ kalba, jQuery palengvina įvykių valdymą, DOM manipuliavimą, „Ajax“ skambina daug lengviau nei „JavaScript“. „jQuery“ taip pat leidžia mums pridėti animuotus efektus į savo internetinį puslapį, kuris reikalauja daug skausmo, ir „JavaScript“ kodą.
• „jQuery“ turi įmontuotus įskiepius, kad atliktų operaciją tinklalapyje. Mes tiesiog turime įtraukti arba importuoti papildinį į savo tinklalapį, kad galėtume jį naudoti. Taigi papildiniai leidžia mums sukurti animacijų ir sąveikų ar efektų abstrakcijas.
• Taip pat galime sukurti savo pritaikytą papildinį naudodami „jQuery“. Jei reikalaujame, kad animacija būtų tam tikru būdu atliekama tinklalapyje, galime sukurti papildinį pagal reikalavimą ir naudoti jį savo tinklalapyje.
• „jQuery“ taip pat turi aukšto lygio vartotojo sąsajos valdiklių biblioteką. Šioje valdiklių bibliotekoje yra daugybė papildinių, kuriuos galime importuoti į savo tinklalapį ir naudoti kurdami patogius internetinius puslapius.

Supraskime skirtumą.

„JavaScript“ ir „jQuery“

Toliau su „JavaScript“ ir „jQuery“ skirtumu su pavyzdžiu.

„JavaScript“ vs „jQuery“ su pavyzdžiais

Leiskite pažvelgti į pavyzdžius.

„JavaScript“ ir „jQuery“ įtraukimas į mūsų HTML dokumentą

„JavaScript“ pridedama tiesiai į HTML dokumentą žymos viduje arba išorinį „JavaScript“ failą galima pridėti prie HTML dokumento naudojant src atributą.
Parašyta tiesiai scenarijaus žymoje:

įspėjimas („Šis įspėjimo langelis buvo iškviestas su įkrovos įvykiu“)

Norėdami naudoti „jQuery“, mes atsisiunčiame failą iš jo svetainės ir nurodome atsisiųsto „jQuery“ failo kelią SCRIPT žymos src atribute, arba mes galime jį gauti tiesiai iš CDN („Content delivery network“).

Naudojant CDN :

Supraskime DOM perėjimą ir manipuliavimą

yra atomas geras pitonui

DOM perėjimas ir manipuliavimas

„JavaScript“:

DOM elementą „JavaScript“ galime pasirinkti naudodami metodą document.getElementById () arba „document.querySelector ()“ metodą.

var mydiv = document.querySelector („# div1“)

arba

document.getElementById („# div1“)

„JQuery“:

Čia turėsime naudoti tik simbolį $ su skliaustuose esančiu selektoriumi.

$ (selector) $ (“# div1”) - parinkiklis yra id “div1” $ (“. div1”) - selektorius yra klasė “div1” $ (“p”) - parinkiklis yra pastraipa HTML puslapis

Ankstesniame sakinyje $ yra ženklas, naudojamas norint pasiekti „jQuery“, selektorius yra HTML elementas.

Stilių įtraukimas į „JavaScript“:

document.getElementById ('myDiv'). style.backgroundColor = '# FFF'

Stilių pridėjimas „jQuery“:

$ ('# myDiv'). css ('fono spalva', '# FFF')

#MyDiv selektorius nurodo identifikatorių „myDiv“

DOM elementų pasirinkimas ir valdymas yra daug glaustesnis „jQuery“ nei „JavaScript“.

Toliau tvarkant įvykius.

Renginių tvarkymas

„JavaScript“ mes pasirenkame HTML elementą:

document.getElementById ('# button1'). addEventListener ('click', myCallback) funkcija myCallback () {console („funkcijos myCallback viduje“)}

Čia metodas getElementById () naudojamas elementui pasirinkti pagal jo ID, tada mes naudojame metodą addEventListener () norėdami pridėti įvykio klausytoją. Šiame pavyzdyje mes įtraukiame „myCallback“ funkciją kaip klausytoją į įvykį „spustelėkite“.

Anoniminę funkciją taip pat galime naudoti aukščiau pateiktame pavyzdyje:

document.getElementById ('# button1'). addEventListener ('spustelėkite', funkcija () {console.log („funkcijos viduje“)})

„EventListener“ galima pašalinti naudojant metodą „removeEventListener (“)

document.getElementById („# button1“). removeEventListener („click“, myCallback)

„JQuery“

kaip inicijuoti klasę pitone

„jQuery“ iš anksto nustatė įvykius beveik visiems DOM veiksmams. Veiksmui galime naudoti konkretų „jQuery“ įvykį.

$ („P“). Click (function () {// click action})

Kiti pavyzdžiai:

$ („# Button1“). Dblclick (function () {// dvigubo paspaudimo įvykio veiksmas ant html elemento su ID ‘button1’}

JQuery 'on' metodas naudojamas norint pridėti vieną ar daugiau įvykių prie DOM elemento.

$ („# Button1“). On („click“, function () {// veiksmas čia})

Mes galime pridėti kelis įvykius ir kelis įvykių tvarkytuvus, naudodami metodą.

$ („Button1“). On ({click: function () {// action here}, dblclick: function () {// action here}})

Dviejų ar daugiau įvykių tvarkytojas gali būti toks pat, kaip nurodyta toliau:

$ („# Button1“). On („spustelėkite„ dblclick “, funkcija () {// veiksmas čia})

Taigi matome, kad naudojant mažesnį ir glaustą kodą įvykius lengviau valdyti „jQuery“ nei „JavaScript“.

Toliau einant su „Ajax“ skambučiais.

„Ajax“ skambučiai

„JavaScript“

„JavaScript“ naudojo XMLHttpRequest objektą „Ajax“ užklausai siųsti į serverį. „XMLHttpRequest“ turi keletą būdų, kaip paskambinti „Ajax“. Du įprasti metodai yra atviri (metodas, URL, asinchroninis, vartotojas, PSW), siųsti () ir siųsti (eilutė).
Pirmiausia sukurkime „XMLHttpRequest“:

var xhttp = new XMLHttpRequest () Tada naudokite šį objektą, kad iškviestumėte atvirąjį metodą: xhttp.open ('GET', 'D: //getinfo.txt', true) xhttp.send ()

Atviras metodas pateikia užklausą serveriui / vietai, tiesa nurodo, kad užklausa yra asinchroninė. Jei reikšmė klaidinga, tai reiškia, kad užklausa yra sinchroninė.

Pateikti užklausą paskelbti:

var xhttp = new XMLHttpRequest () Tada naudokite šį objektą, kad iškviestumėte atvirąjį metodą ir pateiktumėte užklausą paskelbti: xhttp.open ('POST', 'D: //postinfo.txt', true) xhttp.send ()

Norėdami paskelbti duomenis su užklausa, mes naudojame xhttp metodą setRequestHeader, kad apibrėžtume siunčiamų duomenų tipą, o siuntimo metodas duomenis siunčia raktų / reikšmių poromis:

xhttp.setRequestHeader („Content-type“, „application / x-www-form-urlencoded“) xhttp.send ('vardas = Ravi ir pavardė = Kumaras')

„JQuery“

„jQuery“ turi keletą integruotų metodų, kaip skambinti „Ajax“. Taikydami šiuos metodus, mes galime paskambinti bet kokiems duomenims iš serverio ir atnaujinti dalį tinklalapio duomenimis. „jQuery“ metodai palengvina „Ajax“ skambutį.
„JQuery“ apkrovos () metodas: Šis metodas nuskaito duomenis iš URL ir įkelia juos į HTML selektorių.
$ („P“). Įkelti (URL, duomenys, atgalinis skambutis)
URL yra vieta, kuri reikalinga duomenims, pasirenkamas duomenų parametras yra duomenys (raktų / reikšmių poros), kuriuos norime siųsti kartu su skambučiu, o pasirinktinis parametras „atgalinis ryšys“ yra metodas, kurį norime atlikti po įkėlimo. yra baigtas.

„JQuery“. $ .Get () ir $ .post () metodas: Šis metodas nuskaito duomenis iš URL ir įkelia juos į HTML selektorių.
$ .get (URL, atgalinis skambutis)
URL yra vieta, kuri reikalinga duomenims, o atgalinis ryšys yra metodas, kurį norime atlikti baigus įkelti.

$ .post (URL, duomenys, atgalinis skambutis)
URL yra vieta, kuri reikalinga duomenims, duomenys yra raktų / reikšmių pora (-os), kurią (-ias) norime išsiųsti kartu su skambučiu, o atgalinis skambutis yra metodas, kurį norime atlikti pasibaigus įkelimui. Čia duomenų ir atgalinio ryšio parametrai yra neprivalomi.

„jQuery Ajax“ skambučiai yra glaustesni nei „JavaScript“. „JavaScript“ mes naudojame XMLHTTPRequest objektą, „jQuery“ neturime naudoti tokio objekto.

Toliau su animacija.

Animacija

„JavaScript“

„JavaScript“ neturi specifinės animacijos funkcijos, pvz., „JQuery animate ()“ funkcijos. „JavaScript“ animacijos efektas dažniausiai pasiekiamas manipuliuojant elemento stiliumi arba naudojant CSS transformavimo, vertimo ar animavimo ypatybes. „JavaScript“ taip pat naudoja animacijos efektams metodus setInterval (), clearInterval (), setTimeout () ir clearTimeout ().

setInterval (myAnimation, 4) funkcija myAnimation () {document.getElementById ('# div1'). style.transform = 'translate (100px, 100px)' document.getElementById ('# div1'). style.transform = 'rotate ( 20 laipsnių) '}

„JavaScript“ animacija daugiausia susijusi su manipuliavimu CSS ypatybėmis.

„JQuery“

„jQuery“ turi daug integruotų metodų animacijoms ar efektams pridėti prie HTML elementų. Patikrinkime keletą jų.
„Animuoti“ () metodas: Šis metodas naudojamas animacijai pridėti prie elemento.

$ ('# button1'). spustelėkite (function () {$ ('# div1'). gyvas ({aukštis: '300px'})})

„Show ()“ metodas: Šis metodas naudojamas tam, kad elementas būtų matomas iš paslėptos būsenos.

kas yra sas programavimo kalba

$ ('# button1'). spustelėkite (function () {$ ('# div1'). show ()})

Slėpimo () metodas: Šis metodas naudojamas paslėpti elementą nuo matomos būsenos.

$ ('# button1'). spustelėkite (function () {$ ('# div1'). hide ()})

„jQuery“ turi savo metodus, kaip sukurti animaciją ir efektus tinklalapyje.

Apibendrinant galima pasakyti, kad „JavaScript“ yra interneto kūrimo kalba, „jQuery“ yra biblioteka, kilusi iš „JavaScript“. „JavaScript“ ir „jQuery“ turi savo svarbą kuriant internetą.

Dabar, kai žinote apie „JavaScript Loops“, patikrinkite pateikė Edureka. Žiniatinklio kūrimo sertifikavimo mokymai padės sužinoti, kaip sukurti įspūdingas svetaines naudojant HTML5, CSS3, „Twitter Bootstrap 3“, „jQuery“ ir „Google“ API ir įdiegti ją „Amazon Simple Storage Service“ (S3).

Turite mums klausimą? Prašau paminėti tai komentarų skiltyje „JavaScript vs jQuery“ ir mes su jumis susisieksime.