JavaScript vs jQuery: Viktiga skillnader du behöver veta

Vi har känt JavaScript och JQuery i ganska många år. JavaScript uppfanns tidigare än jQuery. Båda är kraftfulla och används i webbutveckling och används i samma syfte, dvs för att göra webbsidan interaktiv och dynamisk. Med andra ord ger de liv åt webbsidorna. Folk kanske undrar att om de används för samma ändamål, varför dessa två olika begrepp? I denna JavaScript vs jQuery-artikel kommer vi att ta reda på vilken som är bättre än den andra i följande sekvens:

• JavaScript: Ett kraftfullt språk inom webbutveckling
• JQuery: Ett bibliotek utvecklat från JavaScript
• Varför JQuery skapas och vilka är de speciella funktionerna i JQuery
• Skillnad mellan JavaScript och JQuery med exempel
  • Lägga till JavaScript och JQuery i vårt HTML-dokument
  • DOM-genomgång och manipulation
  • Händelsehantering
  • Ajax ringer
  • Animation

JavaScript: Ett kraftfullt språk inom webbutveckling

JavaScript är ett skriptspråk som används för att lägga till interaktivitet på våra webbsidor. Det är en av de tre kärnteknikerna vid sidan av HTML och CSS som används för att skapa webbsidor. Medan HTML och CSS definierar webbsidans struktur och utseende / utformning av webbsidor, används JavaScript för att göra webbsidan dynamisk genom att lägga till interaktivitet till den, vilket innebär att vi med JavaScript kan lägga till lite kod för musklick, mus över och annat händelser på webbsidan och mycket mer.

JavaScript stöds av alla webbläsare och webbläsarna har en inbyggd JavaScript-motor för att identifiera JavaScript-kod och arbeta med den. Således är JavaScript huvudsakligen ett klientsidespråk. Det är ett språk som kan användas som ett processpråk såväl som ett prototypbaserat objektorienterat språk. När vi använder primär JavaScript arbetar vi med processpråket medan avancerad JavaScript använder objektorienterade koncept.

Låt oss gå vidare med vår JavaScript vs jQuery och förstå biblioteket som utvecklats från JavaScript.

jQuery: Ett bibliotek utvecklat från JavaScript

Under åren har JavaScript visat sig vara ett kraftfullt språk för webbutveckling. Det finns många bibliotek och ramar som har kommit upp som är byggda ovanpå JavaScript. Dessa bibliotek och ramar är utvecklade för att utöka JavaScript-möjligheten, göra många saker med det och även för att göra utvecklarens jobb enklare.

jQuery är ett sådant JavaScript-bibliotek som byggs från det. Det är det mest populära JavaScript-biblioteket som uppfanns av John Resign och släpptes i januari 2006 på BarCamp NYC. jQuery är gratis, ett bibliotek med öppen källkod, licensierat under MIT-licensen. Detta har en kraftfull funktion för kompatibilitet mellan webbläsare. Det kan enkelt hantera problem med webbläsare som vi kan möta med JavaScript. Således använder många utvecklare jQuery för att undvika kompatibilitetsproblem mellan webbläsare.

Låt oss nu gå vidare med vår JavaScript vs jQuery-blogg och se varför jQuery skapades.

Varför skapas jQuery och vad är de speciella funktionerna med jQuery?

I JavaScript måste vi skriva mycket kod för grundläggande operationer medan med jQuery kan samma operationer göras med en enda kodrad. Därför har utvecklare lättare att arbeta med jQuery än med JavaScript.

• Även om JavaScript är det grundläggande språket som jQuery har utvecklats från, gör jQuery händelsehantering, DOM-manipulation, Ajax kallar mycket lättare än JavaScript. jQuery tillåter oss också att lägga till animerade effekter på vår webbsida som tar mycket smärta och kodrader med JavaScript.
• jQuery har inbyggda plugins för att utföra en operation på en webbsida. Vi måste bara inkludera eller importera plugin-programmet på vår webbsida för att använda det. Således tillåter plugins oss att skapa abstraktioner av animationer och interaktioner eller effekter.
• Vi kan också göra vårt anpassade plugin med jQuery. Om vi ​​kräver att en animering görs på en webbsida på ett visst sätt kan vi utveckla ett plugin enligt kravet och använda det på vår webbsida.
• jQuery har också ett widgetbibliotek på hög nivå. Detta widgetbibliotek har ett stort antal plugins som vi kan importera på vår webbsida och använda det för att skapa användarvänliga webbsidor.

