Les manipulations DOM

Comme vous le savez déjà et avez pu le remarquer plus haut, les éléments DOM sont des éléments objets de notre page HTML représentés par une balise précise tel que <p>, <div>, <a>, <table>, etc. que nous pouvons sélectionner par l'entremise de la librairie jQuery. Les méthodes de manipulations DOM de la librairie permettent de mettre à jour la page HTML selon l'élément sélectionné. Par exemple, la méthode remove() vient retirer l'élément spécifié dans notre sélecteur au complet alors que la méthode after() vient ajouter un élément après le sélecteur. Ces méthodes viennent donc démontrer l'utilité de jQuery quant à la modification directe du contenu de la page.

Afficher toutes les manipulations possibles

Comme on peut le voir, ces fonctions se basent grandement sur le sélecteur pour positionner les nouveaux éléments. Ces nouveaux éléments seront définis directement dans le code JavaScript plutôt que dans le squelette HTML de la page. Elles permettent d'ailleurs de ne pas créer inutilement des éléments, mais de les ajouter uniquement lors de l'événement souhaité.

Les méthodes de parcours (Traversing methods)

Ces méthodes permettent majoritairement d'obtenir un élément en lien avec le sélecteur indiqué. Le principe de famille de jQuery devient donc extrêmement important afin de bien utiliser les méthodes de parcours. Par exemple, on pourrait obtenir les enfants d'un élément grâce à la méthode children(). Comme mentionné plus tôt, nous avons donc notre élément sélectionné et toute sa famille qui deviennent accessibles grâce à ces méthodes. Donc, ses parents, ses enfants, ses frères, ses ancêtres et ses descendants sont maintenant à notre portée.

Afficher toutes les méthodes de parcours

Une des méthodes très intéressantes est la méthode each(). Puisqu'elle itère à travers les éléments, elle peut être combinée avec les autres méthodes afin d'appliquer une fonction sur chacun des éléments. Par exemple:

Les méthodes CSS

Comme mentionné plus tôt, les sélecteurs jQuery sont fortement basés sur ceux de CSS, donc il est logique que cette libraire nous permette de mettre à jour le CSS. En effet, les méthodes CSS permettent de modifier les classes d'un élément, ou directement de lui ajouter des styles. On peut aussi, entre autres, activer ou désactiver les classes d'un élément.

Afficher toutes les méthodes CSS

Les méthodes d'attributs

Grâce aux propriétés de CSS, on peut donner des attributs aux différents éléments DOM de notre page web. Les méthodes d'attributs permettent donc de modifier les propriétés d'un élément, donc ses attributs, son texte, ou directement son contenu HTML. Elles peuvent aussi compléter les méthodes de CSS en ajoutant par exemple une classe de style à un élément. On peut voir un exemple plus haut dans la page dans la première section de l'accordéon.

Afficher toutes les méthodes d'attributs

Les événements

Tout d'abord, qu'est-ce qu'un événement? C'est le concept de lancer une fonction, un bout de code, lorsqu'une action précise est faite par l'utilisateur, par le navigateur ou par le document. Donc, on peut dire qu'il s'agit du lien entre une action quelconque et d'une portion de code en écoutant continuellement le code. Aussi, la majorité des événements correspondent à un événement DOM. Par exemple, comme mentionné plus tôt, l'action la plus importante est $(document).ready(function(){});. Cet événement est un exemple d'action du document, et non de l'utilisateur. Pour ce qui est des événements faits par l'utilisateur, nous avons trois types: Événements d'un formulaire, événements du clavier et événements de la souris. Voici la liste de tous les événements possibles:

• Événements d'un formulaire
• Événement de clavier
• Événement de souris
• Événement de navigateur
• Événement de document

Ces méthodes sont extrêmement utilisées de nos jours puisqu'elles permettent d'offrir à l'utilisateur différentes interactions que vous avez pu, vous aussi, utiliser à travers la lecture de ce document. De plus, chacune des méthodes d'événement possède un callback afin de pouvoir exécuter du code lors du déclenchement du même événement. Une autre fonction qui ne se trouve pas dans le tableau et qui est probablement une des plus utilisées est la fonction on(). Elle permet de regrouper différents événements ensemble et de leur donner la même fonction. Elle agit donc un peu comme un listener de différentes fonctions simultanément. Par exemple, appuyez ou sortez votre souris de la boîte ci-dessous afin de modifier la couleur de celle-ci.

On voit plusieurs concepts déjà expliqués grâce à cet exemple. On peut voir l'utilisation de la méthode on() qui nous permet de relié deux événements à la même fonction, le callback de tous les événements de jQuery afin de créer notre fonction, l'utilisation du $(this) à l'intérieur de la fonction afin de sélectionner l'élément en cours et la modification temporaire du CSS de l'élément sélectionné grâce à la méthode css(). La fonction on() est contrebalancée par la fonction off() qui vient, quant à elle, retirer les listener d'un élément.

Les animations

Les méthodes d'animations sont utilisées afin de mettre des effets spéciaux sur des éléments DOM. Elles permettent de rendre le site plus dynamique et plus agréable à consulter par des utilisateurs en offrant des animations moins brusques. La méthode la plus utilisée est définitivement $(#monID).animate() qui prends comme paramètre un objet JSON définissant les styles CSS à appliquer, le temps d'exécution pour compléter l'animation, le "easing" (la façon dont l'animation progresse) et le callback. Par exemple, appuyez sur le texte afin de l'animer et de changer sa dimension.

Les manipulations de dimensions

Les méthodes de manipulations de dimensions permettent d'obtenir ou de modifier la forme d'un élément sans directement changer son code HTML ou CSS. Par exemple, on peut facilement obtenir la hauteur et la largeur d'un élément grâce aux fonctions height() et width().

Afficher toutes les méthodes de manipulations de dimensions

Les requêtes Ajax

Les requêtes Ajax permettent de communiquer de manière asynchrone avec un serveur afin de, généralement, obtenir de l'information ou de lui en envoyer. Contrairement aux autres actions, il n'y a pas nécessairement de sélecteur lors de ces actions. En effet, la formule ressemble davantage à $.ajax();. On retrouve un exemple dans la troisième section de l'accordéon du début. Une requête Ajax peut prendre énormément de paramètres, mais les plus communs sont:

Après avoir mis en place notre requête, on peut définir les actions qui seront portées selon ce qui est retourné par le serveur. Habituellement, nous allons vouloir avoir du code lorsque la requête est terminée, lorsqu'elle échoue et en tout temps afin d'être au courant si celle-ci n'a pu être accompli ou bien si elle a réussi. Par exemple: