Quelle est la méthode pour manipuler les attributs des éléments dans jquery ?-Questions et réponses frontales-php.cn

Quelle est la méthode pour manipuler les attributs des éléments dans jquery ?

青灯夜游

Libérer： 2022-03-18 18:59:40

original

2541 Les gens l'ont consulté

Les méthodes pour faire fonctionner les attributs d'élément sont : 1. Les méthodes pour faire fonctionner les attributs de classe, y compris addClass(), hasClass(), removeClass(), toggleClass(); 2. Les méthodes pour faire fonctionner les attributs spécifiés, y compris attr(), prop(); ) ,supprimerAttr().

Quelle est la méthode pour manipuler les attributs des éléments dans jquery ?

L'environnement d'exploitation de ce tutoriel : système windows7, version jquery1.12.4, ordinateur Dell G3.

Méthode d'opération d'attribut jQuery

Méthode	Description
addClass()	Ajoute le nom de classe spécifié (valeur de l'attribut de classe) à l'élément correspondant.
attr()	Définissez ou renvoyez les attributs et les valeurs de l'élément correspondant.
prop()	Définissez ou renvoyez les propriétés et les valeurs de l'élément correspondant.
hasClass()	Vérifiez si l'élément correspondant a la classe spécifiée.
removeAttr()	Supprime l'attribut spécifié de tous les éléments correspondants.
removeClass()	Supprimez toutes les classes ou celles spécifiées de tous les éléments correspondants.
toggleClass()	Ajoutez ou supprimez une classe de l'élément correspondant.

Les méthodes jQuery attr() et prop() renvoient ou définissent des attributs

La méthode prop() est similaire à la méthode attr(), les deux sont utilisées pour obtenir ou définir les attributs HTML du élément, mais les deux Il existe également des différences fondamentales.

Recommandation officielle de jQuery : pour les attributs avec deux valeurs true et false, tels que vérifié, sélectionné, désactivé, etc., il est recommandé d'utiliser la méthode prop() pour fonctionner, tandis que d'autres attributs sont recommandés pour utiliser la méthode attr() pour fonctionner.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            $(&#39;input[type="radio"]&#39;).change(function(){
                var bool = $(this).attr("checked");
                if(bool){
                    $("p").text("你选择的是：" + $(this).val());
                }
            })
        })
    </script>
</head>
<body>
    <div>
        <label><input type="radio" name="fruit" value="苹果" />苹果</label>
        <label><input type="radio" name="fruit" value="香蕉" />香蕉</label>
        <label><input type="radio" name="fruit" value="西瓜" />西瓜</label>
    </div>
    <p></p>
</body>
</html>

Copier après la connexion

Quelle est la méthode pour manipuler les attributs des éléments dans jquery ?

Dans cet exemple, nous voulons en fait utiliser $(this).attr("checked") pour déterminer si le bouton radio est sélectionné, et s'il est sélectionné, obtenir la valeur du bouton radio. Mais après avoir exécuté le code, j'ai trouvé : Cela n'a aucun effet ! Pourquoi est-ce ?

En fait, nous ne pouvons pas obtenir les attributs vérifiés, sélectionnés et désactivés de l'élément de formulaire en utilisant la méthode attr(), mais devons utiliser la méthode prop(). Par conséquent, cela fonctionnera si nous remplaçons la méthode attr() par la méthode prop().

En fait, la méthode prop() semble compenser les lacunes de la méthode attr() dans les opérations sur les attributs de formulaire. Rappelez-vous une phrase : si une propriété ne peut pas être obtenue ou définie à l'aide de la méthode attr(), elle peut être obtenue en modifiant la méthode prop().

La méthoderemoveAttr() supprime les attributs

Dans jQuery, nous pouvons utiliser la méthode removeAttr() pour supprimer un attribut d'un élément.

Syntaxe :

$().removeAttr("属性名")

Copier après la connexion

Opération de nom de classe jQuery

L'opération de nom de classe fait référence à l'ajout d'une classe à un élément ou à la suppression d'une classe, contrôlant ainsi globalement le style de l'élément.

Dans jQuery, il existe trois types d'opérations de nom de classe CSS.

Ajouter une classe.
Supprimer la classe.
Changer de classe.

Méthode addClass() pour ajouter une classe

Dans jQuery, nous pouvons utiliser la méthode addClass() pour ajouter une classe à un élément.

Syntaxe :

$().addClass("类名")

Copier après la connexion

méthoderemoveClass() pour supprimer une classe

Dans jQuery, nous pouvons utiliser la méthode removeClass() pour supprimer une classe pour un élément.

Syntaxe :

$().removeClass("类名")

Copier après la connexion

La méthode toggleClass() change de classe

Dans jQuery, nous pouvons utiliser la méthode toggleClass() pour changer les noms de classe des éléments. Toggle signifie en fait "switch". Nous serons souvent exposés à ce mot à l'avenir, comme toggle(), slideToggle(), etc. Les amis devraient faire attention et comparer.

Syntaxe : la méthode

$().toggleClass("类名")

Copier après la connexion

toggleClass() est utilisée pour vérifier si un élément a une certaine classe. Si la classe n'existe pas, la classe est ajoutée à l'élément ; si la classe existe déjà, la classe est supprimée de l'élément.

【Apprentissage recommandé : Tutoriel vidéo jQuery, web front-end】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!