Comment filtrer les éléments HTML à jQuery

JQuery est une bibliothèque JavaScript avec une syntaxe plus facile à apprendre. Comme sa langue parent JS, jQuery peut également être intégré à HTML pour effectuer diverses opérations. La jQuery fournit la prise en charge du filtre des éléments HTML en utilisant diverses méthodes qui incluent First (), Last (), Eq (), Slice (), Filter (), Has () et Not () Méthodes. Ce guide fournit des objectifs à filtrer les éléments HTML à JQuery et fournit les résultats d'apprentissage suivants.

• fonctionnement de toutes les méthodes pour filtrer les éléments HTML à jQuery
• utilisation de chaque méthode (avec des exemples)

Comment filtrer les éléments HTML à jQuery

Cette section interdit le fonctionnement de diverses méthodes pour filtrer les éléments HTML à JQuery.

Comment utiliser la méthode première ()

La première méthode () filtre les éléments en fonction de certains conditions et renvoie le premier élément des éléments correspondants. La syntaxe de la méthode First () est affichée ci-dessous:

$ ("sélecteur").d'abord();

Exemple

Dans le code ci-dessus,

• La méthode première () est appliquée sur sélecteur = ”p"
• La méthode addClass () est appliquée pour différencier l'élément filtré

Sortir

La sortie montre que seul le premier paragraphe est sélectionné et que son arrière-plan est modifié à l'aide du «d'abord" classe.

Comment utiliser la dernière méthode ()

Cette méthode renvoie le dernier élément de l'ensemble des éléments correspondants. Il fonctionne sur la syntaxe suivante:

$ ("sélecteur").dernier();

Exemple

Le code ci-dessus pratique la dernière méthode () sur l'élément de paragraphe et une jQuery addClass () La méthode est ajoutée pour intégrer une classe CSS.

Note: Le but de la classe CSS est de mettre en évidence l'élément correspondant.

Sortir

Comment utiliser la méthode eq ()

La méthode eq () renvoie l'élément qui correspond au numéro d'index de l'élément. Cette méthode utilise la syntaxe suivante

$ ("sélecteur").eq ();

La méthode eq () accepte les valeurs numériques ou négatives. La valeur positive commence à compter à partir des éléments de départ (ou supérieurs) alors que l'indice de valeur négative commence à compter à partir de l'extrémité inférieure.

Exemple

L'exemple suivant pratique la méthode eq () dans les indices positifs et négatifs.

Le code est décrit ci-dessous,

• le Eq (3) utilise le numéro d'index positif et CSS class = ”positif”Est ​​associé à la méthode eq (3).
• le Eq (-3) utilise le numéro d'index négatif et le CSS class = ”négatif«Est exercé lorsque l'équation (-3) est exécutée.

Sortir

De la sortie ci-dessus, le Eq (3) Répondance le dernier paragraphe (comme c'est à l'index = 3) et le Filtres Eq (-3) Le troisième élément du bas (zéro est réservé au premier élément et -1 est pour le dernier élément).

Comment utiliser la méthode Slice ()

La méthode Slice renvoie la plage spécifique (définie par les index) des éléments. Pour utiliser la méthode Slice (), la syntaxe suivante est pratiquée:

$ ("sélecteur").tranche (démarrer, arrêter);

La méthode Slice () accepte la valeur numérique positive ou négative comme ses critères de démarrage / arrêt

• commencer: Le début du tranchage est déterminé par ce paramètre
• arrêter (facultatif): Ce paramètre arrête le tranchage avant que le numéro d'index spécifié ne soit atteint
• Numéro d'index positif: L'indexation positive commence la sélection des éléments à partir de l'ordre supérieur.
• Numéro d'index négatif: Le numéro d'index négatif commence à sélectionner les éléments de l'ordre inférieur.

Exemple 1: Utilisation du nombre d'index positif

Le code ci-dessus est décrit comme,

• le "p»Représente les paragraphes utilisés pour le«tranche()" méthode
• le "tranche (0,2)»Montre que le tranchage commencera à partir du 0ème index et s'arrête avant le 2e index
• LaClass Add ("positif") La méthode ajoutera la"positif»Classe sur les éléments sélectionnés.

Sortir

Exemple 2: Utilisation du numéro d'index négatif

Le code suivant pratique le numéro d'index négatif dans la méthode Slice ()

• le tranche (-2, -1) est appliqué aux paragraphes et il commencerait à partir du deuxième dernier élément et se termine avant le dernier élément.
• LaClass Add ("négatif") ajouter "négatif”Classe aux éléments tranchés.

Sortir

Comment utiliser la méthode Filter ()

La méthode filtre () renvoie les éléments qui correspondent à un critère spécifique. La syntaxe de cette méthode est fournie ci-dessous:

$ ("sélecteur").filtre (critères, fonction (index));

Le critère Le paramètre est défini sur sélection des éléments et le Paramètre de fonction (index) est facultatif (exercé lorsqu'un élément spécifique doit être récupéré à partir de la sélection à l'aide de l'index).

Exemple

Le code suivant pratique la méthode Filter () pour récupérer deux paragraphes en utilisant leur identifiant et leurs noms de classe.

Le code ci-dessus sélectionne uniquement les paragraphes qui ont class = ”P1”Et id =”P2".

Sortir

Comment utiliser la méthode Not ()

La méthode Not () entraînerait des éléments de retour qui ne sont pas dans les critères de correspondance. Ou on peut dire que c'est l'opposé du Méthode filtre (). La syntaxe de non () est donnée ci-dessous:

$ ("sélecteur").non (critères, fonction (index));

Exemple

Dans le code ci-dessus,

• deux classes "P1" et "P2"Sont passés dans la méthode Not ()
• le addClass («pas») est utilisé pour colorer la sélection faite par pas() méthode

Sortir

Comment utiliser la méthode Has ()

La méthode Has () est pratiquée pour obtenir l'élément qui a des éléments de branche. La syntaxe de cette méthode est fournie ci-dessous:

$ ("sélecteur").a ("élément");

Dans la syntaxe ci-dessus, le «sélecteur«Cela contient le«élément«Ne serait récupéré que.

Exemple

Pour une meilleure compréhension de la méthode Has (), le code suivant est exécuté.

Le code ci-dessus trace que «div"Tag qui a le"paragraphe" élément. De plus, le CSS Class = ”a"Est utilisé pour montrer le sélectionné"div" étiqueter.

Sortir

La sortie ci-dessus montre que le div contenant des paragraphes est sélectionné uniquement et que div est coloré avec une couleur verte forestière.

Conclusion

JQuery prend en charge diverses méthodes telles que First (), Last (), Eq (), Not (), Has (), Slice () etc., pour filtrer les éléments HTML. Ce guide fournit le fonctionnement et l'utilisation de chaque méthode une par une. Chaque méthode suit un filtrage différent pour sélectionner quelques éléments. Par exemple, les méthodes EQ () et Slice () utilisent des numéros d'index tandis que d'autres méthodes utilisent la classe ou l'ID (d'un élément) pour filtrer les éléments HTML.