This page has been robot translated, sorry for typos if any. Original content here.

Jquery

7 Faites défiler jusqu'à Top Solutions sur jQuery
Sur la page

Sélection d'éléments JQuery

Avant de commencer à travailler avec un élément, vous devez apprendre à le sélectionner. Un échantillon d'éléments dans jQuery est construit comme un exemple dans CSS.

Afin de comprendre comment la sélection des éléments dans jQuery, examinons le fichier CSS.

Tout ce qui vient aux accolades s'appelle un sélecteur.

  1. Nom du tag
  2. Classe
  3. Identifiant

Tout ce qui est écrit entre accolades après le sélecteur, ce sont les propriétés de l'élément avec le sélecteur donné.

Qu'est-ce qui se passe vraiment? Lorsque le navigateur de l'utilisateur accède à notre fichier CSS, lorsqu'il atteint un certain sélecteur, il commence à exécuter les propriétés correspondant à l'élément avec le sélecteur donné. Par exemple dans le fichier CSS:

 p {
  famille de polices: Tahoma;
  taille de police: 12px;
 }

Maintenant, quand le navigateur vient à l'élément

Bonjour

alors ces propriétés lui sont appliquées.

Voyons maintenant comment la sélection des éléments enfants en CSS. Par exemple, nous devons appliquer les propriétés CSS ci-dessus non pas à tous les paragraphes, mais aux paragraphes avec l'identifiant du logo. Ensuite, le CSS ressemblera à ceci:

 p #logo {
  famille de polices: Tahoma;
  taille de police: 12px;
 } 

et si nous voulons appliquer ces propriétés non seulement aux paragraphes avec id = "logo", mais à tous les éléments avec id = "logo", notre CSS ressemble à ceci:

 #logo {
  famille de polices: Tahoma;
  taille de police: 12px;
 }

Vous et moi nous sommes souvenus comment la sélection des éléments dans le CSS. Comme je l'ai dit plus haut, la sélection des éléments dans jQuery est effectuée par analogie avec CSS. Donc, si nous voulons sélectionner tous les paragraphes, nous écrivons le code suivant:

  $ ("P"); 

