Exemples d'utilisation des attributs d'élément de balise utilisés par jQuery_jquery

L'exemple de cet article décrit l'utilisation des attributs d'élément de balise utilisés par jQuery. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

L'utilisation de jQuery présentée ici inclut principalement la façon dont jQuery contrôle la page, y compris les attributs des éléments, le style CSS, le modèle DOM, les éléments de formulaire et le traitement des événements, etc.

Attributs des éléments de balise

Chaque balise HTML possède certains attributs, et leurs balises présentent différents états dans la page, comme la balise suivante

Copier le code Le code est le suivant :

La balise représente le nom de la balise, qui est un hyperlien. De plus, des attributs tels que href titile target id indiquent les différents états de cet hyperlien dans la page.

Cet article explique plus en détail la méthode de contrôle des attributs de page du point de vue de jQuery.

1.each() traverse les éléments

La méthode

each(callback) est principalement utilisée pour parcourir les éléments dans le sélecteur. Elle accepte une fonction comme paramètre. Cette fonction accepte un paramètre qui fait référence au numéro de série de l'élément. Pour les attributs marqués, vous pouvez utiliser la méthode each() avec le mot-clé this pour obtenir ou définir la valeur d'attribut correspondant à chaque élément du sélecteur.

Utilisez la méthode each() pour parcourir tous les éléments.

Copier le code Le code est le suivant :

Premier paragraphe

Deuxième paragraphe

Deuxième paragraphe

Deuxième paragraphe

Deuxième paragraphe

Deuxième paragraphe

Deuxième paragraphe

Il y a 7 éléments P dans le code ci-dessus. Tout d'abord, utilisez $("p") pour obtenir l'ensemble de tous les éléments p de la page, puis utilisez la méthode each() pour parcourir toutes les images. Accédez à l'image via le mot-clé this, obtenez l'ID de l'image et définissez l'attribut ID de l'image. L'index de fonction de la méthode each() est le numéro de série de l'élément.

2. Obtenez la valeur de l'attribut. Méthode attr(nom)

Sauf lors d'une itération sur les éléments dans l'ensemble du sélecteur. Plusieurs fois, vous devez obtenir la valeur des caractéristiques d'un objet. Cela peut être facilement réalisé grâce à la méthode attr(name) dans jQuery. Cette méthode obtient la première valeur d'attribut de l'ensemble d'éléments. S'il n'y a pas de correspondance, retournez sans définition.

Copier le code Le code est le suivant :

script type="text/javascript">
$(fonction() {
var sTitle = $("p").attr("title");//Obtenir la valeur de l'attribut title du premier élément p
$("#display").text(sTitle);
});

Premier paragraphe

Deuxième paragraphe

Deuxième paragraphe

Deuxième paragraphe

Deuxième paragraphe

Deuxième paragraphe

Deuxième paragraphe

Si vous souhaitez obtenir la valeur de l'attribut titre du deuxième p, vous pouvez le faire via le sélecteur de position.

Copier le code Le code est le suivant :

$(function() {
var sTitle = $("p:eq(1)").attr("title");//Obtenir la valeur de l'attribut title du deuxième élément p
$("#display").text(sTitle);
});

3. Définissez la valeur de l'attribut. attr(nom,valeur) En plus d'obtenir la valeur de l'élément, la méthode

attr() peut également définir la valeur de l'attribut. L'expression générale est
.

Copier le code Le code est le suivant :

attr(nom, valeur)

Par exemple : Le code suivant entraînera l’ouverture de tous les hyperliens de la page dans une nouvelle fenêtre.

Copier le code Le code est le suivant :

Exemple :

Copier le code Le code est le suivant :

Premier bouton Deuxième bouton Le troisième bouton

Avec le sélecteur de position, lorsque le premier bouton est cliqué, les deux boutons suivants sont désactivés en même temps.

Souvent, nous espérons que la valeur d'un attribut pourra changer régulièrement en fonction de différents éléments. A ce moment nous pouvons utiliser attr(name,fn), le deuxième paramètre est une fonction. Cette fonction accepte un paramètre, qui est le numéro de série de l'élément, et la valeur de retour est une chaîne.

Copier le code Le code est le suivant :

Élément 0

Élément 1

Élément 2

Contenu de retour :

Copier le code Le code est le suivant :Article 0 (id='div-id0') Article 1 (id='div-id1')

Article 2 (id='div-id2')

Le code ci-dessus définit la valeur de l'attribut id de tous les blocs

de la page sur les paramètres liés au numéro de série via attr(name,fn). Et parcourez le bloc div via la méthode each() pour afficher la valeur id dans la balise Cela montre la puissance de la chaîne jQuery.

Parfois, pour certains éléments, vous souhaitez définir différents attributs en même temps. Si vous utilisez la méthode ci-dessus, vous devez définir les attributs un par un. jQuery est très convivial et attr() fournit également une méthode attr(properties) de paramétrage de liste. Plusieurs propriétés peuvent être définies.

Copier le code Le code est le suivant :







Résultat de l'exécution :

Copier le code Le code est le suivant :

4. Supprimer les attributs

Lors de la définition de la valeur d'un attribut d'élément, la valeur de l'attribut peut être supprimée via la méthode removeAttr(name). L'élément sera alors restauré à ses paramètres par défaut. Par exemple, le code suivant rend tous les boutons désactivés.

Copier le code Le code est le suivant :

$(function() {
$("bouton").removeAttr("désactivé")
});

RemoveAttr(name) supprimer l'attribut équivaut à ne pas supprimer l'attribut dans la balise html. Cela ne signifie pas que cette caractéristique de la marque a été supprimée. Une fois le code ci-dessus exécuté, tous les boutons peuvent toujours être désactivés.

J'espère que cet article sera utile à la programmation jQuery de chacun.

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn