jQuery: JavaScript facile pour les concepteurs

Les plats clés

• jQuery est une bibliothèque JavaScript qui simplifie le processus d'utilisation de JavaScript pour la conception Web, offrant une gamme de fonctions et d'outils prédéfinis pour améliorer les fonctionnalités et l'expérience utilisateur.
• jQuery permet aux concepteurs de manipuler des éléments HTML, de gérer des événements, de créer des animations et de passer des appels Ajax, entre autres tâches, d'une manière plus rationalisée et efficace que le javascript brut.
• L'une des principales caractéristiques de jQuery est sa capacité à «chaîner» les fonctions ensemble, permettant de réaliser plusieurs actions en une seule ligne de code. Cela en fait un outil puissant pour simplifier les tâches JavaScript complexes.
• La fonction de l'événement de charge de JQuery permet de terminer les tâches pendant le chargement de la page, commençant à fonctionner dès qu'il a toutes les pièces dont il a besoin. Ceci est une amélioration des méthodes de charge traditionnelles.
• Malgré ses capacités pour les astuces haut de gamme, la plus grande attraction de JQuery est sa capacité à résoudre rapidement de petits problèmes et avec un minimum d'agitation, ce qui en fait un outil précieux pour les concepteurs de sites Web.

Si la renaissance de JavaScript a été le plus grand thème des deux dernières années, vous pourriez probablement diviser la plupart des discours entourant ce sujet en deux domaines principaux.

À l'extrémité Geek plus de la ville, nous avons vu des smarties exploiter JavaScript pour faire toutes sortes de choses incroyables - et parfois ridicules - avec Ajax.

Cependant, pour les gars frontaux comme moi, une grande partie de la pédiz-vous et de la bulle a été concentrée sur le réaménagement de votre balisage - c'est-à-dire en utilisant JavaScript pour améliorer votre balisage après son arrivée au navigateur. Les lecteurs de longue date de la newsletter de conception View se souviendront probablement de quelques-unes de mes propres expériences au cours des dernières années:

• Dans le style d'images avec le DOM, nous avons utilisé JavaScript pour ajouter des coins arrondis aux images.
• Dans DOM Text Shadows, nous avons utilisé JavaScript pour construire une ombre sur le texte de la tête.
• dans la règle horizontale! OK!, Nous avons utilisé JavaScript pour réparer l'élément HR douteux.

Bien que chacun de ces scripts ait un objectif assez différent, ils impliquent tous d'envoyer un balisage sémantique soigné aux navigateurs et d'utiliser JavaScript pour réparer ou étendre les capacités de ces navigateurs qui sont assez intelligents pour comprendre. Dans la plupart des cas, cela consiste à «emballer» une partie de votre balisage dans un certain balisage. Aujourd'hui, nous allons examiner une méthode facile et polyvalente qui nous permettra de le faire à tout moment, n'importe où: jQuery.

Alors, qu'est-ce que jQuery?

jQuery est encore une autre bibliothèque JavaScript pour rejoindre l'espace déjà bondé qui comprend le prototype, Scriptaculous, Rico, Moo.fx et plus d'une douzaine d'autres. Pour l'utiliser, joignez simplement le fichier .js dans la tête de votre page: comme par magie, vous avez accès à de nombreuses fonctions prédéfinies et gizmos.

Q: Pourquoi voudriez-vous éventuellement une autre bibliothèque JavaScript arcanique à gérer?
R: L'attraction clé de jQuery est ce qu'elle peut vous offrir dans les 10 premières minutes de votre utilisation.

Il y a quelque temps, nous avons passé un peu de temps à améliorer la façon dont le marché de SitePoint fonctionne. Tout en recherchant un moyen élégant de permettre aux vendeurs d'afficher de grandes captures d'écran, des statistiques, des graphiques et d'autres images sans quitter la page d'enchères principale, je suis tombé sur la boîte épaisse de Cody Lindley, qui est alimentée par la bibliothèque JavaScript jQuery de John Resig. L'image ci-dessous montre la boîte épaisse en action.