Låt oss förstå skillnaden.

JavaScript vs jQuery

Fortsätter med skillnaden mellan JavaScript och jQuery med exempel.

JavaScript vs jQuery med exempel

Låt oss titta på exemplen.

Lägga till JavaScript och jQuery i vårt HTML-dokument

JavaScript läggs till direkt i HTML-dokumentet inuti taggen eller en extern JavaScript-fil kan läggas till i ett HTML-dokument med attributet src.
Skrivet direkt inuti skripttaggen:

alert ('Denna varningsruta anropades med onload-händelsen')

För att använda jQuery laddar vi ner filen från dess webbplats och hänvisar sökvägen till den nedladdade jQuery-filen i src-attributet för SCRIPT-taggen eller så kan vi hämta den direkt från CDN (Content Delivery Network).

Använda CDN :

Låt oss förstå DOM Traversal and Manipulation

DOM-genomgång och manipulation

I JavaScript:

Vi kan välja ett DOM-element i JavaScript med hjälp av metoden document.getElementById () eller med hjälp av metoden document.querySelector ().

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

eller

document.getElementById (“# div1”)

I jQuery:

Här måste vi bara använda $ -symbolen med väljaren inom parentes.

$ (väljare) $ (“# div1”) - Väljaren är ett id 'div1' $ ('. div1') - Väljaren är en klass 'div1' $ ('p') - Väljaren är stycket i HTML-sida

I ovanstående uttalande är $ ett tecken som används för att komma åt jQuery, väljaren är ett HTML-element.

Lägga till stilar i JavaScript:

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

Lägga till stilar i jQuery:

$ ('# myDiv'). css ('bakgrundsfärg', '# FFF')

#MyDiv-väljaren hänvisar till 'myDiv' -identifieraren

DOM-elementval och manipulation är mycket mer kortfattat i jQuery än i JavaScript.

Fortsätter med händelsehantering.

Händelsehantering

I JavaScript väljer vi ett HTML-element:

document.getElementById ('# button1'). addEventListener ('klicka', myCallback) funktion myCallback () {konsol ('inuti myCallback-funktion')}

Här används metoden getElementById () för att markera ett element med dess id, sedan använder vi metoden addEventListener () för att lägga till en händelselyssnare till händelsen. I det här exemplet lägger vi till myCallback-funktionen som en lyssnare till 'klicka' -händelsen.

Vi kan också använda en anonym funktion i exemplet ovan:

document.getElementById ('# button1'). addEventListener ('klicka', funktion () {console.log ('inuti funktionen')})

EventListener kan tas bort med metoden removeEventListener ()

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

I jQuery

jQuery har fördefinierade händelser för nästan alla DOM-åtgärder. Vi kan använda den specifika jQuery-händelsen för en åtgärd.

$ (“P”). Klicka (funktion () {// klickaåtgärd})

Andra exempel är:

servicenow-handledning för nybörjare pdf

$ (“# Button1”). Dblclick (function () {// action för dubbelklickningshändelsen på html-elementet med id ‘button1’}

JQuery 'on' -metoden används för att lägga till en eller flera händelser till ett DOM-element.

$ ('# Button1'). On ('klicka', funktion () {// åtgärd här})

Vi kan lägga till flera händelser och flera händelsehanterare med metoden.

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

Två eller flera händelser kan ha samma hanterare som nedan:

$ ('# Button1'). På ('klicka på dblclick', funktion () {// åtgärd här})

Således ser vi att med mindre och kortfattad kod är händelsehantering enklare i jQuery än i JavaScript.

Fortsätter med Ajax Calls.

Ajax ringer

I JavaScript

JavaScript använde ett XMLHttpRequest-objekt för att skicka en Ajax-begäran till en server. XMLHttpRequest har flera metoder för att ringa Ajax-samtalet. De två vanliga metoderna är öppna (metod, URL, async, användare, PSW), skicka () och skicka (sträng).
Låt oss skapa en XMLHttpRequest först:

var xhttp = new XMLHttpRequest () Använd sedan det här objektet för att anropa den öppna metoden: xhttp.open ('GET', 'D: //getinfo.txt', true) xhttp.send ()

Den öppna metoden gör en get-begäran till en server / plats, sant anger att begäran är asynkron. Om värdet är falskt betyder det att begäran är synkron.

Skicka en begäran om inlägg:

var xhttp = new XMLHttpRequest () Använd sedan det här objektet för att anropa metoden open och gör en postförfrågan: xhttp.open ('POST', 'D: //postinfo.txt', true) xhttp.send ()

För att skicka data med begäran använder vi metoden setRequestHeader för xhttp för att definiera vilken typ av data som ska skickas och sändningsmetoden skickar data i nyckel / värdepar:

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

I jQuery

jQuery har flera inbyggda metoder för att ringa Ajax-samtal. Med dessa metoder kan vi ringa alla data från servern och uppdatera en del av webbsidan med data. jQuery-metoder gör det enkelt att ringa Ajax.
Metoden jQuery load (): Den här metoden hämtar data från en URL och laddar data till en HTML-väljare.
$ (“P”). Belastning (URL, data, återuppringning)
URL: en är den plats som krävs för data, den valfria dataparametern är de data (nyckel / värdepar) som vi vill skicka tillsammans med samtalet och den valfria parametern '' återuppringning '' är metoden vi vill utföra efter belastningen är klart.

Metoden jQuery $ .get () och $ .post (): Den här metoden hämtar data från en URL och laddar data till en HTML-väljare.
$ .get (URL, återuppringning)
URL: en är den plats som anropas för data och återuppringningen är den metod vi vill utföra efter att belastningen är klar.

$ .post (URL, data, återuppringning)
URL: en är den plats som anropas för data, data är det nyckel / värdepar som vi vill skicka med samtalet och återuppringningen är den metod vi vill utföra efter att belastningen är klar. Här är data och återuppringningsparametrar valfria.

jQuery Ajax-samtal är mer kortfattade än JavaScript. I JavaScript använder vi ett XMLHTTPRequest-objekt, i jQuery behöver vi inte använda ett sådant objekt.

Gå vidare med animering.

Animation

I JavaScript

JavaScript har ingen specifik animeringsfunktion som jQuery animate () -funktion. I JavaScript uppnås animeringseffekten främst genom att manipulera elementets stil eller genom att använda CSS-transform, översätt eller animera egenskaper. JavaScript använder också metoderna setInterval (), clearInterval (), setTimeout () och clearTimeout () för animeringseffekter.

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

Animering i JavaScript handlar främst om att manipulera CSS-egenskaperna.

I jQuery

jQuery har många inbyggda metoder för att lägga till animationer eller effekter på HTML-element. Låt oss kolla några av dem.
Animate () -metoden: Den här metoden används för att lägga till animering på ett element.

$ ('# button1'). klicka på (funktion () {$ ('# div1'). animera ({höjd: '300px'})})

Metoden show (): Denna metod används för att göra ett element synligt från ett dolt tillstånd.

$ ('# button1'). klicka på (funktion () {$ ('# div1'). visa ()})

Dölj () -metoden: Den här metoden används för att dölja ett element från ett synligt tillstånd.

$ ('# button1'). klicka på (funktion () {$ ('# div1'). göm ()})

jQuery har sina egna metoder för att producera animering och effekter på en webbsida.

Sammanfattningsvis är JavaScript ett språk för webbutveckling, jQuery är ett bibliotek som har sitt ursprung i JavaScript. JavaScript och jQuery har sin egen betydelse för webbutveckling.

Nu när du känner till JavaScript-loopar, kolla in av Edureka. Webbutvecklingscertifieringsträning hjälper dig att lära dig att skapa imponerande webbplatser med HTML5, CSS3, Twitter Bootstrap 3, jQuery och Google API: er och distribuera den till Amazon Simple Storage Service (S3).

Har du en fråga till oss? Vänligen nämna det i kommentarsektionen i “JavaScript vs jQuery” så återkommer vi till dig.