Comment trouver des éléments HTML à jQuery
Cet article discutera de la procédure de Trouver des éléments HTML en jQuery en utilisant Sélecteur de nom d'élément, Sélecteur d'élément #ID, et Élément .sélecteur de classe. Alors, commençons!
Comment trouver des éléments HTML dans jQuery en utilisant le sélecteur de nom d'élément
Dans jQuery, vous pouvez trouver des éléments HTML en utilisant leur «nom,"Et il devrait être passé dans la parenthèse"()". Voici la syntaxe de l'utilisation du sélecteur de nom d'élément.
Syntaxe du sélecteur de nom d'élément
$ ("elementName")
Dans la syntaxe ci-dessus, vous devez ajouter le "nom d'élément”Avec les doubles guillemets à l'intérieur des parenthèses.
Exemple: Trouvez des éléments HTML dans jQuery en utilisant le sélecteur de nom d'élément
Tout d'abord, dans notre «indice.html«Fichier, nous allons ajouter une rubrique avec le«h2”Tag, un paragraphe utilisant le««Tag, et un«Cliquez sur moi!" bouton:
Trouver des éléments HTML à jQuery
Ceci est le paragraphe principal avec un exemple de texte
Vous pouvez utiliser n'importe quel bac à sable codant en ligne ou votre éditeur de code préféré pour la création de ce projet; Cependant, nous utiliserons le code Visual Studio:
Ensuite, vous dirigez vers votre fichier JavaScript, qui est "mon projet.js«Dans notre cas et écrivez le code suivant:
$ (document).ready (function ()
$ ("bouton").cliquez sur (fonction ()
$ ("h2").cacher();
);
);
En utilisant le $ ("H2") Sélecteur de nom d'élément, jQuery recherchera le «h2”Elément puis le cachez-le à la page Web à l'aide de"cacher()" méthode:
Après avoir enregistré les deux fichiers, nous ouvrirons "indice.html"Avec l'aide de VS Code"Serveur de foie" extension:
Cliquez sur le bouton en surbrillance Avant de cliquer sur le bouton: Après avoir cliqué sur le bouton: Le sélecteur de nom d'élément récupère tous les éléments HTML avec le même nom. Par exemple, nous avons ajouté $ ("H2") Comme le nom de l'élément, donc le sélecteur de nom d'élément sélectionnera tous Diriger les éléments de notre page Web, puis leur appliquer les paramètres ajoutés. Cependant, si vous voulez trouver un spécifique Html élément, alors vous pouvez utiliser le Sélecteur d'élément #ID Dans jQuery (). Comment trouver des éléments HTML dans jQuery en utilisant l'élément #id sélecteur Pour trouver des éléments HTML à l'aide du sélecteur #id élément, nous devons attribuer un ID à cet élément HTML et il devrait être unique dans une page Web, car l'élément #ID Selector recherche l'élément unique et unique. Syntaxe de l'élément #ID Selecteur Dans la syntaxe du sélecteur d'élément #ID, vous devez ajouter le caractère de hachage "#,"Suivi du"identifiant”Affecté à un élément HTML. Exemple: trouver des éléments HTML dans jQuery en utilisant l'élément #ID Selector Trouver des éléments HTML à jQuery Ceci est le paragraphe principal avec un exemple de texte Pour trouver l'élément HTML de cap avec le «h2id», Nous rédigerons le code suivant dans notre«mon projet.js" déposer: Dans ce cas, lorsque nous cliquerons sur le bouton, le jQuery "$ ("# H2id")»La méthode trouve l'élément de cap HTML avec le«h2id»Et cachez-le à la page Web: La rubrique ajoutée ne peut plus être vue après avoir cliqué sur le "Cliquez sur moi" bouton: Comment trouver des éléments HTML dans jQuery en utilisant l'élément .sélecteur de classe Élément #ID Le sélecteur ne vous permet pas de sélectionner deux éléments HTML simultanément car les deux auront des valeurs d'identification uniques. Cependant, vous pouvez attribuer une classe à différents éléments HTML, puis utiliser le Élément .sélecteur de classe pour trouver les éléments appartenant à la même classe. Syntaxe de l'élément .sélecteur de classe Dans la syntaxe d'élément donnée .Sélecteur de classe, vous devez ajouter un caractère d'époque avant d'écrire le nom de la classe, et il doit être enfermé entre parenthèses. Exemple: trouver des éléments HTML dans jQuery à l'aide d'élément .sélecteur de classe Trouver des éléments HTML à jQuery Ceci est le paragraphe principal avec un exemple de texte c'est le deuxième paragraphe À l'exception du premier paragraphe, tous les éléments HTML ajoutés appartiennent au «newclass»: Maintenant, d'abord, nous trouverons les éléments HTML ayant un nom de classe "newclass". Après cela, nous les masquerons à notre page HTML: Avant de cliquer sur le bouton: Après avoir cliqué sur le bouton: La sortie fournie ci-dessus montre que nous avons trouvé avec succès les éléments HTML spécifiés à l'aide d'élément .sélecteur de classe et les cachés à la page Web. Conclusion En utilisant Sélecteur de nom d'élément, Sélecteur d'élément #ID, et Élément .sélecteur de classe, Vous pouvez trouver des éléments HTML à jQuery. Le sélecteur de nom d'élément est utilisé pour sélectionner les éléments HTML par leur nom. En revanche, l'élément #ID Selector trouve un élément HTML spécifique basé sur leur identifiant unique, et enfin, élément .Le sélecteur de classe les récupère en fonction du nom de leur classe. Cet article a discuté de la procédure pour trouver des éléments HTML dans jQuery à l'aide du sélecteur de nom d'élément, du sélecteur #id et de l'élément .sélecteur de classe. $ ("# my_id")
Dans notre "indice.html«Fichier, nous avons ajouté un paragraphe, un«Cliquez sur moi”Bouton, et une rubrique avec le"h2id»ID d'élément:
$ (document).ready (function ()
$ ("bouton").cliquez sur (fonction ()
$ ("# h2id").cacher();
);
);$ (".Ma classe")
Dans cet exemple, nous attribuerons un nom de classe «newclass"À l'en-tête, à l'élément de paragraphe et au bouton, qui sont ajoutés dans notre"indice.html" déposer:
$ (document).ready (function ()
$ ("bouton").cliquez sur (fonction ()
$ (".newclass ").cacher();
);
);