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

JQuery

Faites défiler jusqu'à Haut solutions sur jQuery
Sur la page

JQuery

Avant de commencer à travailler avec un élément, vous devez apprendre à le sélectionner. La sélection des éléments dans jQuery est construite comme la sélection en CSS.

Afin de comprendre comment se déroule la sélection des éléments dans jQuery, regardons le fichier CSS.

Tout ce qui précède les accolades s'appelle un sélecteur.

  1. Nom du tag
  2. Classe
  3. L'identifiant

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

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

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

Maintenant, lorsque le navigateur atteint l'élément

Bonjour

, alors ces propriétés s'appliquent à lui.

Voyons maintenant comment se déroule la sélection des éléments enfants dans CSS. Par exemple, nous devons appliquer les propriétés CSS ci-dessus non à tous les paragraphes, mais aux paragraphes avec le logo de l'identifiant. Alors le CSS ressemblera à ceci:

 p #logo {
  famille de fontes: 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", alors notre CSS ressemble à ceci:

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

Nous nous sommes souvenus comment la sélection des éléments dans CSS a lieu. Comme je l'ai déjà dit, la sélection des éléments dans jQuery est faite 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", alors écrivez-le comme ceci:

  $ ("# 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 d'identifiant, nous devons nous 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 voir, ce n'est pas si simple, en utilisant les exemples ci-dessus. Mais dans jQuery il y a un sélecteur spécial qui nous permet de simplifier la tâche. Ce sélecteur sélectionne l'élément suivant +. Ie. dans notre cas, on peut lier un div avec id = "logo" et utiliser ce sélecteur pour sélectionner l'élément suivant:

  $ ("# Logo + p"); 

Parfois, il y a une situation où vous devez 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 à étudier jQuery </ p>
  <p> Et maintenant nous nous familiarisons avec les sélecteurs de sélection d'éléments </ p>
 </ div>

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

  $ ("# Content> p"); 

Le type de sélection suivant dans jQuery est une sélection d'éléments par des valeurs d'attribut. Cette sélection est très souvent trouvée dans les projets, par exemple, pour implémenter un menu déroulant. Par exemple, nous avons le code html:

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

et nous devons sélectionner toutes les images avec la largeur = "50". Ensuite, la sélection dans jQuery ressemblera à ceci.

  $ ("Img [largeur = 50]"); 

Le type d'échantillonnage suivant dans jQuery est un exemple de valeurs d'attribut commençant par une condition. Par exemple, nous avons le code html:

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

et nous devons sélectionner toutes les images dont l'attribut src commence par images / img, alors cette sélection dans jQuery est faite comme ceci:

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

Par analogie, nous pouvons faire un échantillon des attributs de la valeur, qui se termine par une condition. Ie. à partir du code html précédent, nous voulons sélectionner toutes les images png. Alors la sélection dans jQuery ressemblerait à ceci:

  $ ("Img [src $ =. Png]"); 

La sélection suivante dans jQuery est lorsque vous devez sélectionner un attribut dont la valeur peut être n'importe où. Du code html précédent, nous devons sélectionner toutes les images dans le titre, qui ont le mot "img".

  $ ("Img [src * = img]"); 

Nous avons examiné les méthodes de base pour sélectionner des éléments dans jQuery, ce qui nous permet de sélectionner n'importe quel élément, puis d'y effectuer certaines actions. Pour plus d'informations sur les méthodes de sélection jQuery, voir site officiel . Mais la sélection des éléments dans jQuery ne s'arrête pas là et il y a des exemples de filtres pour une sélection plus délicate des éléments dans jQuery.

Filtre de sélection d'élément JQuery

Dans jquery, il existe de nombreuses méthodes pour filtrer les éléments sélectionnés, que vous pouvez consulter dans la documentation officielle. Et je ne considérerai que les filtres les plus nécessaires et souvent utilisés (à mon avis).

Sélectionnez même les éléments pairs

Il se pose une telle situation, quand il est nécessaire de sélectionner seulement des éléments pairs de la table. Pour cela, les développeurs ont créé un filtre spécial: pair. 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 appliquez-leur un filtre de parité. Voici à quoi cela ressemble dans jQuery:

  $ ('# table tr: pair'); 

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

Sélection d'élément impair impair

Le contraire (si je peux dire) au filtre précédent est le filtre impair - le choix des éléments impairs. Supposons qu'à partir de la table, nous devons sélectionner des lignes impaires. Ensuite, appliquez le filtre impair et ressemblez à ceci:

  $ ('# table tr: impair'); 

Sélection du premier élément en premier

Si nous devons sélectionner un seul élément - le premier, alors le filtre convient d'abord à ces fins. Par exemple, à partir de la table, nous devons sélectionner uniquement la première ligne, puis la sélection de cet élément ressemblera à ceci:

  $ ('# table tr: first'); 

Sélectionnez le dernier élément en dernier

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

  $ ('# table tr: dernier'); 

Le filtre négatif non

Ce filtre est nécessaire pour la sélection de tous les éléments, à l'exception des éléments qui correspondent à 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 à l'intérieur de div-a c id = '1'. Et si nous écrivons:

  $ ('div'); 

Ensuite, sélectionnez tous les divs, même ceux qui sont dans div c id = '1', donc dans ce cas, vous devez appliquer le filtre non.

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

Et ainsi nous choisirons tous les div nécessaires pour nous

Sélectionnez un élément qui contient l'élément has spécifié

Parfois il y a des situations où il est nécessaire de sélectionner un élément qui contient en soi un autre élément spécifique. Et pour cela en jquery il y a un filtre a. Par exemple, nous devons sélectionner la div de l'exemple précédent, dans lequel il y a un autre div. Alors notre échantillon ressemblera à ceci:

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

Ie. sélectionnez tout le div, puis appliquer le filtre a dans lequel nous indiquons que la div sélectionnée en elle-même doit contenir l'autre div

Sélection d'un élément par contenu

Par exemple, nous devons sélectionner un élément par son contenu, puis le contenu contient une aide. A partir du code ci-dessus, nous devons sélectionner la div qui contient le "Exemple":

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

Filtre à éléments sans héritiers vides

Il y a des situations où il est nécessaire de ne laisser que les éléments qui n'ont pas d'héritiers et qui ne contiennent rien des éléments sélectionnés. Par exemple, nous avons un 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: vide'); 

Et par conséquent, nous allons sélectionner le second <td> du premier <tr> et le premier <td> du second <tr>.

Filtrer sur les éléments cachés

Assez souvent dans jQuery, vous devez sélectionner tous les éléments cachés. Et pour cela, il y a un filtre caché spécial. Ie. si nous devons sélectionner tous les divs qui sont actuellement cachés, nous devons écrire le code suivant:

  $ ('div: hidden'); 

Filtrer par éléments visibles

Le filtre opposé est le filtre visible, qui filtre tous les éléments visibles. Ie. si nous devons sélectionner tous les divs qui sont actuellement visibles.

  $ ('div: visible'); 

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

Après avoir sélectionné l'élément requis dans jQuery, nous devons effectuer des actions sur celui-ci. Dans cet article, nous allons nous attarder sur les actions qui peuvent être effectuées sur les éléments avec jQuery.

Comme vous le savez, JavaScript fonctionne avec le modèle DOM de la page. Par conséquent, nous avons besoin de code JavaScript pour être exécuté uniquement après la construction du modèle DOM. Pour ce faire, jQuery a une méthode prête qui attend la construction du modèle DOM.

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

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

La méthode text ()

La méthode text () est requise pour récupérer 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, alors nous devons sélectionner l'élément div avec id = text et lui appliquer la méthode text ().

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

Pour changer la valeur de texte d'un élément, nous devons passer notre paramètre à la méthode de texte. Par exemple, nous voulons changer le texte de l'exemple ci-dessus pour "Bienvenue sur web-programming.com", alors notre code ressemblera à ceci:

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

La méthode hide ()

Si nous avons besoin de cacher l'élément, alors dans jQuery il y a une méthode hide (speed, callback). Cette méthode peut recevoir deux paramètres de vitesse: le taux de disparition, le temps en millisecondes et la fonction de rappel qui sera exécutée après la disparition de l'élément. Par exemple, nous avons besoin de div avec id = text (de l'exemple ci-dessus) pour disparaître en 2 secondes, alors notre code sera:

 $ (document) .ready (function () {
 $ ('# text'). hide (2000);
 })

La méthode show ()

La méthode opposée de hide est show, si nous avons besoin de montrer un élément. De même, comme la méthode hide, show prend deux paramètres: la vitesse d'apparition et la fonction qui sera exécutée après l'apparition de l'élément.

 $ (document) .ready (function () {
 $ ('# text'). show (2000);
 })

La méthode width ()

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

 $ (document) .ready (function () {
 $ ('# text'). width ();
 })

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

 $ (document) .ready (function () {
 $ ('# text'). width (30);
 })

La méthode heigth ()

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

La méthode html ()

Si nous voulons obtenir ou modifier le code html de l'élément, nous devons utiliser la méthode html (). Cette méthode fonctionne par analogie avec les méthodes heigth () et width (). Ie. si nous ne passons pas de paramètres à notre méthode, alors la méthode nous retournera tout le code html qui est 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

La méthode fadeOut ()

La méthode fadeOut (temps, fonction) sert à la disparition progressive de l'élément (l'élément change de transparence jusqu'à disparaître complètement). En tant que paramètres, il accepte:

  • le temps est l'heure de la disparition
  • function - la fonction à exécuter 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 ce faire, écrivez le code suivant:

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

Méthode FadeIn ()

La méthode fadeIn (temps, fonction) sert à l'apparence lisse de l'élément. L'élément change sa transparence pour une visibilité complète. En tant que paramètres, il accepte:

  • heure - heure de l'événement
  • function - la fonction à exécuter après la disparition de l'élément
 $ (document) .ready (function () {
  $ ('# text') fadeIn (2000);
 })

La méthode fadeTo ()

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

  • temps - changer le temps
  • opacité - le degré de transparence de 0 à 1
  • function - la fonction à exécuter après la disparition de l'élément

Exemple:

 $ (document) .ready (function () {
  $ ('# text') fadeTo (2000, 0.5);
 })

La méthode slideUp ()

La méthode slideUp (temps, fonction) permet à l'élément de disparaître en remontant. En tant que paramètres, il accepte:

  • heure - heure de l'événement
  • function - la fonction à exécuter après la disparition de l'élément

Exemple:

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

La méthode slideDown ()

La méthode slideDown (time, function) vous permet d'afficher un élément. L'élément semble tomber. En tant que paramètres, il accepte:

  • heure - heure de l'événement
  • function - la fonction à exécuter après la disparition de l'élément

Exemple:

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

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

Je vous rappelle que jQuery est un framework JavaScript.

En pratique, il est souvent nécessaire de modifier les différents attributs des éléments html, d'ajouter et de supprimer des classes, d'afficher et de modifier diverses propriétés css des éléments. Pour ce faire, jQuery a des méthodes spéciales que nous allons couvrir.

Attr ()

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

  • key - le nom de l'attribut
  • value - la valeur de l'attribut (si la valeur est spécifiée, elle la change, sinon elle retourne simplement)

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

 $ (document) .ready (function () {
  $ ('# test') attr ('largeur');
 })

Méthode removeAttr ()

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

  • nom-clé de l'attribut

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

 $ (document) .ready (function () {
  $ ('# test'). removeAttr ('largeur');
 })

La méthode addClass ()

La méthode addClass (name) ajoute une classe à l'élément sélectionné nommé name. Par exemple, ajoutez la classe exemple à la div avec id = test:

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

La méthode removeClass ()

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

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

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

La méthode css ()

La méthode css (name, value) vous permet d'obtenir la propriété css d'un élément avec le nom name (si la valeur de cette propriété n'est pas spécifiée par le second paramètre) ou la valeur css de la propriété name to value (si le second paramètre est défini) et nous voulons changer la taille de la police à 20px, alors:

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

La méthode animate ()

Jusqu'à présent, nous avons considéré un simple changement dans les propriétés des éléments, mais dans jQuery, il existe une autre méthode merveilleuse 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 pour lequel ces propriétés vont changer la valeur
  • function - une fonction qui commencera 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 ce div jusqu'à 500px en 4 secondes

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