JavaScript versus jQuery: belangrijke verschillen die u moet weten

We kennen JavaScript en JQuery al een aantal jaren. JavaScript is eerder uitgevonden dan jQuery. Beide zijn krachtig en worden gebruikt bij webontwikkeling en worden voor hetzelfde doel gebruikt, namelijk om de webpagina interactief en dynamisch te maken. Met andere woorden, ze brengen de webpagina's tot leven. Mensen vragen zich misschien af ​​dat als ze voor hetzelfde doel worden gebruikt, waarom dan deze twee afzonderlijke concepten zijn? In dit JavaScript versus jQuery-artikel zullen we in de volgende volgorde zien welke beter is dan de andere:

hoe array php

• JavaScript: een krachtige taal in webontwikkeling
• JQuery: een bibliotheek die is ontwikkeld op basis van JavaScript
• Waarom JQuery is gemaakt en wat zijn de speciale mogelijkheden van JQuery
• Verschil tussen JavaScript en JQuery met voorbeelden
  • JavaScript en JQuery toevoegen in ons HTML-document
  • DOM-traversal en manipulatie
  • Afhandeling van gebeurtenissen
  • Ajax roept
  • Animatie

JavaScript: een krachtige taal in webontwikkeling

JavaScript is een scripttaal die wordt gebruikt om interactiviteit aan onze webpagina's toe te voegen. Het is een van de drie kerntechnologieën naast HTML en CSS die worden gebruikt om webpagina's te maken. Terwijl HTML en CSS de structuur van de webpagina en het uiterlijk / de stijl van webpagina's bepalen, wordt JavaScript gebruikt om de webpagina dynamisch te maken door er interactiviteit aan toe te voegen, wat betekent dat we met JavaScript wat code kunnen toevoegen voor muisklikken, mouse-over en andere evenementen op de webpagina en nog veel meer.

JavaScript wordt ondersteund door alle webbrowsers en de webbrowsers hebben een ingebouwde JavaScript-engine om JavaScript-code te identificeren en ermee te werken. JavaScript is dus voornamelijk een taal aan de clientzijde. Het is een taal die zowel als proceduretaal als als op prototypen gebaseerde objectgeoriënteerde taal kan worden gebruikt. Wanneer we primair JavaScript gebruiken, werken we met de procedurele taal, terwijl geavanceerd JavaScript objectgeoriënteerde concepten gebruikt.

Laten we verder gaan met onze JavaScript versus jQuery en de bibliotheek begrijpen die is ontwikkeld op basis van JavaScript.

jQuery: een bibliotheek die is ontwikkeld op basis van JavaScript

JavaScript is in de loop der jaren een krachtige taal gebleken voor webontwikkeling. Er zijn veel bibliotheken en frameworks die zijn ontstaan ​​die bovenop JavaScript zijn gebouwd. Deze bibliotheken en frameworks zijn ontwikkeld om de mogelijkheden van JavaScript uit te breiden, er veel dingen mee te doen en ook om het werk van de ontwikkelaar gemakkelijker te maken.

jQuery is zo'n bibliotheek van JavaScript die eruit is opgebouwd. Het is de meest populaire JavaScript-bibliotheek die is uitgevonden door John Resign en in januari 2006 werd uitgebracht op BarCamp NYC. jQuery is gratis, een open-sourcebibliotheek, gelicentieerd onder de MIT-licentie. Dit heeft een krachtige functie van compatibiliteit tussen browsers. Het kan gemakkelijk browseroverschrijdende problemen oplossen waarmee we te maken kunnen krijgen met JavaScript. Daarom gebruiken veel ontwikkelaars jQuery om compatibiliteitsproblemen tussen browsers te voorkomen.

Laten we nu verder gaan met ons JavaScript versus jQuery-blog en kijken waarom jQuery is gemaakt.

Waarom is jQuery gemaakt en wat zijn de speciale mogelijkheden van jQuery?

In JavaScript moeten we veel code schrijven voor basisbewerkingen, terwijl met jQuery dezelfde bewerkingen kunnen worden uitgevoerd met een enkele regel code. Daarom vinden ontwikkelaars het gemakkelijker om met jQuery te werken dan met JavaScript.

