JavaScript vs jQuery: Nøgleforskelle, du har brug for at vide

Vi har kendt JavaScript og JQuery i et par år. JavaScript blev opfundet tidligere end jQuery. Begge er kraftfulde og bruges i webudvikling og bruges til samme formål, dvs. at gøre websiden interaktiv og dynamisk. Med andre ord giver de liv til websiderne. Folk undrer sig måske over, at hvis de bruges til det samme formål, hvorfor disse to separate begreber? I denne JavaScript vs jQuery-artikel finder vi ud af, hvad der er bedre end den anden i følgende sekvens:

• JavaScript: Et stærkt sprog inden for webudvikling
• JQuery: Et bibliotek udviklet fra JavaScript
• Hvorfor JQuery oprettes, og hvad er de specielle muligheder for JQuery
• Forskel mellem JavaScript og JQuery med eksempler
  • Tilføjelse af JavaScript og JQuery i vores HTML-dokument
  • DOM-gennemgang og manipulation
  • Håndtering af begivenheder
  • Ajax ringer
  • Animation

JavaScript: Et stærkt sprog inden for webudvikling

JavaScript er et script-sprog, der bruges til at tilføje interaktivitet til vores websider. Det er en af ​​de tre kerneteknologier ved siden af ​​HTML og CSS, der bruges til at oprette websider. Mens HTML og CSS definerer websides struktur og udseende / styling af websider, bruges JavaScript til at gøre websiden dynamisk ved at tilføje interaktivitet til den, hvilket betyder, at vi med JavaScript kan tilføje nogle koder til museklik, mus over og andet begivenheder på websiden og meget mere.

JavaScript understøttes af alle webbrowsere, og webbrowserne har en indbygget JavaScript-motor til at identificere JavaScript-kode og arbejde med den. Således er JavaScript hovedsageligt et sprog på klientsiden. Det er et sprog, der kan bruges som et proceduremæssigt sprog såvel som et prototype-baseret objektorienteret sprog. Når vi bruger primær JavaScript, arbejder vi med det processuelle sprog, mens avanceret JavaScript bruger objektorienterede koncepter.

Lad os gå videre med vores JavaScript vs jQuery og forstå det bibliotek, der er udviklet fra JavaScript.

jQuery: Et bibliotek udviklet fra JavaScript

I årenes løb har JavaScript vist sig at være et stærkt sprog til webudvikling. Der er mange biblioteker og rammer, der er kommet op, som er bygget oven på JavaScript. Disse biblioteker og rammer er udviklet til at udvide JavaScript-funktionen, gøre mange ting med det og også for at gøre udviklerens job lettere.

jQuery er et sådant JavaScript-bibliotek, som er bygget ud fra det. Det er det mest populære JavaScript-bibliotek opfundet af John Resign og blev udgivet januar 2006 på BarCamp NYC. jQuery er gratis, et open source-bibliotek, licenseret under MIT-licensen. Dette har en stærk funktion af kompatibilitet på tværs af browsere. Det kan nemt håndtere problemer med flere browsere, som vi kan stå over for med JavaScript. Således bruger mange udviklere jQuery for at undgå problemer med kompatibilitet på tværs af browsere.

Lad os nu gå videre med vores JavaScript vs jQuery-blog og se, hvorfor jQuery blev oprettet.

Hvorfor jQuery oprettes, og hvad er jQuery's særlige muligheder?

I JavaScript er vi nødt til at skrive en masse kode til basale operationer, mens med jQuery kan de samme operationer udføres med en enkelt kodelinje. Derfor har udviklere det lettere at arbejde med jQuery end med JavaScript.

• Selvom JavaScript er det grundlæggende sprog, som jQuery har udviklet sig fra, gør jQuery begivenhedshåndtering, DOM-manipulation, Ajax kalder meget lettere end JavaScript. jQuery giver os også mulighed for at tilføje animerede effekter på vores webside, som tager meget smerte og kodelinjer med JavaScript.
• jQuery har indbyggede plugins til at udføre en handling på en webside. Vi skal bare inkludere eller importere pluginet på vores webside for at bruge det. Plugins giver os således mulighed for at skabe abstraktioner af animationer og interaktioner eller effekter.
• Vi kan også lave vores brugerdefinerede plugin med jQuery. Hvis vi kræver, at der foretages en animation på en webside på en bestemt måde, kan vi udvikle et plugin i henhold til kravet og bruge det på vores webside.
• jQuery har også et højt niveau UI-widgetbibliotek. Dette widgetbibliotek har en lang række plugins, som vi kan importere på vores webside og bruge det til at oprette brugervenlige websider.

