JavaScript vs jQuery: Wichtige Unterschiede, die Sie kennen müssen

Wir kennen JavaScript und JQuery seit einigen Jahren. JavaScript wurde früher als jQuery erfunden. Beide sind leistungsstark und werden in der Webentwicklung verwendet und dienen demselben Zweck, d. H. Um die Webseite interaktiv und dynamisch zu gestalten. Mit anderen Worten, sie erwecken die Webseiten zum Leben. Die Leute mögen sich fragen, warum, wenn sie für den gleichen Zweck verwendet werden, warum diese beiden getrennten Konzepte? In diesem Artikel zu JavaScript vs jQuery werden wir in der folgenden Reihenfolge herausfinden, welche besser ist als die anderen:

• JavaScript: Eine leistungsstarke Sprache in der Webentwicklung
• JQuery: Eine aus JavaScript entwickelte Bibliothek
• Warum JQuery erstellt wird und welche besonderen Funktionen JQuery bietet
• Unterschied zwischen JavaScript und JQuery anhand von Beispielen
  • Hinzufügen von JavaScript und JQuery in unserem HTML-Dokument
  • DOM-Durchquerung und Manipulation
  • Handhabung des Events
  • Ajax ruft an
  • Animation

JavaScript: Eine leistungsstarke Sprache in der Webentwicklung

JavaScript ist eine Skriptsprache, mit der unsere Webseiten interaktiv gestaltet werden. Es ist neben HTML und CSS eine der drei Kerntechnologien, mit denen Webseiten erstellt werden. Während HTML und CSS die Struktur der Webseite und das Aussehen / Styling von Webseiten definieren, wird JavaScript verwendet, um die Webseite dynamisch zu gestalten, indem Interaktivität hinzugefügt wird. Dies bedeutet, dass wir mit JavaScript Code für Mausklick, Mouseover und andere hinzufügen können Ereignisse auf der Webseite und vieles mehr.

JavaScript wird von allen Webbrowsern unterstützt und die Webbrowser verfügen über eine integrierte JavaScript-Engine, um JavaScript-Code zu identifizieren und damit zu arbeiten. Daher ist JavaScript hauptsächlich eine clientseitige Sprache. Es ist eine Sprache, die sowohl als prozedurale Sprache als auch als prototypbasierte objektorientierte Sprache verwendet werden kann. Wenn wir primäres JavaScript verwenden, arbeiten wir mit der prozeduralen Sprache, während fortgeschrittenes JavaScript objektorientierte Konzepte verwendet.

Fahren wir mit unserem JavaScript vs jQuery fort und verstehen die aus JavaScript entwickelte Bibliothek.

jQuery: Eine aus JavaScript entwickelte Bibliothek

Im Laufe der Jahre hat sich JavaScript als leistungsstarke Sprache für die Webentwicklung herausgestellt. Es sind viele Bibliotheken und Frameworks entstanden, die auf JavaScript aufbauen. Diese Bibliotheken und Frameworks wurden entwickelt, um die Fähigkeiten von JavaScript zu erweitern, viele Dinge damit zu tun und auch die Arbeit des Entwicklers zu erleichtern.

servicenow tutorial für anfänger pdf

jQuery ist eine solche JavaScript-Bibliothek, die daraus erstellt wird. Es ist die beliebteste JavaScript-Bibliothek, die von John Resign erfunden wurde und im Januar 2006 im BarCamp NYC veröffentlicht wurde. jQuery ist kostenlos, eine Open-Source-Bibliothek, die unter der MIT-Lizenz lizenziert ist. Dies hat eine leistungsstarke Funktion der Cross-Browser-Kompatibilität. Es kann problemlos browserübergreifende Probleme lösen, die mit JavaScript auftreten können. Daher verwenden viele Entwickler jQuery, um browserübergreifende Kompatibilitätsprobleme zu vermeiden.

Fahren wir nun mit unserem Blog JavaScript vs jQuery fort und sehen, warum jQuery erstellt wurde.

Warum wird jQuery erstellt und welche besonderen Funktionen bietet jQuery?

In JavaScript müssen wir viel Code für grundlegende Operationen schreiben, während mit jQuery dieselben Operationen mit einer einzigen Codezeile ausgeführt werden können. Daher fällt es Entwicklern leichter, mit jQuery als mit JavaScript zu arbeiten.

• Obwohl JavaScript die Grundsprache ist, aus der sich jQuery entwickelt hat, erleichtert jQuery die Ereignisbehandlung und DOM-Manipulation. Ajax-Aufrufe sind viel einfacher als JavaScript. Mit jQuery können wir auch animierte Effekte auf unserer Webseite hinzufügen, was mit JavaScript viel Aufwand und Codezeilen erfordert.
• jQuery verfügt über integrierte Plugins, mit denen eine Operation auf einer Webseite ausgeführt werden kann. Wir müssen nur das Plugin in unsere Webseite aufnehmen oder importieren, um es zu verwenden. So können wir mit Plugins Abstraktionen von Animationen und Interaktionen oder Effekten erstellen.
• Wir können unser benutzerdefiniertes Plugin auch mit jQuery erstellen. Wenn eine Animation auf einer bestimmten Weise auf einer Webseite erstellt werden soll, können wir ein Plugin entsprechend den Anforderungen entwickeln und auf unserer Webseite verwenden.
• jQuery verfügt außerdem über eine allgemeine Widget-Bibliothek für die Benutzeroberfläche. Diese Widget-Bibliothek enthält eine ganze Reihe von Plugins, die wir auf unserer Webseite importieren und zum Erstellen benutzerfreundlicher Webseiten verwenden können.

