Équivalents JavaScript natifs des méthodes jQuery: le DOM et les formulaires

Points de base

• jQuery est un outil utile pour les développeurs qui ont besoin de prendre en charge les bibliothèques Internet Legacy ou d'écrire des bibliothèques comme jQuery plus longtemps que le développement d'applications. Cependant, pour la plupart des autres cas, l'utilisation de JavaScript native est plus efficace car elle ne nécessite pas de chargement de grandes bibliothèques comme jQuery.
• Les équivalents JavaScript natifs des méthodes jQuery couramment utilisés tels que les sélecteurs DOM et les opérations DOM sont généralement exécutés plus rapidement et plus efficacement que leurs homologues jQuery. Par exemple, l'utilisation de document.getElementsByClassName ou document.getElementById peut être beaucoup plus rapide que d'utiliser le wrapper $() de jQuery.
• HTML5 fournit une prise en charge intégrée pour une variété de types d'entrée courants sans ajouter de code JavaScript ou JQuery supplémentaire pour la validation du formulaire. Les anciens navigateurs qui ne prennent pas en charge ces nouveaux types seront restaurés sur les champs d'entrée de texte standard et nécessiteront une vérification côté serveur.

à propos de mon récent "Avez-vous vraiment besoin de jQuery? 》 Article, le débat se poursuit, mais en bref, il y a deux raisons d'utiliser jQuery: 1. Vous devez soutenir IE6 / 7/8 (rappelez-vous que vous ne pouvez pas migrer vers JQuery 2.0), ou 2. Sans jQuery, vous allez Dépenser plus que le développement L'application met plus de temps pour écrire une bibliothèque comme jQuery.

Veuillez être pragmatique pour toutes les autres situations. JQuery est une bibliothèque universelle de 270KB. Il est peu probable que vous ayez besoin de toutes les fonctionnalités qu'il fournit, même si vous omettez certains modules, c'est toujours un gros morceau de code. Vous pouvez charger une version minifiée de 30 Ko à partir du CDN, mais le navigateur doit arrêter de traiter et analyser le code sur chaque page avant de faire d'autres actions. Il s'agit du premier d'une série d'articles qui présentent des équivalents JavaScript natifs à des méthodes jQuery couramment utilisées. Bien que vous voudrez peut-être envelopper certains d'entre eux dans des fonctions aliasées similaires et plus courtes, vous n'avez certainement pas besoin de créer votre propre bibliothèque de type jQuery.

sélecteur DOM

jQuery permet la sélection du nœud DOM à l'aide de la syntaxe du sélecteur CSS, par exemple:

// 在 ID 为“first”的文章中查找所有具有类“summary”的段落
var n = $("article#first p.summary");

équivalent natif:

var n = document.querySelectorAll("article#first p.summary");

document.querySelectorAll est implémenté dans tous les navigateurs modernes et IE8 (bien que cela ne prenne en charge que les sélecteurs CSS2.1). JQuery fournit une prise en charge supplémentaire pour les sélecteurs plus avancés, mais pour la plupart, il s'exécute dans le wrapper $(). Le JavaScript natif propose également quatre alternatives, qui sont presque certainement plus rapides que document.querySelectorAll si vous pouvez les utiliser: querySelectorAll

1. document.querySelector(selector) - Obtenez uniquement le premier nœud correspondant
2. document.getElementById(idname) - Obtenez un seul nœud par son nom d'ID
3. document.getElementsByTagName(tagname) - Obtenez le nœud correspondant à l'élément (comme H1, P, fort, etc.).
4. document.getElementsByClassName(class) - Obtenez un nœud avec un nom de classe spécifique

Les méthodes

getElementsByTagName et getElementsByClassName peuvent également être appliquées à un seul nœud pour limiter le résultat aux descendants uniquement, par exemple:

// 在 ID 为“first”的文章中查找所有具有类“summary”的段落
var n = $("article#first p.summary");

faisons quelques tests. J'ai écrit de petits scripts pour obtenir de mon "avez-vous vraiment besoin de jQuery?" 》 Recherche tous les nœuds de commentaires 10 000 fois dans l'article. Résultats:

代码	时间
// jQuery 2.0<br>var c = $("#comments .comment");	4,649 ms
// jQuery 2.0<br>var c = $(".comment");	3,437 ms
// 原生 querySelectorAll<br>var c = document.querySelectorAll("#comments .comment");	1,362 ms
// 原生 querySelectorAll<br>var c = document.querySelectorAll(".comment");	1,168 ms
// 原生 getElementById / getElementsByClassName<br>var n = document.getElementById("comments");<br>var c = n.getElementsByClassName("comment");	107 ms
// 原生 getElementsByClassName<br>var c = document.getElementsByClassName("comment");	75 ms

Je ne peux pas revendiquer des conditions de laboratoire strictes, et cela ne reflète pas non plus l'utilisation du monde réel, mais dans ce cas, le JavaScript natif est 60 fois plus rapide. Il indique également que l'obtention de nœuds par ID, tag ou classe est généralement meilleure que querySelectorAll.

DOM Operation

jQuery fournit plusieurs façons d'ajouter plus au DOM, comme:

// 在 ID 为“first”的文章中查找所有具有类“summary”的段落
var n = $("article#first p.summary");

En dessous de la surface, jQuery utilise la méthode native innerHTML, par exemple:

var n = document.querySelectorAll("article#first p.summary");

Vous pouvez également utiliser la technologie DOM Build. Celles-ci sont plus sûres, mais rarement plus rapides que innerHTML:

var n = document.getElementById("first");
var p = n.getElementsByTagName("p");

Nous pouvons également supprimer tous les nœuds enfants dans jQuery:

$("#container").append("<p>more content</p>");

équivalents natifs pour utiliser innerHTML:

document.getElementById("container").innerHTML += "<p>more content</p>";

ou une petite fonction:

var p = document.createElement("p");
p.appendChild(document.createTextNode("more content"));
document.getElementById("container").appendChild(p);

Enfin, nous pouvons supprimer l'élément entier du DOM en jQuery:

$("#container").empty();

ou javascript natif:

document.getElementById("container").innerHTML = null;

Graphiques vectoriels évolutifs (SVG)

La bibliothèque JQuery de Core a été développée pour traiter les documents actuels. SVG a également DOM, mais jQuery ne fournit pas de manipulation directe à ces objets, car il nécessite généralement des méthodes telles que createElementNS et getAttributeNS. Cela fonctionne et il existe plusieurs plugins disponibles, mais il est plus efficace d'écrire votre propre code ou d'utiliser une bibliothèque SVG dédiée comme Raphaël ou SVG.Js.

HTML5 Form

Même les applications Web les plus élémentaires auront un ou deux formulaires. Vous devez toujours vérifier les données de l'utilisateur côté serveur, mais idéalement, vous les compléterez avec la vérification du client afin que les erreurs puissent être capturées avant de soumettre le formulaire. La vérification du client est simple: 1. Exécutez une fonction lorsque le formulaire est soumis. 2. Si vous rencontrez des problèmes, arrêtez de soumettre et affichez une erreur.

Vous pouvez utiliser jQuery. Vous pouvez utiliser JavaScript natif. Lequel devez-vous choisir? ni l'un ni l'autre . HTML5 prend en charge une variété de types d'entrée couramment utilisés, tels que les e-mails, le téléphone, l'URL, le numéro, l'heure, la date, la couleur et les champs personnalisés en fonction des expressions régulières. Par exemple, si vous souhaitez forcer un utilisateur à saisir une adresse e-mail, veuillez utiliser:

var c = document.getElementById("container");
while (c.lastChild) c.removeChild(c.lastChild);

Sauf si vous avez besoin de fonctionnalités plus complexes (comme la comparaison de deux champs ou plus ou l'affichage des messages d'erreur personnalisés), il n'y a pas besoin de code JavaScript ou JQuery supplémentaire. Les navigateurs plus anciens (y compris IE9 et ci-dessous) ne comprennent pas le nouveau type et seront restaurés sur des champs d'entrée de texte standard. Ces utilisateurs se replieront à la vérification côté serveur; Dans mon prochain article, nous examinerons les opérations et les animations de classe CSS natives.

FAQ sur jQuery et natif javascript

(La partie FAQ est omise ici parce que le contenu de cette partie est faiblement lié au sujet de l'image et de l'article, et l'article est plus long, il peut donc être traité séparément.)

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!