Tutoriel jQuery - Prise en main : principes de base et sélecteurs

Tutoriel jQuery - Prise en main : principes de base et sélecteurs

La semaine dernière, j'ai expliqué à quel point jQuery est important pour tout développeur Web moderne et pourquoi c'est génial. Cette semaine, je pense qu'il est temps de se salir les mains avec du code et d'apprendre à utiliser réellement jQuery dans nos projets.





Je vais le dire maintenant - vous n'avez pas besoin d'apprendre Javascript pour utiliser jQuery. C'est probablement mieux si vous considérez jQuery comme une évolution de Javascript - une meilleure façon de le faire - qu'une simple bibliothèque qui ajoute des fonctionnalités. Tout Javascript dont vous avez besoin sera récupéré en cours de route. On suppose cependant qu'en tant que développeur Web, vous avez une assez bonne connaissance du HTML et du CSS (et si ce n'est pas le cas, voici notre guide xHTML gratuit !).





Modèle d'objet de document

jQuery concerne la traversée et la manipulation du JUGEMENT - les documenter OU bjet M odèle. Le DOM est une représentation arborescente hiérarchique de la page, construite par les navigateurs après lecture de tout le code HTML. Dans jQuery, nous utiliserons une terminologie comme parent , enfants , et frères et sœurs assez souvent, vous devriez donc avoir une idée de ce que cela signifie par rapport au DOM.





Ce schéma simple dew3schoolsexplique assez bien les concepts. Vous devriez pouvoir voir que le parent de l'élément est , tandis que le élément a un effet immédiat

frère et sœur.

Pour commencer : ajouter jQuery

La dernière version de jQuery fait environ 91 Ko lorsqu'elle est compressée, elle ajoute donc à peu près le même poids de page qu'une petite photo ou une capture d'écran. Le moyen le plus simple d'inclure jQuery dans votre projet est de coller une référence à la version hébergée la plus récente dans la section d'en-tête de votre site :



Notez cependant que si vous utilisez Wordpress, cela peut poser des problèmes car il possède déjà sa propre copie de la bibliothèque jQuery. Les plugins peuvent demander que cela soit chargé, et Wordpress ne chargera intelligemment jQuery qu'une seule fois, quel que soit le nombre de plugins qui l'ont demandé.

Si vous ajoutez la ligne suivante à votre fonctions.php thème, vous ajouterez une autre demande pour qu'il soit inclus. Wordpress saura alors toujours le charger si votre thème est actif.







d'où vient ce numéro qui appelle
wp_enqueue_script('jquery');

La deuxième chose à garder à l'esprit est que lorsque jQuery est ajouté à l'aide de la méthode standard, il sera chargé en tant que $ . Tout ce que vous faites avec jQuery sera précédé de ce $, tel que :

$.ajax

ou





$('#header')

Cependant, lorsque jQuery est chargé via Wordpress, tout est fait en utilisant la variable jQuery au lieu de $, donc par exemple :

jQuery('#header')

Bien que ce ne soit pas un gros problème lors de l'écriture de votre propre code, cela signifie que couper et coller des extraits de jQuery que vous trouvez sur le Web devra être traduit pour utiliser jQuery au lieu de $ - c'est tout.

Une façon de contourner cela est d'envelopper le code de style $ que vous trouvez comme ceci :

(function($) {
// paste $ code in here
})(jQuery);

Cela prend le jQuery variable et la passe dans une fonction anonyme comme $ . J'expliquerai les fonctions anonymes la prochaine fois - pour l'instant, apprenons la structure de base d'un peu de code jQuery.

Pour ajouter votre code à une page HTML ou PHP, placez tout dans des balises, comme ceci :


// jQuery code codes here

$ ('sélecteur').méthode();

C'est ça, dans le titre là-haut. C'est la structure de base d'un seul morceau de code jQuery pour manipuler le DOM. Facile, non ?

