JavaScript v primerjavi z jQuery: ključne razlike, ki jih morate vedeti

JavaScript in JQuery poznamo že kar nekaj let. JavaScript je bil izumljen prej kot jQuery. Oba sta zmogljiva in se uporabljata pri spletnem razvoju in se uporabljata za isti namen, to je za ustvarjanje interaktivne in dinamične spletne strani. Z drugimi besedami, oživijo spletne strani. Ljudje se morda sprašujejo, zakaj, če se uporabljajo za isti namen, zakaj potem ta dva ločena pojma? V tem članku JavaScript vs jQuery bomo v naslednjem zaporedju ugotovili, kaj je boljše od drugega:

• JavaScript: zmogljiv jezik pri spletnem razvoju
• JQuery: Knjižnica, razvita iz JavaScript-a
• Zakaj je ustvarjen JQuery in kakšne so posebne zmožnosti JQueryja
• Razlika med JavaScriptom in JQueryjem s primeri
  • Dodajanje JavaScript in JQuery v naš dokument HTML
  • Prehod in manipulacija DOM
  • Obravnava dogodkov
  • Klici Ajaxa
  • Animacija

JavaScript: zmogljiv jezik pri spletnem razvoju

JavaScript je skriptni jezik, ki se uporablja za dodajanje interaktivnosti našim spletnim stranem. Je ena od treh temeljnih tehnologij poleg HTML in CSS, ki se uporabljajo za ustvarjanje spletnih strani. Medtem ko HTML in CSS definirata strukturo spletne strani in videz / videz spletnih strani, se JavaScript uporablja za ustvarjanje dinamične spletne strani z dodajanjem interaktivnosti, kar pomeni, da lahko z JavaScriptom dodamo nekaj kode za klik miške, miško in drugo dogodke na spletni strani in še veliko več.

JavaScript podpirajo vsi spletni brskalniki, spletni brskalniki pa imajo vgrajen mehanizem JavaScript za prepoznavanje kode JavaScript in delo z njo. Tako je JavaScript večinoma jezik na strani odjemalca. To je en jezik, ki ga lahko uporabimo kot procesni jezik, pa tudi objektno usmerjen jezik, ki temelji na prototipu. Ko uporabljamo primarni JavaScript, delamo s proceduralnim jezikom, medtem ko napredni JavaScript uporablja objektno usmerjene koncepte.

Nadaljujmo z našim JavaScript v primerjavi z jQueryjem in razumemo knjižnico, razvito iz JavaScript.

jQuery: Knjižnica, razvita iz JavaScripta

Skozi leta se je JavaScript izkazal kot močan jezik za spletni razvoj. Obstaja veliko knjižnic in okvirov, ki so nastali, ki so zgrajeni na vrhu JavaScript. Te knjižnice in ogrodja so razvita za razširitev zmožnosti JavaScript-a, veliko dela z njim in tudi za lažje delo razvijalca.

jQuery je ena takih knjižnic JavaScript, ki je zgrajena iz nje. Je najbolj priljubljena knjižnica JavaScript, ki jo je izumil John Resign in je bila izdana januarja 2006 v BarCamp NYC. jQuery je brezplačna, odprtokodna knjižnica, licencirana pod licenco MIT. Ta ima močno funkcijo združljivosti med brskalniki. Z lahkoto se ukvarja z vprašanji med brskalniki, s katerimi se soočamo z JavaScriptom. Tako mnogi razvijalci uporabljajo jQuery, da bi se izognili težavam z združljivostjo med brskalniki.

Zdaj pa nadaljujmo z našim blogom JavaScript vs jQuery in poglejmo, zakaj je bil ustvarjen jQuery.

Zakaj je ustvarjen jQuery in kakšne so posebne zmožnosti jQuery?

V JavaScript moramo napisati veliko kode za osnovne operacije, medtem ko lahko z jQuery enake operacije izvedemo z eno vrstico kode. Zato razvijalci lažje delajo z jQuery kot z JavaScriptom.

