Parlons des différences entre jQuery, JavaScript et JS

JavaScript : C'est un langage de script courant dans les navigateurs, qui est 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 de 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 :

JQuery et écriture Javascript native :

1 élément de positionnement

JS :

document.getElementById("abc")

jQuery :

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

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 Soyez concentré

JS et jQuery sont les pareil, Tous sont abc.focus();

5 Attribuez des valeurs 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 Les éléments de paramétrage ne sont pas disponibles

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 la case à cocher est cochée

jQuery

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

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

Le. différence entre JS et JQUERY

1 . Obtenez l'élément

basé sur l'ID JS : ce que vous obtenez est un objet DOM.

Exemple :

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

JQUERY : Ce qui est obtenu est un objet JQUERY.

Exemple :

var div = $("#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, utiliser eq()]

JS : Ce qui est obtenu est un tableau

Exemple :

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

JQUERY :

Exemple :

var div = $(".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, là Il n'y a aucune restriction sur la prise de la valeur en fonction du nom, JQUERY L'élément

est pris en fonction des attributs Exemple :

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

4 L'élément

est pris en fonction des attributs. le nom de la balise. JS : Le tableau renvoyé est également un tableau

Exemple :

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

JQUERY : De la même manière que vous ajoutez des styles à tous les div dans la feuille de style, écrivez directement la balise. nom

entre guillemets doubles. Exemple :

$("div");

Par exemple : Spécifiez l'objet élément du sous-répertoire Get : var div = $("div span"); >

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. Dans le cas d'aucun paramètre, la valeur est

div.text();
div.html();

1.2 Dans le cas de paramètres Est une affectation

div.text("aaaa");
div.html("aaaa");

2. Élément de formulaire

. JS :

2.1. Valeur

div.value;

2.2. Affectation

div.value = 'xxx';
JUQERY：

2.3. Valeur

div.val();

3.4. > Attribut d'opération

Attribut d'opération JS

Paramètres | Modifier les attributs :

div.val('xxx');

Supprimer les attributs

div.setAttribute("","");

Obtenir les attributs

div.removeAttribute("");

Méthodes utilisées pour faire fonctionner les attributs dans JQUERY

Ajouter des attributs :

div.getAttribute();

Supprimer des attributs :

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

Obtenir des attributs :

div.removeAttr("width");

Style d'opération

Le mot-clé de style d'opération JS est [style]

Exemple :

div.attr("width");

Le mot-clé pour les styles d'exploitation dans JQUERY est css

Exemple :

div.style.backgroundColor = "red";

- change la couleur d'arrière-plan de ce div. Devient jaune Tous les styles du CSS ici sont exactement les mêmes que les styles de la feuille de style CSS sans aucun. changements

La méthode JS de styles de fonctionnement ne peut obtenir que des styles en ligne, pas des styles intégrés et externes ! ! ! ! !

　 La méthode de fonctionnement des styles de JQUERY peut être en ligne ou intégrée

Merci à tous d'avoir lu, j'espère que vous en bénéficierez beaucoup

Cet article est reproduit à partir de : https://blog. csdn .net/dalei9243/article/details/79804789

Tutoriel recommandé : "Tutoriel 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!