Verstehen Sie in zwei Minuten die Unterschiede zwischen jQuery, JavaScript und JS

Zwei Minuten, um den Unterschied zwischen jQuery, JavaScript und JS zu verstehen

JavaScript , jQuery und JS tauchen oft in unserem Leben auf. Wissen Sie, was die Gemeinsamkeiten und Unterschiede zwischen ihnen sind? Nehmen wir uns unten zwei Minuten Zeit, um mehr darüber zu erfahren.

JavaScript: Es ist 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 im größtmöglichen Umfang 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 unterschiedlich zu verstehen:

jQuery- und native Javascript-Schreibmethode:

1 Positionierungselement

JS:

document.getElementById("abc")

jQuery:

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

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 gleich, abc.focus();
5 Weisen Sie dem Formular einen Wert zu
JS:

abc.value = "test";

jQuery:

abc.val("test");

6 Wert des Formulars abrufen
JS:

alert(abc.value);

jQuery:

alert(abc.val());

7 Einstellungselement ist 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 die Kontrollkästchen ist ausgewählt
jQuery

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

Hinweis: Im Internet heißt es, dass .attr("checked") == true nicht tatsächlich verwendet werden kann, aber das obige wurde getestet und funktioniert

Der Unterschied zwischen JS und JQUERY

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

var p = document.getElementByID("one");

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

var p = $("#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 p = document.ElementsByClassName("test");

JQUERY:
Beispiel:

var p = $(".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, eckige Klammern zu verwenden, Attribut = ein Wert, es gibt keine Einschränkung bei der Übernahme Wert basierend auf dem Namen, JQUERY nimmt das Element basierend auf dem Attribut
Beispiel:

$("[name='uid']");

4 Holen Sie sich das Element basierend auf dem Tag-Namen
JS: Der zurückgegebene Wert ist auch ein Array
Beispiel:

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

JQUERY: und style Die Methode zum Formatieren aller p in der Tabelle ist die gleiche. Schreiben Sie den Tag-Namen
direkt in doppelte Anführungszeichen

$("p");

Beispiel: Objekterfassung für Unterverzeichniselemente angeben: var p = $("p span") ;——Es gibt viele Kombinationsmethoden

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 Wert ist
p.text();
p.html();
1.2. Wenn Parameter vorhanden sind, wird der Wert
p.text("aaaa"); .html("aaaa");

2. Formularelement
JS: 2.1. Wert abrufen
p.value;
2.2 p.value = 'xxx';
JUQERY:
2.3. Wert abrufen
p.val() ;
3.4. Zuweisung
p.val('xxx');


Operationsattribut

JS-Operationsattribut

Attribute ändern:

p.setAttribute("","");

Attribute löschen

p.removeAttribute("");

Attribute abrufen

p.getAttribute();

Wird in JQUERY-Methoden zum Betreiben von Attributen verwendet

Attribute hinzufügen:

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

Attribute entfernen:

p.removeAttr("width");

Attribute abrufen:

p.attr("width");

操作样式
JS操作样式-关键字是[style]
例：

p.style.backgroundColor = "red";

JQUERY里面操作样式的关键字是css
例：

p.css("background-color","yellow");

——把这个p的背景色变为黄色，在这里CSS里面所有的样式和css样式表里面的样式是一模一样的没有任何变化
JS操作样式的方法只能获取内联样式，不能取内嵌的和外部的！！！！！
JQUERY操作样式的方法可以是内联的也可以是内嵌的

感谢大家的阅读，希望大家收益多多。

本文转自：https://blog.csdn.net/dalei9243/article/details/79804789

推荐教程：《JS教程》

 

Das obige ist der detaillierte Inhalt vonVerstehen Sie in zwei Minuten die Unterschiede zwischen jQuery, JavaScript und JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!