• Čeprav je JavaScript osnovni jezik, iz katerega se je razvil jQuery, jQuery olajša obdelavo dogodkov, manipulacijo z DOM-om, klice Ajaxa pa veliko lažje kot JavaScript. jQuery nam omogoča tudi dodajanje animiranih učinkov na našo spletno stran, ki zahteva veliko bolečine in vrstic kode z JavaScriptom.
• jQuery ima vgrajene vtičnike za izvajanje operacij na spletni strani. Na njegovo spletno stran moramo vključiti ali uvoziti vtičnik, da ga uporabimo. Tako nam vtičniki omogočajo ustvarjanje abstrakcij animacij in interakcij ali učinkov.
• Vtičnik po meri lahko izdelamo tudi z jQuery. Če zahtevamo, da se animacija na spletni strani izvede na določen način, lahko razvijemo vtičnik v skladu z zahtevo in ga uporabimo na naši spletni strani.
• jQuery ima tudi knjižnico pripomočkov za uporabniški vmesnik na visoki ravni. Ta knjižnica pripomočkov vsebuje celo vrsto vtičnikov, ki jih lahko uvozimo na našo spletno stran in jih uporabimo za ustvarjanje uporabniku prijaznih spletnih strani.

Razumejmo razliko.

JavaScript vs jQuery

Nadaljujemo z razliko med JavaScriptom in jQueryjem z Primer.

JavaScript vs jQuery s primeri

Oglejmo si primere.

Dodajanje JavaScript in jQuery v naš dokument HTML

JavaScript je dodan neposredno v dokument HTML v oznaki ali pa je zunanjo datoteko JavaScript mogoče dodati v dokument HTML s pomočjo atributa src.
Zapisano neposredno znotraj oznake skripta:

alert ('To opozorilno polje je bilo poklicano z dogodkom ob nalaganju')

Da bi uporabili jQuery, datoteko prenesemo z njene spletne strani in v atributu src oznake SCRIPT napotimo pot prenesene datoteke jQuery ali pa jo dobimo neposredno iz CDN (omrežje za dostavo vsebin).

Uporaba CDN :

Razumejmo prehod in manipulacijo DOM

Prehod in manipulacija DOM

V JavaScript:

Element DOM v JavaScript lahko izberemo z metodo document.getElementById () ali z metodo document.querySelector ().

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

ali