Ou si nous devons sélectionner tous les éléments de la page avec id = "logo", nous l'écrivons comme suit:

  $ (“# Logo”); 

De même, nous pouvons sélectionner tous les éléments par classe, par exemple class = "logo":

  $ (“. Logo”); 

Si nous voulons sélectionner des éléments enfants, par exemple, tous les paragraphes

ayant un logo identifiant, nous devons enregistrer:

  $ (“P #logo”); 

Le type de sélection suivant est la sélection de l'élément suivant. Par exemple, nous avons le code HTML suivant:

Test 1

Test 2

Et nous devons sélectionner la balise p, qui contient le texte «Test 2». Comme vous pouvez le constater, l’utilisation des exemples ci-dessus n’est pas facile. Mais dans jQuery, il existe un sélecteur spécial qui nous permet de simplifier la tâche. C'est le sélecteur pour la sélection de l'élément suivant +. C'est à dire dans notre cas, nous pouvons nous lier à la div avec id = "logo" et en appliquant ce sélecteur, sélectionnez l'élément suivant:

  $ (“# Logo + p”); 

Parfois, il est nécessaire de sélectionner tous les enfants. Pour cela, jQuery a un sélecteur>. Par exemple, nous avons le code HTML suivant:

 <div id = ”content”>
  <p> Bonjour </ p>
  <p> Nous commençons à apprendre jQuery </ p>
  <p> Et maintenant nous sommes présentés aux sélecteurs de la sélection d'éléments </ p>
 </ div>

Et nous devons sélectionner tous les ps qui sont dans la balise div id = "content" Notre code ressemblera à ceci:

  $ (“# Content> p”); 

Le type de sélection suivant dans jQuery est la sélection d'éléments par valeurs d'attribut. Cet exemple est très souvent utilisé dans les projets, par exemple pour l'implémentation d'un menu déroulant. Par exemple, nous avons le code HTML:

 <img src = "images / 1.png" width = "50" height = "50">
 <img src = "images / 2.png" width = "50" height = "50">
 <img src = "images / 3.png" width = "50" height = "50">

et nous devons sélectionner toutes les images ayant une largeur = "50". Ensuite, l'échantillon dans jQuery ressemblera à ceci.

  $ (“Img [largeur = 50]”); 

Le type d'échantillon suivant dans jQuery est un échantillon d'attributs de valeur commençant par une condition. Par exemple, nous avons le code HTML:

 <img src = "images / img1.png" width = "50" height = "50">
 <img src = "images / img2.png" width = "50" height = "50">
 <img src = "images / img3.png" width = "50" height = "50">

et nous devons sélectionner toutes les images pour lesquelles l'attribut src commence par images / img, puis cet exemple dans jQuery est exécuté comme suit:

  $ (“Img [src ^ = images / img]”); 

Par analogie, nous pouvons faire une sélection par valeurs d'attributs, qui se terminent par une condition. C'est à dire à partir du code HTML précédent, nous voulons sélectionner toutes les images png. Ensuite, l'exemple dans jQuery ressemblera à ceci:

  $ (“Img [src $ =. Png]”); 

L'échantillon suivant dans jQuery est le moment où vous devez sélectionner un attribut dont la valeur peut être n'importe où. À partir du code HTML précédent, nous devons sélectionner toutes les images du titre, qui est le mot «img».

  $ (“Img [src * = img]”); 

Nous avons examiné les méthodes de base de sélection des éléments dans jQuery, qui nous permettent de sélectionner n’importe quel élément, puis d’effectuer certaines actions dessus. Vous pouvez en savoir plus sur les méthodes d’échantillonnage dans jQuery à site officiel . Mais la sélection d'éléments dans jQuery ne s'arrête pas là et il existe des filtres de sélection pour une sélection plus subtile d'éléments dans jQuery.

Filtre d'élément JQuery

Dans jQuery, il existe de nombreuses méthodes de filtrage des éléments sélectionnés, que vous pouvez lire dans la documentation officielle. Et je ne considérerai que les filtres les plus nécessaires et les plus fréquemment utilisés (à mon avis).

Sélection même des éléments même

Il existe une situation dans laquelle vous devez sélectionner dans la table uniquement les éléments pairs. Pour ce faire, les développeurs ont créé un filtre spécial: même. Par exemple, nous avons une table:

 <table id = "'table'">
 <tbody>
 <tr>
 <td> 1 </ td>
 <td> Nom 1 </ td>
 </ tr>
 <tr>
 <td> 2 </ td>
 <td> Nom 2 </ td>
 </ tr>
 <tr>
 <td> 3 </ td>
 <td> Nom 3 </ td>
 </ tr>
 <tr>
 <td> 4 </ td>
 <td> Nom 4 </ td>
 </ tr>
 </ tbody>
 </ table>
 <pre>

Et nous devons sélectionner des lignes paires. Pour ce faire, sélectionnez les éléments nécessaires et imposez-leur un filtre de parité. Voici à quoi ressemble jQuery:

  $ ('# table tr: pair'); 

Nous avons donc sélectionné toutes les lignes paires. Mais faites attention ici - toutes les lignes paires du point de vue de javascript. Et en javascript, le compte à rebours commence à 0, nous aurons donc la première ligne sélectionnée dans le tableau et la troisième ligne du tableau.

Sélectionnez des éléments impairs

L'opposé (si l'on peut dire) du filtre précédent est le filtre impair - le choix des éléments impairs. Supposons que nous devions sélectionner des lignes impaires dans la table. Puis appliquez le filtre impair et voici comment il se présente:

  $ ('# table tr: impair'); 

Sélectionner le premier élément en premier

S'il ne faut sélectionner qu'un seul élément, le premier, le premier filtre convient à cette fin. Par exemple, dans le tableau, nous devons sélectionner uniquement la première ligne. L'échantillon de cet élément ressemblera à ceci:

  $ ('# table tr: premier'); 

Sélectionner le dernier élément en dernier

Pour sélectionner le dernier élément, appliquez le dernier filtre. Par exemple, dans notre tableau, vous devez sélectionner la dernière ligne. Alors notre échantillon:

  $ ('# table tr: last'); 

Filtre négatif pas

Ce filtre est nécessaire pour sélectionner tous les éléments, à l'exception des éléments adaptés à la condition. Par exemple, nous avons

 </ pre>
 <div id = "'1'"> </ div>
 <div> Exemple. </ div>
 <pre>

Nous devons sélectionner tous les divs, sauf ceux qui sont dans le div avec id = '1'. Et si on écrit:

  $ ('div'); 

Ensuite, nous sélectionnerons tous les divs, même ceux qui sont dans div c id = '1', il est donc nécessaire d’appliquer le filtre non.

  $ ('div: not (# 1 div)'); 

Et ce faisant, nous sélectionnerons tout ce dont nous avons besoin d’une div

Sélectionnez un élément contenant un élément has spécifique

Parfois, il est nécessaire de sélectionner un élément contenant un autre élément spécifique en lui-même. Et pour cela, il existe un filtre a. Par exemple, nous devons sélectionner une div dans l'exemple précédent, dans laquelle se trouve une autre div. Ensuite, notre échantillon ressemblera à ceci:

  $ ('div: has (div)'); 

C'est à dire sélectionner tous les divs, puis appliquer le filtre has dans lequel nous spécifions que les divs sélectionnés doivent contenir d'autres divs

Sélectionner un article par contenu

Par exemple, nous devons sélectionner un élément en fonction de son contenu, puis le filtre contient vient à la rescousse. Dans le code ci-dessus, nous devons choisir un div qui contient un “Exemple”:

  $ ('div: contient (Bonjour)'); 

Filtrer la sélection d'éléments sans héritiers vides

Il existe des situations où il est nécessaire de ne laisser que ceux qui n'ont pas d'héritier et ne contiennent rien des éléments sélectionnés. Par exemple, nous avons du code HTML

 </ pre>
 <table>
 <tbody>
 <tr>
 <td> 1 </ td>
 <td> </ td>
 </ tr>
 <tr>
 <td> </ td>
 <td> 2 </ td>
 </ tr>
 </ tbody>
 </ table>
 <pre>

Et nous devons sélectionner tous les td qui n’ont pas d’héritiers.

  $ ('td: empty'); 

En conséquence, nous aurons sélectionné le deuxième <td> du premier <tr> et le premier <td> du deuxième <tr>.

Filtrer par éléments cachés

Assez souvent, dans jQuery, vous devez sélectionner tous les éléments cachés. Et pour cela, il existe un filtre spécial caché. C'est à dire si nous devons sélectionner tous les div actuellement masqués, nous devons écrire le code suivant:

  $ ('div: hidden'); 

Filtrer par éléments visibles

Le filtre opposé est masqué - le filtre visible, qui filtre tous les éléments visibles. C'est à dire si nous devons sélectionner tous les div actuellement visibles.

  $ ('div: visible'); 

Méthodes JQuery: texte, masquer, afficher, largeur, hauteur, html

Après avoir sélectionné l'élément nécessaire dans jQuery, nous devons y effectuer des actions. Dans cet article, nous allons nous concentrer sur les actions pouvant être effectuées sur des éléments utilisant jQuery.

Comme vous le savez, JavaScript fonctionne avec le modèle de page DOM. Par conséquent, nous devons nous assurer que le code JavaScript n'a été exécuté qu'après la construction du modèle DOM. Pour cela, jQuery a une méthode prête qui attend que le DOM crée un modèle de document.

Par conséquent, pour exécuter le script après la construction du modèle DOM, utilisez la construction suivante:

 $ (document) .ready (function () {<code script>}) 

Méthode texte ()

La méthode text () est requise pour obtenir ou modifier le texte d'un élément. Supposons que nous ayons le code HTML suivant:

 <div id = 'text'>
 Bonjour
 </ div>

Et nous voulons obtenir ce texte, puis nous devons sélectionner un élément div avec id = text et lui appliquer la méthode text ().

 $ (document) .ready (fonction () {
 $ ('# texte'). text ();
 })

Afin de changer la valeur textuelle d'un élément, nous devons passer un paramètre à notre méthode text. Par exemple, nous voulons changer le texte de l'exemple ci-dessus en «Bienvenue sur web-programming.com», notre code ressemblera à ceci:

 $ (document) .ready (fonction () {
 $ ('# text'). text ('Bienvenue sur web-programming.com');
 })

Méthode Hide ()

Si nous devons masquer un élément, il existe une méthode hide (speed, callback) dans jQuery. Deux paramètres de vitesse peuvent être passés à cette méthode - la vitesse de disparition, le temps en millisecondes et le rappel - la fonction qui sera exécutée après la disparition de l'élément. Par exemple, nous avons besoin d'un div avec id = text (de l'exemple ci-dessus) pour disparaître en 2 secondes, notre code sera alors:

 $ (document) .ready (fonction () {
 $ ('# texte'). hide (2000);
 })

Méthode Show ()

La méthode opposée de masquer est de montrer si nous devons montrer un élément. Semblable à la méthode hide, show prend deux paramètres: il s'agit de la vitesse à laquelle il apparaît et de la fonction qui sera exécutée après l'apparition de l'élément.

 $ (document) .ready (fonction () {
 $ ('# texte'). show (2000);
 })

Méthode Width ()

Pour définir ou obtenir la largeur d’un élément dans jQuery, il existe une méthode spéciale width. Si nous avons besoin d'obtenir la largeur d'un élément div avec id = text (à partir de l'exemple ci-dessus), nous devons écrire le code suivant:

 $ (document) .ready (fonction () {
 $ ('# texte'). width ();
 })

Si nous devons définir la largeur, la méthode width doit transmettre un paramètre. Si vous ne spécifiez pas d'unités de mesure (%, em), la valeur par défaut est px.

 $ (document) .ready (fonction () {
 $ ('# texte'). width (30);
 })

Méthode Heigth ()

Pour changer ou calculer la hauteur d'un élément dans jQuery, la méthode heigth () est utilisée. Cette méthode fonctionne par analogie avec la méthode width.

Méthode html ()

Si nous voulons obtenir ou modifier le code html de l'élément, il est nécessaire d'utiliser la méthode html (). Cette méthode fonctionne par analogie avec les méthodes heigth () et width (). C'est à dire si nous ne transmettons pas de paramètres à notre méthode, celle-ci nous renverra tout le code html contenu dans cet élément. Si nous passons un paramètre, nous changeons le code HTML dans notre élément.

Méthodes JQuery: fadeOut, fadeIn, fadeTo, slideUp, slideDown

Méthode FadeOut ()

La méthode fadeOut (time, function) sert à la disparition en douceur d'un élément (l'élément change de transparence, jusqu'à la disparition totale incluse). En tant que paramètres, il faut:

  • temps - temps d'extinction
  • function - la fonction qui sera exécutée après la disparition de l'élément

Par exemple, nous avons le code HTML:

 <div id = 'text'>
  Bonjour
 </ div>

Nous voulons que l'élément div avec id = text disparaisse progressivement. Pour cela, nous écrivons le code suivant:

 $ (document) .ready (fonction () {
  $ ('# text'). fadeOut (2000);
 })

Méthode FadeIn ()

La méthode fadeIn (time, function) sert à introduire en fondu un élément. L'élément change sa transparence pour une visibilité totale. En tant que paramètres, il faut:

  • heure - heure d'apparition
  • function - la fonction qui sera exécutée après la disparition de l'élément
 $ (document) .ready (fonction () {
  $ ('# text'). fadeIn (2000);
 })

Méthode FadeTo ()

Méthode fadeTo (heure, opacité, fonction) - vous permet de modifier le degré de transparence de l'élément à une certaine valeur. En tant que paramètres, il faut:

  • heure - changer l'heure
  • opacité - degré de transparence de 0 à 1
  • function - la fonction qui sera exécutée après la disparition de l'élément

Exemple:

 $ (document) .ready (fonction () {
  $ ('# texte'). fadeTo (2000, 0.5);
 })

Méthode SlideUp ()

La méthode slideUp (time, function) permet à un élément de disparaître en remontant. En tant que paramètres, il faut:

  • heure - heure d'apparition
  • function - la fonction qui sera exécutée après la disparition de l'élément

Exemple:

 $ (document) .ready (fonction () {
  $ ('# text'). slideUp (2000);
 })

Méthode SlideDown ()

La méthode slideDown (time, function) vous permet d’afficher un élément. Élément comme il descend. En tant que paramètres, il faut:

  • heure - heure d'apparition
  • function - la fonction qui sera exécutée après la disparition de l'élément

Exemple:

 $ (document) .ready (fonction () {
  $ ('# text'). slideDown (2000);
 })

Méthodes JQuery: attr, removeAttr, addClass, removeClass, css, animate

Je vous rappelle que jQuery est un framework JavaScript.

En pratique, il est souvent nécessaire de modifier divers attributs d'éléments HTML, d'ajouter et de supprimer des classes, d'afficher et de modifier diverses propriétés CSS des éléments. Pour cela, jQuery a des méthodes spéciales que nous allons considérer.

Méthode Attr ()

La méthode attr (clé, valeur) est utilisée pour renvoyer ou modifier une valeur d'attribut pour un élément, où:

  • clé - nom de l'attribut
  • valeur - valeur d'attribut (si spécifiée, la change, sinon retourne juste)

Par exemple, un div avec id = test a width = 300px et nous voulons connaître sa largeur

 $ (document) .ready (fonction () {
  $ ('# test'). attr ('width');
 })

Méthode RemoveAttr ()

La méthode removeAttr (key) supprime l'attribut spécifié, où:

  • nom d'attribut clé

Par exemple, nous avons un div avec id = test a width = 300px et nous voulons supprimer cet attribut:

 $ (document) .ready (fonction () {
  $ ('# test'). removeAttr ('width');
 })

Méthode AddClass ()

Méthode addClass (name) - ajoute une classe à l'élément sélectionné avec le nom name. Par exemple, ajoutez l’exemple de classe à la div avec id = test:

 $ (document) .ready (fonction () {
  $ ('# test'). addClass ('example');
 })

Méthode RemoveClass ()

La méthode removeClass (name) supprime une classe d'un élément portant le nom name.

Par exemple, nous avons un div avec id = test et, nous voulons supprimer notre classe de ce div:

 $ (document) .ready (fonction () {
  $ ('# test'). removeClass ('example');
 })

Méthode Css ()

La méthode css (nom, valeur) vous permet d'obtenir la propriété css d'un élément portant le nom nom (si la valeur de cette propriété n'est pas spécifiée par le second paramètre) ou de modifier la valeur de la propriété css nommée name en valeur (si le second paramètre de valeur est défini). Par exemple, nous avons des en-têtes h1 et nous voulons changer la taille de la police à 20px, puis:

 $ (document) .ready (fonction () {
  $ ('h1'). css ('font-size', 20);
 })

Méthode Animate ()

Jusqu'ici, nous avons envisagé un simple changement dans les propriétés des éléments, mais dans jQuery, il existe une autre méthode intéressante qui vous permet de modifier les propriétés d'un élément en douceur, comme si vous l'animiez. C'est la méthode animée (paramètres, heure, fonction), où:

  • setting - propriétés qui vont changer leur valeur
  • time - le temps pendant lequel ces propriétés vont changer la valeur
  • fonction est une fonction qui démarrera son exécution après le changement.

Par exemple, nous avons un div avec id = test et width = 1000px. Nous voulons changer la largeur de cette div à 500px en 4 secondes.

 $ (document) .ready (fonction () {
  $ ('# test'). animate ({'width': '500px'}, 4000);
 })