JavaScript vs jQuery: Ključne razlike koje trebate znati

JavaScript i JQuery poznajemo već nekoliko godina. JavaScript je izumljen ranije od jQueryja. Obje su moćne i koriste se u web razvoju i koriste se u istu svrhu, tj. Kako bi web stranica učinile interaktivnom i dinamičnom. Drugim riječima, oni donose život web stranicama. Ljudi se mogu zapitati zašto, ako se koriste u istu svrhu, zašto onda ta dva odvojena pojma? U ovom članku JavaScript vs jQuery saznat ćemo koji je bolji od drugog u sljedećem slijedu:

• JavaScript: Moćan jezik u web razvoju
• JQuery: Biblioteka razvijena od JavaScript-a
• Zašto se stvara JQuery i koje su posebne mogućnosti JQueryja
• Razlika između JavaScripta i JQueryja s primjerima
  • Dodavanje JavaScript-a i JQuery-a u naš HTML dokument
  • DOM preokret i manipulacija
  • Rukovanje događajima
  • Ajax poziva
  • Animacija

JavaScript: Moćan jezik u web razvoju

JavaScript je skriptni jezik koji se koristi za dodavanje interaktivnosti našim web stranicama. To je jedna od tri temeljne tehnologije uz HTML i CSS koje se koriste za stvaranje web stranica. Dok HTML i CSS definiraju strukturu web stranice i izgled / stil web stranica, JavaScript se koristi da web stranicu učini dinamičnom dodavanjem interaktivnosti, što znači da s JavaScriptom možemo dodati neki kôd za klik mišem, prelazak mišem i ostalo događaje na web stranici i puno više.

JavaScript podržavaju svi web preglednici, a web preglednici imaju ugrađeni JavaScript mehanizam za prepoznavanje JavaScript koda i rad s njim. Stoga je JavaScript uglavnom jezik klijenta. To je jedan jezik koji se može koristiti kao proceduralni jezik, kao i objektno orijentirani jezik zasnovan na prototipu. Kada koristimo primarni JavaScript, radimo s proceduralnim jezikom, dok napredni JavaScript koristi objektno orijentirane koncepte.

Krenimo s našim JavaScriptom u odnosu na jQuery i shvatimo knjižnicu razvijenu iz JavaScript-a.

jQuery: Biblioteka razvijena od JavaScript-a

Tijekom godina pokazalo se da je JavaScript moćan jezik za web razvoj. Postoji mnogo knjižnica i okvira koji su se pojavili i koji su izgrađeni na vrhu JavaScript-a. Te su knjižnice i okviri razvijeni kako bi proširili sposobnost JavaScript-a, radili puno stvari s njim, a također olakšali posao programera.

jQuery je jedna od takvih biblioteka JavaScripta koja je izgrađena od nje. To je najpopularnija JavaScript knjižnica koju je izumio John Resign, a objavljena je u siječnju 2006. u BarCampu u New Yorku. jQuery je besplatan, biblioteka otvorenog koda, licencirana pod MIT licencom. Ovo ima moćnu značajku kompatibilnosti s različitim preglednicima. Lako se može nositi s problemima među preglednicima s kojima se možemo suočiti s JavaScriptom. Stoga mnogi programeri koriste jQuery kako bi izbjegli probleme s kompatibilnošću među preglednicima.

Ajmo sada s našim blogom JavaScript vs jQuery i vidjet ćemo zašto je jQuery stvoren.

Zašto se stvara jQuery i koje su posebne mogućnosti jQueryja?

U JavaScriptu moramo napisati puno koda za osnovne operacije, dok se s jQueryjem iste operacije mogu izvoditi s jednim retkom koda. Stoga je programerima lakše raditi s jQueryjem nego s JavaScriptom.

