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;

<.>/ / Seul le deuxième window.onload sera exécuté ; cependant, il peut être amélioré par les méthodes suivantes :

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. Obtenir l'ID

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 :

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

6. Insérer un nouvel élément

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>

Code JavaScript :

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

JQuery :

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

Code JQuery

$(&#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. Copier le nœud

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

Opération d'attribut

 : 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: 
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)返回高宽，且带单位。

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!