Lessélecteurdit à jQuery de trouver des choses qui correspondent à cette règle, et est le même que les sélecteurs CSS (et puis un peu plus sur le dessus). Ainsi, tout comme en CSS, vous styliseriez tous les liens avec

a { }

La même chose serait faite dans jQuery comme

$('a')

Cela peut être fait pour n'importe quel élément HTML - div, h1, span - peu importe. Vous pouvez également utiliser des classes CSS et des identifiants pour être plus précis.

Par exemple, pour trouver tous les liens avec la classe 'findme', vous utiliseriez :

$('a.findme')

Vous n'avez pas besoin de spécifier le type d'élément à chaque fois - mais si vous le faites, cela rend simplement la règle plus spécifique. Tu aurais pu juste dire

$('.findme')

qui correspondrait à tout avec la classe trouve-moi , qu'il s'agisse ou non d'un lien.

Pour utiliser un élément ID nommé, utilisez le # signer à la place. La principale différence ici est qu'un sélecteur d'ID ne sélectionnera jamais qu'un seul objet, tandis qu'un sélecteur de classe peut en trouver plusieurs.

le bouton windows ne fonctionne pas sur le clavier
$('#something')

Fondamentalement, si vous pouvez le faire en CSS, jQuery le fera aussi. En fait, vous pouvez aussi des pseudo-sélecteurs de style CSS3 assez complexes comme :first

$('body p:first')

Ce qui saisirait le paragraphe de la page. Vous trouvez également des éléments avec certains attributs. Considérez cet exemple ; nous voulons trouver tous les liens sur la page qui pointent en interne vers se servir de et les mettre en valeur d'une manière ou d'une autre. Voici comment nous pourrions les trouver :

$('a[href*='makeuseof']')

N'est-ce pas cool? Eh bien, je pense que oui.

Votre prochaine escale devrait être la Documentation de l'API jQuery pour les sélecteurs . C'est une liste énorme de tous les différents types de sélecteurs disponibles, et personne ne s'attendrait à ce que vous les appreniez tous.

La partie suivante de l'équation estméthode- que faire de ces choses une fois que vous les avez toutes trouvées - mais nous laisserons cela pour la prochaine leçon. Si vous voulez commencer à essayer divers sélecteurs maintenant, je vous suggère de vous en tenir à la méthode css suivante. Cela prend deux paramètres - un CSS nom de la propriété , et un nouveau valeur attribuer à cette propriété. Donc, pour donner à tous les liens une couleur de fond rouge, vous feriez :

$('a').css('background-color','red');

Assez simple! Bien que cela puisse ne pas être d'une utilité pratique, cela vous permettra de voir facilement tous les éléments localisés à l'aide de vos sélecteurs. Allez maintenant et sélectionnez - le DOM vous attend.

J'espère que ce tutoriel vous a été utile; J'ai essayé de le rendre aussi simple que facile à comprendre que possible. N'hésitez pas à poser toutes vos questions ou à laisser des commentaires, mais sachez que je ne suis certainement pas un ninja jQuery d'élite.

Partager Partager Tweeter E-mail 5 astuces pour booster vos machines Linux VirtualBox

Vous en avez assez des mauvaises performances offertes par les machines virtuelles ? Voici ce que vous devez faire pour améliorer les performances de votre VirtualBox.

Lire la suite
Rubriques connexes
  • Culture Web
  • Développement web
  • JavaScript
  • La programmation
  • jQuery
A propos de l'auteur James Bruce(707 articles publiés)

James a un BSc en Intelligence Artificielle et est certifié CompTIA A+ et Network+. Lorsqu'il n'est pas occupé en tant qu'éditeur de revues de matériel, il aime les jeux LEGO, la réalité virtuelle et les jeux de société. Avant de rejoindre MakeUseOf, il était technicien en éclairage, professeur d'anglais et ingénieur en centre de données.

Plus de James Bruce

Abonnez-vous à notre newsletter

Rejoignez notre newsletter pour des conseils techniques, des critiques, des ebooks gratuits et des offres exclusives !

Cliquez ici pour vous abonner