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")

jQuery:

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

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";                //现在的项目中有用到

jQuery:

abc.html("test");

3 Versteckte Elemente anzeigen

JS:

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

jQuery:

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

4 Fokus erhalten

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

5 Weisen Sie dem Formular Werte zu

JS:

abc.value = "test";

jQuery:

abc.val("test");

6 Wert des Formulars abrufen

JS:

alert(abc.value);

jQuery:

alert(abc.val());

7 Einstellungselemente sind nicht verfügbar

JS:

abc.disabled = true;

jQuery:

abc.attr("disabled", true);

8 Elementstil ändern

JS:

abc.style.fontSize=size;

jQuery:

abc.css('font-size', 20);

JS:

abc.className="test";

JQuery:

abc.removeClass(); 
abc.addClass("test");

9 Bestimmen Sie, ob das Kontrollkästchen aktiviert ist

jQuery

if(abc.attr("checked") == "checked")

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");

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

Beispiel:

var div = $("#one");

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");

JQUERY:

Beispiel:

var div = $(".test");

3. Elemente basierend auf dem Namen abrufen

JS: Gibt ein Array zurück

Beispiel:

var bd = document.getElementsByName(uid);

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']");

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

Beispiel:

var div = document.getElementsByTagName("div");

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");

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();

1.2. Im Fall von Parametern ist die Zuweisung

div.text("aaaa");
div.html("aaaa");

2. Formularelement

JS:

2.1. Wert

div.value;

2.2. Zuweisung

div.value = 'xxx';
JUQERY：

3.4. Zuweisung

div.val();

Operationsattribut

JS-Operationsattribut

Einstellungen | Attribute ändern:

div.val('xxx');

Attribute löschen

div.setAttribute("","");

Attribute abrufen

div.removeAttribute("");

Methoden zum Bearbeiten von Attributen in JQUERY

Attribute hinzufügen:

div.getAttribute();

Attribute entfernen:

div.attr("width","20%");

Attribute abrufen:

div.removeAttr("width");

Operationsstil

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

div.attr("width");

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

Beispiel:

div.style.backgroundColor = "red";

– Ä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!