Comprenez les différences entre jQuery, JavaScript et JS en deux minutes

Deux minutes pour comprendre la différence entre jQuery, JavaScript et JS

JavaScript , jQuery et JS apparaissent souvent dans nos vies. Savez-vous quelles sont les similitudes et les différences entre eux ? Prenons deux minutes pour les découvrir ci-dessous.

JavaScript : Il s'agit d'un langage de script courant dans les navigateurs, utilisé pour réaliser la dynamique des pages Web et l'interaction avec le back-end (base de données).
jQuery : Il s'agit d'une bibliothèque de classes intégrée à JavaScript. En utilisant jQuery, vous pouvez réduire l'utilisation d'instructions JavaScript natives, améliorant ainsi l'efficacité.
JS : C'est une abréviation de JavaScript.

Résumé des différences :
1. JQuery simplifie grandement JavaScript et accomplit au maximum la tâche ardue de remplir plus de fonctions avec le moins de code.
2. JavaScript ne charge le DOM qu'une seule fois, tandis que JQuery le charge plusieurs fois.
3. JQuery est plus pratique pour utiliser le DOM. Comme l'acquisition de nœuds. Par exemple : $()

Explication : Le moyen le plus direct d'améliorer la compréhension du JavaScript natif et de JQuery encapsulé est d'obtenir une interaction de base front-end et back-end sans introduire JQuery dans la page.

Le contenu suivant est un résumé compilé pour comprendre jQuery et JS différemment :

Méthode d'écriture jQuery et Javascript natif :

1 élément de positionnement

JS :

document.getElementById("abc")

jQuery :

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

Remarque : Le résultat renvoyé par JS est cet élément, et le résultat renvoyé par jQuery est un objet JS. L'exemple suivant suppose que l'élément abc a été positionné.

2 Changer le contenu de l'élément

JS :

abc.innerHTML = "test";                //现在的项目中有用到

jQuery :

abc.html("test");

3 Afficher les éléments cachés
JS :

abc.style.display = "none";              //现在的项目中有用到
abc.style.display = "block";

jQuery :

abc.hide(); 
abc.show();
abc.toggle();         //在显示和隐藏之间切换、

4 Se concentrer
JS et jQuery sont identiques, abc.focus();
5 Attribuer une valeur au formulaire
JS :

abc.value = "test";

jQuery :

abc.val("test");

6 Récupérer la valeur du formulaire
JS :

alert(abc.value);

jQuery :

alert(abc.val());

7 L'élément de réglage est non disponible
JS :

abc.disabled = true;

jQuery :

abc.attr("disabled", true);

8 Modifier le style de l'élément
JS :

abc.style.fontSize=size;

jQuery :

abc.css('font-size', 20);

JS :

abc.className="test";

JQuery :

abc.removeClass(); 
abc.addClass("test");

9 Déterminer si le la case à cocher est cochée
jQuery

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

Remarque : il est dit en ligne que .attr("checked") == true ne peut pas réellement être utilisé, mais celui ci-dessus a été testé et fonctionne

La différence entre JS et JQUERY

1 Obtenez des éléments basés sur l'ID
JS : ce que vous obtenez est un objet DOM. .
Exemple :

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

JQUERY : Ce qui est obtenu est un objet JQUERY.
Exemple :

var p = $("#one");

2. Récupérez les éléments selon la classe [Dans le tableau, si vous souhaitez récupérer l'objet DOM, utilisez la méthode index, si vous souhaitez récupérer l'objet JQUERY, use eq()]
JS : Ce qui est obtenu est un tableau
Exemple :

var p = document.ElementsByClassName("test");

JQUERY :
Exemple :

var p = $(".test");

3. Récupère les éléments en fonction du nom
JS : renvoie un tableau
Exemple :

var bd = document.getElementsByName(uid);

JQUERY : La méthode consiste à utiliser des crochets, attribut = une valeur, il n'y a aucune restriction sur la prise du valeur basée sur le nom, JQUERY prend l'élément en fonction de l'attribut
Exemple :

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

4 Récupère l'élément en fonction du nom de la balise
JS : La valeur renvoyée. est aussi un tableau
Exemple :

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

JQUERY : et style La méthode de style de tous les p dans le tableau est la même Écrivez le nom de la balise
directement entre guillemets doubles.

$("p");

Par exemple : Spécifiez l'acquisition d'objet d'élément de sous-répertoire : var p = $("p span") ;——Il existe de nombreuses méthodes de combinaison

Contenu de l'opération

1. Éléments non-formulaires (s'il s'agit de texte, utilisez la méthode texte, s'il s'agit de code html, utilisez la méthode html)

Exemple :

1.1. la valeur est
p.text();
p.html();
1.2 S'il y a des paramètres, la valeur est attribuée
p.text("aaaa"); .html("aaaa");

2. Élément de formulaire
JS : 2.1. Obtenir la valeur
p.value;
2.2. p.value = 'xxx';
JUQERY:
2.3. Obtenir la valeur
p.val() ;
Assignation
p.val('xxx');


Attribut d'opération

Attribut d'opération JS

Définir | Modifier les attributs :

p.setAttribute("","");

Supprimer les attributs

p.removeAttribute("");

Obtenir les attributs

p.getAttribute();

Utilisé dans les méthodes JQUERY pour faire fonctionner les attributs

Ajouter des attributs :

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

Supprimer les attributs :

p.removeAttr("width");

Obtenir les attributs :

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教程》

 

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!