Detaillierte Erläuterung der Unterschiede zwischen den gängigen Methoden von JavaScript und JQuery anhand von Beispielen

jquery ist eine Erweiterungsbibliothek und Kapselungsbibliothek für Javascript, die die Verwendung von JavaScript einfacher und benutzerfreundlicher macht. Bei jQuery geht es darum, weniger Code zu verwenden und mehr Funktionen auf schöne Weise auszuführen.

Vergleichsbeispiele gängiger Methoden von JavaScript und JQuery sind wie folgt:

1. Unterschiede beim Laden von DOM
JavaScript:
window.onload

function first(){ 
alert('first'); 
} 
function second(){ 
alert('second'); 
} 
window.onload = first; 
window.onload = second;

/ / Nur das zweite window.onload wird ausgeführt; es kann jedoch durch die folgenden Methoden verbessert werden:

window.onload = function(){ 
first(); 
second(); 
}

Jquery:
$(document).ready ()

$(document).ready(){ 
function first(){ 
alert('first'); 
} 
function second(){ 
alert('second'); 
} 
$(document).ready(function(){ 
first(); 
} 
$(document).ready(function(){ 
second(); 
} 
//两条均会执行 
}

2. ID abrufen
JavaScript:
document.getElementById('idName')

JQuery:
$('#idName ')

3. Klasse abrufen
JavaScript:
JavaScript hat keine Standardmethode zum Abrufen der Klasse

JQuery:
$('.className')

4. Get TagName
JavaScript:
document.getElementsByTagName('tagName')

JQuery:
$('tagName')

5, Objekt erstellen und zum Dokument hinzufügen
JavaScript:

var para = document.createElement('p'); 
//创建一个p元素 
document.body.appendElement(para); 
//将p元素追加为body的lastchild子节点，如果想将新创建的p元素插入到已存在的某个元素之前，可以使用insertBefore()方法

JQuery:
JQuery bietet 4 Möglichkeiten, neue Elemente davor oder danach einzufügen vorhandene Elemente (intern) Methoden: append(), appendTo(), prepend(), prependTo().
Format: $(html);
zB HTML-Code:

<p>World!</p> 
$(&#39;p&#39;).append(&#39;<b>Hello!</b>&#39;); 
//输出：<p>World!<b>Hello!</b></p> 
$(&#39;<b>Hello!</b>&#39;).appendTo(&#39;p&#39;); //输出：同上 
$(&#39;p&#39;).prepend(&#39;<b>Hello!</b>&#39;); 
//输出：<p><b>Hello!</b>World! </p> 
$(&#39;<b>Hello!</b>&#39;).prependTo(&#39;p&#39;); 
//输出：同上

6. Neues Element einfügen
JavaScript:
insertBefore() Syntaxformat:
parentElement.insertBefore(newElement,targetElement)
Fügen Sie beispielsweise ein img-Element vor einem Absatz ein.

HTML-Code:

<img src="image.jpg" id="imgs" /> 
<p>这是一段文字</p>

JavaScript-Code:

var imgs = document.getElementById('imgs'); 
var para = document.getElementsByTag('p'); 
para.parenetNode.insertBefore(imgs,para);

JQuery:
JQuery bietet 4 Möglichkeiten zum Einfügen neuer Elemente. Methoden um vor oder nach vorhandenen Elementen zu gehen (extern): after(), insertAfter(), before(), insertBefore().
Format: $(html);
z. B. HTML-Code:

World!

$(&#39;p&#39;).after(&#39;<b>Hello!</b>&#39;); 
//输出：<p>World! </p><b>Hello!</b> 
$(&#39;<b>Hello!</b>&#39;). insertAfter (&#39;p&#39;); 
//输出：同上 
$(&#39;p&#39;).before(&#39;<b>Hello!</b>&#39;); 
//输出：<b>Hello!</b><p>World! </p> 
$(&#39;<b>Hello!</b>&#39;).insertBefore(&#39;p&#39;); 
//输出：同上

7. Knoten kopieren
JavaScript:
reference = node.cloneNode(deep)
Diese Methode hat nur einen booleschen Parameter und sein möglicher Wert kann nur wahr oder falsch sein. Dieser Parameter bestimmt, ob die untergeordneten Knoten des kopierten Knotens auch auf den neuen Knoten kopiert werden.

JQuery:
clone() //Nach dem Kopieren des Knotens weist das kopierte neue Element kein Verhalten auf
clone(true) //Kopieren Sie den Knoteninhalt und seine gebundenen Ereignisse
Anmerkungen: Diese Methode wird normalerweise in Kombination mit appendTo(), prependTo() und anderen Methoden verwendet.

8. Knoten löschen
JavaScript:
reference = element.removeChild(node)
removeChild()-Methode löscht einen untergeordneten Knoten aus einem bestimmten Element

JQuery :
remove();
remove()-Methode dient zum Entfernen aller übereinstimmenden Elemente aus dem DOM. Die Remove()-Methode kann auch in Verbindung mit anderen Filterselektoren verwendet werden, was sehr praktisch ist.
Entfernen Sie beispielsweise das li unter ul li, dessen Titel nicht „Hallo“ ist:
$('ul li').remove(li[title!='Hello']);
empty() ;
Die Methode empty() wird zum Löschen von Knoten verwendet.

9. Paketknoten
JavaScript noch nicht verfügbar

JQuery:

wrap() //将匹配元素用其他元素的结构化标记单独包裹起来 
wrapAll() //将所有匹配的元素用一个元素包裹起来 
wrapInner() //将匹配元素的子内容用其他结构化的标记包裹起来

JavaScript: document.getElementsByTagName('tagName')
JQuery:
Attributknoten in JQuery festlegen und suchen sind beides: attr() .

$('p').attr('title'); //获取p元素的title属性； 
$('p').attr('title','My title'); //设置p元素的title属性 
$('p').attr('title':'My title','class':'myClass'); //当需要添加多个属性时，可以用"名：值"对的形式，中间用逗号隔开。

11、替换节点 
JavaScript： 
reference = element.replaceChild(newChild,oldChild) 
该方法是将一个给定父元素里的一个子节点替换为另外一个节点。 

JQuery： 
replaceWith()、replaceAll() 
eg: 

hello

Hi

Hi

Hi

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Unterschiede zwischen den gängigen Methoden von JavaScript und JQuery anhand von Beispielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!