JavaScript vs jQuery: galvenās atšķirības, kas jums jāzina

Mēs jau vairākus gadus esam pazīstami ar JavaScript un JQuery. JavaScript tika izgudrots agrāk nekā jQuery. Abi ir spēcīgi un tiek izmantoti tīmekļa izstrādē, un tiek izmantoti tam pašam mērķim, t.i., lai padarītu tīmekļa lapu interaktīvu un dinamisku. Citiem vārdiem sakot, tie atdzīvina tīmekļa lapas. Cilvēkiem var rasties jautājums, kāpēc, ja tos lieto vienam un tam pašam mērķim, kāpēc šie divi atsevišķi jēdzieni? Šajā JavaScript vs jQuery rakstā mēs uzzināsim, kas ir labāks par otru šādā secībā:

• JavaScript: spēcīga valoda tīmekļa izstrādē
• JQuery: bibliotēka, kas izstrādāta no JavaScript
• Kāpēc tiek izveidots JQuery un kādas ir JQuery īpašās iespējas
• Atšķirība starp JavaScript un JQuery ar piemēriem
  • JavaScript un JQuery pievienošana mūsu HTML dokumentā
  • DOM šķērsošana un manipulācijas
  • Pasākumu apstrāde
  • Ajax aicina
  • Animācija

JavaScript: spēcīga valoda tīmekļa izstrādē

JavaScript ir skriptu valoda, ko izmanto, lai pievienotu interaktivitāti mūsu tīmekļa lapām. Tā ir viena no trim pamattehnoloģijām līdzās HTML un CSS, kuras tiek izmantotas tīmekļa lapu izveidošanai. Kamēr HTML un CSS nosaka tīmekļa lapas struktūru un tīmekļa lapu izskatu / stilu, JavaScript tiek izmantots, lai padarītu vietni dinamisku, pievienojot tai interaktivitāti, kas nozīmē, ka ar JavaScript mēs varam pievienot kodu peles klikšķim, peles kursoram un citiem notikumi tīmekļa vietnē un daudz kas cits.

JavaScript atbalsta visas tīmekļa pārlūkprogrammas, un tīmekļa pārlūkprogrammās ir iebūvēts JavaScript dzinējs, lai identificētu JavaScript kodu un darbotos ar to. Tādējādi JavaScript galvenokārt ir klienta valoda. Tā ir viena valoda, kuru var izmantot kā procesuālo valodu, kā arī uz prototipu balstītu objektorientētu valodu. Kad mēs izmantojam primāro JavaScript, mēs strādājam ar procesuālo valodu, savukārt uzlabotais JavaScript izmanto objektorientētas koncepcijas.

Pārejam tālāk ar mūsu JavaScript vs jQuery un izprotim bibliotēku, kas izveidota no JavaScript.

kā rīkoties ar uznirstošo logu selēna

jQuery: bibliotēka, kas izstrādāta no JavaScript

Gadu gaitā JavaScript ir izrādījies spēcīga valoda tīmekļa izstrādei. Ir izveidotas daudzas bibliotēkas un ietvarstruktūras, kas ir veidotas virs JavaScript. Šīs bibliotēkas un ietvari ir izstrādāti, lai paplašinātu JavaScript iespējas, daudz ko darītu ar to un lai atvieglotu izstrādātāja darbu.

jQuery ir viena no šādām JavaScript bibliotēkām, kas ir veidotas no tā. Tā ir vispopulārākā JavaScript bibliotēka, kuru izgudroja Džons Resigns un kas tika izlaista 2006. gada janvārī BarCamp NYC. jQuery ir bezmaksas atvērtā koda bibliotēka, kas licencēta saskaņā ar MIT licenci. Tam ir spēcīga dažādu pārlūkprogrammu saderības iezīme. Tas var viegli tikt galā ar vairāku pārlūkprogrammu problēmām, ar kurām mēs varam saskarties, izmantojot JavaScript. Tādējādi daudzi izstrādātāji izmanto jQuery, lai izvairītos no saderības ar pārlūkprogrammām.

Tagad turpināsim ar mūsu JavaScript vs jQuery emuāru un redzēsim, kāpēc tika izveidots jQuery.

Kāpēc tiek izveidots jQuery un kādas ir jQuery īpašās iespējas?

JavaScript mums ir jāraksta daudz koda pamata darbībām, savukārt ar jQuery tās pašas darbības var veikt ar vienu koda rindiņu. Tāpēc izstrādātājiem ir vieglāk strādāt ar jQuery nekā ar JavaScript.

• Lai gan JavaScript ir pamata valoda, no kuras jQuery ir attīstījies, jQuery padara notikumu apstrādi, DOM manipulācijas, Ajax zvani ir daudz vienkāršāki nekā JavaScript. jQuery arī ļauj mūsu tīmekļa lapai pievienot animētus efektus, kas prasa daudz sāpju un koda rindiņas ar JavaScript.
• jQuery ir iebūvēti spraudņi, lai veiktu darbību tīmekļa lapā. Lai to izmantotu, mums vienkārši jāiekļauj vai jāimportē spraudnis mūsu tīmekļa vietnē. Tādējādi spraudņi ļauj mums izveidot animāciju un mijiedarbības vai efektu abstrakcijas.
• Mēs varam arī izveidot mūsu pielāgoto spraudni ar jQuery. Ja mēs pieprasām, lai animācija Web lapā tiktu veikta noteiktā veidā, mēs varam izstrādāt spraudni atbilstoši prasībām un izmantot to savā tīmekļa lapā.
• jQuery ir arī augsta līmeņa lietotāja interfeisa bibliotēka. Šajā logrīku bibliotēkā ir viss spraudņu klāsts, kurus mēs varam importēt savā tīmekļa vietnē un izmantot to, lai izveidotu lietotājam draudzīgas tīmekļa lapas.

Sapratīsim atšķirību.

JavaScript vs jQuery

Ar piemēru pārejot ar atšķirību starp JavaScript un jQuery.

JavaScript vs jQuery ar piemēriem

Apskatīsim piemērus.

JavaScript un jQuery pievienošana mūsu HTML dokumentā

JavaScript tiek pievienots tieši HTML dokumentā tagā, vai ārēju JavaScript failu var pievienot HTML dokumentā, izmantojot src atribūtu.
Rakstīts tieši skripta tagā:

brīdinājums ('Šī brīdinājuma lodziņš tika izsaukts ar ielādes notikumu')

Lai izmantotu jQuery, mēs lejupielādējam failu no tā tīmekļa vietnes un norādām lejupielādētā jQuery faila ceļu SCRIPT taga src atribūtā, vai arī mēs to varam iegūt tieši no CDN (satura piegādes tīkls).

Izmantojot CDN :

Sapratīsim DOM pārvietošanos un manipulācijas

DOM šķērsošana un manipulācijas

JavaScript:

Mēs varam atlasīt DOM elementu JavaScript, izmantojot metodi document.getElementById () vai izmantojot metodi document.querySelector ().

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

vai

