Analyse de la différence entre attr et prop dans jquery_jquery

Une fois la méthode prop introduite dans les versions supérieures de jquery, quand faut-il utiliser prop ? Quand utiliser attr ? Quelle est la différence entre les deux ? Ces problèmes surviennent.

Il existe de nombreuses réponses en ligne sur la différence entre les deux. Laissez-moi parler de mes pensées ici. Mes pensées sont très simples :
• Pour les attributs inhérents à l'élément HTML lui-même, utilisez la méthode prop lors du traitement.
• Pour nos propres attributs DOM personnalisés des éléments HTML, utilisez la méthode attr lors de leur traitement.

La description ci-dessus est peut-être un peu vague, donnez juste quelques exemples.

Copier le code Le code est le suivant :

Baidu

Dans cet exemple, les attributs DOM de l'élément incluent "href, target et class". Ces attributs sont les attributs de l'élément En d’autres termes, les attributs qui peuvent être intelligemment demandés dans l’EDI sont appelés attributs inhérents. Lorsqu'il s'agit de ces propriétés, il est recommandé d'utiliser la méthode prop.

Copier le code Le code est le suivant :

Supprimer

Dans cet exemple, les attributs DOM de l'élément incluent "href, id et action". Évidemment, les deux premiers sont des attributs inhérents, tandis que le dernier attribut "action" est personnalisé par nos soins. l'élément lui-même n'a pas cet attribut. Il s'agit d'un attribut DOM personnalisé. Lorsqu'il s'agit de ces attributs, il est recommandé d'utiliser la méthode attr. Lorsque vous utilisez la méthode prop pour obtenir des valeurs et définir des valeurs de propriété, des valeurs non définies seront renvoyées.

Autre exemple :

Copier le code Le code est le suivant :

Pour les éléments comme checkbox, radio et select, les attributs cochés correspondent à "checked" et "selected". Ce sont également des attributs inhérents, vous devez donc utiliser la méthode prop pour opérer pour obtenir le résultat correct.

Copier le code Le code est le suivant :

$("#chk1").prop("checked") == false $("#chk2").prop("checked") == true

Si la méthode attr est utilisée ci-dessus, elle apparaîtra :

Copier le code Le code est le suivant :

$("#chk1").attr("checked") == non défini
$("#chk2").attr("checked") == "checked"

Texte intégral terminé.

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.