Lassen Sie uns den Unterschied verstehen.

JavaScript vs jQuery

Fahren Sie mit dem Unterschied zwischen JavaScript und jQuery mit Example fort.

JavaScript vs jQuery mit Beispielen

Schauen wir uns die Beispiele an.

Hinzufügen von JavaScript und jQuery in unserem HTML-Dokument

JavaScript wird direkt im HTML-Dokument innerhalb des Tags hinzugefügt, oder eine externe JavaScript-Datei kann mithilfe des src-Attributs in ein HTML-Dokument eingefügt werden.
Direkt im Skript-Tag geschrieben:

alert ('Dieses Alarmfeld wurde mit dem Onload-Ereignis aufgerufen')

Um jQuery verwenden zu können, laden wir die Datei von der Website herunter und verweisen auf den Pfad der heruntergeladenen jQuery-Datei im src-Attribut des SCRIPT-Tags, oder wir können sie direkt von CDN (Content Delivery Network) abrufen.

CDN verwenden ::

Lassen Sie uns DOM Traversal and Manipulation verstehen

DOM-Durchquerung und Manipulation

In JavaScript:

Wir können ein DOM-Element in JavaScript mithilfe der document.getElementById () -Methode oder mithilfe der document.querySelector () -Methode auswählen.

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

oder

document.getElementById ('# div1')

In jQuery:

Hier müssen wir nur das $ -Symbol mit dem Selektor in Klammern verwenden.

Was bedeutet __init__ in Python?

$ (Selektor) $ ('# div1') - Der Selektor ist eine ID 'div1' $ ('. div1') - Der Selektor ist eine Klasse 'div1' $ ('p') - Der Selektor ist der Absatz in der HTML-Seite

In der obigen Anweisung ist $ ein Zeichen, mit dem auf jQuery zugegriffen wird. Der Selektor ist ein HTML-Element.

Hinzufügen von Stilen in JavaScript:

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

Hinzufügen von Stilen in jQuery:

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

Der Selektor #myDiv bezieht sich auf die Kennung 'myDiv'

Die Auswahl und Bearbeitung von DOM-Elementen ist in jQuery viel präziser als in JavaScript.

Fahren Sie mit der Ereignisbehandlung fort.

Handhabung des Events

In JavaScript wählen wir ein HTML-Element aus:

document.getElementById ('# button1'). addEventListener ('click', myCallback) -Funktion myCallback () {console ('inside myCallback function ')}

Hier wird die Methode getElementById () verwendet, um ein Element anhand seiner ID auszuwählen. Anschließend verwenden wir die Methode addEventListener (), um dem Ereignis einen Ereignis-Listener hinzuzufügen. In diesem Beispiel fügen wir die Funktion 'myCallback' als Listener zum Ereignis 'click' hinzu.

Im obigen Beispiel können wir auch eine anonyme Funktion verwenden:

document.getElementById ('# button1'). addEventListener ('click', function () {console.log ('innerhalb der Funktion')})

Der eventListener kann mithilfe der removeEventListener () -Methode entfernt werden

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

In jQuery

jQuery hat Ereignisse für fast alle DOM-Aktionen vordefiniert. Wir können das spezifische jQuery-Ereignis für eine Aktion verwenden.