document.getElementById (“# div1”)

V jQuery:

Tukaj bomo morali uporabiti samo simbol $ z izbirnikom v oklepajih.

$ (selector) $ (“# div1”) - Izbirnik je id 'div1' $ (“. div1”) - Izbirnik je razred 'div1' $ („p“) - Izbirnik je odstavek v Html stran

V zgornji izjavi je $ znak, ki se uporablja za dostop do jQuery, izbirnik pa je element HTML.

Dodajanje slogov v JavaScript:

ustvari kopijo predmeta java -

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

Dodajanje slogov v jQuery:

$ ('# myDiv'). css ('color-background', '# FFF')

Izbirnik #myDiv se sklicuje na identifikator 'myDiv'

Izbira in manipulacija elementov DOM je veliko bolj jedrnata v jQuery kot v JavaScript.

Nadaljujemo z obravnavo dogodkov.

Obravnava dogodkov

V JavaScript izberemo element HTML:

document.getElementById ('# button1'). addEventListener ('klik', myCallback) funkcija myCallback () {console ('znotraj funkcije myCallback')}

Tu se metoda getElementById () uporablja za izbiro elementa po njegovem id, nato pa z uporabo metode addEventListener () dodamo poslušalca dogodka v dogodek. V tem primeru dodamo funkcijo myCallback kot poslušalca dogodku ‘klik’.

V zgornjem primeru lahko uporabimo tudi anonimno funkcijo:

document.getElementById ('# button1'). addEventListener ('klik', funkcija () {console.log ('znotraj funkcije')})

EventListener je mogoče odstraniti z metodo removeEventListener ()

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

V jQuery

jQuery ima vnaprej določene dogodke za skoraj vsa dejanja DOM. Za akcijo lahko uporabimo določen dogodek jQuery.

ms sql vadnica za začetnike

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

Drugi primeri so:

$ (“# Button1”). Dblclick (function () {// dejanje za dogodek dvojnega klika na elementu html z id ‘button1’}

Metoda JQuery ‘on’ se uporablja za dodajanje enega ali več dogodkov elementu DOM.

$ (“# Button1”). On (“klik”, funkcija () {// dejanje tukaj})

Z metodo on lahko dodamo več dogodkov in več obdelovalcev dogodkov.

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

Dva ali več dogodkov ima lahko enak vodnik kot spodaj:

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

Tako vidimo, da je z manj in jedrnato kodo obdelava dogodkov lažja v jQuery kot v JavaScript.

Nadaljujemo s klici Ajax.

Klici Ajaxa

V JavaScript

JavaScript je za pošiljanje zahteve Ajax strežniku uporabil objekt XMLHttpRequest. XMLHttpRequest ima več načinov za klic Ajaxa. Dve pogosti metodi sta odprta (metoda, URL, asinhronizacija, uporabnik, PSW), send () in send (string).
Najprej ustvarimo XMLHttpRequest:

var xhttp = new XMLHttpRequest () Nato s tem objektom pokličite odprto metodo: xhttp.open ('GET', 'D: //getinfo.txt', true) xhttp.send ()

Odprta metoda poda zahtevo za dostop do strežnika / lokacije, true določa, da je zahteva asinhrona. Če je vrednost false, to pomeni, da je zahteva sinhrona.

Pošiljanje zahteve za objavo:

var xhttp = new XMLHttpRequest () Nato s tem objektom pokličite odprto metodo in podajte zahtevo za objavo: xhttp.open ('POST', 'D: //postinfo.txt', true) xhttp.send ()

Za objavo podatkov z zahtevo z metodo setRequestHeader xhttp določimo vrsto podatkov, ki jih je treba poslati, metoda pošiljanja pa podatke v parih ključ / vrednost:

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

V jQuery

jQuery ima več vgrajenih metod za klicanje Ajaxa. S temi metodami lahko pokličemo katere koli podatke s strežnika in posodobimo del spletne strani s podatki. Metode jQuery olajšajo klic Ajaxa.
Metoda jQuery load (): Ta metoda pridobi podatke iz URL-ja in jih naloži v izbirnik HTML.
$ (“P”). Load (URL, podatki, povratni klic)
URL je lokacija, ki se zahteva za podatke, neobvezni podatkovni parameter so podatki (pari ključ / vrednost), ki jih želimo poslati skupaj s klicem, neobvezni parameter 'povratni klic' pa je metoda, ki jo želimo izvesti po nalaganju je končana.

Metoda jQuery $ .get () in $ .post (): Ta metoda pridobi podatke iz URL-ja in jih naloži v izbirnik HTML.
$ .get (URL, povratni klic)
URL je lokacija, ki se zahteva za podatke, povratni klic pa je metoda, ki jo želimo izvesti po zaključku nalaganja.

$ .post (URL, podatki, povratni klic)
URL je lokacija, ki se zahteva za podatke, podatki so par ključ / vrednost, ki jih želimo poslati s klicem, povratni klic pa je metoda, ki jo želimo izvesti po zaključku nalaganja. Tu so podatki in parametri povratnega klica neobvezni.

Klici jQuery Ajax so bolj jedrnati kot JavaScript. V JavaScript uporabljamo objekt XMLHTTPRequest, v jQueryju takega predmeta ni treba uporabljati.

Nadaljujemo z animacijo.

Animacija

V JavaScript

JavaScript nima posebne animacijske funkcije, kot je funkcija jQuery animate (). V JavaScript se učinek animacije v glavnem doseže z manipulacijo sloga elementa ali z uporabo lastnosti pretvorbe, prevajanja ali animiranja CSS. JavaScript za učinke animacije uporablja tudi metode setInterval (), clearInterval (), setTimeout () in clearTimeout ().

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

Animacija v JavaScript gre predvsem za manipulacijo lastnosti CSS.

V jQuery

jQuery ima veliko vgrajenih metod za dodajanje animacij ali učinkov na elemente HTML. Preverimo nekaj izmed njih.
Metoda animate (): Ta metoda se uporablja za dodajanje animacije elementu.

$ ('# button1'). klik (function () {$ ('# div1') .animate ({višina: '300px'})})

Metoda show (): Ta metoda se uporablja za prikaz elementa iz skritega stanja.

$ ('# button1'). click (function () {$ ('# div1'). show ()})

Metoda hide (): Ta metoda se uporablja za skrivanje elementa iz vidnega stanja.

$ ('# button1'). kliknite (function () {$ ('# div1'). hide ()})

jQuery ima svoje metode za ustvarjanje animacije in učinkov na spletni strani.

Če povzamemo, JavaScript je jezik za spletni razvoj, jQuery je knjižnica, ki izvira iz JavaScript-a. JavaScript in jQuery imata svoj pomen pri spletnem razvoju.

Zdaj, ko poznate zanke JavaScript, si oglejte avtor Edureka. Usposabljanje za certificiranje spletnega razvoja vam bo pomagalo, da se naučite ustvariti impresivna spletna mesta z uporabo API-jev HTML5, CSS3, Twitter Bootstrap 3, jQuery in Google ter jih namestite v Amazon Simple Storage Service (S3).

Imate vprašanje za nas? Prosimo, omenite ga v oddelku za komentarje v 'JavaScript vs jQuery', mi pa se vam bomo oglasili.