Existe-t-il un moyen facile de convertir le code jQuery en javascript?
Bien qu'il existe de nombreuses similitudes entre jQuery et JavaScript, plusieurs différences existent également dans leur syntaxe et leur fonctionnalité. Pour cela, tout d'abord, comprendre ce que le code jQuery essaie de faire. Ensuite, utilisez les méthodes ou attributs alternatifs de la vanille javascript.
Ce blog discutera de la conversion du code jQuery en javascript.
Comment convertir le code jQuery en javascript?
Pour convertir le code jQuery en JavaScript, il est essentiel de comprendre ce que fait le code et quelles méthodes jQuery sont utilisées. Ensuite, utilisez les méthodes alternatives en JavaScript, comme le «$ ()”Utilisé dans jQuery pour sélectionner des éléments en JavaScript, pour sélectionner des éléments"document.QuerySelector ()" ou "queySelectorall ()«Des méthodes sont utilisées.
Comprenons le processus de conversion à l'aide d'un exemple.
Exemple
Ici, nous avons un code jQuery qui modifie la couleur du texte et affiche un texte explicatif sur un bouton cliquer. Pour cela, le document HTML contient deux boutons, du texte et un vide
Tag où le nouveau texte sera affiché sur le bouton CLIC:
Tutoriel javascript
En travaillant avec jQuery, il est obligatoire d'ajouter la bibliothèque JQuery dans l'étiquette du document HTML:
Dans la balise, le code donné est utilisé:
$ (document).ready (function ()$ ('# mydiv').trouver ('bouton: d'abord').cliquez sur (fonction ()
$ ('.texte').CSS («couleur», «bleu»);
$ ('# message').Texte («Je suis le premier bouton qui définira la couleur du texte sur le bleu»);
);
$ ('# bouton').suivant().cliquez sur (fonction ()
$ ('.texte').CSS («couleur», «vert»);
$ ('# message').Texte («Je suis le deuxième bouton qui définira la couleur du texte sur vert»);
);
);
Dans le code ci-dessus
- Tout d'abord, utilisez le «prêt()”Fonction qui s'exécutera lorsque le DOM sera entièrement chargé. Il est fréquemment utilisé pour s'assurer que le DOM est entièrement chargé avant l'exécution de tout code JavaScript qui interagit avec ou manipule les éléments DOM.
- Ensuite, accédez à l'élément div en utilisant son ID attribué "$ ('# mydiv')»Et appelez le«trouver()«Méthode pour trouver le premier bouton, joignez un événement de clic sur celui-ci à l'aide du«Cliquez sur()”Méthode où la couleur du texte sera modifiée et un message texte sera affiché sous le bouton sur le bouton cliquer.
- Ensuite, pour trouver l'autre bouton dans le div, nous avons utilisé la jQuery "suivant()”Méthode et appliqué la même fonctionnalité.
Comme vous pouvez le voir que la sortie affiche un message texte sur le bouton cliquer qui expliquera le travail et en même temps, la couleur du texte existant est modifiée:
Maintenant, ici, nous allons convertir le code jQuery ci-dessus en javascript sans modifier la sortie. Vous pouvez utiliser différentes approches pour la conversion, mais nous utiliserons les méthodes JavaScript comme alternative aux méthodes jQuery.
Tout d'abord, nous accéderons au bouton en utilisant le "document.QuerySelector ()" méthode:
Var Button = Document.queySelector ('bouton');Ensuite, attachez un "Cliquez sur»Événement avec l'aide du«addEventListener ()" méthode. Pour changer la couleur du texte, en JavaScript, utilisez le «style«Attribut tandis que dans jQuery, nous utilisons le«CSS ()" méthode. De même, pour le texte, utilisez le «innerhtml»Propriété en JavaScript tandis que le«texte()«La méthode est utilisée dans la jQuery:
bouton.addEventListener ('click', function ()document.Queryselector ('.texte').style.color = "bleu";
document.queySelector ('# message').innerhtml = 'Je suis le premier bouton qui définira la couleur du texte sur le bleu';
);
Pour le deuxième bouton, nous utiliserons le «NextElelementsie«Attribut en javascript, tandis qu'à jQuery, nous avons utilisé le«suivant()" méthode:
bouton.NextElelementsie.addEventListener ('click', function ()document.Queryselector ('.texte').style.color = "vert";
document.queySelector ('# message').textContent = 'Je suis le deuxième bouton qui définira la couleur du texte sur vert';
);
Sortir
JQUERY Méthodes ou attributs alternatifs en JavaScript
Dans le tableau donné, vous pouvez voir les méthodes et attributs alternatifs de la jQuery:
| jquery | Javascrip | |
|---|---|---|
| Exécutez une fonction lorsque le DOM est prêt | $ (document).ready (function () // code… ); | document.addEventListenerm ("DomContentloaded", function () // code… ); |
| Pour sélectionner l'intégralité de HTML | $ («Html») | document.Queryselector (sélecteur) |
| Pour sélectionner l'intégralité du corps HTML | $ («Corps») | document.corps |
| Ajoutez une classe à un élément HTML | $ élément.addClass (nom de classe) | élément.liste de classe.ajouter (nom de classe) |
| Supprimer une classe à un élément HTML | $ élément.Supprime (nom de classe) | élément.liste de classe.supprimer (nom de classe) |
| Basculer une classe à un élément HTML | $ élément.toggleclass (nom de classe) | élément.liste de classe.basculer (nom de classe) |
| Vérifiez si un élément HTML contient une classe | $ élément.HasClass (nom de classe) | élément.liste de classe.a (nom de classe) |
| Cliquez sur l'événement | $ (".bouton").cliquez sur (fonction (événement) ); | document.QuérySelector (".bouton") .addEventListener ("cliquez", (événement) => ); |
| Ajouter le style CSS | $ div.css (couleur: "jaune") | div.style.color = "jaune" |
| Sélection de tous les éléments | $ ('… .') | document.queySelectorall (); |
| Sélectionnez le premier élément | .d'abord(); | document.queySelector (); |
| Trouver des éléments | .trouver(); | document.queySelector (); ou document.queySelectorall (); méthode |
| Sélection de l'élément enfant | .enfants(); | Norme parentale.enfants; |
| Sélection de l'élément parent | .parent(); | Nœud.parentNode; |
| Sélectionner les frères et sœurs | .frères et sœurs(); | Nœud.norme parentale.queySelectorall («: pas (#elem)»); |
| Sélectionnez le prochain frère | .suivant(); | Non-documentaire. NextElelementsie; |
| Sélectionnez les frères et sœurs précédents | .prev (); | Non-documentaire. PREMERSELlementSibling; |
| Trouvez l'élément correspondant le plus proche | .le plus proche(); | Élément.le plus proche(); |
| Obtenir un attribut | .att ('att-name'); | Élément.getAttribute ('att-name'); |
| Ajouter un nouvel élément enfant | .APPEND («HTML-String»); | Nœud.APPENDCHILD (); |
| Supprimer tous les nœuds enfants | .vide(); | Élément.RemplaceChildren (); |
| Obtenez ou définissez le contenu HTML | .html (); | Élément.innerhtml; |
| Cachette | .cacher(); | Elementcssinnenestyle.style.affiche = 'aucun'; |
| Élément de spectacle | .montrer(); | Elementcssinnenestyle.style.display = ”; |
| Ajouter l'écouteur d'événements | .sur(); | EventTarget.addEventListener ('événement', functionname); |
| Supprimer l'auditeur d'événements | .désactivé(); | EventTarget.retireEventListener ('Event', FunctionName); |
| Boucle à travers un objet, un tableau ou une collection | .chaque(); | Nodeliste.prototype.pour chaque(); |
Il s'agit de convertir le code jQuery en javascript.
Conclusion
Il n'y a pas de moyen facile pour la conversion du code jQuery en javascript. Vous pouvez simplement connaître les différences entre les deux et utiliser les méthodes intégrées JavaScript Vanilla qui sont égales aux méthodes jQuery. Ce blog a discuté de la conversion du code jQuery en javascript.