• Iako je JavaScript osnovni jezik iz kojeg se razvio jQuery, jQuery čini rukovanje događajima, DOM manipulaciju, Ajax poziva puno jednostavnijim od JavaScript-a. jQuery nam također omogućuje dodavanje animiranih efekata na našu web stranicu što zahtijeva puno muke i redova koda s JavaScriptom.
• jQuery ima ugrađene dodatke za obavljanje radnji na web stranici. Moramo uključiti ili uvesti dodatak na našu web stranicu da bismo ga koristili. Stoga nam dodaci omogućuju stvaranje apstrakcija animacija i interakcija ili efekata.
• Također možemo napraviti svoj prilagođeni dodatak s jQueryjem. Ako trebamo da se animacija na web stranici izvodi na određeni način, možemo razviti dodatak prema zahtjevu i koristiti ga na našoj web stranici.
• jQuery također ima biblioteku widgeta za korisničko sučelje na visokoj razini. Ova knjižnica widgeta ima čitav niz dodataka koje možemo uvesti na našu web stranicu i koristiti ih za stvaranje user-friendly web stranica.

Shvatimo razliku.

JavaScript vs jQuery

Nastavljamo s razlikom između JavaScripta i jQueryja s Primjerom.

JavaScript vs jQuery s primjerima

Pogledajmo primjere.

Dodavanje JavaScript-a i jQuery-a u naš HTML dokument

JavaScript se dodaje izravno u HTML dokument unutar oznake ili se vanjska JavaScript datoteka može dodati u HTML dokument pomoću atributa src.
Napisano izravno unutar oznake skripte:

alert ('Ovaj je okvir upozorenja pozvan s događajem učitavanja')

Da bismo koristili jQuery, datoteku preuzimamo s njene web stranice i upućujemo na put preuzete datoteke jQuery u atributu src oznake SCRIPT ili je možemo dobiti izravno s CDN-a (mreža za isporuku sadržaja).

Korištenje CDN-a :

Razumijemo DOM prelazak i manipulaciju

DOM preokret i manipulacija

U JavaScript-u:

DOM element u JavaScriptu možemo odabrati pomoću metode document.getElementById () ili metodom document.querySelector ().

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

ili