$ ('P'). Click (function () {// Aktion klicken})

Andere Beispiele sind:

$ ('# Button1'). Dblclick (function () {// Aktion für das Doppelklick-Ereignis auf das HTML-Element mit der ID 'button1'}

Die JQuery-On-Methode wird verwendet, um einem DOM-Element ein oder mehrere Ereignisse hinzuzufügen.

$ ('# Button1'). On ('click', function () {// Aktion hier})

Mit der Methode on können mehrere Ereignisse und mehrere Ereignishandler hinzugefügt werden.

$ ('Button1'). On ({click: function () {// Aktion hier}, dblclick: function () {// Aktion hier}})

Zwei oder mehr Ereignisse können denselben Handler wie unten haben:

$ ('# Button1'). On ('click dblclick', function () {// Aktion hier})

Daher sehen wir, dass mit weniger und präzisem Code die Ereignisbehandlung in jQuery einfacher ist als in JavaScript.

Weiter mit Ajax Calls.

Ajax ruft an

In JavaScript

JavaScript verwendete ein XMLHttpRequest-Objekt, um eine Ajax-Anforderung an einen Server zu senden. Die XMLHttpRequest verfügt über mehrere Methoden, um den Ajax-Aufruf durchzuführen. Die beiden gängigen Methoden sind open (Methode, URL, asynchron, Benutzer, PSW), send () und send (Zeichenfolge).
Erstellen wir zuerst eine XMLHttpRequest:

var xhttp = new XMLHttpRequest () Verwenden Sie dann dieses Objekt, um die open-Methode aufzurufen: xhttp.open ('GET', 'D: //getinfo.txt', true) xhttp.send ()

Die open-Methode sendet eine Get-Anfrage an einen Server / Standort. True gibt an, dass die Anfrage asynchron ist. Wenn der Wert falsch ist, bedeutet dies, dass die Anforderung synchron ist.

Postanfrage stellen:

var xhttp = new XMLHttpRequest () Verwenden Sie dieses Objekt, um die open-Methode aufzurufen und eine Post-Anfrage zu stellen: xhttp.open ('POST', 'D: //postinfo.txt', true) xhttp.send ()

Um Daten mit der Anforderung zu veröffentlichen, verwenden wir die setRequestHeader-Methode von xhttp, um den Typ der zu sendenden Daten zu definieren, und die send-Methode sendet die Daten in Schlüssel / Wert-Paaren:

xhttp.setRequestHeader ('Inhaltstyp', 'Anwendung / x-www-Formular-urlencodiert') xhttp.send ('Name = Ravi & Nachname = Kumar')

In jQuery

jQuery verfügt über mehrere integrierte Methoden zum Tätigen von Ajax-Aufrufen. Mit diesen Methoden können wir alle Daten vom Server aufrufen und einen Teil der Webseite mit den Daten aktualisieren. jQuery-Methoden erleichtern den Ajax-Aufruf.
Die jQuery load () -Methode: Diese Methode ruft Daten von einer URL ab und lädt die Daten in einen HTML-Selektor.
$ ('P'). Laden (URL, Daten, Rückruf)
Die URL ist der Speicherort für die Daten, der optionale Datenparameter sind die Daten (Schlüssel / Wert-Paare), die wir zusammen mit dem Aufruf senden möchten, und der optionale Parameter 'Rückruf' ist die Methode, die wir nach dem Laden ausführen möchten abgeschlossen.

Die Methoden jQuery $ .get () und $ .post (): Diese Methode ruft Daten von einer URL ab und lädt die Daten in einen HTML-Selektor.
$ .get (URL, Rückruf)
Die URL ist der Speicherort, an dem die Daten aufgerufen werden, und der Rückruf ist die Methode, die wir nach Abschluss des Ladevorgangs ausführen möchten.

$ .post (URL, Daten, Rückruf)
Die URL ist der Speicherort, an dem die Daten aufgerufen werden. Die Daten sind die Schlüssel / Wert-Paare, die wir mit dem Aufruf senden möchten, und der Rückruf ist die Methode, die wir nach Abschluss des Ladevorgangs ausführen möchten. Hier sind die Daten- und Rückrufparameter optional.

jQuery Ajax-Aufrufe sind prägnanter als JavaScript. In JavaScript verwenden wir ein XMLHTTPRequest-Objekt, in jQuery müssen wir ein solches Objekt nicht verwenden.

Weiter mit Animation.

ist ein und hat eine Beziehung in Java

Animation

In JavaScript

JavaScript verfügt nicht über eine bestimmte Animationsfunktion wie die Funktion jQuery animate (). In JavaScript wird der Animationseffekt hauptsächlich durch Bearbeiten des Stils des Elements oder durch Verwenden von CSS-Eigenschaften zum Transformieren, Übersetzen oder Animieren erzielt. JavaScript verwendet auch die Methoden setInterval (), clearInterval (), setTimeout () und clearTimeout () für Animationseffekte.

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

Bei der Animation in JavaScript geht es hauptsächlich um die Bearbeitung der CSS-Eigenschaften.

In jQuery

jQuery verfügt über viele integrierte Methoden zum Hinzufügen von Animationen oder Effekten zu HTML-Elementen. Lassen Sie uns einige davon überprüfen.
Die animate () -Methode: Diese Methode wird verwendet, um einem Element eine Animation hinzuzufügen.

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

Die show () -Methode: Diese Methode wird verwendet, um ein Element aus einem verborgenen Zustand sichtbar zu machen.

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

Die Methode hide (): Mit dieser Methode wird ein Element vor einem sichtbaren Zustand verborgen.

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

jQuery verfügt über eigene Methoden zum Erstellen von Animationen und Effekten auf einer Webseite.

Zusammenfassend ist JavaScript eine Sprache für die Webentwicklung, jQuery ist eine Bibliothek, die aus JavaScript stammt. JavaScript und jQuery haben ihre eigene Bedeutung in der Webentwicklung.

Nachdem Sie sich mit JavaScript-Schleifen vertraut gemacht haben, lesen Sie die von Edureka. Mit dem Web Development Certification Training lernen Sie, wie Sie beeindruckende Websites mit HTML5-, CSS3-, Twitter Bootstrap 3-, jQuery- und Google-APIs erstellen und für Amazon Simple Storage Service (S3) bereitstellen.

Hast du eine Frage an uns? Bitte erwähnen Sie es im Kommentarbereich von 'JavaScript vs jQuery' und wir werden uns bei Ihnen melden.