Après seulement cinq minutes de jouant avec de la boîte épaisse, vous commencerez à voir son potentiel. Sur le marché, j'ai pu tirer à la fois des images liées et des documents HTML complets jusqu'à la fenêtre de la boîte épaisse, tout en graissant simultanément (mais pas en perdant) la page de lancement. Les utilisateurs avec des navigateurs dans lesquels JavaScript sont désactivés ou indisponibles sont simplement emmenés directement à l'élément (c'est-à-dire l'image ou la page). C'est une solution très intelligente, utilisable et accessible au problème «agrandir cette miniature».

Cependant, puisque nous avions déjà décidé d'inclure la bibliothèque JQuery dans la page (c'est minuscule - environ 10 Ko), j'ai pensé que ce serait une bonne idée de découvrir ce qu'il pourrait faire d'autre pour nous.

Une heure plus tard, j'étais un converti jQuery.

La vraie beauté de jQuery est sa simplicité. Des lignes uniques de code jQuery peuvent remplacer une douzaine de lignes de JavaScript normal, mais elle reste très élémentaire et flexible. Permettez-moi d'illustrer ce point avec un exemple. Dans mon «fixateur de règles horizontales» il y a deux ans, nous avons utilisé le script suivant:

function fancyRules() {  <br>
  if (!document.getElementsByTagName) return;  <br>
    var hr = document.getElementsByTagName("hr"); <br>
  for (var i=0; i<hr.length; i++) {  <br>
    var newhr = hr[i];  <br>
    var wrapdiv = document.createElement('div'); <br>
    wrapdiv.className = 'line';   <br>
    newhr.parentNode.replaceChild(wrapdiv, newhr);   <br>
    wrapdiv.appendChild(newhr);   <br>
  }  <br>
}  <br>
 <br>
window.onload = fancyRules;

En tant que résumé rapide de ce code, le navigateur attend que la page termine le chargement avant de traverser le DOM pour localiser chaque occurrence de HR. Chaque fois qu'il en trouve un, il crée une nouvelle div, lui donne le nom de classe «ligne», l'inserte là où se trouvait les RH, et fait éclater l'ancien RH à l'intérieur du nouveau div, pour réaliser le balisage requis pour mettre en œuvre cet effet particulier. Mis à part la pédante sémantique, le résultat final de ce script était que nous avons pu atteindre le résultat souhaité sans avoir à changer de centaines de pages.

À l'époque, je pensais que ce n'était pas un mauvais résultat pour 12 lignes de code. Mais regardons comment nous obtiendrions le même résultat en utilisant jQuery.

$(document).ready(function(){ <br>
  $("hr").wrap("<div class='line'></div>"); <br>
});

Je ne vous moque pas.

