Heim > Web-Frontend > js-Tutorial > Lassen Sie uns über die Unterschiede zwischen jQuery, JavaScript und JS sprechen

Lassen Sie uns über die Unterschiede zwischen jQuery, JavaScript und JS sprechen

烟雨青岚
Freigeben: 2020-06-30 13:08:46
nach vorne
2810 Leute haben es durchsucht

Lassen Sie uns über die Unterschiede zwischen jQuery, JavaScript und JS sprechen

JavaScript: Es handelt sich um eine gängige Skriptsprache in Browsern, die verwendet wird, um die Dynamik von Webseiten und die Interaktion mit dem Backend (Datenbank) zu realisieren.

jQuery: Es handelt sich um eine in JavaScript integrierte Klassenbibliothek. Durch den Betrieb von jQuery können Sie die Verwendung nativer JavaScript-Anweisungen reduzieren und dadurch die Effizienz verbessern.

JS: Es ist eine Abkürzung für JavaScript.

Zusammenfassung der Unterschiede:

1. JQuery vereinfacht JavaScript erheblich und bewältigt die mühsame Aufgabe, mehr Funktionen mit möglichst wenig Code auszuführen.

2. JavaScript lädt das DOM nur einmal, während JQuery es mehrmals lädt.

3. JQuery ist bequemer für die Bedienung von DOM. Wie zum Beispiel die Knotenakquise. Beispiel: $()

Erklärung: Der direkteste Weg, das Verständnis von nativem JavaScript und gekapselter JQuery zu verbessern, besteht darin, eine grundlegende Front-End- und Back-End-Interaktion zu erreichen, ohne JQuery in die Seite einzuführen.

Der folgende Inhalt ist eine Zusammenfassung, die zusammengestellt wurde, um jQuery und JS anders zu verstehen:

jQuery- und natives Javascript-Schreiben:

1 Positionierungselement

JS:

document.getElementById("abc")
Nach dem Login kopieren

jQuery:

$("#abc") 通过id定位 
$(".abc") 通过class定位 
$("div") 通过标签定位
Nach dem Login kopieren

Hinweis: Das von JS zurückgegebene Ergebnis ist dieses Element, und das von jQuery zurückgegebene Ergebnis ist ein JS-Objekt. Im folgenden Beispiel wird davon ausgegangen, dass das Element abc positioniert wurde.

2 Ändern Sie den Inhalt des Elements

JS:

abc.innerHTML = "test";                //现在的项目中有用到
Nach dem Login kopieren

jQuery:

abc.html("test");
Nach dem Login kopieren

3 Versteckte Elemente anzeigen

JS:

abc.style.display = "none";              //现在的项目中有用到
abc.style.display = "block";
Nach dem Login kopieren

jQuery:

abc.hide(); 
abc.show();
abc.toggle();         //在显示和隐藏之间切换、
Nach dem Login kopieren

4 Fokus erhalten

JS und jQuery sind die gleich, Alle sind abc.focus();

5 Weisen Sie dem Formular Werte zu

JS:

abc.value = "test";
Nach dem Login kopieren

jQuery:

abc.val("test");
Nach dem Login kopieren

6 Wert des Formulars abrufen

JS:

alert(abc.value);
Nach dem Login kopieren

jQuery:

alert(abc.val());
Nach dem Login kopieren

7 Einstellungselemente sind nicht verfügbar

JS:

abc.disabled = true;
Nach dem Login kopieren

jQuery:

abc.attr("disabled", true);
Nach dem Login kopieren

8 Elementstil ändern

JS:

abc.style.fontSize=size;
Nach dem Login kopieren

jQuery:

abc.css('font-size', 20);
Nach dem Login kopieren

JS:

abc.className="test";
Nach dem Login kopieren

JQuery:

abc.removeClass(); 
abc.addClass("test");
Nach dem Login kopieren

9 Bestimmen Sie, ob das Kontrollkästchen aktiviert ist

jQuery

if(abc.attr("checked") == "checked")
Nach dem Login kopieren

Hinweis: Was online gesagt wird, dass .attr("checked") == true nicht tatsächlich verwendet werden kann. Das obige wurde getestet und funktioniert

Das Unterschied zwischen JS und JQUERY

1 Holen Sie sich das Element

basierend auf der ID JS: Was Sie erhalten, ist ein DOM-Objekt.