document.getElementById (“# div1”)

U jQueryju:

Ovdje ćemo morati koristiti samo simbol $ s biračem u zagradama.

$ (selector) $ ('# div1') - Selektor je id 'div1' $ ('. div1') - Selektor je klasa 'div1' $ ('p') - Selektor je odlomak u Html stranica

U gornjoj izjavi, $ je znak koji se koristi za pristup jQueryju, selektor je HTML element.

Dodavanje stilova u JavaScript:

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

Dodavanje stilova u jQuery:

$ ('# myDiv'). css ('boja pozadine', '# FFF')

Selektor #myDiv odnosi se na identifikator 'myDiv'

Odabir i manipulacija DOM elementima puno je sažetiji u jQueryju nego u JavaScriptu.

Nastavljamo s rukovanjem događajima.

Rukovanje događajima

U JavaScriptu odabiremo HTML element:

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

Ovdje se metoda getElementById () koristi za odabir elementa prema njegovom id-u, a zatim metodom addEventListener () dodajemo slušatelj događaja u događaj. U ovom primjeru dodajemo funkciju myCallback kao preslušač događaja „klik“.

U gornjem primjeru možemo koristiti i anonimnu funkciju:

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

EventListener se može ukloniti metodom removeEventListener ()

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

U jQueryju

jQuery je unaprijed definirao događaje za gotovo sve DOM akcije. Specifični događaj jQuery možemo koristiti za akciju.

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

Ostali primjeri su:

$ (“# Button1”). Dblclick (function () {// akcija za dvostruki klik na html element s id-om ‘button1’}

JQuery 'on' metoda koristi se za dodavanje jednog ili više događaja u DOM element.

$ (“# Button1”). On (“klik”, funkcija () {// akcija ovdje})

Metodom on možemo dodati više događaja i više obrađivača događaja.

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

Dva ili više događaja mogu imati isti rukovatelj kao u nastavku:

$ (“# Button1”). On (“klikni dblclick”, funkcija () {// akcija ovdje})

Stoga vidimo da je s manje i sažetim kodom upravljanje događajima lakše u jQueryju nego u JavaScriptu.

Nastavljamo s Ajax pozivima.

Ajax poziva

U JavaScriptu

JavaScript je koristio objekt XMLHttpRequest za slanje Ajax zahtjeva poslužitelju. XMLHttpRequest ima nekoliko metoda za upućivanje Ajax poziva. Dvije su uobičajene metode otvorene (metoda, URL, asinkronizacija, korisnik, PSW), send () i send (string).
Stvorimo prvo XMLHttpRequest:

var xhttp = novi XMLHttpRequest () Zatim upotrijebite ovaj objekt za pozivanje otvorene metode: xhttp.open ('GET', 'D: //getinfo.txt', true) xhttp.send ()

Otvorena metoda daje zahtjev za dobivanje poslužitelju / lokaciji, a true navodi da je zahtjev asinkroni. Ako je vrijednost lažna, to znači da je zahtjev sinkroniziran.

Izrada zahtjeva za objavu:

var xhttp = novi XMLHttpRequest () Zatim upotrijebite ovaj objekt za pozivanje metode open i izradu zahtjeva za objavom: xhttp.open ('POST', 'D: //postinfo.txt', true) xhttp.send ()

Za objavljivanje podataka sa zahtjevom koristimo metodu setRequestHeader xhttp da definiramo vrstu podataka koji se šalju, a metoda slanja šalje podatke u parovima ključ / vrijednost:

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

U jQueryju

jQuery ima nekoliko ugrađenih metoda za upućivanje Ajax poziva. Ovim metodama možemo nazvati bilo koje podatke s poslužitelja i ažurirati dio web stranice s tim podacima. jQuery metode olakšavaju Ajaxov poziv.
Metoda jQuery load (): Ova metoda dohvaća podatke s URL-a i učitava ih u HTML birač.
$ ('P'). Učitavanje (URL, podaci, povratni poziv)
URL je mjesto koje se poziva za podatke, neobavezni parametar podataka su podaci (parovi ključ / vrijednost) koje želimo poslati zajedno s pozivom, a neobavezni parametar 'povratni poziv' je metoda koju želimo izvršiti nakon učitavanja je dovršen.

Metoda jQuery $ .get () i $ .post (): Ova metoda dohvaća podatke s URL-a i učitava ih u HTML birač.
$ .get (URL, povratni poziv)
URL je mjesto koje se poziva za podatke, a povratni poziv je metoda koju želimo izvršiti nakon završetka učitavanja.

$ .post (URL, podaci, povratni poziv)
URL je mjesto koje se poziva za podatke, podaci su par ključ / vrijednost koji želimo poslati s pozivom, a povratni poziv je metoda koju želimo izvršiti nakon završetka učitavanja. Ovdje su podaci i parametri povratnog poziva neobavezni.

jQuery Ajax pozivi su sažetiji od JavaScript-a. U JavaScriptu koristimo objekt XMLHTTPRequest, u jQueryju ne moramo koristiti takav objekt.

Nastavljamo s animacijom.

Animacija

U JavaScriptu

JavaScript nema određenu funkciju animacije poput funkcije jQuery animate (). U JavaScript se efekt animacije uglavnom postiže manipuliranjem stilom elementa ili pomoću CSS svojstava pretvorbe, prevođenja ili animiranja. JavaScript također koristi metode setInterval (), clearInterval (), setTimeout () i clearTimeout () za efekte animacije.

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

Animacija u JavaScript-u uglavnom se odnosi na manipulaciju svojstvima CSS-a.

U jQueryju

max implementacija hrpe u javi

jQuery ima mnogo ugrađenih metoda za dodavanje animacija ili efekata na HTML elemente. Provjerimo nekoliko njih.
Metoda animate (): Ova metoda se koristi za dodavanje animacije na element.

$ ('# button1'). kliknite (function () {$ ('# div1') .animate ({visina: '300px'})}))

Metoda show (): Ovom se metodom element čini vidljivim iz skrivenog stanja.

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

Metoda hide (): Ova metoda koristi se za skrivanje elementa iz vidljivog stanja.

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

jQuery ima vlastite metode za izradu animacije i efekata na web stranici.

Da rezimiramo, JavaScript je jezik za web razvoj, jQuery je knjižnica koja je nastala iz JavaScript-a. JavaScript i jQuery imaju vlastitu važnost u web razvoju.

Sad kad znate za JavaScript petlje, pogledajte od Edureke. Obuka za certificiranje web razvoja pomoći će vam naučiti kako stvoriti impresivne web stranice pomoću HTML5, CSS3, Twitter Bootstrap 3, jQuery i Google API-ja te ih rasporediti na Amazon Simple Storage Service (S3).

Imate pitanje za nas? Molimo vas da ga spominjete u odjeljku za komentare 'JavaScript vs jQuery', a mi ćemo vam se javiti.