Explication détaillée des différences entre les méthodes courantes JavaScript et JQuery avec des exemples

jquery est une bibliothèque d'extensions et une bibliothèque d'encapsulation pour javascript, ce qui rend JavaScript plus facile à utiliser et plus facile à utiliser. jQuery consiste à utiliser moins de code et à compléter plus de fonctions de manière magnifique.

La comparaison des méthodes courantes entre JavaScript et JQuery est la suivante :

1 Différences dans le chargement du DOM
JavaScript :
window.onload

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

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

$(document).ready()

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

JavaScript :
document.getElementById('idName')

JQuery :
$('#idName')

3. Obtenir la classe
JavaScript :
JavaScript n'a pas de méthode par défaut pour obtenir la classe

JQuery :
$('.className')

4. Obtenez TagName
JavaScript :
document.
getElementsByTagName('tagName')
JQuery :
$('tagName')

5 ,
Créer un objet et l'ajouter au document JavaScript :

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

JQuery propose 4 façons d'insérer de nouveaux éléments avant ou après des éléments existants (en interne) Méthodes : append(), appendTo(), prepend(), prependTo().
Format : $(html);
par exemple, code html :

<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;); 
//输出：同上

JavaScript :
insertBefore() Format de grammaire :
parentElement.insertBefore(newElement,targetElement)
par exemple, insérez un élément img avant un paragraphe.

Code HTML :

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

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

JQuery propose 4 façons d'insérer de nouveaux éléments Méthodes pour aller avant ou après des éléments existants (externes) : after(), insertAfter(), before(), insertBefore().
Format : $(html);
par exemple, code html :

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;); 
//输出：同上

JavaScript :
reference = node.cloneNode(deep)
Cette méthode n'a qu'un seul paramètre booléen, et sa valeur possible ne peut être que vraie ou fausse. Ce paramètre détermine si les nœuds enfants du nœud copié sont également copiés vers le nouveau nœud.

JQuery :
clone() //Après avoir copié le nœud, le nouvel élément copié n'a aucun comportement
clone(true) //Copiez le contenu du nœud et ses événements liés
Remarques : Cette méthode est généralement utilisée en combinaison avec appendTo(), prependTo() et d'autres méthodes.

8. Supprimer le nœud
JavaScript :
reference = element.removeChild(node)
La méthoderemoveChild() supprime un nœud enfant d'un élément donné

JQuery : < La méthode 🎜>remove();
remove() consiste à supprimer tous les éléments correspondants du DOM. La méthode remove() peut également être utilisée en conjonction avec d'autres sélecteurs de filtre, ce qui est très pratique.
par exemple, supprimez le li sous ul li dont le titre n'est pas "Bonjour" :
$('ul li').remove(li[title!='Hello']);
empty() ;
La méthode empty() est utilisée pour effacer les nœuds.

9. Nœud de package
JavaScript :
JavaScript pas encore disponible

JQuery :

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

 : Définir les nœuds d'attribut, rechercher les nœuds d'attribut JavaScript : document.getElementsByTagName('tagName')

JQuery :
La configuration et la recherche des nœuds d'attribut dans JQuery sont toutes deux : 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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!