Lad os forstå forskellen.

JavaScript vs jQuery

Fortsætter med forskellen mellem JavaScript og jQuery med eksempel.

hvordan man får adgang til aws cli

JavaScript vs jQuery med eksempler

Lad os se på eksemplerne.

Tilføjelse af JavaScript og jQuery i vores HTML-dokument

JavaScript tilføjes direkte i HTML-dokumentet inde i tagget, eller en ekstern JavaScript-fil kan tilføjes i et HTML-dokument ved hjælp af attributten src.
Skrevet direkte inde i script-tagget:

alarm ('Denne advarselsboks blev kaldt med onload-begivenheden')

For at bruge jQuery downloader vi filen fra dens hjemmeside og henviser stien til den downloadede jQuery-fil i SRC-attributten til SCRIPT-koden, eller vi kan få den direkte fra CDN (Content Delivery Network).

Brug af CDN :

Lad os forstå DOM Traversal og Manipulation

DOM-gennemgang og manipulation

I JavaScript:

Vi kan vælge et DOM-element i JavaScript ved hjælp af metoden document.getElementById () eller ved hjælp af metoden document.querySelector ().

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

eller

document.getElementById (“# div1”)

I jQuery:

Her skal vi kun bruge $ symbolet med vælgeren i parentes.

$ (vælger) $ (“# div1”) - Vælgeren er et id 'div1' $ ('. div1') - Vælgeren er en klasse 'div1' $ ('p') - Vælgeren er afsnittet i HTML-side

I ovenstående udsagn er $ et tegn, der bruges til at få adgang til jQuery, vælgeren er et HTML-element.

Tilføjelse af stilarter i JavaScript:

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

Tilføjelse af stilarter i jQuery:

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

#MyDiv-vælgeren henviser til 'myDiv' -identifikatoren

Valg og manipulation af DOM-elementer er meget mere kortfattet i jQuery end i JavaScript.

Fortsætter med håndtering af begivenheder.

Håndtering af begivenheder

I JavaScript vælger vi et HTML-element:

document.getElementById ('# button1'). addEventListener ('klik ', myCallback) funktion myCallback () {konsol (' inde i myCallback funktion ')}

Her bruges metoden getElementById () til at vælge et element efter dets id, så bruger vi metoden addEventListener () til at tilføje en begivenhedslytter til begivenheden. I dette eksempel tilføjer vi myCallback-funktionen som lytter til 'klik'-begivenheden.

Vi kan også bruge en anonym funktion i ovenstående eksempel:

document.getElementById ('# button1'). addEventListener ('klik', funktion () {console.log ('inde i funktionen')})

EventListener kan fjernes ved hjælp af metoden removeEventListener ()

document.getElementById ('# button1'). removeEventListener ('klik', myCallback)

I jQuery

jQuery har foruddefinerede begivenheder til næsten alle DOM-handlinger. Vi kan bruge den specifikke jQuery-begivenhed til en handling.

$ (“P”). Klik (funktion () {// klikhandling})

Andre eksempler er:

$ (“# Knap1”). Dblclick (funktion () {// handling for dobbeltklikhændelsen på html-elementet med id 'knap1'}

JQuery 'on' -metoden bruges til at føje en eller flere begivenheder til et DOM-element.

$ ('# Knap1'). Til ('klik', funktion () {// handling her})

Vi kan tilføje flere begivenheder og flere begivenhedshåndterere med on-metoden.

$ (“Button1”). Til ({klik: funktion () {// handling her}, dblclick: funktion () {// handling her}})

To eller flere begivenheder kan have samme handler som nedenfor:

$ ('# Button1'). On ('klik på dblclick', funktion () {// handling her})

Således ser vi, at med mindre og kortfattet kode er håndtering af begivenheder lettere i jQuery end i JavaScript.

Fortsætter med Ajax Calls.

Ajax ringer

I JavaScript

JavaScript brugte et XMLHttpRequest-objekt til at sende en Ajax-anmodning til en server. XMLHttpRequest har flere metoder til at foretage Ajax-opkaldet. De to almindelige metoder er åbne (metode, URL, async, bruger, PSW), send () og send (streng).
Lad os først oprette en XMLHttpRequest:

var xhttp = ny XMLHttpRequest () Brug derefter dette objekt til at kalde den åbne metode: xhttp.open ('GET', 'D: //getinfo.txt', true) xhttp.send ()

Den åbne metode foretager en get-anmodning til en server / placering, sandheden angiver, at anmodningen er asynkron. Hvis værdien er falsk, betyder det, at anmodningen er synkron.

Foretag en postanmodning:

var xhttp = new XMLHttpRequest () Brug derefter dette objekt til at kalde den åbne metode og fremsende en postanmodning: xhttp.open ('POST', 'D: //postinfo.txt', true) xhttp.send ()

For at sende data med anmodningen bruger vi setRequestHeader-metoden til xhttp til at definere typen af ​​data, der skal sendes, og sendemetoden sender dataene i nøgle / værdipar:

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

I jQuery

jQuery har flere indbyggede metoder til at foretage Ajax-opkald. Med disse metoder kan vi kalde alle data fra serveren og opdatere en del af websiden med dataene. jQuery-metoder gør Ajax-opkald let.
Metoden jQuery load (): Denne metode henter data fra en URL og indlæser dataene til en HTML-vælger.
$ (“P”). Indlæs (URL, data, tilbagekald)
URL'en er den placering, der kaldes til dataene, den valgfri dataparameter er de data (nøgle / værdipar), vi vil sende sammen med opkaldet, og den valgfri parameter 'tilbagekaldelse' er den metode, vi vil udføre efter belastningen er afsluttet.

Metoden jQuery $ .get () og $ .post (): Denne metode henter data fra en URL og indlæser dataene til en HTML-vælger.
$ .get (URL, tilbagekaldelse)
URL'en er det sted, der kaldes til dataene, og tilbagekaldelsen er den metode, vi vil udføre, når belastningen er afsluttet.

$ .post (URL, data, tilbagekald)
URL'en er den placering, der kaldes til dataene, dataene er de nøgle / værdipar, som vi vil sende med opkaldet, og tilbagekald er den metode, vi vil udføre, når belastningen er afsluttet. Her er data og tilbagekaldsparametre valgfri.

jQuery Ajax-opkald er mere kortfattede end JavaScript. I JavaScript bruger vi et XMLHTTPRequest-objekt, i jQuery behøver vi ikke bruge et sådant objekt.

Fortsætter med animation.

Animation

I JavaScript

JavaScript har ikke en bestemt animationsfunktion som jQuery animate () -funktion. I JavaScript opnås animationseffekten hovedsageligt ved at manipulere elementets stil eller ved at bruge CSS-transformations-, oversættelses- eller animationsegenskaber. JavaScript bruger også setInterval (), clearInterval (), setTimeout () og clearTimeout () til animationseffekter.

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

Animation i JavaScript handler primært om manipulation af CSS-egenskaberne.

hvad er salesforce service sky

I jQuery

jQuery har mange indbyggede metoder til at tilføje animationer eller effekter på HTML-elementer. Lad os kontrollere et par af dem.
Animate () -metoden: Denne metode bruges til at tilføje animation på et element.

$ ('# button1'). klik på (funktion () {$ ('# div1'). animere ({højde: '300px'})})

Show () -metoden: Denne metode bruges til at gøre et element synligt fra en skjult tilstand.

$ ('# knap1'). klik på (funktion () {$ ('# div1'). vis ()})

Metoden Skjul (): Denne metode bruges til at skjule et element fra en synlig tilstand.

$ ('# button1'). klik på (funktion () {$ ('# div1'). skjul ()})

jQuery har sine egne metoder til at producere animation og effekter på en webside.

For at opsummere er JavaScript et sprog til webudvikling, jQuery er et bibliotek, der stammer fra JavaScript. JavaScript og jQuery har deres egen betydning i webudvikling.

Nu hvor du kender JavaScript-sløjfer, skal du tjekke af Edureka. Webudvikling certificeringstræning hjælper dig med at lære, hvordan du opretter imponerende websteder ved hjælp af HTML5, CSS3, Twitter Bootstrap 3, jQuery og Google API'er og distribuerer det til Amazon Simple Storage Service (S3).

Har du et spørgsmål til os? Nævn det i kommentarfeltet i “JavaScript vs jQuery”, så vender vi tilbage til dig.