pour le décomposer (pas qu'il y ait beaucoup à casser):

$(document).ready(function(){ <br>
  ... <br>
});

Les première et troisième lignes sont l'événement de chargement de JQuery, et ils remplacent l'ancienne fenêtre.On chargez par-dessus. Toute tâche que nous souhaitons accomplir pendant le chargement de la page peut être déposée à l'intérieur de ces accolades bouclées.

Il s'agit d'une grande amélioration par rapport à l'ancienne méthode Onload, car plutôt que d'attendre que tout ait fini le chargement, la fonction de JQuery regarde tout ce qui entre et commence à fonctionner dès qu'il a toutes les pièces dont il a besoin. C'est vraiment très soigné.

Remarquablement, la deuxième ligne est encore plus simple:

function fancyRules() {  <br>
  if (!document.getElementsByTagName) return;  <br>
    var hr = document.getElementsByTagName("hr"); <br>
  for (var i=0; i<hr.length; i++) {  <br>
    var newhr = hr[i];  <br>
    var wrapdiv = document.createElement('div'); <br>
    wrapdiv.className = 'line';   <br>
    newhr.parentNode.replaceChild(wrapdiv, newhr);   <br>
    wrapdiv.appendChild(newhr);   <br>
  }  <br>
}  <br>
 <br>
window.onload = fancyRules;

le "Objet Dollar" - $ ("HR") - est tout ce dont nous avons besoin pour dire à JQuery de saisir chaque règle horizontale sur cette page, et envelopper est ce que nous ferons à ces éléments RH.

La fonction d'enveloppe intégrée de JQuery prend tout ce que nous lui donnons (dans ce cas "

") et l'enroule autour de chaque HR de notre page - pas de boucles ou de tests requis.

Nous avons utilisé une div ici, mais nous pourrions tout aussi facilement modifier ou emballer un B, une portée ou un élément.

Et bien que nous ayons utilisé une règle de sélection très simple ici (toutes les HR), nous aurions pu facilement être beaucoup plus spécifiques avec ce que nous avons ciblé. En utilisant une ancienne syntaxe CSS familière, nous aurions pu utiliser l'un des éléments suivants:

• $ ("hr.separate") - Obtenez les éléments HR avec le nom de classe "séparé".
• $ ("li: only-child") - Obtenez des éléments de liste qui sont seuls.
• $ ("ul> li") - obtenez uniquement des éléments de liste avec des listes de parents non ordonnées.

Bien que j'ai trouvé personnellement entier des fonctions jQuery les plus instantanément utiles, ce n'est que l'une des nombreuses, y compris la cachette, le show, le fadeout ("lent") et le slize ("rapide"), pour n'en nommer que quelques-uns. Vous pouvez probablement deviner ce que fait chacune de ces fonctions. Le tutoriel du starter jQuery sur le site jQuery est un guide de débutant assez doux et vous emmène à travers certaines des fonctions les plus courantes.

Mais peut-être que la fonctionnalité la plus soignée de JQuery est sa capacité à «chaîner» les fonctions ensemble. En d'autres termes, si je voulais ajouter une seconde div à nos éléments RH pour une raison folle, je pourrais simplement ajouter un autre appel à la fonction de wrap à la fin de mon code, comme ceci:

$(document).ready(function(){ <br>
  $("hr").wrap("<div class='line'></div>"); <br>
});

C'est si facile, c'est fou. Crazy comme un renard!

La section Sell Your Site du marché vous donne un autre exemple de l'endroit où cela pourrait être utile, comme démontré ci-dessous.

Lorsque nous développions cette page, je voulais ajouter une petite icône dans le coin inférieur de chaque vignette. Cela a obligé chaque élément IMG à être enveloppé dans un div de conteneur, et une autre div montrant l'icône à positionner dans le récipient Div.

Encore une fois, le code jQuery n'est qu'une ligne (je l'ai divisé ici parce que nous avons une largeur de colonne limitée avec laquelle travailler).

$(document).ready(function(){ <br>
  ... <br>
});

En anglais simple, ce code demande simplement à jQuery à:

• Trouvez toutes les images des éléments Li qui sont à l'intérieur de #Thumbnails.
• Enveloppez ces images dans un div appelé "wrap".
• serrez un autre div (celui avec l'icône graphique) dans mon div "enveloppe" juste avant mon image.

Maintenant que nous avons la structure, CSS fait le reste.

Bien sûr, si JavaScript est désactivé, les miniatures se lient directement vers les fichiers d'image bruts, et il n'y a pas besoin des icônes. Maintenant, c'est ce que j'appelle une dégradation élégante.

Comme la plupart des autres bibliothèques JavaScript, JQuery est capable de quelques astuces très haut de gamme (nous avons couvert ses fonctionnalités de l'Ajax dans un article précédent), mais la plus grande attraction pour moi a été sa capacité à résoudre rapidement les petits problèmes et avec un minimum d'agitation

Comme vous pouvez probablement le voir, je suis déjà un grand fan de jQuery. J'espère que vous le trouverez aussi utile.

Et bien sûr, si vous élargissez vos horizons JavaScript, n'oubliez pas de passer à la dernière version de l'extension Firebug de Joe Hewitt, qui est maintenant le roi incontesté de JavaScript Debuggers.

Cet article a été initialement publié dans Design View # 23.

Les questions fréquemment posées sur JQuery et JavaScript pour les concepteurs

Quelle est la différence entre jQuery et JavaScript?

JavaScript est un langage de programmation qui vous permet d'implémenter des fonctionnalités complexes sur les pages Web. JQuery, en revanche, est une bibliothèque JavaScript rapide, petite et riche en fonctionnalités. Cela rend des choses comme la traversée et la manipulation de documents HTML, la gestion des événements et l'animation beaucoup plus simples avec une API facile à utiliser qui fonctionne à travers une multitude de navigateurs. Essentiellement, JQuery est un ensemble de bibliothèques JavaScript conçues pour simplifier le document HTML traversant, la gestion des événements et l'animation.

Comment puis-je commencer à utiliser jQuery dans mes projets?

Pour commencer à utiliser jQuery, vous devez inclure la bibliothèque JQuery dans votre projet. Vous pouvez le télécharger à partir du site officiel de JQuery ou l'inclure directement à partir d'un réseau de livraison de contenu (CDN). Une fois que la bibliothèque est incluse dans votre projet, vous pouvez commencer à utiliser les fonctions jQuery en utilisant le signe $ suivi d'un sélecteur (pour sélectionner des éléments HTML) et une action jQuery (pour effectuer sur les éléments sélectionnés).

Quelles sont les utilisations courantes de JQuery pour les concepteurs Web?

JQUERY est couramment utilisé pour une variété de tases dans le design Web, notamment des éléments de conception Web, y compris des elets de manipulerie, des éléments de task (comme les clics ou les mouvements de la souris), la création d'animations et la création d'appels AJAX pour récupérer ou envoyer des données à un serveur. Il est également utilisé pour créer des fonctionnalités interactives comme les curseurs d'image, les validations de formulaire et le chargement dynamique du contenu.

Comment JQuery simplifie-t-il le travail avec JavaScript?

jQuery simplifie JavaScript en fournissant des API faciles à utiliser pour des tâches Web communes, en abstraction de la fonctionnalité JavaScript complexe. Il gère également de nombreux problèmes de compatibilité entre les navigateurs qui peuvent survenir lors de l'écriture de JavaScript brut, ce qui rend votre code plus facile à écrire et à maintenir.

Puis-je utiliser jQuery avec d'autres bibliothèques JavaScript?

Oui, jQuery peut être utilisé ainsi que d'autres bibliothèques JavaScript. Il fournit une fonctionnalité appelée Mode Noconflict, qui vous permet d'utiliser jQuery avec d'autres bibliothèques qui utilisent également le symbole $.

Quelles sont les ressources pour apprendre jQuery?

Il existe de nombreuses ressources disponibles pour apprendre jQuery. Le site officiel de JQuery fournit une documentation et des tutoriels complètes. D'autres plates-formes en ligne comme Codecademy, Udemy et Khan Academy proposent également des cours sur jQuery.

Comment puis-je déboguer le code jQuery?

Le code jQuery est similaire au débogage javascript. Vous pouvez utiliser les outils de développeur du navigateur pour inspecter les éléments, afficher les journaux de console et parcourir votre code. De plus, jQuery fournit quelques méthodes comme .Error (), .fail () et .DOne () pour gérer les erreurs et les exceptions.

Quelles sont les meilleures pratiques lors de l'utilisation de jQuery?

Les meilleures pratiques lors de l'utilisation de jQuery incluent: jQuery CDN pour des temps de chargement plus rapides.

Comment puis-je optimiser mon code jQuery pour de meilleures performances?

Il existe plusieurs façons d'optimiser votre code jQuery pour de meilleures performances. Il s'agit notamment de la minimisation de la manipulation DOM, de l'utilisation de sélecteurs d'ID au lieu de sélecteurs de classe, de la mise en cache d'objets jQuery et de l'utilisation de la méthode .on () pour la liaison des événements.

Puis-je utiliser jQuery pour le développement Web mobile?

Oui, jQuery a une bibliothèque spécifique pour le développement Web mobile appelé jQuery Mobile. Il fournit un système d'interface utilisateur unifié basé sur HTML5 pour toutes les plates-formes de périphériques mobiles populaires.

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!