document.getElementById (“# div1”)

JQuery:

Šeit mums būs jāizmanto tikai simbols $ ar iekavās esošo atlasītāju.

$ (selector) $ (“# div1”) - atlasītājs ir id “div1” $ (“. div1”) - atlasītājs ir klase “div1” $ (“p”) - atlasītājs ir rindkopas HTML lapa

Iepriekš minētajā paziņojumā $ ir zīme, ko izmanto, lai piekļūtu jQuery, atlasītājs ir HTML elements.

Stilu pievienošana JavaScript:

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

Stilu pievienošana jQuery:

$ ('# myDiv'). css (‘fona krāsa’, ‘# FFF’)

Atlasītājs #myDiv attiecas uz identifikatoru ‘myDiv’

DOM elementu atlase un manipulācijas jQuery ir daudz kodolīgākas nekā JavaScript.

Turpinot rīkoties ar notikumiem.

Pasākumu apstrāde

JavaScript valodā mēs izvēlamies HTML elementu:

document.getElementById ('# button1'). addEventListener ('click', myCallback) funkcija myCallback () {console (“myCallback function inside”)}

Šeit metodi getElementById () izmanto, lai atlasītu elementu pēc tā ID, pēc tam mēs izmantojam metodi addEventListener (), lai notikumam pievienotu notikumu klausītāju. Šajā piemērā notikumam “klikšķis” kā klausītāju pievienojam funkciju myCallback.

Iepriekš minētajā piemērā mēs varam izmantot arī anonīmu funkciju:

document.getElementById ('# button1'). addEventListener ('click', function () {console.log (“funkcija iekšpusē”)})

EventListener var noņemt, izmantojot metodi removeEventListener ()

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

JQuery

jQuery ir iepriekš definējis notikumus gandrīz visām DOM darbībām. Darbībai varam izmantot konkrēto jQuery notikumu.

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

Citi piemēri ir:

$ (“# Button1”). Dblclick (function () {// darbība dubultklikšķa notikumam uz html elementa ar ID ‘button1’}

JQuery ‘ieslēgta’ metode tiek izmantota, lai DOM elementam pievienotu vienu vai vairākus notikumus.

$ (“# Button1”). On (“click”, function () {// darbība šeit})

Mēs varam pievienot vairākus notikumus un vairākus notikumu apstrādātājus, izmantojot metodi.

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

Diviem vai vairākiem notikumiem var būt tāds pats apstrādātājs kā zemāk:

$ (“# Button1”). On (“click dblclick”, function () {// darbība šeit})

Tādējādi mēs redzam, ka ar mazāku un kodolīgu kodu notikumu apstrāde ir vienkāršāka jQuery nekā JavaScript.

Pāreja ar Ajax Call.

Ajax aicina

JavaScript valodā

Lai nosūtītu Ajax pieprasījumu uz serveri, JavaScript izmantoja objektu XMLHttpRequest. XMLHttpRequest ir vairākas metodes, kā veikt Ajax zvanu. Divas izplatītās metodes ir atvērtas (metode, URL, asinhronais lietotājs, PSW), sūtīt () un sūtīt (virkne).
Vispirms izveidosim XMLHttpRequest:

var xhttp = new XMLHttpRequest () Pēc tam izmantojiet šo objektu, lai izsauktu atvērto metodi: xhttp.open ('GET', 'D: //getinfo.txt', true) xhttp.send ()

Atvērtā metode padara saņemšanas pieprasījumu serverim / atrašanās vietai, true norāda, ka pieprasījums ir asinhrons. Ja vērtība ir nepatiesa, tas nozīmē, ka pieprasījums ir sinhrons.

Izlikšanas pieprasījuma veikšana:

var xhttp = new XMLHttpRequest () Pēc tam izmantojiet šo objektu, lai izsauktu atvērto metodi un izveidotu pasta pieprasījumu: xhttp.open ('POST', 'D: //postinfo.txt', true) xhttp.send ()

Lai izliktu datus ar pieprasījumu, mēs izmantojam xhttp metodi setRequestHeader, lai definētu nosūtāmo datu veidu, un nosūtīšanas metode nosūta datus atslēgu / vērtību pāros:

xhttp.setRequestHeader ('Content-type', 'application / x-www-form-urlencoded') xhttp.send ('name = Ravi & surname = Kumar')

JQuery

pārlūka pārbaude selēna tīmekļa draiverī

jQuery ir vairākas iebūvētas metodes, lai veiktu Ajax zvanus. Izmantojot šīs metodes, mēs varam izsaukt visus datus no servera un atjaunināt daļu tīmekļa lapas ar datiem. jQuery metodes atvieglo Ajax zvanu.
JQuery ielādes () metode: šī metode iegūst datus no URL un ielādē tos HTML atlasītājā.
$ (“P”). Ielāde (URL, dati, atzvanīšana)
URL ir datu izsaukšanas vieta, izvēles datu parametrs ir dati (atslēgu / vērtību pāri), kurus mēs vēlamies nosūtīt kopā ar zvanu, un izvēles parametrs “atzvanīšana” ir metode, kuru vēlamies izpildīt pēc ielādes ir pabeigta.

Metodes jQuery $ .get () un $ .post (): Šī metode iegūst datus no URL un ielādē tos HTML atlasītājā.
$ .get (URL, atzvanīšana)
URL ir vieta, kas tiek izsaukta datiem, un atzvanīšana ir metode, kuru mēs vēlamies izpildīt pēc ielādes pabeigšanas.

$ .post (URL, dati, atzvanīšana)
URL ir datu izsaukšanas vieta, dati ir atslēgu / vērtību pāri / s, kurus mēs vēlamies nosūtīt kopā ar zvanu, un atzvanīšana ir metode, kuru mēs vēlamies izpildīt pēc ielādes pabeigšanas. Dati un atzvanīšanas parametri nav obligāti.

jQuery Ajax zvani ir kodolīgāki nekā JavaScript. JavaScript valodā mēs izmantojam XMLHTTPRequest objektu, jQuery mums nav jāizmanto šāds objekts.

Pāreja ar animāciju.

Animācija

JavaScript valodā

JavaScript nav īpašas animācijas funkcijas, piemēram, jQuery animate () funkcija. JavaScript animācijas efekts galvenokārt tiek panākts, manipulējot ar elementa stilu vai izmantojot CSS pārveidošanas, tulkošanas vai animācijas īpašības. JavaScript animācijas efektiem izmanto arī metodes setInterval (), clearInterval (), setTimeout () un clearTimeout ().

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

Animācija JavaScript galvenokārt ir manipulēšana ar CSS īpašībām.

JQuery

jQuery ir daudz iebūvētu metožu, lai pievienotu animācijas vai efektus HTML elementiem. Pārbaudīsim dažus no tiem.
Animate () metode: šo metodi izmanto, lai elementam pievienotu animāciju.

$ ('# button1'). noklikšķiniet (function () {$ ('# div1'). dzīvot ({height: '300px'})})

Show () metode: šo metodi izmanto, lai padarītu elementu redzamu no slēptā stāvokļa.

$ ('# button1'). noklikšķiniet (function () {$ ('# div1'). show ()})

Slēpt () metode: šo metodi izmanto, lai paslēptu elementu no redzama stāvokļa.

$ ('# button1'). noklikšķiniet (function () {$ ('# div1'). hide ()})

jQuery ir savas metodes, kā izveidot animāciju un efektus tīmekļa vietnē.

Rezumējot, JavaScript ir tīmekļa izstrādes valoda, jQuery ir bibliotēka, kas radusies no JavaScript. JavaScript un jQuery ir sava nozīme tīmekļa izstrādē.

Tagad, kad jūs zināt par JavaScript cilpām, pārbaudiet autore Edureka. Tīmekļa attīstības sertifikācijas apmācība palīdzēs jums uzzināt, kā izveidot iespaidīgas vietnes, izmantojot HTML5, CSS3, Twitter Bootstrap 3, jQuery un Google API, un izvietot to Amazon Simple Storage Service (S3).

Vai mums ir jautājums? Lūdzu, pieminējiet to komentāru sadaļā “JavaScript vs jQuery”, un mēs ar jums sazināsimies.