• Hoewel JavaScript de basistaal is waaruit jQuery is geëvolueerd, maakt jQuery het afhandelen van gebeurtenissen, DOM-manipulatie, aanroepen door Ajax veel gemakkelijker dan JavaScript. jQuery stelt ons ook in staat om geanimeerde effecten toe te voegen aan onze webpagina, wat veel moeite en regels code kost met JavaScript.
• jQuery heeft ingebouwde plug-ins om een ​​bewerking op een webpagina uit te voeren. We hoeven alleen de plug-in in onze webpagina op te nemen of te importeren om deze te gebruiken. Zo kunnen we met plug-ins abstracties van animaties en interacties of effecten creëren.
• We kunnen ook onze aangepaste plug-in maken met jQuery. Als we een animatie op een bepaalde manier op een webpagina willen laten maken, kunnen we een plug-in ontwikkelen volgens de vereisten en deze op onze webpagina gebruiken.
• jQuery heeft ook een UI-widgetbibliotheek op hoog niveau. Deze widgetbibliotheek heeft een hele reeks plug-ins die we op onze webpagina kunnen importeren en gebruiken om gebruiksvriendelijke webpagina's te maken.

Laten we het verschil begrijpen.

JavaScript versus jQuery

Verdergaan met het verschil tussen JavaScript en jQuery met Voorbeeld.

JavaScript versus jQuery met voorbeelden

Laten we eens kijken naar de voorbeelden.

JavaScript en jQuery toevoegen in ons HTML-document

JavaScript wordt rechtstreeks in het HTML-document in de tag toegevoegd of een extern JavaScript-bestand kan aan een HTML-document worden toegevoegd met behulp van het src-attribuut.
Direct in de script-tag geschreven:

alert ('Dit waarschuwingsvenster is aangeroepen met de onload-gebeurtenis')

Om jQuery te gebruiken, downloaden we het bestand van zijn website en verwijzen we naar het pad van het gedownloade jQuery-bestand in het src-attribuut van de SCRIPT-tag of we kunnen het rechtstreeks van CDN (Content Delivery Network) krijgen.

Met behulp van CDN :

Laten we eens kijken naar DOM-traversal en -manipulatie

DOM-traversal en manipulatie

In JavaScript:

We kunnen een DOM-element in JavaScript selecteren met de methode document.getElementById () of met de methode document.querySelector ().

var mydiv = document.querySelector ('# div1')

of

document.getElementById ('# div1')

In jQuery:

Hier hoeven we alleen het $ -symbool te gebruiken met de selector tussen haakjes.

$ (selector) $ ('# div1') - De selector is een id 'div1' $ ('. div1') - De selector is een klasse 'div1' $ ('p') - De selector is de alinea in de Html-pagina

In de bovenstaande verklaring is $ een teken dat wordt gebruikt om toegang te krijgen tot jQuery, de selector is een HTML-element.

Stijlen toevoegen in JavaScript:

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

Stijlen toevoegen in jQuery:

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

De #myDiv-selector verwijst naar de ‘myDiv’ -identificatie

Selectie en manipulatie van DOM-elementen is veel beknopter in jQuery dan in JavaScript.

Verdergaan met het afhandelen van evenementen.

Afhandeling van gebeurtenissen

In JavaScript selecteren we een HTML-element:

document.getElementById ('# button1'). addEventListener ('klik', myCallback) functie myCallback () {console ('binnen myCallback-functie')}

Hier wordt de methode getElementById () gebruikt om een ​​element op ID te selecteren, en vervolgens gebruiken we de methode addEventListener () om een ​​gebeurtenislistener aan de gebeurtenis toe te voegen. In dit voorbeeld voegen we de myCallback-functie toe als luisteraar aan de ‘click’ -gebeurtenis.

We kunnen in het bovenstaande voorbeeld ook een anonieme functie gebruiken:

document.getElementById ('# button1'). addEventListener ('klik', functie () {console.log ('binnen de functie')})

De eventListener kan worden verwijderd met behulp van de methode removeEventListener ()

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

In jQuery

jQuery heeft vooraf gedefinieerde gebeurtenissen voor bijna alle DOM-acties. We kunnen de specifieke jQuery-gebeurtenis gebruiken voor een actie.

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

Andere voorbeelden zijn:

$ ('# Button1'). Dblclick (function () {// actie voor de dubbelklikgebeurtenis op het html-element met id ‘button1’}

De JQuery ‘on’ -methode wordt gebruikt om een ​​of meer gebeurtenissen aan een DOM-element toe te voegen.

$ ('# Button1'). On ('klik', functie () {// actie hier})

We kunnen meerdere evenementen en meerdere event-handlers toevoegen met de on-methode.

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

Twee of meer gebeurtenissen kunnen dezelfde handler hebben, zoals hieronder:

$ ('# Button1'). On ('klik dblclick', function () {// actie hier})

We zien dus dat met minder en beknopte code de afhandeling van gebeurtenissen gemakkelijker is in jQuery dan in JavaScript.

Verdergaan met Ajax-oproepen.

Ajax roept

In JavaScript

JavaScript gebruikte een XMLHttpRequest-object om een ​​Ajax-verzoek naar een server te sturen. De XMLHttpRequest heeft verschillende methoden om de Ajax-oproep te doen. De twee veelgebruikte methoden zijn open (methode, URL, asynchroon, gebruiker, PSW), send () en send (string).
Laten we eerst een XMLHttpRequest maken:

soorten transformatie in informatica

var xhttp = new XMLHttpRequest () Gebruik dan dit object om de open methode aan te roepen: xhttp.open ('GET', 'D: //getinfo.txt', true) xhttp.send ()

De open methode maakt een get-verzoek naar een server / locatie, de true specificeert dat het verzoek asynchroon is. Als de waarde false is, betekent dit dat het verzoek synchroon is.

Een postverzoek doen:

var xhttp = new XMLHttpRequest () Gebruik dan dit object om de open methode aan te roepen en maak een post request: xhttp.open ('POST', 'D: //postinfo.txt', true) xhttp.send ()

Om gegevens bij het verzoek te plaatsen, gebruiken we de setRequestHeader-methode van xhttp om het type gegevens te definiëren dat moet worden verzonden en de verzendmethode verzendt de gegevens in sleutel / waarde-paren:

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

In jQuery

jQuery heeft verschillende ingebouwde methoden om Ajax-oproepen te doen. Met deze methoden kunnen we alle gegevens van de server oproepen en een deel van de webpagina bijwerken met de gegevens. jQuery-methoden maken het aanroepen van Ajax gemakkelijk.
De jQuery load () - methode: deze methode haalt gegevens op van een URL en laadt de gegevens naar een HTML-selector.
$ ('P'). Load (URL, gegevens, terugbellen)
De URL is de locatie die wordt aangeroepen voor de data, de optionele dataparameter is de data (sleutel / waarde-paren) die we mee willen sturen met de aanroep en de optionele parameter 'callback' is de methode die we na het laden willen uitvoeren is voltooid.

De jQuery $ .get () en $ .post () methode: deze methode haalt gegevens op van een URL en laadt de gegevens naar een HTML-selector.
$ .get (URL, terugbellen)
De URL is de locatie die wordt aangeroepen voor de gegevens en de callback is de methode die we willen uitvoeren nadat het laden is voltooid.

$ .post (URL, gegevens, terugbellen)
De URL is de locatie die wordt aangeroepen voor de gegevens, de gegevens zijn de sleutel / waarde-paren die we met de oproep willen verzenden en de callback is de methode die we willen uitvoeren nadat het laden is voltooid. Hier zijn de data en callback-parameters optioneel.

jQuery Ajax-oproepen zijn beknopter dan JavaScript. In JavaScript gebruiken we een XMLHTTPRequest-object, in jQuery hoeven we zo'n object niet te gebruiken.

Verder gaan met animatie.

Animatie

In JavaScript

JavaScript heeft geen specifieke animatiefunctie zoals jQuery animate () functie. In JavaScript wordt het animatie-effect voornamelijk bereikt door de stijl van het element te manipuleren of door CSS-eigenschappen voor transformeren, vertalen of animeren te gebruiken. JavaScript gebruikt ook de methoden setInterval (), clearInterval (), setTimeout () en de methoden clearTimeout () voor animatie-effecten.

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

Animatie in JavaScript gaat voornamelijk over het manipuleren van de CSS-eigenschappen.

In jQuery

jQuery heeft veel ingebouwde methoden om animaties of effecten op HTML-elementen toe te voegen. Laten we er een paar bekijken.
De animate () methode: deze methode wordt gebruikt om animatie aan een element toe te voegen.

$ ('# button1'). click (function () {$ ('# div1') .animate ({hoogte: '300px'})})

De show () methode: Deze methode wordt gebruikt om een ​​element zichtbaar te maken vanuit een verborgen staat.

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

De methode hide (): Deze methode wordt gebruikt om een ​​element zichtbaar te maken.

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

jQuery heeft zijn eigen methoden om animatie en effecten op een webpagina te produceren.

Kortom, JavaScript is een taal voor webontwikkeling, jQuery is een bibliotheek die is ontstaan ​​uit JavaScript. JavaScript en jQuery hebben hun eigen belang in webontwikkeling.

Nu je meer over JavaScript Loops weet, kun je het door Edureka. Web Development Certification Training helpt u te leren hoe u indrukwekkende websites kunt maken met HTML5, CSS3, Twitter Bootstrap 3, jQuery en Google API's en deze kunt implementeren op Amazon Simple Storage Service (S3).

Heeft u een vraag voor ons? Vermeld het in het commentaargedeelte van 'JavaScript vs jQuery' en we nemen zo spoedig mogelijk contact met u op.