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:
e388a4556c0f65e1904146cc1a846beeWorld!94b3e26ee717c64999d7867364b1b4a3

JQuery-Code

$(&#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() //将匹配元素的子内容用其他结构化的标记包裹起来

10 🎜 >: Attributknoten festlegen, Attributknoten suchen

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: 
e388a4556c0f65e1904146cc1a846beehello94b3e26ee717c64999d7867364b1b4a3 
想替换为： 
c1a436a314ed609750bd7c7d319db4daHi2e9b454fa8428549ca2e64dfac4625cd 

JQuery代码： 
$('p') .replaceWith('c1a436a314ed609750bd7c7d319db4daHi2e9b454fa8428549ca2e64dfac4625cd'); 
或者可以写成： 
$('c1a436a314ed609750bd7c7d319db4daHi2e9b454fa8428549ca2e64dfac4625cd').replaceAll('p'); 

12、CSS-DOM操作 
JavaScript： 
格式：element.style.property 
CSS-DOM能够读取和设置style对象的属性，其不足之处是无法通过它来提取外部CSS设置的样式信息，而JQuery的.css()方法是可以的。 
注意点：CSS中的如"font-size"这样有"-"的，要使用首字母小写的驼峰式表示，如fontSize。 

JQuery： 
格式：$(selector).css() 
css()方法获取元素的样式属性 
此外，JQuery还提供了height()和width()分别用来获取元素的高度和宽度（均不带单位），而css(height)、css(width)返回高宽，且带单位。

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!