Beispiel:

var div = document.getElementByID("one");
Nach dem Login kopieren

JQUERY: Was erhalten wird, ist ein JQUERY-Objekt.

Beispiel:

var div = $("#one");
Nach dem Login kopieren

2. Elemente entsprechend der Klasse abrufen [Wenn Sie im Array das DOM-Objekt abrufen möchten, verwenden Sie die Indexmethode, wenn Sie das JQUERY-Objekt abrufen möchten, use eq()]

JS: Was erhalten wird, ist ein Array

Beispiel:

var div = document.ElementsByClassName("test");
Nach dem Login kopieren

JQUERY:

Beispiel:

var div = $(".test");
Nach dem Login kopieren

3. Elemente basierend auf dem Namen abrufen

JS: Gibt ein Array zurück

Beispiel:

var bd = document.getElementsByName(uid);
Nach dem Login kopieren

JQUERY: Die Methode besteht darin, dort eckige Klammern zu verwenden, Attribut = ein Wert Es gibt keine Einschränkung bei der Übernahme des Werts basierend auf dem Namen, JQUERY. Das Element

wird basierend auf den Attributen übernommen. Beispiel:

$("[name='uid']");
Nach dem Login kopieren

4 der Tag-Name. JS: Das zurückgegebene Array ist auch ein Array

Beispiel:

var div = document.getElementsByTagName("div");
Nach dem Login kopieren

JQUERY: Schreiben Sie das Tag direkt auf die gleiche Weise wie beim Hinzufügen von Stilen zu allen Divs Name

in doppelten Anführungszeichen. Beispiel:

$("div");
Nach dem Login kopieren

Zum Beispiel: Geben Sie das Unterverzeichniselementobjekt an. Get: var div = $("div span"); - Es gibt viele Kombinationen

Operationsinhalt

1. Nicht-Formularelemente (wenn es sich um Text handelt, verwenden Sie die Textmethode, wenn es sich um HTML-Code handelt, verwenden Sie die HTML-Methode)

Beispiel:

1.1. Im Fall ohne Parameter ist der Wert

div.text();
div.html();
Nach dem Login kopieren

1.2. Im Fall von Parametern ist die Zuweisung

div.text("aaaa");
div.html("aaaa");
Nach dem Login kopieren

2. Formularelement

JS:

2.1. Wert

div.value;
Nach dem Login kopieren

2.2. Zuweisung

div.value = 'xxx';
JUQERY:
Nach dem Login kopieren

3.4. Zuweisung

div.val();
Nach dem Login kopieren

Operationsattribut

JS-Operationsattribut

Einstellungen | Attribute ändern:

div.val('xxx');
Nach dem Login kopieren
Attribute löschen

div.setAttribute("","");
Nach dem Login kopieren

Attribute abrufen

div.removeAttribute("");
Nach dem Login kopieren

Methoden zum Bearbeiten von Attributen in JQUERY

Attribute hinzufügen:

div.getAttribute();
Nach dem Login kopieren
Attribute entfernen:

div.attr("width","20%");
Nach dem Login kopieren

Attribute abrufen:

div.removeAttr("width");
Nach dem Login kopieren

Operationsstil

JS-Operationsstil-Schlüsselwort ist [style] Beispiel:

div.attr("width");
Nach dem Login kopieren

Das Schlüsselwort für Operationsstile in JQUERY ist CSS

Beispiel:

div.style.backgroundColor = "red";
Nach dem Login kopieren

– Ändern Sie die Hintergrundfarbe dieses Div. Alle Stile im CSS sind hier genau die gleichen wie die Stile im CSS-Stylesheet ohne welche Änderungen

Die JS-Methode zum Bedienen von Stilen kann nur Inline-Stile abrufen, keine eingebetteten und externen! ! ! ! !

  Die Betriebsstile von JQUERY können inline oder eingebettet sein

Vielen Dank an alle fürs Lesen, ich hoffe, Sie werden viel davon profitieren

Dieser Artikel wurde reproduziert von: https://blog. csdn .net/dalei9243/article/details/79804789

Empfohlenes Tutorial: „JS-Tutorial

Das obige ist der detaillierte Inhalt vonLassen Sie uns über die Unterschiede zwischen jQuery, JavaScript und JS sprechen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:csdn.net
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage