JavaScript vs jQuery: Viktige forskjeller du trenger å vite

Vi har kjent JavaScript og JQuery i ganske mange år. JavaScript ble oppfunnet tidligere enn jQuery. Begge er kraftige og brukes i webutvikling og brukes til samme formål, dvs. for å gjøre websiden interaktiv og dynamisk. Med andre ord gir de liv til websidene. Folk lurer kanskje på at hvis de brukes til samme formål, hvorfor disse to separate konseptene? I denne JavaScript vs jQuery-artikkelen vil vi finne ut hva som er bedre enn den andre i følgende sekvens:

• JavaScript: Et kraftig språk innen nettutvikling
• JQuery: Et bibliotek utviklet fra JavaScript
• Hvorfor JQuery er opprettet og hva er de spesielle egenskapene til JQuery
• Forskjellen mellom JavaScript og JQuery med eksempler
  • Legge til JavaScript og JQuery i vårt HTML-dokument
  • DOM gjennomgang og manipulasjon
  • Håndtering av hendelser
  • Ajax ringer
  • Animasjon

JavaScript: Et kraftig språk innen nettutvikling

JavaScript er et skriptspråk som brukes til å legge til interaktivitet på websidene våre. Det er en av de tre kjerneteknologiene ved siden av HTML og CSS som brukes til å lage websider. Mens HTML og CSS definerer strukturen på websiden og utseendet / utformingen av websidene, brukes JavaScript til å gjøre websiden dynamisk ved å legge til interaktivitet til den, noe som betyr at vi med JavaScript kan legge til litt kode for museklikk, mus over og annet hendelser på websiden og mye mer.

JavaScript støttes av alle nettlesere, og nettleserne har en innebygd JavaScript-motor for å identifisere JavaScript-kode og jobbe med den. Dermed er JavaScript hovedsakelig et klientsidespråk. Det er ett språk som kan brukes som et prosessuelt språk, så vel som et prototypebasert objektorientert språk. Når vi bruker primær JavaScript, jobber vi med prosessspråket mens avansert JavaScript bruker objektorienterte konsepter.

La oss gå videre med JavaScript vs jQuery og forstå biblioteket utviklet fra JavaScript.

jQuery: Et bibliotek utviklet fra JavaScript

Gjennom årene har JavaScript vist seg å være et kraftig språk for webutvikling. Det er mange biblioteker og rammer som har kommet opp som er bygget oppå JavaScript. Disse bibliotekene og rammene er utviklet for å utvide JavaScript-muligheten, gjøre mange ting med det og også for å gjøre jobben til utvikleren lettere.

jQuery er et slikt JavaScript-bibliotek som er bygget fra det. Det er det mest populære JavaScript-biblioteket oppfunnet av John Resign og ble utgitt januar 2006 på BarCamp NYC. jQuery er gratis, et open source-bibliotek, lisensiert under MIT-lisensen. Dette har en kraftig funksjon av kompatibilitet mellom nettlesere. Det kan enkelt håndtere problemer mellom nettlesere som vi kan møte med JavaScript. Dermed bruker mange utviklere jQuery for å unngå kompatibilitetsproblemer mellom nettlesere.

La oss nå gå videre med JavaScript vs jQuery-bloggen og se hvorfor jQuery ble opprettet.

Hvorfor jQuery opprettes, og hva er de spesielle egenskapene til jQuery?

I JavaScript må vi skrive mye kode for grunnleggende operasjoner mens med jQuery kan de samme operasjonene gjøres med en enkelt kodelinje. Derfor finner utviklere det lettere å jobbe med jQuery enn med JavaScript.

• Selv om JavaScript er det grunnleggende språket som jQuery har utviklet seg fra, gjør jQuery hendelseshåndtering, DOM-manipulering, Ajax kaller mye enklere enn JavaScript. jQuery lar oss også legge til animerte effekter på websiden vår som tar mye smerte og kodelinjer med JavaScript.
• jQuery har innebygde plugins for å utføre en operasjon på en webside. Vi må bare inkludere eller importere plugin-en på nettsiden vår for å bruke den. Dermed lar plugins oss lage abstraksjoner av animasjoner og interaksjoner eller effekter.
• Vi kan også lage vårt tilpassede plugin med jQuery. Hvis vi krever at en animasjon skal gjøres på en webside på en bestemt måte, kan vi utvikle et plugin i henhold til kravet og bruke det på vår webside.
• jQuery har også et UI-widgetbibliotek på høyt nivå. Dette widgetbiblioteket har et stort utvalg av plugins som vi kan importere på websiden vår og bruke den til å lage brukervennlige nettsider.

La oss forstå forskjellen.

lage et objekt array i java

JavaScript vs jQuery

Fortsetter med forskjellen mellom JavaScript og jQuery med eksempel.

JavaScript vs jQuery med eksempler

La oss se på eksemplene.

Legge til JavaScript og jQuery i vårt HTML-dokument

JavaScript legges til direkte i HTML-dokumentet inne i koden, eller en ekstern JavaScript-fil kan legges til i et HTML-dokument ved hjelp av attributtet src.
Skrevet direkte inne i skriptekoden:

varsel ('Denne varslingsboksen ble ringt med onload hendelsen')

For å bruke jQuery laster vi ned filen fra nettstedet og henviser banen til den nedlastede jQuery-filen i src-attributtet til SCRIPT-koden, eller vi kan få den direkte fra CDN (Content Delivery Network).

Bruke CDN :

La oss forstå DOM Traversal and Manipulation

DOM gjennomgang og manipulasjon

I JavaScript:

Vi kan velge et DOM-element i JavaScript ved hjelp av metoden document.getElementById () eller ved hjelp av metoden document.querySelector ().

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

eller

document.getElementById (“# div1”)

I jQuery:

Her må vi bare bruke $ -symbolet med velgeren i parentes.

$ (selector) $ (“# div1”) - Velgeren er en id 'div1' $ ('. div1') - Velgeren er en klasse 'div1' $ ('p') - Velgeren er avsnittet i HTML-side

I uttalelsen ovenfor er $ et tegn som brukes til å få tilgang til jQuery, velgeren er et HTML-element.

Legge til stiler i JavaScript:

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

Legge til stiler i jQuery:

$ ('# myDiv'). css ('bakgrunnsfarge', '# FFF')

#MyDiv-velgeren refererer til 'myDiv' -identifikatoren

DOM-elementvalg og manipulering er mye mer kortfattet i jQuery enn i JavaScript.

Fortsetter med håndtering av hendelser.

c ++ sorteringsfunksjon

Håndtering av hendelser

I JavaScript velger vi et HTML-element:

document.getElementById ('# button1'). addEventListener ('klikk', myCallback) funksjon myCallback () {konsoll ('inne i myCallback-funksjonen')}

Her brukes getElementById () -metoden til å velge et element etter id-en, så bruker vi addEventListener () -metoden for å legge til en hendelseslytter til hendelsen. I dette eksemplet legger vi til myCallback-funksjonen som lytter til 'klikk' -hendelsen.

Vi kan også bruke en anonym funksjon i eksemplet ovenfor:

document.getElementById ('# button1'). addEventListener ('klikk', funksjon () {console.log ('inne i funksjonen')})

EventListener kan fjernes ved å bruke metoden removeEventListener ()

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

I jQuery

jQuery har forhåndsdefinerte hendelser for nesten alle DOM-handlinger. Vi kan bruke den spesifikke jQuery-hendelsen til en handling.

$ (“P”). Klikk (funksjon () {// klikk handling})

Andre eksempler er:

$ (“# Button1”). Dblclick (function () {// handling for dobbeltklikkhendelsen på html-elementet med id ‘button1’}

JQuery 'on' -metoden brukes til å legge til en eller flere hendelser til et DOM-element.

$ (“# Button1”). On (“klikk”, funksjon () {// handling her})

Vi kan legge til flere hendelser og flere hendelsesbehandlere med metoden.

$ (“Button1”). På ({klikk: funksjon () {// handling her}, dblclick: funksjon () {// handling her}})

To eller flere hendelser kan ha samme behandler som nedenfor:

$ (“# Button1”). På (“klikk dblclick”, funksjon () {// handling her})

Dermed ser vi at med mindre og kortfattet kode er hendelsesbehandling lettere i jQuery enn i JavaScript.

Fortsetter med Ajax Calls.

Ajax ringer

I JavaScript

JavaScript brukte et XMLHttpRequest-objekt for å sende en Ajax-forespørsel til en server. XMLHttpRequest har flere metoder for å ringe Ajax. De to vanlige metodene er åpne (metode, URL, async, bruker, PSW), send () og send (streng).
La oss lage en XMLHttpRequest først:

var xhttp = new XMLHttpRequest () Bruk deretter dette objektet til å kalle den åpne metoden: xhttp.open ('GET', 'D: //getinfo.txt', true) xhttp.send ()

Den åpne metoden gjør en få forespørsel til en server / plassering, sant angir at forespørselen er asynkron. Hvis verdien er falsk, betyr det at forespørselen er synkron.

Forespørsel om innlegg:

var xhttp = new XMLHttpRequest () Bruk deretter dette objektet til å ringe den åpne metoden og legg inn en forespørsel: xhttp.open ('POST', 'D: //postinfo.txt', true) xhttp.send ()

For å legge ut data med forespørselen bruker vi setRequestHeader-metoden til xhttp for å definere typen data som skal sendes, og sendemetoden sender dataene i nøkkel / verdipar:

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

I jQuery

jQuery har flere innebygde metoder for å ringe Ajax. Med disse metodene kan vi ringe alle data fra serveren og oppdatere en del av websiden med dataene. jQuery-metoder gjør det enkelt å ringe til Ajax.
Metoden jQuery load (): Denne metoden henter data fra en URL og laster dataene til en HTML-velger.
$ (“P”). Last (URL, data, tilbakeringing)
URL-en er stedet som kalles for dataene, den valgfrie dataparameteren er dataene (nøkkel / verdipar) vi vil sende sammen med samtalen, og den valgfrie parameteren 'tilbakeringing' er metoden vi vil utføre etter belastningen det er ferdig.

Metoden jQuery $ .get () og $ .post (): Denne metoden henter data fra en URL og laster dataene til en HTML-velger.
$ .get (URL, tilbakeringing)
URL-en er stedet som kalles for dataene, og tilbakeringing er metoden vi vil utføre etter at belastningen er fullført.

$ .post (URL, data, tilbakeringing)
URL-en er stedet som kalles for dataene, dataene er nøkkelen / verdiparet / -ene vi vil sende med samtalen, og tilbakeringingen er metoden vi vil utføre etter at belastningen er fullført. Her er data og tilbakeringingsparametere valgfrie.

jQuery Ajax-samtaler er mer kortfattede enn JavaScript. I JavaScript bruker vi et XMLHTTPRequest-objekt, i jQuery trenger vi ikke bruke et slikt objekt.

Gå videre med animasjon.

Animasjon

I JavaScript

JavaScript har ikke en spesifikk animasjonsfunksjon som jQuery animate () -funksjon. I JavaScript oppnås animasjonseffekten hovedsakelig ved å manipulere stilen til elementet eller ved å bruke CSS transformere, oversette eller animere egenskaper. JavaScript bruker også setInterval (), clearInterval (), setTimeout () og clearTimeout () for animasjonseffekter.

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

Animasjon i JavaScript handler hovedsakelig om å manipulere CSS-egenskapene.

nullpeker unntak i java eksempel program

I jQuery

jQuery har mange innebygde metoder for å legge til animasjoner eller effekter på HTML-elementer. La oss sjekke noen få av dem.
Animate () -metoden: Denne metoden brukes til å legge til animasjon på et element.

$ ('# button1'). klikk (funksjon () {$ ('# div1'). animere ({høyde: '300px'})})

Show () -metoden: Denne metoden brukes til å gjøre et element synlig fra en skjult tilstand.

$ ('# button1'). klikk (funksjon () {$ ('# div1'). vis ()})

Skjul-metoden: Denne metoden brukes til å skjule et element fra en synlig tilstand.

$ ('# button1'). klikk på (funksjon () {$ ('# div1'). skjul ()})

jQuery har sine egne metoder for å produsere animasjon og effekter på en webside.

For å oppsummere er JavaScript et språk for webutvikling, jQuery er et bibliotek som har sitt utspring fra JavaScript. JavaScript og jQuery har sin egen betydning i nettutviklingen.

Nå som du vet om JavaScript-looper, sjekk ut av Edureka. Webutvikling sertifiseringstrening hjelper deg med å lære hvordan du lager imponerende nettsteder ved hjelp av HTML5, CSS3, Twitter Bootstrap 3, jQuery og Google APIer og distribuerer det til Amazon Simple Storage Service (S3).

Har du et spørsmål til oss? Vennligst nevn det i kommentarfeltet i “JavaScript vs jQuery”, så kommer vi tilbake til deg.